diff options
author | tomsmeding <hallo@tomsmeding.nl> | 2015-12-13 21:05:09 +0100 |
---|---|---|
committer | tomsmeding <hallo@tomsmeding.nl> | 2015-12-13 21:05:09 +0100 |
commit | ff90de96005fd50de6ef0c25837eb2ff406c580b (patch) | |
tree | 9d0943f9ac3675349c2b2b72def9175d219eafbe | |
parent | 0792a98ae43385c63895ba35136384a2b506dff1 (diff) |
Last move highlight
-rw-r--r-- | index.html | 43 |
1 files changed, 29 insertions, 14 deletions
@@ -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; |