From: Benjamin Auder <benjamin.auder@somewhere>
Date: Fri, 16 Nov 2018 14:54:11 +0000 (+0100)
Subject: Add state indicators for game seek/playing
X-Git-Url: https://git.auder.net/assets/css/current/app_dev.php/doc/rpsls.js?a=commitdiff_plain;h=186516b8eb00e193102ba43cff95de0a55c60dcb;p=vchess.git

Add state indicators for game seek/playing
---

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 34b3633a..f5db3378 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -14,6 +14,7 @@ Vue.component('my-game', {
 			mode: "idle", //human, computer or idle (when not playing)
 			oppid: "", //opponent ID in case of HH game
 			oppConnected: false,
+			seek: false,
 		};
 	},
 	render(h) {
@@ -26,29 +27,39 @@ Vue.component('my-game', {
 		let squareWidth = !!square00
 			? parseFloat(window.getComputedStyle(square00).width.slice(0,-2))
 			: 0;
+		const playingHuman = (this.mode == "human");
+		const playingComp = (this.mode == "computer");
 		let actionArray = [
 			h('button',
 				{
 					on: {
 						click: () => {
-							if (localStorage.getItem("newgame") === variant)
+							if (this.seek)
 								delete localStorage["newgame"]; //cancel game seek
 							else
 							{
 								localStorage["newgame"] = variant;
 								this.newGame("human");
 							}
+							this.seek = !this.seek;
 						}
 					},
 					attrs: { "aria-label": 'New game VS human' },
-					'class': { "tooltip":true },
+					'class': {
+						"tooltip": true,
+						"seek": this.seek,
+						"playing": playingHuman,
+					},
 				},
 				[h('i', { 'class': { "material-icons": true } }, "accessibility")]),
 			h('button',
 				{
 					on: { click: () => this.newGame("computer") },
 					attrs: { "aria-label": 'New game VS computer' },
-					'class': { "tooltip":true },
+					'class': {
+						"tooltip":true,
+						"playing": playingComp,
+					},
 				},
 				[h('i', { 'class': { "material-icons": true } }, "computer")])
 		];
@@ -329,6 +340,7 @@ Vue.component('my-game', {
 			else if (localStorage.getItem("newgame") === variant)
 			{
 				// New game request has been cancelled on disconnect
+				this.seek = true;
 				this.newGame("human");
 			}
 		};
@@ -370,7 +382,9 @@ Vue.component('my-game', {
 	methods: {
 		endGame: function(message) {
 			this.endofgame = message;
-			document.getElementById("modal-control").checked = true;
+			let modalBox = document.getElementById("modal-control");
+			modalBox.checked = true;
+			setTimeout(() => { modalBox.checked = false; }, 2000);
 			if (this.mode == "human")
 				this.clearStorage();
 			this.mode = "idle";
@@ -416,7 +430,9 @@ Vue.component('my-game', {
 				} catch (INVALID_STATE_ERR) {
 					return; //nothing achieved
 				}
-				document.getElementById("modal-control2").checked = true;
+				let modalBox = document.getElementById("modal-control2");
+				modalBox.checked = true;
+				setTimeout(() => { modalBox.checked = false; }, 2000);
 				return;
 			}
 			this.vr = new VariantRules(fen);
@@ -433,7 +449,8 @@ Vue.component('my-game', {
 				this.oppid = oppId;
 				this.oppConnected = true;
 				this.mycolor = color;
-				delete localStorage["newgame"]; //in case of
+				this.seek = false;
+				delete localStorage["newgame"];
 			}
 			else //against computer
 			{
diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass
index 7e99fa38..786d54e3 100644
--- a/public/stylesheets/variant.sass
+++ b/public/stylesheets/variant.sass
@@ -7,6 +7,12 @@
   background-color: lightgrey
   font-weight: bold
 
+.playing
+  background-color: #ffcc99
+
+.seek
+  background-color: #cc99ff
+
 // https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout
 figure.diagram-container > .diagram
   display: block