A little code refactoring and minor bug fixes.gh-pages

2 files changed, 174 insertions, 168 deletions

diff --git a/index.html b/index.html
index 3c814ec..3b1decf 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,12 @@ div#OptionsContainer
 	text-align:center;
 	margin:auto;
 }
+select
+{
+	background-color:#CCC;
+	border:1px #999 solid;
+	padding:0.5em 0.2em;
+}
 button
 {
 	border:none;
@@ -127,23 +133,23 @@ document.getElementsByTagName("head")[0].appendChild(link);
 		<li><h3>Minesweeper</h3></li>
 		<li>
 		Difficulty:
-		<select id="bsize">
+		<select id="bsize" class="TText">
 			<option value="1">Easy</option>
 			<option value="2">Normal</option>
 			<option value="3">Hard</option>
 		</select>
 		</li>
 		<li>Multimine:
-		<button id="multim" onclick="multiminetoggle();" class="off">Off</button>
+		<button id="multim" onclick="multiminetoggle();" class="off TText">Off</button>
 		</li>
 		<li>Effects:
-		<button id="efx" onclick="efxtoggle();">On</button>
+		<button id="efx" class="TText" onclick="efxtoggle();">On</button>
 		</li>
 		<li>Sounds:
-		<button id="sfx" onclick="sfxtoggle();">On</button>
+		<button id="sfx" class="TText" onclick="sfxtoggle();">On</button>
 		</li>
 		<li><a href="javascript:void(0);" onclick="document.getElementById('help').style.opacity='1';document.getElementById('help').style.zIndex='1000';">Help</a></li>
-		<li>version: 0.8.7+b1</li>
+		<li>version: 0.8.7+b3</li>
 </div>
 <div id="OptionsContainer" class="TText">
 	<button id="start" onclick="gameInit();">New Game</button>
diff --git a/minesweeper.js b/minesweeper.js
index 99730fe..b7984fa 100644
--- a/minesweeper.js
+++ b/minesweeper.js
@@ -1,9 +1,7 @@
 //Chris Xiong 2017
 //The MIT License
 var dimpx,dimx,dimy,cc,firstclick;
-var boardn=null;
-var boards=null;
-var boarde=null;
+var cell=null;
 var ismobile,effects=true,multimine=false,sfxe=true;
 var dead,st,solved,animating;
 var dx=[-1,-1,-1, 0, 0, 1, 1, 1];
@@ -11,32 +9,44 @@ var dy=[-1, 0, 1,-1, 1,-1, 0, 1];
 var classes=["one","two","three","four","five","six","seven","eight"];
 var queue=[],newqueue=[],flags=[];
 var mines=[],detx,dety,cmines=[],sfx=[];
+var ui={};
 function randomInt(min,max)
 {
 	seed*=214013;seed+=2531011;seed&=0xffffffff;
 	return min+(seed^seed>>15)%(max-min+1);
 }
+function setupui()
+{
+	ui.pbefx=document.getElementById('efx');
+	ui.pbsfx=document.getElementById('sfx');
+	ui.pbmul=document.getElementById('multim');
+	ui.cbbsz=document.getElementById('bsize');
+	ui.lbres=document.getElementById('result');
+	ui.pbstt=document.getElementById('st');
+	ui.lbmns=document.getElementById('mines');
+	ui.cwctn=document.getElementById('containerDiv');
+}
 function efxtoggle()
 {
 	effects=!effects;
-	document.getElementById('efx').classList.toggle('off');
-	document.getElementById('efx').innerHTML=effects?"On":"Off";
+	ui.pbefx.classList.toggle('off');
+	ui.pbefx.innerHTML=effects?"On":"Off";
 	for(var i=0;i<dimx;++i)
 	for(var j=0;j<dimy;++j)
-	if(effects)boarde[i][j].overlay.classList.add('trans');
-	else boarde[i][j].overlay.classList.remove('trans');
+	if(effects)cell[i][j].overlay.classList.add('trans');
+	else cell[i][j].overlay.classList.remove('trans');
 }
 function sfxtoggle()
 {
 	sfxe=!sfxe;
-	document.getElementById('sfx').classList.toggle('off');
-	document.getElementById('sfx').innerHTML=effects?"On":"Off";
+	ui.pbsfx.classList.toggle('off');
+	ui.pbsfx.innerHTML=effects?"On":"Off";
 }
 function multiminetoggle()
 {
 	multimine=!multimine;
-	document.getElementById('multim').classList.toggle('off');
-	document.getElementById('multim').innerHTML=multimine?"On":"Off";
+	ui.pbmul.classList.toggle('off');
+	ui.pbmul.innerHTML=multimine?"On":"Off";
 	gameInit();
 }
 function init()
@@ -50,13 +60,12 @@ function init()
  || navigator.userAgent.match(/Windows Phone/i)
  )
 	ismobile=true;
