From ff90de96005fd50de6ef0c25837eb2ff406c580b Mon Sep 17 00:00:00 2001
From: tomsmeding <hallo@tomsmeding.nl>
Date: Sun, 13 Dec 2015 21:05:09 +0100
Subject: Last move highlight

---
 index.html | 43 +++++++++++++++++++++++++++++--------------
 1 file changed, 29 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index 754b96c..22bc9c2 100644
--- a/index.html
+++ b/index.html
@@ -97,6 +97,7 @@ function Room(_roomid){
 	this.cellsz=40;
 
 	this.canplace=false;
+	this.lastplacepos=-1;
 
 	this.listdiv=document.createElement("div");
 	this.listdiv.classList.add("room");
@@ -113,7 +114,7 @@ function Room(_roomid){
 	this.uidiv.classList.add("invisible");
 
 	e=document.createElement("div");
-	e.setAttribute("style","float:right;margin:5px;margin-left:10px;cursor:pointer");
+	e.classList.add("uiclosebtn");
 	e.innerHTML="x";
 	e.addEventListener("click",function(){
 		this.uidiv.classList.add("invisible");
@@ -166,7 +167,7 @@ function Room(_roomid){
 		if(x<0||y<0||x>=W||y>=H)return;
 		socket.emit("roomgameplace",this.id,idx);
 	}.bind(this));
-	//drawboard(this.ctx,this.cellsz,this.bd,0);
+	//drawboard(this.ctx,this.cellsz,this.bd,0,this.lastplacepos);
 	this.gamediv.appendChild(this.cvs);
 	this.uidiv.appendChild(this.gamediv);
 
@@ -219,7 +220,7 @@ Room.prototype.creategame=function(){
 	this.newgamebtn.classList.add("invisible");
 	this.gamediv.classList.remove("invisible");
 	this.bd=emptyboard();
-	drawboard(this.ctx,this.cellsz,this.bd,0);
+	drawboard(this.ctx,this.cellsz,this.bd,0,this.lastplacepos);
 	this.statusdiv.innerHTML="Waiting for player 1...";
 };
 Room.prototype.myturn=function(ot){
@@ -231,7 +232,8 @@ Room.prototype.place=function(pos,pidx){
 	//console.log("place: onturn "+this.onturn+" -> "+pidx);
 	this.onturn=pidx;
 	this.canplace=false;
-	queueapplymove(this.id,this.ctx,this.cellsz,pos,pidx);
+	this.lastplacepos=pos;
+	queueapplymove(this.id,this.ctx,this.cellsz,pos,pidx,this.lastplacepos);
 	queueapplymove(this.id,function(){
 		//WINCHECK?
 		//console.log("place qam_func: onturn "+this.onturn+" -> "+(this.onturn+1)%this.userlist.length);
@@ -239,14 +241,14 @@ Room.prototype.place=function(pos,pidx){
 			this.onturn=(this.onturn+1)%this.userlist.length;
 			this.statusdiv.innerHTML="Waiting for player "+(this.onturn+1)+"...";
 		}
-		drawboard(this.ctx,this.cellsz,this.bd,this.onturn);
+		drawboard(this.ctx,this.cellsz,this.bd,this.onturn,this.lastplacepos);
 	}.bind(this));
 };
 Room.prototype.gotwin=function(pidx){
 	queueapplymove(this.id,function(){
 		this.onturn=pidx;
 		this.canplace=false;
-		drawboard(this.ctx,this.cellsz,this.bd,this.onturn);
+		drawboard(this.ctx,this.cellsz,this.bd,this.onturn,this.lastplacepos);
 		this.statusdiv.innerHTML="Player "+(this.onturn+1)+" won!";
 		this.newgamebtn.classList.remove("invisible");
 	}.bind(this));
@@ -306,7 +308,7 @@ function dodestroyroom(roomid){
 	socket.emit("roomdestroy",roomid);
 }
 
-function drawboard(ctx,cellsz,bd,clr){
+function drawboard(ctx,cellsz,bd,clr,lastplacepos){
 	var x,y,i,angle,radius;
 	ctx.clearRect(0,0,W*cellsz+1,H*cellsz+1);
 	ctx.strokeStyle=COLOURS[+clr];
@@ -321,6 +323,12 @@ function drawboard(ctx,cellsz,bd,clr){
 		}
 	}
 	ctx.stroke();
+	if(lastplacepos!=-1){
+		x=lastplacepos%W;
+		y=~~(lastplacepos/W);
+		ctx.fillStyle="rgba(0,0,0,0.2)";
+		ctx.fillRect(x*cellsz,y*cellsz,cellsz,cellsz);
+	}
 	for(y=0;y<H;y++){
 		for(x=0;x<W;x++){
 			ctx.fillStyle=COLOURS[bd[y][x].c];
@@ -380,12 +388,12 @@ function stabiliseanims(bd){
 var applymove_queue={}; //objects of room ids
 var applymove_busy={};
 
-function applymove(ctx,cellsz,idx,c,aqid){
+function applymove(ctx,cellsz,idx,c,lastplacepos,aqid){
 	var bd=rooms[aqid].bd,onturn=rooms[aqid].onturn;
 	applymove_busy[aqid]=true;
 	bd[~~(idx/W)][idx%W].n++;
 	bd[~~(idx/W)][idx%W].c=c;
-	drawboard(ctx,cellsz,bd,onturn);
+	drawboard(ctx,cellsz,bd,onturn,lastplacepos);
 	var anims=stabiliseanims(bd);
 	console.log(anims);
 	anims.forEach(function(pair,i){
@@ -400,7 +408,7 @@ function applymove(ctx,cellsz,idx,c,aqid){
 					fx=stage[i][0]%W; fy=~~(stage[i][0]/W);
 					bd[fy][fx].n--;
 				}
-				drawboard(ctx,cellsz,bd,onturn);
+				drawboard(ctx,cellsz,bd,onturn,lastplacepos);
 				for(i=0;i<stage.length;i++){
 					fx=stage[i][0]%W; fy=~~(stage[i][0]/W);
 					tx=stage[i][1]%W; ty=~~(stage[i][1]/W);
@@ -415,7 +423,7 @@ function applymove(ctx,cellsz,idx,c,aqid){
 				if(time==10){
 					clearInterval(interval);
 					bd=rooms[aqid].bd=newbd;
-					drawboard(ctx,cellsz,bd,onturn);
+					drawboard(ctx,cellsz,bd,onturn,lastplacepos);
 					if(finalstage){
 						applymove_busy[aqid]=false;
 						while(applymove_queue[aqid].length&&typeof applymove_queue[aqid][0]=="function"){
@@ -436,15 +444,15 @@ function applymove(ctx,cellsz,idx,c,aqid){
 	});
 }
 
-function queueapplymove(id,ctx,cellsz,idx,c){
+function queueapplymove(id,ctx,cellsz,idx,c,lastplacepos){
 	if(!applymove_queue[id])applymove_queue[id]=[];
 	if(!applymove_busy[id])applymove_busy[id]=false;
 	if(applymove_busy[id]){
 		if(typeof ctx=="function")applymove_queue[id].push(ctx);
-		else applymove_queue[id].push([ctx,cellsz,idx,c,id]);
+		else applymove_queue[id].push([ctx,cellsz,idx,c,lastplacepos,id]);
 	} else {
 		if(typeof ctx=="function")ctx();
-		else applymove(ctx,cellsz,idx,c,id);
+		else applymove(ctx,cellsz,idx,c,lastplacepos,id);
 	}
 }
 </script>
@@ -544,6 +552,13 @@ div.roomui{
 	border-radius:5px;
 }
 
+div.uiclosebtn{
+	float:right;
+	margin:5px;
+	margin-left:10px;
+	cursor:pointer;
+}
+
 div.chatdiv{
 	float:right;
 	width:300px;
-- 
cgit v1.2.3