summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authortomsmeding <hallo@tomsmeding.nl>2015-12-13 21:05:09 +0100
committertomsmeding <hallo@tomsmeding.nl>2015-12-13 21:05:09 +0100
commitff90de96005fd50de6ef0c25837eb2ff406c580b (patch)
tree9d0943f9ac3675349c2b2b72def9175d219eafbe
parent0792a98ae43385c63895ba35136384a2b506dff1 (diff)
Last move highlight
-rw-r--r--index.html43
1 files 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;