X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=58fd365a3275057b01897b260ebecfee8b09b334;hb=edcd679ab1fe609641451586ef1e9484925c4f83;hp=94340e6605ce77c363d16cd0c7323c661d4494cc;hpb=dbcc32e95d526fe518ac866f7b3cdac546f1178e;p=vchess.git

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 94340e66..58fd365a 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -57,14 +57,13 @@ Vue.component('my-game', {
 					"tooltip": true,
 					"play": true,
 					"seek": this.seek,
-					"playing": this.mode == "human",
+					"playing": this.mode == "human" && this.score == "*",
 				},
 			},
 			[h('i', { 'class': { "material-icons": true } }, "accessibility")])
 		);
-		if (variant != "Dark" &&
-			(["idle","computer","friend"].includes(this.mode)
-				|| ["friend","human"].includes(this.mode) && this.score != "*"))
+		if (["idle","computer","friend"].includes(this.mode)
+			|| (this.mode == "human" && this.score != "*"))
 		{
 			actionArray.push(
 				h('button',
@@ -74,16 +73,15 @@ Vue.component('my-game', {
 					'class': {
 						"tooltip":true,
 						"play": true,
-						"playing": this.mode == "computer",
+						"playing": this.mode == "computer" && this.score == "*",
 						"spaceleft": true,
 					},
 				},
 				[h('i', { 'class': { "material-icons": true } }, "computer")])
 			);
 		}
-		if (variant != "Dark" &&
-			(["idle","friend"].includes(this.mode)
-				|| ["computer","human"].includes(this.mode) && this.score != "*"))
+		if (variant != "Dark" && (["idle","friend"].includes(this.mode)
+			|| (["computer","human"].includes(this.mode) && this.score != "*")))
 		{
 			actionArray.push(
 				h('button',
@@ -445,7 +443,7 @@ Vue.component('my-game', {
 				{
 					myReservePiecesArray.push(h('div',
 					{
-						'class': {'board':true, ['board'+sizeY+'-reserve']:true},
+						'class': {'board':true, ['board'+sizeY]:true},
 						attrs: { id: this.getSquareId({x:sizeX+shiftIdx,y:i}) }
 					},
 					[
@@ -469,7 +467,7 @@ Vue.component('my-game', {
 				{
 					oppReservePiecesArray.push(h('div',
 					{
-						'class': {'board':true, ['board'+sizeY+'-reserve']:true},
+						'class': {'board':true, ['board'+sizeY]:true},
 						attrs: { id: this.getSquareId({x:sizeX+(1-shiftIdx),y:i}) }
 					},
 					[
@@ -867,41 +865,7 @@ Vue.component('my-game', {
 			actionArray
 		);
 		elementArray.push(actions);
-		if (this.score != "*" && this.pgnTxt.length > 0)
-		{
-			elementArray.push(
-				h('div',
-					{
-						attrs: { id: "pgn-div" },
-						"class": { "section-content": true },
-					},
-					[
-						h('a',
-							{
-								attrs: {
-									id: "download",
-									href: "#",
-								}
-							}
-						),
-						h('p',
-							{
-								attrs: { id: "pgn-game" },
-								domProps: { innerHTML: this.pgnTxt }
-							}
-						),
-						h('button',
-							{
-								attrs: { "id": "downloadBtn" },
-								on: { click: this.download },
-								domProps: { innerHTML: translations["Download game"] },
-							}
-						),
-					]
-				)
-			);
-		}
-		else if (this.mode != "idle")
+		if (!!this.vr)
 		{
 			if (this.mode == "problem")
 			{
@@ -951,6 +915,31 @@ Vue.component('my-game', {
 					)
 				);
 			}
+			elementArray.push(
+				h('div',
+					{
+						attrs: { id: "pgn-div" },
+						"class": { "section-content": true },
+					},
+					[
+						h('a',
+							{
+								attrs: {
+									id: "download",
+									href: "#",
+								}
+							}
+						),
+						h('button',
+							{
+								attrs: { "id": "downloadBtn" },
+								on: { click: this.download },
+								domProps: { innerHTML: translations["Download PGN"] },
+							}
+						),
+					]
+				)
+			);
 		}
 		return h(
 			'div',
@@ -1010,7 +999,7 @@ Vue.component('my-game', {
 		};
 		const socketMessageListener = msg => {
 			const data = JSON.parse(msg.data);
-			const L = (!!this.vr ? this.vr.moves.length : 0);
+			let L = undefined;
 			switch (data.code)
 			{
 				case "oppname":
@@ -1030,7 +1019,7 @@ Vue.component('my-game', {
 					break;
 				case "newgame": //opponent found
 					// oppid: opponent socket ID
-					this.newGame("human", data.fen, data.color, data.oppid);
+					this.newGame("human", data.fen, data.color, data.oppid, data.gameid);
 					break;
 				case "newmove": //..he played!
 					this.play(data.move, (variant!="Dark" ? "animate" : null));
@@ -1040,6 +1029,7 @@ Vue.component('my-game', {
 						break; //games IDs don't match: definitely over...
 					this.oppConnected = true;
 					// Send our "last state" informations to opponent
+					L = this.vr.moves.length;
 					this.conn.send(JSON.stringify({
 						code: "lastate",
 						oppid: this.oppid,
@@ -1049,10 +1039,11 @@ Vue.component('my-game', {
 					}));
 					break;
 				case "lastate": //got opponent infos about last move
+					L = this.vr.moves.length;
 					if (this.gameId != data.gameId)
 						break; //games IDs don't match: nothing we can do...
 					// OK, opponent still in game (which might be over)
-					if (this.mode != "human")
+					if (this.score != "*")
 					{
 						// We finished the game (any result possible)
 						this.conn.send(JSON.stringify({
@@ -1070,6 +1061,7 @@ Vue.component('my-game', {
 						this.conn.send(JSON.stringify({
 							code: "lastate",
 							oppid: this.oppid,
+							gameId: this.gameId,
 							lastMove: this.vr.moves[L-1],
 							movesCount: L,
 						}));
@@ -1130,12 +1122,13 @@ Vue.component('my-game', {
 			// before they appear on page:
 			const delay = Math.max(500-(Date.now()-self.timeStart), 0);
 			setTimeout(() => {
+				const animate = (variant!="Dark" ? "animate" : null);
 				if (self.mode == "computer") //warning: mode could have changed!
-					self.play(compMove[0], "animate");
+					self.play(compMove[0], animate);
 				if (compMove.length == 2)
 					setTimeout( () => {
 						if (self.mode == "computer")
-							self.play(compMove[1], "animate");
+							self.play(compMove[1], animate);
 					}, 750);
 			}, delay);
 		}
@@ -1165,13 +1158,12 @@ Vue.component('my-game', {
 					: "none";
 		},
 		download: function() {
-			let content = document.getElementById("pgn-game").innerHTML;
-			content = content.replace(/<br>/g, "\n");
+			// Variants may have special PGN structure (so next function isn't defined here)
+			const content = this.vr.getPGN(this.mycolor, this.score, this.fenStart, this.mode);
 			// Prepare and trigger download link
 			let downloadAnchor = document.getElementById("download");
 			downloadAnchor.setAttribute("download", "game.pgn");
-			downloadAnchor.href = "data:text/plain;charset=utf-8," +
-				encodeURIComponent(content);
+			downloadAnchor.href = "data:text/plain;charset=utf-8," + encodeURIComponent(content);
 			downloadAnchor.click();
 		},
 		showScoreMsg: function() {
@@ -1187,8 +1179,6 @@ Vue.component('my-game', {
 				localStorage.setItem(prefix+"score", score);
 			}
 			this.showScoreMsg();
-			// Variants may have special PGN structure (so next function isn't defined here)
-			this.pgnTxt = this.vr.getPGN(this.mycolor, this.score, this.fenStart, this.mode);
 			if (this.mode == "human" && this.oppConnected)
 			{
 				// Send our nickname to opponent
@@ -1288,6 +1278,12 @@ Vue.component('my-game', {
 		},
 		clickComputerGame: function(e) {
 			this.getRidOfTooltip(e.currentTarget);
+			if (this.mode == "computer" && this.score == "*"
+				&& this.vr.turn != this.mycolor)
+			{
+				// Wait for computer reply first (avoid potential "ghost move" bug)
+				return;
+			}
 			this.newGame("computer");
 		},
 		clickFriendGame: function(e) {
@@ -1306,7 +1302,7 @@ Vue.component('my-game', {
 			}
 			this.endGame(this.mycolor=="w"?"0-1":"1-0");
 		},
-		newGame: function(mode, fenInit, color, oppId) {
+		newGame: function(mode, fenInit, color, oppId, gameId) {
 			const fen = fenInit || VariantRules.GenRandInitFen();
 			console.log(fen); //DEBUG
 			if (mode=="human" && !oppId)
@@ -1320,7 +1316,7 @@ Vue.component('my-game', {
 				}
 				// Send game request and wait..
 				try {
-					this.conn.send(JSON.stringify({code:"newgame", fen:fen}));
+					this.conn.send(JSON.stringify({code:"newgame", fen:fen, gameid: getRandString() }));
 				} catch (INVALID_STATE_ERR) {
 					return; //nothing achieved
 				}
@@ -1345,8 +1341,6 @@ Vue.component('my-game', {
 							return;
 						}
 					}
-					else if (score == "*")
-						return this.continueGame("computer");
 				}
 			}
 			else if (mode == "friend")
@@ -1371,12 +1365,10 @@ Vue.component('my-game', {
 			this.mode = mode;
 			this.incheck = [];
 			this.fenStart = V.ParseFen(fen).position; //this is enough
-			if (mode != "problem")
-				this.setStorage(); //store game state in case of interruptions
 			if (mode=="human")
 			{
 				// Opponent found!
-				this.gameId = getRandString();
+				this.gameId = gameId;
 				this.oppid = oppId;
 				this.oppConnected = true;
 				this.mycolor = color;
@@ -1395,6 +1387,8 @@ Vue.component('my-game', {
 			else if (mode == "friend")
 				this.mycolor = "w"; //convention...
 			//else: problem solving: nothing more to do
+			if (mode != "problem")
+				this.setStorage(); //store game state in case of interruptions
 		},
 		continueGame: function(mode) {
 			this.mode = mode;
@@ -1417,7 +1411,7 @@ Vue.component('my-game', {
 			else if (mode == "computer")
 			{
 				this.compWorker.postMessage(["init",fen]);
-				if (this.mycolor != this.vr.turn)
+				if (score == "*" && this.mycolor != this.vr.turn)
 					this.playComputerMove();
 			}
 			//else: nothing special to do in friend mode