From: Benjamin Auder <benjamin.auder@somewhere>
Date: Mon, 19 Nov 2018 15:28:40 +0000 (+0100)
Subject: Add expert mode
X-Git-Url: https://git.auder.net/game/doc/html/index.html?a=commitdiff_plain;h=3ed62725fe47e395793cf952403d61fc9f347eee;p=vchess.git

Add expert mode
---

diff --git a/TODO b/TODO
index ebfc70e5..314c0c72 100644
--- a/TODO
+++ b/TODO
@@ -1,2 +1 @@
 PGN text is not selectable on desktop computer (understand why?!)
-Mode expert: game.js, button on top (with online indicator)
diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 829beaad..40035a5f 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -16,6 +16,7 @@ Vue.component('my-game', {
 			seek: false,
 			fenStart: "",
 			incheck: [],
+			expert: document.cookie.length>0 ? document.cookie.substr(-1)=="1" : false,
 		};
 	},
 	render(h) {
@@ -96,6 +97,22 @@ Vue.component('my-game', {
 				}
 			);
 			elementArray.push(turnIndic);
+			let expertSwitch = h(
+				'button',
+				{
+					on: { click: this.toggleExpertMode },
+					attrs: { "aria-label": 'Toggle expert mode' },
+					'class': {
+						"tooltip":true,
+						"topindicator": true,
+						"indic-right": true,
+						"expert-switch": true,
+						"expert-mode": this.expert,
+					},
+				},
+				[h('i', { 'class': { "material-icons": true } }, "remove_red_eye")]
+			);
+			elementArray.push(expertSwitch);
 			let choices = h('div',
 				{
 					attrs: { "id": "choices" },
@@ -161,7 +178,7 @@ Vue.component('my-game', {
 									)
 								);
 							}
-							if (hintSquares[ci][cj])
+							if (!this.expert && hintSquares[ci][cj])
 							{
 								elems.push(
 									h(
@@ -184,10 +201,10 @@ Vue.component('my-game', {
 								{
 									'class': {
 										'board': true,
-										'light-square': !highlight && (i+j)%2==0,
-										'dark-square': !highlight && (i+j)%2==1,
-										'highlight': highlight,
-										'incheck': incheckSq[ci][cj],
+										'light-square': (i+j)%2==0 && (this.expert || !highlight),
+										'dark-square': (i+j)%2==1 && (this.expert || !highlight),
+										'highlight': !this.expert && highlight,
+										'incheck': !this.expert && incheckSq[ci][cj],
 									},
 									attrs: {
 										id: this.getSquareId({x:ci,y:cj}),
@@ -479,6 +496,10 @@ Vue.component('my-game', {
 			}
 			return eogMessage;
 		},
+		toggleExpertMode: function() {
+			this.expert = !this.expert;
+			document.cookie = "expert=" + (this.expert ? "1" : "0");
+		},
 		resign: function() {
 			if (this.mode == "human" && this.oppConnected)
 			{
diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass
index 495f4cab..39fb80bf 100644
--- a/public/stylesheets/variant.sass
+++ b/public/stylesheets/variant.sass
@@ -53,6 +53,12 @@ figure.diagram-container > .diagram
 .disconnected
   background-color: red
 
+.expert-switch
+  padding: 5px 10px
+
+.expert-mode, button.expert-mode:hover
+  background-color: #ffcc99
+
 .white-turn
   background-color: white