things

1 files changed, 46 insertions, 13 deletions

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;