-	setupevents();
-	gameInit();
-	document.getElementById("bsize").onchange=function(){gameInit();};
+	setupui();setupevents();gameInit();
+	ui.cbbsz.onchange=gameInit;
 }
 function playsound(s,v)
 {
-	if(!sfxe)return;var f=false,i;
+	if(!sfxe)return;var i;
 	for(i=0;i<sfx.length;++i)if(!sfx[i])break;
 	if(i==sfx.length){sfx.push(new Audio(s));}
 	else sfx[i]=new Audio(s);
@@ -68,76 +77,70 @@ function gameInit(custx,custy,ccc)
 {
 	if((custx&&custx>40)||(custy&&custy>40)||(ccc&&custx&&custy&&(ccc>custx*custy-9)))
 	{console.log("Are you insane?");return;}
-	firstclick=true;dead=false;solved=false;for(var i=0;i<7;++i)flags[i]=cmines[i]=0;
-	document.getElementById("result").style.opacity="0";
-	document.getElementById("result").style.zIndex="-999";animating=false;
-	for(var nd=document.getElementById("containerDiv");nd.hasChildNodes();nd.removeChild(nd.lastChild));
-	if(document.getElementById("bsize").value=="1")
-	{dimx=9;dimy=9;cc=10;}
-	if(document.getElementById("bsize").value=="2")
-	{dimx=16;dimy=16;cc=40;}
-	if(document.getElementById("bsize").value=="3")
-	{dimx=16;dimy=30;cc=99;}
+	firstclick=true;dead=solved=false;for(var i=0;i<7;++i)flags[i]=cmines[i]=0;
+	ui.lbres.style.opacity="0";ui.lbres.style.zIndex="-999";animating=false;
+	for(;ui.cwctn.hasChildNodes();ui.cwctn.removeChild(ui.cwctn.lastChild));
+	switch(ui.cbbsz.value)
+	{
+		case "1":dimx=9;dimy=9;cc=10;break;
+		case "2":dimx=16;dimy=16;cc=40;break;
+		case "3":dimx=16;dimy=30;cc=99;break;
+	}
 	if(custx&&custy&&ccc){dimx=custx;dimy=custy;cc=ccc;}
 	if((window.innerWidth>window.innerHeight)^(dimx<dimy))
 	{var t=dimx;dimx=dimy;dimy=t;}
 	updateflags();sfx=[];
 	seed=Math.floor(Math.random()*2000000000);
-	if(multimine)document.getElementById("st").style.display="inline-block";
-	else document.getElementById("st").style.display="none";
-	document.getElementById("st").classList.add("disabled");
-	boardn=new Array(dimx+4);for(var i=0;i<dimx+4;++i){
-		boardn[i]=new Array(dimy+4);
-		for(var j=0;j<dimy+4;++j)boardn[i][j]=0;
-	}
+	if(multimine)ui.pbstt.style.display="inline-block";
+	else ui.pbstt.style.display="none";
+	ui.pbstt.classList.add("disabled");
 	if(window.innerWidth/dimy*dimx>window.innerHeight*0.8)
 	{
 		dimpx=window.innerHeight*(ismobile?0.9:0.8);
-		document.getElementById("containerDiv").style.width=dimpx/dimx*dimy+"px";
-		document.getElementById("containerDiv").style.height=dimpx+"px";
+		ui.cwctn.style.width=dimpx/dimx*dimy+"px";
+		ui.cwctn.style.height=dimpx+"px";
 	}
 	else
 	{
 		dimpx=window.innerWidth*(ismobile?0.9:0.8);
-		document.getElementById("containerDiv").style.width=dimpx+"px";
-		document.getElementById("containerDiv").style.height=dimpx/dimy*dimx+"px";
+		ui.cwctn.style.width=dimpx+"px";
+		ui.cwctn.style.height=dimpx/dimy*dimx+"px";
 	}
-	boards=new Array(dimx+4);for(var i=0;i<dimx+4;++i)boards[i]=new Array(dimy+4);
-	boarde=new Array(dimx+4);for(var i=0;i<dimx+4;++i)boarde[i]=new Array(dimy+4);
+	cell=new Array(dimx+4);for(var i=0;i<dimx+4;++i)cell[i]=new Array(dimy+4);
 	for(var i=0;i<dimx;++i)
 	for(var j=0;j<dimy;++j)
 	{
-		boards[i][j]=0;
-		boarde[i][j]=document.createElement('div');
-		boarde[i][j].classList.add("clickable");
-		boarde[i][j].style.top=(i*100/dimx)+'%';
-		boarde[i][j].style.left=(j*100/dimy)+'%';
-		boarde[i][j].x=i;boarde[i][j].y=j;
-		boarde[i][j].style.width=(95/dimy)+"%";
-		boarde[i][j].style.height=(95/dimx)+"%";
-		boarde[i][j].classList.add('normal');
+		cell[i][j]=document.createElement('div');
+		cell[i][j].classList.add("clickable");
+		cell[i][j].style.top=(i*100/dimx)+'%';
+		cell[i][j].style.left=(j*100/dimy)+'%';
+		cell[i][j].x=i;cell[i][j].y=j;
+		cell[i][j].s=cell[i][j].n=0;
+		cell[i][j].style.width=(95/dimy)+"%";
+		cell[i][j].style.height=(95/dimx)+"%";
+		cell[i][j].classList.add('normal');
 		
-		boarde[i][j].overlay=document.createElement('div');
-		boarde[i][j].overlay.classList.add("overlay");
-		boarde[i][j].overlay.style.top=(i*100/dimx)+'%';
-		boarde[i][j].overlay.style.left=(j*100/dimy)+'%';
-		boarde[i][j].overlay.style.width=(95/dimy)+"%";
-		boarde[i][j].overlay.style.height=(95/dimx)+"%";
-		boarde[i][j].overlay.style.opacity="0";
-		boarde[i][j].overlay.style.transform="scale(2,2)";
-		if(effects)boarde[i][j].overlay.classList.add("trans");
+		cell[i][j].overlay=document.createElement('div');
+		cell[i][j].overlay.classList.add("overlay");
+		cell[i][j].overlay.style.top=(i*100/dimx)+'%';
+		cell[i][j].overlay.style.left=(j*100/dimy)+'%';
+		cell[i][j].overlay.style.width=(95/dimy)+"%";
+		cell[i][j].overlay.style.height=(95/dimx)+"%";
+		cell[i][j].overlay.style.opacity="0";
+		cell[i][j].overlay.style.transform="scale(2,2)";
+		if(effects)cell[i][j].overlay.classList.add("trans");
 		
-		boarde[i][j].span=document.createElement('span');
-		boarde[i][j].span.style.display="table-cell";
-		boarde[i][j].span.style.fontWeight="bold";
-		boarde[i][j].span.style.verticalAlign="middle";
-		boarde[i][j].span.style.userSelect="none";
-		boarde[i][j].span.classList.add("TText");
-		boarde[i][j].overlay.appendChild(boarde[i][j].span);
-		boarde[i][j].onclick=mclick;
-		boarde[i][j].oncontextmenu=rclick;
-		document.getElementById("containerDiv").appendChild(boarde[i][j]);
-		document.getElementById("containerDiv").appendChild(boarde[i][j].overlay);
+		cell[i][j].span=document.createElement('span');
+		cell[i][j].span.style.display="table-cell";
+		cell[i][j].span.style.fontWeight="bold";
+		cell[i][j].span.style.verticalAlign="middle";
+		cell[i][j].span.style.userSelect="none";
+		cell[i][j].span.classList.add("TText");
+		cell[i][j].overlay.appendChild(cell[i][j].span);
+		cell[i][j].onclick=mclick;
+		cell[i][j].oncontextmenu=rclick;
+		ui.cwctn.appendChild(cell[i][j]);
+		ui.cwctn.appendChild(cell[i][j].overlay);
 	}
 }
 function genmines(sx,sy)
@@ -152,22 +155,22 @@ function genmines(sx,sy)
 		var v=s[t];
 		var x=Math.trunc(v/dimy),y=v%dimy;
 		s.splice(t,1);
-		boardn[x][y]=-1;mines.push(new pair(x,y));
+		cell[x][y].n=-1;mines.push(new pair(x,y));
 		if(multimine)
 		{
 			var rnd=randomInt(1,100);
-			if(rnd>32)--boardn[x][y];
-			if(rnd>57)--boardn[x][y];
-			if(rnd>77)--boardn[x][y];
-			if(rnd>87)--boardn[x][y];
-			if(rnd>95)--boardn[x][y];
+			if(rnd>32)--cell[x][y].n;
+			if(rnd>57)--cell[x][y].n;
+			if(rnd>77)--cell[x][y].n;
+			if(rnd>87)--cell[x][y].n;
+			if(rnd>95)--cell[x][y].n;
 		}
-		++cmines[-boardn[x][y]];
+		++cmines[-cell[x][y].n];
 		for(var j=0;j<8;++j)
 		{
 			var cx=x+dx[j],cy=y+dy[j];
-			if(cx>=0&&cx<dimx&&cy>=0&&cy<dimy&&boardn[cx][cy]>=0)
-			boardn[cx][cy]-=boardn[x][y];
+			if(cx>=0&&cx<dimx&&cy>=0&&cy<dimy&&cell[cx][cy].n>=0)
+			cell[cx][cy].n-=cell[x][y].n;
 		}
 	}st=new Date();updateflags();
 }
