From 9d2137af1be2ab47f18aa33e8e9c6a41da421c79 Mon Sep 17 00:00:00 2001 From: tomsmeding Date: Fri, 11 Dec 2015 20:16:23 +0100 Subject: things --- index.html | 59 ++++++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 46 insertions(+), 13 deletions(-) (limited to 'index.html') diff --git a/index.html b/index.html index dcf0b9b..6fbc6fc 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,9 @@ socket.on("roomdestroy",roomdestroy); socket.on("roominvite",roominvite); socket.on("roomjoin",roomadduser); socket.on("roomchat",roomchat); +socket.on("roomcreategame",roomcreategame) socket.on("roomgameturn",roomgameturn); +socket.on("roomgameplace",roomgameplace); if(location.hostname=="localhost"&&Math.random()<.25)localStorage.setItem("nickname","aaa"); @@ -89,7 +91,7 @@ function Room(_roomid){ if(!(this instanceof Room))return new Room(_roomid) this.id=_roomid; this.userlist=[]; - this.bd=emptyboard(); + this.bd=null; this.onturn=0; this.cellsz=40; @@ -144,8 +146,9 @@ function Room(_roomid){ e.appendChild(input); this.uidiv.appendChild(e); - e=document.createElement("div"); - e.classList.add("gamediv"); + this.gamediv=document.createElement("div"); + this.gamediv.classList.add("gamediv"); + this.gamediv.classList.add("invisible"); //no game running yet this.cvs=document.createElement("canvas"); this.ctx=this.cvs.getContext("2d"); this.cvs.classList.add("gamecvs"); @@ -153,13 +156,24 @@ function Room(_roomid){ this.cvs.height=this.cellsz*H+1; this.cvs.addEventListener("click",function(ev){ if(ev.target!=this.cvs)return; - var x=ev.clientX/this.cellsz,y=ev.clientY/this.cellsz,idx=W*y+x; + var bbox=ev.target.getBoundingClientRect(); + var x=~~((ev.clientX-bbox.left)/this.cellsz), + y=~~((ev.clientY-bbox.top)/this.cellsz), + idx=W*y+x; if(x<0||y<0||x>=W||y>=H)return; - if(this.bd[idx]place(idx,this.onturn); + socket.emit("roomgameplace",this.id,idx); }.bind(this)); - drawboard(this.ctx,this.cellsz,this.bd,0); - e.appendChild(this.cvs); - this.uidiv.appendChild(e); + //drawboard(this.ctx,this.cellsz,this.bd,0); + this.gamediv.appendChild(this.cvs); + this.uidiv.appendChild(this.gamediv); + + this.newgamebtn=document.createElement("input"); + this.newgamebtn.type="button"; + this.newgamebtn.value="Start new game!"; + this.newgamebtn.addEventListener("click",function(){ + socket.emit("roomcreategame",this.id); //just a request + }.bind(this)); + this.uidiv.appendChild(this.newgamebtn); this.statusdiv=document.createElement("div"); this.statusdiv.classList.add("gamestatusdiv"); @@ -191,19 +205,28 @@ Room.prototype.chat=function(by,msg){ this.uidiv.getElementsByClassName("chatlogtbody")[0].appendChild(tr); tr.scrollIntoView(); }; +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); +}; +Room.prototype.myturn=function(ot){ + this.canplace=true; + this.onturn=ot; + this.statusdiv.innerHTML="Your turn!"; +}; Room.prototype.place=function(pos,pidx){ + console.log("place: onturn "+this.onturn+" -> "+pidx); + this.onturn=pidx; queueapplymove(this.id,this.ctx,this.cellsz,pos,pidx); queueapplymove(this.id,function(){ //WINCHECK? + console.log("place qam_func: onturn "+this.onturn+" -> "+(this.onturn+1)%this.userlist.length); this.onturn=(this.onturn+1)%this.userlist.length; drawboard(this.ctx,this.cellsz,this.bd,this.onturn); }.bind(this)); }; -Room.prototype.myturn=function(ot){ - this.canplace=true; - this.onturn=ot; - this.statusdiv.innerHTML="Your turn!"; -}; function roominvite(roomid,by){ if(!confirm("User '"+by[1]+"' sent you an invite to join their room. Accept?"))return; @@ -219,10 +242,18 @@ function roomchat(roomid,by,msg){ rooms[roomid].chat(by,msg); } +function roomcreategame(roomid){ + rooms[roomid].creategame(); +} + function roomgameturn(roomid,ot){ rooms[roomid].myturn(ot); } +function roomgameplace(roomid,pos,pidx){ + rooms[roomid].place(pos,pidx); +} + function changenick(){ var newnick=prompt("New nickname?"); @@ -328,10 +359,12 @@ function applymove(ctx,cellsz,idx,c,aqid){ bd[~~(idx/W)][idx%W].c=c; drawboard(ctx,cellsz,bd,onturn); var anims=stabiliseanims(bd); + console.log(anims); anims.forEach(function(pair,i){ var stage=pair[0],newbd=pair[1]; var finalstage=i==anims.length-1; setTimeout(function(){ + console.log("anim stage",stage); var time=0; var interval=setInterval(function(){ var i,fx,fy,tx,ty; -- cgit v1.2.3-70-g09d2