Add working viewcompetition logic using html files in gamevisuals/

1 files changed, 255 insertions, 0 deletions

diff --git a/viewcompetition.js b/viewcompetition.js
new file mode 100644
index 0000000..ab05c3c
--- /dev/null
+++ b/viewcompetition.js
@@ -0,0 +1,255 @@
+var moveidx=0;
+var neuidxhist=[];
+
+var board=Array.apply(null,new Array(S*S)).map(function(){return 0;});
+var fgcells=board.map(function(){return null;});
+var neuidx;
+
+var canclick=false;
+
+function init(){
+	var tr,td,y,x,e,span,
+	    movelisttbody,
+	    header=document.getElementById("header"),
+	    status=document.getElementById("status"),
+	    movelist=document.getElementById("movelist"),
+	    bgtbody=document.getElementById("bgtbody");
+
+	document.title="Game: "+PLAYERS[0]+" vs "+PLAYERS[1];
+
+	header.appendChild(document.createTextNode("Game: "));
+	span=document.createElement("span");
+	span.classList.add("celltypeclr"); span.classList.add("celltypeclr_1");
+	span.appendChild(document.createTextNode(PLAYERS[0]));
+	header.appendChild(span);
+	header.appendChild(document.createTextNode(" vs "));
+	span=document.createElement("span");
+	span.classList.add("celltypeclr"); span.classList.add("celltypeclr_2");
+	span.appendChild(document.createTextNode(PLAYERS[1]));
+	header.appendChild(span);
+
+	status.appendChild(document.createTextNode("Game won by "));
+	span=document.createElement("span");
+	span.classList.add("celltypeclr"); span.classList.add("celltypeclr_"+WINNER);
+	span.appendChild(document.createTextNode(PLAYERS[WINNER-1]));
+	status.appendChild(span);
+	status.appendChild(document.createTextNode("."));
+
+
+	e=document.createElement("table");
+	movelisttbody=document.createElement("tbody");
+	tr=document.createElement("tr");
+	td=document.createElement("td"); td.innerHTML="Player"; tr.appendChild(td);
+	td=document.createElement("td"); td.innerHTML="Neutron"; tr.appendChild(td);
+	td=document.createElement("td"); td.innerHTML="Stone"; tr.appendChild(td);
+	movelisttbody.appendChild(tr);
+	e.appendChild(movelisttbody);
+	movelist.appendChild(e);
+
+	tr=document.createElement("tr");
+	td=document.createElement("td");
+	td.setAttribute("colspan","3");
+	td.innerHTML=" ";
+	tr.appendChild(td);
+	tr.addEventListener("click",function(ev){
+		if(moveidx==0)return;
+		while(moveidx>0)prevmove(true);
+	});
+	movelisttbody.appendChild(tr);
+
+	MOVES.forEach(function(mv,i){
+		var tr,td;
+		tr=document.createElement("tr");
+
+		td=document.createElement("td");
+		td.innerHTML=i%2+1;
+		tr.appendChild(td);
+
+		td=document.createElement("td");
+		if(mv[0]==-1)td.innerHTML=" ";
+		else td.innerHTML=arrowfor(mv[0]);
+		tr.appendChild(td);
+
+		td=document.createElement("td");
+		td.innerHTML=mv[1]+": "+arrowfor(mv[2]);
+		tr.appendChild(td);
+
+		tr.addEventListener("click",(function(target){return function(ev){
+			if(moveidx==target)return;
+			while(moveidx<target)nextmove(true);
+			while(moveidx>target)prevmove(true);
+		};})(i+1));
+
+		movelisttbody.appendChild(tr);
+	});
+
+
+	for(y=0;y<S;y++){
+		tr=document.createElement("tr");
+		for(x=0;x<S;x++){
+			td=document.createElement("td");
+			td.classList.add("bgcell");
+			td.innerHTML=S*y+x;
+			tr.appendChild(td);
+		}
+		bgtbody.appendChild(tr);
+	}
+	for(x=0;x<S;x++){
+		board[x]=1;
+		e=makefgcell(x,1);
+		fgcells[x]=e;
+		document.body.appendChild(e);
+
+		board[S*(S-1)+x]=2;
+		e=makefgcell(S*(S-1)+x,2);
+		fgcells[S*(S-1)+x]=e;
+		document.body.appendChild(e);
+	}
+	neuidx=S*~~(S/2)+~~(S/2);
+	board[neuidx]=3;
+	e=makefgcell(neuidx,3);
+	fgcells[neuidx]=e;
+	document.body.appendChild(e);
+
+	setnextenabled(true);
+	setprevenabled(false);
+	canclick=true;
+}
+
+function arrowfor(dir){
+	return "&#x"+[2191,2197,2192,2198,2193,2199,2190,2196][dir]+";";
+}
+
+function bgcell(idx){
+	return document.getElementById("bgtbody").children[idx/S|0].children[idx%S];
+}
+function fgcellposition(idx){
+	var rect=bgcell(idx).getBoundingClientRect();
+	return [rect.left,rect.top+document.documentElement.scrollTop];
+}
+function movefgcell(e,idx){
+	var pos=fgcellposition(idx);
+	e.style.left=pos[0]+"px";
+	e.style.top=pos[1]+"px";
+	e.cell_index=idx;
+}
+function makefgcell(idx,type){ //type in [1,2,3]
+	var pos=fgcellposition(idx),
+	    e=document.createElement("div");
+	e.classList.add("fgcell");
+	e.classList.add("celltype_"+type);
+	e.style="left:"+pos[0]+"px;top:"+pos[1]+"px;";
+	e.cell_index=idx;
+	e.appendChild(document.createElement("div"));
+	return e;
+}
+
+var index_deltas=[[0,-1],[1,-1],[1,0],[1,1],[0,1],[-1,1],[-1,0],[-1,-1]];
+function indexafterslide(from,dir,overshoot){
+	var x=from%S,y=~~(from/S),x2,y2;
+	while(true){
+		x2=x+index_deltas[dir][0];
+		y2=y+index_deltas[dir][1];
+		if(x2<0||x2>=S||y2<0||y2>=S||board[S*y2+x2]!=0){
+			if(overshoot)return S*y2+x2;
+			else return S*y+x;
+		}
+		x=x2;
+		y=y2;
+	}
+}
+
+function setnextenabled(en){
+	document.getElementById("nextmovebtn").disabled=!en;
+}
+function setprevenabled(en){
+	document.getElementById("prevmovebtn").disabled=!en;
+}
+
+function displaycurrentmove(){
+	
+}
+
+function nextmove(notimeout){
+	var newidx;
+	if(moveidx==MOVES.length||!canclick)return false;
+
+	if(MOVES[moveidx][0]!=-1){
+		neuidxhist.push(neuidx);
+		newidx=indexafterslide(neuidx,MOVES[moveidx][0]);
+		movefgcell(fgcells[neuidx],newidx);
+		board[newidx]=board[neuidx];
+		board[neuidx]=0;
+		fgcells[newidx]=fgcells[neuidx];
+		fgcells[neuidx]=null;
+		neuidx=newidx;
+
+		if(moveidx==MOVES.length-1)bgcell(neuidx).classList.add("win");
+	}
+
+	newidx=indexafterslide(MOVES[moveidx][1],MOVES[moveidx][2]);
+	if(MOVES[moveidx][0]!=-1&&!notimeout){
+		setTimeout(
+			(function(e,idx){return function(){
+				movefgcell(e,idx);
+				canclick=true;
+			};})(fgcells[MOVES[moveidx][1]],newidx),
+			500
+		);
+		canclick=false;
+	} else {
+		movefgcell(fgcells[MOVES[moveidx][1]],newidx);
+	}
+	board[newidx]=board[MOVES[moveidx][1]];
+	board[MOVES[moveidx][1]]=0;
+	fgcells[newidx]=fgcells[MOVES[moveidx][1]];
+	fgcells[MOVES[moveidx][1]]=null;
+
+	moveidx++;
+	setprevenabled(true);
+	if(moveidx==MOVES.length)setnextenabled(false);
+	return true;
+}
+function prevmove(notimeout){
+	var item,oldneuidx,newidx,winGlowIdxToRemove=null;
+	if(moveidx==0||!canclick)return false;
+	moveidx--;
+
+	if(MOVES[moveidx][0]!=-1&&moveidx==MOVES.length-1)winGlowIdxToRemove=neuidx;
+
+	newidx=indexafterslide(MOVES[moveidx][1],MOVES[moveidx][2],true);
+	board[MOVES[moveidx][1]]=board[newidx];
+	board[newidx]=0;
+	fgcells[MOVES[moveidx][1]]=fgcells[newidx];
+	fgcells[newidx]=null;
+	movefgcell(fgcells[MOVES[moveidx][1]],MOVES[moveidx][1]);
+
+	if(MOVES[moveidx][0]!=-1){
+		oldneuidx=neuidxhist.pop();
+		board[oldneuidx]=board[neuidx];
+		board[neuidx]=0;
+		fgcells[oldneuidx]=fgcells[neuidx];
+		fgcells[neuidx]=null;
+		if(notimeout){
+			movefgcell(fgcells[oldneuidx],oldneuidx);
+			if(winGlowIdxToRemove!=null)bgcell(winGlowIdxToRemove).classList.remove("win");
+		} else {
+			setTimeout(
+				(function(e,idx){return function(){
+					movefgcell(e,idx);
+					canclick=true;
+					if(winGlowIdxToRemove!=null)bgcell(winGlowIdxToRemove).classList.remove("win");
+				};})(fgcells[oldneuidx],oldneuidx),
+				500
+			);
+			canclick=false;
+		}
+		neuidx=oldneuidx;
+	}
+
+	setnextenabled(true);
+	if(moveidx==0)setprevenabled(false);
+	return true;
+}
+
+window.addEventListener("load",init,false);