X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=ab8605727efef0b288095b2b55d4f210d12ee584;hb=cd4cad0468612cf00c6e6879554e3cee58d4b1f9;hp=592a70019d1c789a125e470e54dcbd463c267f95;hpb=dfb4afc10d56715b80f753b1273738bd11a309dd;p=vchess.git

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 592a7001..ab860572 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -1,5 +1,4 @@
-// TODO: use indexedDB instead of localStorage? (more flexible...)
-
+// TODO: use indexedDB instead of localStorage? (more flexible: allow several games)
 Vue.component('my-game', {
 	data: function() {
 		return {
@@ -15,6 +14,8 @@ Vue.component('my-game', {
 			oppid: "", //opponent ID in case of HH game
 			oppConnected: false,
 			seek: false,
+			fenStart: "",
+			incheck: [],
 		};
 	},
 	render(h) {
@@ -22,6 +23,9 @@ Vue.component('my-game', {
 		// Precompute hints squares to facilitate rendering
 		let hintSquares = doubleArray(sizeX, sizeY, false);
 		this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; });
+		// Also precompute in-check squares
+		let incheckSq = doubleArray(sizeX, sizeY, false);
+		this.incheck.forEach(sq => { incheckSq[sq[0]][sq[1]] = true; });
 		let elementArray = [];
 		let square00 = document.getElementById("sq-0-0");
 		let squareWidth = !!square00
@@ -32,18 +36,7 @@ Vue.component('my-game', {
 		let actionArray = [
 			h('button',
 				{
-					on: {
-						click: () => {
-							if (this.seek)
-								delete localStorage["newgame"]; //cancel game seek
-							else
-							{
-								localStorage["newgame"] = variant;
-								this.newGame("human");
-							}
-							this.seek = !this.seek;
-						}
-					},
+					on: { click: this.clickGameSeek },
 					attrs: { "aria-label": 'New game VS human' },
 					'class': {
 						"tooltip": true,
@@ -54,7 +47,7 @@ Vue.component('my-game', {
 				[h('i', { 'class': { "material-icons": true } }, "accessibility")]),
 			h('button',
 				{
-					on: { click: () => this.newGame("computer") },
+					on: { click: this.clickComputerGame },
 					attrs: { "aria-label": 'New game VS computer' },
 					'class': {
 						"tooltip":true,
@@ -161,7 +154,7 @@ Vue.component('my-game', {
 								);
 							}
 							const lm = this.vr.lastMove;
-							const highlight = !!lm && _.isMatch(lm.end, {x:ci,y:cj}); //&& _.isMatch(lm.start, {x:ci,y:cj})
+							const highlight = !!lm && _.isMatch(lm.end, {x:ci,y:cj});
 							return h(
 								'div',
 								{
@@ -170,6 +163,7 @@ Vue.component('my-game', {
 										'light-square': !highlight && (i+j)%2==0,
 										'dark-square': !highlight && (i+j)%2==1,
 										'highlight': highlight,
+										'incheck': incheckSq[ci][cj],
 									},
 									attrs: {
 										id: this.getSquareId({x:ci,y:cj}),
@@ -208,34 +202,16 @@ Vue.component('my-game', {
 	//				);
 	//				elementArray.push(reserve);
 	//			}
-			let eogMessage = "Unfinished";
-			switch (this.score)
-			{
-				case "1-0":
-					eogMessage = "White win";
-					break;
-				case "0-1":
-					eogMessage = "Black win";
-					break;
-				case "1/2":
-					eogMessage = "Draw";
-					break;
-			}
+			const eogMessage = this.getEndgameMessage(this.score);
 			let elemsOfEog =
 			[
 				h('label',
 					{
-						attrs: { "for": "modal-control" },
+						attrs: { "for": "modal-eog" },
 						"class": { "modal-close": true },
 					}
 				),
 				h('h3',
-					{
-						"class": { "section": true },
-						domProps: { innerHTML: "End of game" },
-					}
-				),
-				h('p',
 					{
 						"class": { "section": true },
 						domProps: { innerHTML: eogMessage },
@@ -247,7 +223,7 @@ Vue.component('my-game', {
 				elemsOfEog.push(
 					h('p', //'textarea', //TODO: selectable!
 						{
-							domProps: { innerHTML: this.vr.getPGN(this.mycolor, this.score) },
+							domProps: { innerHTML: this.vr.getPGN(this.mycolor, this.score, this.fenStart) },
 							//attrs: { "readonly": true },
 						}
 					)
@@ -256,7 +232,7 @@ Vue.component('my-game', {
 			const modalEog = [
 				h('input',
 					{
-						attrs: { "id": "modal-control", type: "checkbox" },
+						attrs: { "id": "modal-eog", type: "checkbox" },
 						"class": { "modal": true },
 					}),
 				h('div',
@@ -278,7 +254,7 @@ Vue.component('my-game', {
 		const modalNewgame = [
 			h('input',
 				{
-					attrs: { "id": "modal-control2", type: "checkbox" },
+					attrs: { "id": "modal-newgame", type: "checkbox" },
 					"class": { "modal": true },
 				}),
 			h('div',
@@ -293,7 +269,7 @@ Vue.component('my-game', {
 						[
 							h('label',
 								{
-									attrs: { "id": "close-newgame", "for": "modal-control2" },
+									attrs: { "id": "close-newgame", "for": "modal-newgame" },
 									"class": { "modal-close": true },
 								}
 							),
@@ -357,24 +333,24 @@ Vue.component('my-game', {
 		const socketOpenListener = () => {
 			if (continuation)
 			{
-				// TODO: check FEN integrity with opponent
 				const fen = localStorage.getItem("fen");
 				const mycolor = localStorage.getItem("mycolor");
 				const oppid = localStorage.getItem("oppid");
 				const moves = JSON.parse(localStorage.getItem("moves"));
 				this.newGame("human", fen, mycolor, oppid, moves, true);
-				// Send ping to server, which answers pong if opponent is connected
-				this.conn.send(JSON.stringify({code:"ping", oppid:this.oppId}));
+				// Send ping to server (answer pong if opponent is connected)
+				this.conn.send(JSON.stringify({code:"ping",oppid:this.oppid}));
 			}
 			else if (localStorage.getItem("newgame") === variant)
 			{
 				// New game request has been cancelled on disconnect
 				this.seek = true;
-				this.newGame("human");
+				this.newGame("human", undefined, undefined, undefined, undefined, "reconnect");
 			}
 		};
 		const socketMessageListener = msg => {
 			const data = JSON.parse(msg.data);
+			console.log("Receive message: " + data.code);
 			switch (data.code)
 			{
 				case "newgame": //opponent found
@@ -383,13 +359,51 @@ Vue.component('my-game', {
 				case "newmove": //..he played!
 					this.play(data.move, "animate");
 					break;
-				case "pong": //sent when opponent stayed online after we disconnected
+				case "pong": //received if we sent a ping (game still alive on our side)
 					this.oppConnected = true;
+					const L = this.vr.moves.length;
+					// Send our "last state" informations to opponent
+					this.conn.send(JSON.stringify({
+						code:"lastate",
+						oppid:this.oppid,
+						lastMove:L>0?this.vr.moves[L-1]:undefined,
+						movesCount:L,
+					}));
+					break;
+				case "lastate": //got opponent infos about last move (we might have resigned)
+					if (this.mode!="human" || this.oppid!=data.oppid)
+					{
+						// OK, we resigned
+						this.conn.send(JSON.stringify({
+							code:"lastate",
+							oppid:this.oppid,
+							lastMove:undefined,
+							movesCount:-1,
+						}));
+					}
+					else if (data.movesCount < 0)
+					{
+						// OK, he resigned
+						this.endGame(this.mycolor=="w"?"1-0":"0-1");
+					}
+					else if (data.movesCount < this.vr.moves.length)
+					{
+						// We must tell last move to opponent
+						const L = this.vr.moves.length;
+						this.conn.send(JSON.stringify({
+							code:"lastate",
+							oppid:this.oppid,
+							lastMove:this.vr.moves[L-1],
+							movesCount:L,
+						}));
+					}
+					else if (data.movesCount > this.vr.moves.length) //just got last move from him
+						this.play(data.lastMove, "animate");
 					break;
 				case "resign": //..you won!
 					this.endGame(this.mycolor=="w"?"1-0":"0-1");
 					break;
-				// TODO: also use (dis)connect info to count online players
+				// TODO: also use (dis)connect info to count online players?
 				case "connect":
 				case "disconnect":
 					if (this.mode == "human" && this.oppid == data.id)
@@ -398,7 +412,6 @@ Vue.component('my-game', {
 			}
 		};
 		const socketCloseListener = () => {
-			console.log("Lost connection -- reconnect");
 			this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant);
 			this.conn.addEventListener('open', socketOpenListener);
 			this.conn.addEventListener('message', socketMessageListener);
@@ -411,7 +424,7 @@ Vue.component('my-game', {
 	methods: {
 		endGame: function(score) {
 			this.score = score;
-			let modalBox = document.getElementById("modal-control");
+			let modalBox = document.getElementById("modal-eog");
 			modalBox.checked = true;
 			//setTimeout(() => { modalBox.checked = false; }, 2000); //disabled, to show PGN
 			if (this.mode == "human")
@@ -419,42 +432,85 @@ Vue.component('my-game', {
 			this.mode = "idle";
 			this.oppid = "";
 		},
+		getEndgameMessage: function(score) {
+			let eogMessage = "Unfinished";
+			switch (this.score)
+			{
+				case "1-0":
+					eogMessage = "White win";
+					break;
+				case "0-1":
+					eogMessage = "Black win";
+					break;
+				case "1/2":
+					eogMessage = "Draw";
+					break;
+			}
+			return eogMessage;
+		},
 		resign: function() {
 			if (this.mode == "human" && this.oppConnected)
 			{
 				try {
 					this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid}));
 				} catch (INVALID_STATE_ERR) {
-					return; //resign failed for some reason...
+					return; //socket is not ready (and not yet reconnected)
 				}
 			}
 			this.endGame(this.mycolor=="w"?"0-1":"1-0");
 		},
-		updateStorage: function() {
-			if (!localStorage.getItem("myid"))
-			{
-				localStorage.setItem("myid", this.myid);
-				localStorage.setItem("variant", variant);
-				localStorage.setItem("mycolor", this.mycolor);
-				localStorage.setItem("oppid", this.oppid);
-			}
+		setStorage: function() {
+			localStorage.setItem("myid", this.myid);
+			localStorage.setItem("variant", variant);
+			localStorage.setItem("mycolor", this.mycolor);
+			localStorage.setItem("oppid", this.oppid);
+			localStorage.setItem("fenStart", this.fenStart);
+			localStorage.setItem("moves", JSON.stringify(this.vr.moves));
 			localStorage.setItem("fen", this.vr.getFen());
+		},
+		updateStorage: function() {
 			localStorage.setItem("moves", JSON.stringify(this.vr.moves));
+			localStorage.setItem("fen", this.vr.getFen());
 		},
 		clearStorage: function() {
 			delete localStorage["variant"];
 			delete localStorage["myid"];
 			delete localStorage["mycolor"];
 			delete localStorage["oppid"];
+			delete localStorage["fenStart"];
 			delete localStorage["fen"];
 			delete localStorage["moves"];
 		},
+		clickGameSeek: function() {
+			if (this.mode == "human")
+				return; //no newgame while playing
+			if (this.seek)
+				delete localStorage["newgame"]; //cancel game seek
+			else
+			{
+				localStorage["newgame"] = variant;
+				this.newGame("human");
+			}
+			this.seek = !this.seek;
+		},
+		clickComputerGame: function() {
+			if (this.mode == "human")
+				return; //no newgame while playing
+			this.newGame("computer");
+		},
 		newGame: function(mode, fenInit, color, oppId, moves, continuation) {
 			const fen = fenInit || VariantRules.GenRandInitFen();
 			console.log(fen); //DEBUG
 			this.score = "*";
 			if (mode=="human" && !oppId)
 			{
+				const storageVariant = localStorage.getItem("variant");
+				if (!!storageVariant && storageVariant !== variant)
+				{
+					// TODO: find a better way to ensure this. Newgame system is currently a mess.
+					alert("Finish your " + storageVariant + " game first!");
+					return;
+				}
 				// Send game request and wait..
 				this.clearStorage(); //in case of
 				try {
@@ -462,27 +518,43 @@ Vue.component('my-game', {
 				} catch (INVALID_STATE_ERR) {
 					return; //nothing achieved
 				}
-				let modalBox = document.getElementById("modal-control2");
-				modalBox.checked = true;
-				setTimeout(() => { modalBox.checked = false; }, 2000);
+				if (continuation !== "reconnect") //TODO: bad HACK...
+				{
+					let modalBox = document.getElementById("modal-newgame");
+					modalBox.checked = true;
+					setTimeout(() => { modalBox.checked = false; }, 2000);
+				}
 				return;
 			}
 			this.vr = new VariantRules(fen, moves || []);
 			this.mode = mode;
+			this.incheck = []; //in case of
+			this.fenStart = continuation
+				? localStorage.getItem("fenStart")
+				: fen.split(" ")[0]; //Only the position matters
 			if (mode=="human")
 			{
 				// Opponent found!
 				if (!continuation)
 				{
-					// Playing sound fails on game continuation:
-					new Audio("/sounds/newgame.mp3").play();
-					document.getElementById("modal-control2").checked = false;
+					// Not playing sound on game continuation:
+					new Audio("/sounds/newgame.mp3").play().then(() => {}).catch(err => {});
+					document.getElementById("modal-newgame").checked = false;
 				}
 				this.oppid = oppId;
 				this.oppConnected = true;
 				this.mycolor = color;
 				this.seek = false;
+				if (!!moves && moves.length > 0) //imply continuation
+				{
+					const oppCol = this.vr.turn;
+					const lastMove = moves[moves.length-1];
+					this.vr.undo(lastMove);
+					this.incheck = this.vr.getCheckSquares(lastMove, oppCol);
+					this.vr.play(lastMove, "ingame");
+				}
 				delete localStorage["newgame"];
+				this.setStorage(); //in case of interruptions
 			}
 			else //against computer
 			{
@@ -608,18 +680,12 @@ Vue.component('my-game', {
 				this.animateMove(move);
 				return;
 			}
+			const oppCol = this.vr.getOppCol(this.vr.turn);
+			this.incheck = this.vr.getCheckSquares(move, oppCol); //is opponent in check?
 			// Not programmatic, or animation is over
 			if (this.mode == "human" && this.vr.turn == this.mycolor)
-			{
-				if (!this.oppConnected)
-					return; //abort move if opponent is gone
-				try {
-					this.conn.send(JSON.stringify({code:"newmove", move:move, oppid:this.oppid}));
-				} catch(INVALID_STATE_ERR) {
-					return; //abort also if sending failed
-				}
-			}
-			new Audio("/sounds/chessmove1.mp3").play();
+				this.conn.send(JSON.stringify({code:"newmove", move:move, oppid:this.oppid}));
+			new Audio("/sounds/chessmove1.mp3").play().then(() => {}).catch(err => {});
 			this.vr.play(move, "ingame");
 			if (this.mode == "human")
 				this.updateStorage(); //after our moves and opponent moves