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

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 592a7001..42e6507a 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -15,6 +15,8 @@ Vue.component('my-game', {
 			oppid: "", //opponent ID in case of HH game
 			oppConnected: false,
 			seek: false,
+			fenStart: "",
+			incheck: [],
 		};
 	},
 	render(h) {
@@ -22,6 +24,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
@@ -34,6 +39,8 @@ Vue.component('my-game', {
 				{
 					on: {
 						click: () => {
+							if (this.mode == "human")
+								return; //no newgame while playing
 							if (this.seek)
 								delete localStorage["newgame"]; //cancel game seek
 							else
@@ -54,7 +61,13 @@ Vue.component('my-game', {
 				[h('i', { 'class': { "material-icons": true } }, "accessibility")]),
 			h('button',
 				{
-					on: { click: () => this.newGame("computer") },
+					on: {
+						click: () => {
+							if (this.mode == "human")
+								return; //no newgame while playing
+							this.newGame("computer");
+						}
+					},
 					attrs: { "aria-label": 'New game VS computer' },
 					'class': {
 						"tooltip":true,
@@ -161,7 +174,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 +183,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}),
@@ -230,12 +244,6 @@ Vue.component('my-game', {
 					}
 				),
 				h('h3',
-					{
-						"class": { "section": true },
-						domProps: { innerHTML: "End of game" },
-					}
-				),
-				h('p',
 					{
 						"class": { "section": true },
 						domProps: { innerHTML: eogMessage },
@@ -247,7 +255,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 },
 						}
 					)
@@ -370,7 +378,7 @@ Vue.component('my-game', {
 			{
 				// New game request has been cancelled on disconnect
 				this.seek = true;
-				this.newGame("human");
+				this.newGame("human", "reconnect");
 			}
 		};
 		const socketMessageListener = msg => {
@@ -430,22 +438,25 @@ Vue.component('my-game', {
 			}
 			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"];
 		},
@@ -455,6 +466,13 @@ Vue.component('my-game', {
 			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,13 +480,20 @@ 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 (!fenInit || fenInit!="reconnect") //TODO: bad HACK...
+				{
+					let modalBox = document.getElementById("modal-control2");
+					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!
@@ -482,7 +507,16 @@ Vue.component('my-game', {
 				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, "ingame");
+					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,6 +642,8 @@ 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)
 			{