@@ -179,15 +182,15 @@ function mclick(e)
 	if(ismobile)
 	{
 		if(multimine)
-		{if(boards[x][y]>=0)flag(x,y);}
-		else{if(boards[x][y]==1)deflag(x,y);else if(boards[x][y]==0)flag(x,y);}
-		if(boards[x][y]==-1)autodig(x,y);
+		{if(cell[x][y].s>=0)flag(x,y);}
+		else{if(cell[x][y].s==1)deflag(x,y);else if(cell[x][y].s==0)flag(x,y);}
+		if(cell[x][y].s==-1)autodig(x,y);
 	}
 	else
 	{
-		if(boards[x][y]==0)dig(x,y);
-		else if(boards[x][y]==-1)autodig(x,y);
-		else if(multimine&&boards[x][y]>0)deflag(x,y);
+		if(cell[x][y].s==0)dig(x,y);
+		else if(cell[x][y].s==-1)autodig(x,y);
+		else if(multimine&&cell[x][y].s>0)deflag(x,y);
 	}
 }
 function rclick(e)
@@ -197,21 +200,21 @@ function rclick(e)
 	var x=this.x,y=this.y;
 	if(ismobile)
 	{
-		if(boards[x][y]==0)dig(x,y);
-		else if(multimine&&boards[x][y]>0)deflag(x,y);
+		if(cell[x][y].s==0)dig(x,y);
+		else if(multimine&&cell[x][y].s>0)deflag(x,y);
 	}
 	else
 	{
 		if(multimine)
-		{if(boards[x][y]>=0)flag(x,y);}
-		else{if(boards[x][y]==1)deflag(x,y);else if(boards[x][y]==0)flag(x,y);}
+		{if(cell[x][y].s>=0)flag(x,y);}
+		else{if(cell[x][y].s==1)deflag(x,y);else if(cell[x][y].s==0)flag(x,y);}
 	}
 }
 function checksolved()
 {
 	for(var i=0;i<dimx;++i)
 	for(var j=0;j<dimy;++j)
-	if(boardn[i][j]>=0&&boards[i][j]!=-1)return false;
+	if(cell[i][j].n>=0&&cell[i][j].s!=-1)return false;
 	return true;
 }
 var pair=function(_x,_y){this.x=_x;this.y=_y;}
