From: Benjamin Auder <benjamin.auder@somewhere>
Date: Mon, 19 Nov 2018 11:27:30 +0000 (+0100)
Subject: Improved PGN and game seek
X-Git-Url: https://git.auder.net/game/scripts/js/index.js?a=commitdiff_plain;h=01a135e2aa21365c0a96931fbb6be76876e7c2a1;p=vchess.git

Improved PGN and game seek
---

diff --git a/TODO b/TODO
index e9d0cc5a..7ed21c6d 100644
--- a/TODO
+++ b/TODO
@@ -1,4 +1,6 @@
-Styles must be improved (full width for smartphones, selectable text for PGN...)
+Styles must be improved (full width for smartphones, ...)
+PGN text is not selectable (understand why?!)
+Change cursor when computer "think" (sablier)
 Tooltip text should fade (even when mouse stay on it, especially for small screens)
 Checkered stage 2: switch button at reserve position (or on top).
 Mode expert: game.js, button on top (with online indicator)
diff --git a/public/javascripts/base_rules.js b/public/javascripts/base_rules.js
index 11de1471..c0dc826f 100644
--- a/public/javascripts/base_rules.js
+++ b/public/javascripts/base_rules.js
@@ -1037,14 +1037,15 @@ class ChessRules
 	}
 
 	// The score is already computed when calling this function
-	getPGN(mycolor, score, fenStart)
+	getPGN(mycolor, score, fenStart, mode)
 	{
 		let pgn = "";
 		pgn += '[Site "vchess.club"]<br>';
 		const d = new Date();
+		const opponent = this.mode=="human" ? "Anonymous" : "Computer";
 		pgn += '[Date "' + d.getFullYear() + '-' + d.getMonth() + '-' + d.getDate() + '"]<br>';
-		pgn += '[White "' + (mycolor=='w'?'Myself':'Anonymous') + '"]<br>';
-		pgn += '[Black "' + (mycolor=='b'?'Myself':'Anonymous') + '"]<br>';
+		pgn += '[White "' + (mycolor=='w'?'Myself':opponent) + '"]<br>';
+		pgn += '[Black "' + (mycolor=='b'?'Myself':opponent) + '"]<br>';
 		pgn += '[Fen "' + fenStart + '"]<br>';
 		pgn += '[Result "' + score + '"]<br><br>';
 
diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index ab860572..e412525f 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -203,32 +203,6 @@ Vue.component('my-game', {
 	//				elementArray.push(reserve);
 	//			}
 			const eogMessage = this.getEndgameMessage(this.score);
-			let elemsOfEog =
-			[
-				h('label',
-					{
-						attrs: { "for": "modal-eog" },
-						"class": { "modal-close": true },
-					}
-				),
-				h('h3',
-					{
-						"class": { "section": true },
-						domProps: { innerHTML: eogMessage },
-					}
-				)
-			];
-			if (this.score != "*")
-			{
-				elemsOfEog.push(
-					h('p', //'textarea', //TODO: selectable!
-						{
-							domProps: { innerHTML: this.vr.getPGN(this.mycolor, this.score, this.fenStart) },
-							//attrs: { "readonly": true },
-						}
-					)
-				);
-			}
 			const modalEog = [
 				h('input',
 					{
@@ -244,7 +218,20 @@ Vue.component('my-game', {
 							{
 								"class": { "card": true, "smallpad": true },
 							},
-							elemsOfEog
+							[
+								h('label',
+									{
+										attrs: { "for": "modal-eog" },
+										"class": { "modal-close": true },
+									}
+								),
+								h('h3',
+									{
+										"class": { "section": true },
+										domProps: { innerHTML: eogMessage },
+									}
+								)
+							]
 						)
 					]
 				)
@@ -299,6 +286,23 @@ Vue.component('my-game', {
 			actionArray
 		);
 		elementArray.push(actions);
+		if (this.score != "*")
+		{
+			elementArray.push(
+				h('div',
+					{ },
+					[
+						h('p',
+							{
+								domProps: {
+									innerHTML: this.vr.getPGN(this.mycolor, this.score, this.fenStart, this.mode)
+								}
+							}
+						)
+					]
+				)
+			);
+		}
 		return h(
 			'div',
 			{
@@ -426,7 +430,7 @@ Vue.component('my-game', {
 			this.score = score;
 			let modalBox = document.getElementById("modal-eog");
 			modalBox.checked = true;
-			//setTimeout(() => { modalBox.checked = false; }, 2000); //disabled, to show PGN
+			setTimeout(() => { modalBox.checked = false; }, 2000);
 			if (this.mode == "human")
 				this.clearStorage();
 			this.mode = "idle";
@@ -485,13 +489,12 @@ Vue.component('my-game', {
 			if (this.mode == "human")
 				return; //no newgame while playing
 			if (this.seek)
+			{
 				delete localStorage["newgame"]; //cancel game seek
+				this.seek = false;
+			}
 			else
-			{
-				localStorage["newgame"] = variant;
 				this.newGame("human");
-			}
-			this.seek = !this.seek;
 		},
 		clickComputerGame: function() {
 			if (this.mode == "human")
@@ -507,11 +510,12 @@ Vue.component('my-game', {
 				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..
+				localStorage["newgame"] = variant;
+				this.seek = true;
 				this.clearStorage(); //in case of
 				try {
 					this.conn.send(JSON.stringify({code:"newgame", fen:fen}));