@@ -219,12 +222,6 @@ pair.prototype.toString=function()
 {
 	return this.x+","+this.y;
 }
-function dfs(x,y)
-{
-	if(boards[x][y]!=0)return;
-	newqueue.push(new pair(x,y));
-	boards[x][y]=-1;animating=true;bfs(1);
-}
 function bfs(s)
 {
 	q=newqueue.slice(0);newqueue=[];
@@ -232,22 +229,22 @@ function bfs(s)
 	for(var i=0;i<q.length;++i)
 	{
 		var x=q[i].x,y=q[i].y;
-		if(boardn[x][y]<0){die(x,y);return;}
-		if(boardn[x][y]>0)
+		if(cell[x][y].n<0){die(x,y);return;}
+		if(cell[x][y].n>0)
 		{
-			boarde[x][y].span.innerHTML=boardn[x][y];
-			boarde[x][y].span.classList.add(classes[(boardn[x][y]-1)%8]);
+			cell[x][y].span.innerHTML=cell[x][y].n;
+			cell[x][y].span.classList.add(classes[(cell[x][y].n-1)%8]);
 		}
-		boarde[x][y].overlay.style.opacity="1";
-		boarde[x][y].overlay.style.transform="scale(1,1)";
-		boarde[x][y].overlay.classList.add("dug");
-		if(boardn[x][y]==0)
+		cell[x][y].overlay.style.opacity="1";
+		cell[x][y].overlay.style.transform="scale(1,1)";
+		cell[x][y].overlay.classList.add("dug");
+		if(cell[x][y].n==0)
 		{
 			for(var j=0;j<8;++j)
 			{
 				var c=new pair(x+dx[j],y+dy[j]);
-				if(c.x>=0&&c.x<dimx&&c.y>=0&&c.y<dimy&&boards[c.x][c.y]==0)
-				{newqueue.push(c);boards[c.x][c.y]=-1;}
+				if(c.x>=0&&c.x<dimx&&c.y>=0&&c.y<dimy&&cell[c.x][c.y].s==0)
+				{newqueue.push(c);cell[c.x][c.y].s=-1;}
 			}
 		}
 	}
@@ -260,35 +257,39 @@ function bfs(s)
 			if(!multimine)
 			{
 				showresult(1);
-			}else document.getElementById("st").classList.remove("disabled");
+			}else ui.pbstt.classList.remove("disabled");
 		}
 	}
 }
 function dig(x,y)
 {
 	if(firstclick){genmines(x,y);firstclick=false;}
-	if(boards[x][y]==0)dfs(x,y);
+	if(cell[x][y].s==0)
+	{
+		newqueue.push(new pair(x,y));
+		cell[x][y].s=-1;animating=true;bfs(1);
+	}
 }
 function autodig(x,y)
 {
-	if(boards[x][y]!=-1)return;
+	if(cell[x][y].s!=-1)return;
 	var c=0;
 	for(var i=0;i<8;++i)
 	{
 		var cx=x+dx[i],cy=y+dy[i];
-		if(cx>=0&&cx<dimx&&cy>=0&&cy<=dimy&&boards[cx][cy]>0)c+=boards[cx][cy];
+		if(cx>=0&&cx<dimx&&cy>=0&&cy<dimy&&cell[cx][cy].s>0)c+=cell[cx][cy].s;
 	}
-	if(c==boardn[x][y])
+	if(c==cell[x][y].n)
 	{
 		newqueue=[];
 		for(var i=0;i<8;++i)
 		{
 			var cx=x+dx[i],cy=y+dy[i];
-			if(cx>=0&&cx<dimx&&cy>=0&&cy<=dimy)
+			if(cx>=0&&cx<dimx&&cy>=0&&cy<dimy)
 			{
-				if(multimine&&boardn[cx][cy]<0&&boards[cx][cy]!=-boardn[cx][cy])
+				if(multimine&&cell[cx][cy].n<0&&cell[cx][cy].s!=-cell[cx][cy].n)
 				{die(cx,cy);return;}
-				if(boards[cx][cy]==0){newqueue.push(new pair(cx,cy));boards[cx][cy]=-1;}
+				if(cell[cx][cy].s==0){newqueue.push(new pair(cx,cy));cell[cx][cy].s=-1;}
 			}
 		}
 		if(newqueue.length){animating=true;bfs(1);}
@@ -296,26 +297,26 @@ function autodig(x,y)
 }
 function flag(x,y)
 {
-	--flags[boards[x][y]];boards[x][y]++;
-	if(multimine){if(boards[x][y]>6)boards[x][y]=6;boarde[x][y].span.innerHTML=boards[x][y];}
-	else{if(boards[x][y]>1)boards[x][y]=1;boarde[x][y].span.innerHTML="X";}
-	++flags[boards[x][y]];
-	boarde[x][y].overlay.classList.add('flag');
-	boarde[x][y].overlay.style.opacity="1";
-	boarde[x][y].overlay.style.transform="scale(1,1)";
+	--flags[cell[x][y].s];cell[x][y].s++;
+	if(multimine){if(cell[x][y].s>6)cell[x][y].s=6;cell[x][y].span.innerHTML=cell[x][y].s;}
+	else{if(cell[x][y].s>1)cell[x][y].s=1;cell[x][y].span.innerHTML="X";}
+	++flags[cell[x][y].s];
+	cell[x][y].overlay.classList.add('flag');
+	cell[x][y].overlay.style.opacity="1";
+	cell[x][y].overlay.style.transform="scale(1,1)";
 	updateflags();
 }
 function deflag(x,y)
 {
-	--flags[boards[x][y]];--boards[x][y];++flags[boards[x][y]];
-	boarde[x][y].span.innerHTML=boards[x][y];
-	if(boards[x][y]==0)
+	--flags[cell[x][y].s];--cell[x][y].s;++flags[cell[x][y].s];
+	cell[x][y].span.innerHTML=cell[x][y].s;
+	if(cell[x][y].s==0)
 	{
-		boarde[x][y].span.innerHTML="";
-		boarde[x][y].classList.remove('flag');
-		boarde[x][y].classList.add('normal');
-		boarde[x][y].overlay.style.opacity="0";
-		boarde[x][y].overlay.style.transform="scale(2,2)";
+		cell[x][y].span.innerHTML="";
+		cell[x][y].classList.remove('flag');
+		cell[x][y].classList.add('normal');
+		cell[x][y].overlay.style.opacity="0";
+		cell[x][y].overlay.style.transform="scale(2,2)";
 	}
 	updateflags();
 }
@@ -325,10 +326,10 @@ function updateflags()
 	{
 		var s="";
 		for(var i=1;i<7;++i)s=s+" x"+i+" "+flags[i]+"/"+cmines[i];
-		document.getElementById("mines").innerHTML=s;
+		ui.lbmns.innerHTML=s;
 	}
 	else
-	{document.getElementById("mines").innerHTML=flags[1]+"/"+cmines[1];}
+	ui.lbmns.innerHTML=flags[1]+"/"+cmines[1];
 }
 function cmp(x,y)
 {
@@ -336,25 +337,25 @@ function cmp(x,y)
 }
 function die(x,y)
 {
-	if(dead||boardn[x][y]>=0)return;
+	if(dead||cell[x][y].n>=0)return;
 	dead=true;detx=x;dety=y;mines.sort(cmp);
 	for(var i=0;i<dimx;++i)
 	for(var j=0;j<dimy;++j)
-	if(boards[i][j]>0&&boards[i][j]!=-boardn[i][j]&&(i!=x||j!=y))
+	if(cell[i][j].s>0&&cell[i][j].s!=-cell[i][j].n&&(i!=x||j!=y))
 	{
-		boarde[i][j].overlay.classList.remove('flag');
-		boarde[i][j].overlay.classList.add('flagw');
-		boarde[i][j].span.innerHTML="<s>"+boarde[i][j].span.innerHTML+"</s>";
+		cell[i][j].overlay.classList.remove('flag');
+		cell[i][j].overlay.classList.add('flagw');
+		cell[i][j].span.innerHTML="<s>"+cell[i][j].span.innerHTML+"</s>";
 	}
-	boarde[x][y].overlay.classList.add('detonated');
-	boarde[x][y].overlay.classList.remove('flag');
-	boarde[x][y].overlay.style.opacity="1";
-	boarde[x][y].overlay.style.transform="scale(1,1)";
+	cell[x][y].overlay.classList.add('detonated');
+	cell[x][y].overlay.classList.remove('flag');
+	cell[x][y].overlay.style.opacity="1";
+	cell[x][y].overlay.style.transform="scale(1,1)";
 	if(multimine)
 	{
-		if(-boardn[x][y]!=boards[x][y]&&boards[x][y]>0)
-		boarde[x][y].span.innerHTML="<s>"+boards[x][y]+"</s>"+(boardn[x][y]<0?-boardn[x][y]:"");
-		else boarde[x][y].span.innerHTML=-boardn[x][y];
+		if(-cell[x][y].n!=cell[x][y].s&&cell[x][y].s>0)
+		cell[x][y].span.innerHTML="<s>"+cell[x][y].s+"</s>"+(cell[x][y].n<0?-cell[x][y].n:"");
+		else cell[x][y].span.innerHTML=-cell[x][y].n;
 	}
 	var st=1;if(mines[1].toString()!=new pair(x,y).toString)st=0;
 	playsound('explode.ogg');
@@ -363,35 +364,35 @@ function die(x,y)
 }
 function dieproc(p)
 {
-	if(!dead||p>=mines.length){if(p>=mines.length)showresult(0);document.getElementById("containerDiv").style.transform="none";return;}
-	var x=mines[p].x,y=mines[p].y;if(effects&&(p%5==0))playsound('explode.ogg',.2);
-	if(boards[x][y]!=-boardn[x][y])
+	if(!dead||p>=mines.length){if(p>=mines.length)showresult(0);ui.cwctn.style.transform="none";return;}
+	var x=mines[p].x,y=mines[p].y;if(effects&&(p%5==0))playsound('explode.ogg',.3*(1-p/cc/2));
+	if(cell[x][y].s!=-cell[x][y].n)
 	{
-		boarde[x][y].overlay.classList.add('mine');
-		boarde[x][y].overlay.classList.remove('flag');
+		cell[x][y].overlay.classList.add('mine');
+		cell[x][y].overlay.classList.remove('flag');
 	}
-	boarde[x][y].overlay.style.opacity="1";
-	boarde[x][y].overlay.style.transform="scale(1,1)";
+	cell[x][y].overlay.style.opacity="1";
+	cell[x][y].overlay.style.transform="scale(1,1)";
 	if(multimine)
 	{
-		if(-boardn[x][y]!=boards[x][y]&&boards[x][y]>0)
-		boarde[x][y].span.innerHTML="<s>"+boards[x][y]+"</s>"+(boardn[x][y]<0?-boardn[x][y]:"");
-		else boarde[x][y].span.innerHTML=-boardn[x][y];
+		if(-cell[x][y].n!=cell[x][y].s&&cell[x][y].s>0)
+		cell[x][y].span.innerHTML="<s>"+cell[x][y].s+"</s>"+(cell[x][y].n<0?-cell[x][y].n:"");
+		else cell[x][y].span.innerHTML=-cell[x][y].n;
 	}
 	if(effects)
-	document.getElementById("containerDiv").style.transform="translate("+(Math.random()*10-5)+"px,"+(Math.random()*10-5)+"px)";
+	ui.cwctn.style.transform="translate("+(Math.random()*10-5)+"px,"+(Math.random()*10-5)+"px)";
 	if(!effects||(cc>40&&(p&1)))dieproc(p+1);else setTimeout(dieproc,10,p+1);
 }
 function systemtest()
 {
-	if(document.getElementById("st").classList.contains("disabled")||solved||dead)return;
+	if(ui.pbstt.classList.contains("disabled")||solved||dead)return;
 	for(var i=0;i<dimx;++i)for(var j=0;j<dimy;++j)
-	if(boardn[i][j]<0&&boards[i][j]!=-boardn[i][j]){die(i,j);return;}
+	if(cell[i][j].n<0&&cell[i][j].s!=-cell[i][j].n){die(i,j);return;}
 	showresult(1);
 }
 function t()
 {
-	switch(document.getElementById('bsize').value)
+	switch(ui.cbbsz.value)
 	{
 		case "1":return "easy";
 		case "2":return "normal";
@@ -400,11 +401,11 @@ function t()
 }
 function showresult(w)
 {
+	ui.lbres.style.opacity="1";ui.lbres.style.zIndex="1000";
 	if(w)
 	{
-		solved=true;document.getElementById('result').style.opacity="1";document.getElementById('result').style.zIndex="1000";
-		document.getElementById('result').innerHTML=
-		"You solved this "+t()+(multimine?" multimine":"")+" field in "+
+		solved=true;
+		ui.lbres.innerHTML="<h3>Congratulations!</h3>You solved this "+t()+(multimine?" multimine":"")+" field in "+
 		((new Date()).getTime()-st.getTime())/1000.+" seconds!<br>Click or tap anywhere in the dialog to close it.";
 	}
 	else
@@ -412,12 +413,11 @@ function showresult(w)
 		var cs=0,ccor=0,uc=0;
 		for(var i=0;i<dimx;++i)for(var j=0;j<dimy;++j)
 		{
-			if(boards[i][j]==-boardn[i][j]&&boardn[i][j]<0)ccor+=boards[i][j];
-			if(boardn[i][j]<0)cs-=boardn[i][j];
-			if(boards[i][j]==-1&&boardn[i][j]>=0)++uc;
+			if(cell[i][j].s==-cell[i][j].n&&cell[i][j].n<0)ccor+=cell[i][j].s;
+			if(cell[i][j].n<0)cs-=cell[i][j].n;
+			if(cell[i][j].s==-1&&cell[i][j].n>=0)++uc;
 		}
-		document.getElementById('result').style.opacity="1";document.getElementById('result').style.zIndex="1000";
-		document.getElementById('result').innerHTML=
-		"Game Over!<br>You uncovered "+(100*uc/(dimx*dimy-cc)).toFixed(2)+"% of the field and located "+(100*ccor/cs).toFixed(2)+"% mines correctly.<br>Click or tap anywhere in the dialog to close it."
+		ui.lbres.innerHTML="<h3>Game Over!</h3>You uncovered "+(100*uc/(dimx*dimy-cc)).toFixed(2)+
+		"% of the field and located "+(100*ccor/cs).toFixed(2)+"% mines correctly.<br>Click or tap anywhere in the dialog to close it."
 	}
 }