X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=021fa97873adbac2340c947c99634753674d14c6;hb=a897b421785af1c4e04f50995dca0f99da065ec6;hp=7b238f5c2b701f35c4c11f4c7cac1d4a149da244;hpb=9234226104764b91df9d677fb360ad538b98510c;p=vchess.git

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 7b238f5c..021fa978 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -17,8 +17,10 @@ Vue.component('my-game', {
 			fenStart: "",
 			incheck: [],
 			pgnTxt: "",
-			expert: (getCookie("expert") === "1" ? true : false),
-			gameId: "", //used to limit computer moves' time
+			hints: (getCookie("hints") === "1" ? true : false),
+			color: getCookie("color", "lichess"), //lichess, chesscom or chesstempo
+			// sound level: 0 = no sound, 1 = sound only on newgame, 2 = always
+			sound: getCookie("sound", "2"),
 		};
 	},
 	render(h) {
@@ -87,7 +89,10 @@ Vue.component('my-game', {
 			const squareWidth = !!square00
 				? parseFloat(window.getComputedStyle(square00).width.slice(0,-2))
 				: 0;
-			const indicWidth = (squareWidth>0 ? squareWidth/2 : 20);
+			const settingsBtnElt = document.getElementById("settingsBtn");
+			const indicWidth = !!settingsBtnElt //-2 for border:
+				? parseFloat(window.getComputedStyle(settingsBtnElt).height.slice(0,-2)) - 2
+				: 37; //TODO: always 37?
 			if (this.mode == "human")
 			{
 				let connectedIndic = h(
@@ -123,23 +128,24 @@ Vue.component('my-game', {
 				}
 			);
 			elementArray.push(turnIndic);
-			let expertSwitch = h(
+			let settingsBtn = h(
 				'button',
 				{
-					on: { click: this.toggleExpertMode },
-					attrs: { "aria-label": 'Toggle expert mode' },
+					on: { click: this.showSettings },
+					attrs: {
+						"aria-label": 'Settings',
+						"id": "settingsBtn",
+					},
 					'class': {
-						"tooltip":true,
+						"tooltip": true,
 						"topindicator": true,
 						"indic-right": true,
-						"expert-switch": true,
-						"expert-mode": this.expert,
-						"small": smallScreen,
+						"settings-btn": true,
 					},
 				},
-				[h('i', { 'class': { "material-icons": true } }, "visibility_off")]
+				[h('i', { 'class': { "material-icons": true } }, "settings")]
 			);
-			elementArray.push(expertSwitch);
+			elementArray.push(settingsBtn);
 			let choices = h('div',
 				{
 					attrs: { "id": "choices" },
@@ -211,7 +217,7 @@ Vue.component('my-game', {
 									)
 								);
 							}
-							if (!this.expert && hintSquares[ci][cj])
+							if (this.hints && hintSquares[ci][cj])
 							{
 								elems.push(
 									h(
@@ -228,7 +234,7 @@ Vue.component('my-game', {
 								);
 							}
 							const lm = this.vr.lastMove;
-							const showLight = !this.expert &&
+							const showLight = this.hints &&
 								(this.mode!="idle" || this.cursor==this.vr.moves.length);
 							return h(
 								'div',
@@ -238,6 +244,7 @@ Vue.component('my-game', {
 										['board'+sizeY]: true,
 										'light-square': (i+j)%2==0,
 										'dark-square': (i+j)%2==1,
+										[this.color]: true,
 										'highlight': showLight && !!lm && _.isMatch(lm.end, {x:ci,y:cj}),
 										'incheck': showLight && incheckSq[ci][cj],
 									},
@@ -428,6 +435,7 @@ Vue.component('my-game', {
 			];
 			elementArray = elementArray.concat(modalEog);
 		}
+		// TODO: next 3 modals in (pug) view directly?!
 		const modalNewgame = [
 			h('input',
 				{
@@ -534,6 +542,60 @@ Vue.component('my-game', {
 			)
 		];
 		elementArray = elementArray.concat(modalFenEdit);
+		const modalSettings = [
+			h('input',
+				{
+					attrs: { "id": "modal-settings", type: "checkbox" },
+					"class": { "modal": true },
+				}),
+			h('div',
+				{
+					attrs: { "role": "dialog", "aria-labelledby": "modal-settings" },
+				},
+				[
+					h('div',
+						{
+							"class": { "card": true, "smallpad": true },
+						},
+						[
+							h('label',
+								{
+									attrs: { "id": "close-settings", "for": "modal-settings" },
+									"class": { "modal-close": true },
+								}
+							),
+							h('h3',
+								{
+									"class": { "section": true },
+									domProps: { innerHTML: "Preferences" },
+								}
+							),
+							// https://minicss.org/docs#forms-and-input
+							h('input',
+								{
+									attrs: {
+										"id": "setHints",
+										type: "checkbox",
+										checked: this.hints,
+									},
+								}
+							),
+							h('label',
+								{
+									attrs: {
+										for: "setHints",
+									},
+									domProps: { innerHTML: "Show hints?" },
+								},
+							),
+							h('p', { domProps: { innerHTML: "TODO: board(color)" } }),
+							h('p', { domProps: { innerHTML: "TODO: sound(level)" } }),
+						]
+					)
+				]
+			)
+		];
+		elementArray = elementArray.concat(modalSettings);
 		const actions = h('div',
 			{
 				attrs: { "id": "actions" },
@@ -787,6 +849,14 @@ Vue.component('my-game', {
 			elt.style.visibility = "hidden";
 			setTimeout(() => { elt.style.visibility="visible"; }, 100);
 		},
+		showSettings: function(e) {
+			this.getRidOfTooltip(e.currentTarget);
+			document.getElementById("modal-settings").checked = true;
+		},
+		toggleHints: function() {
+			this.hints = !this.hints;
+			setCookie("hints", this.hints ? "1" : "0");
+		},
 		clickGameSeek: function(e) {
 			this.getRidOfTooltip(e.currentTarget);
 			if (this.mode == "human")
@@ -810,11 +880,6 @@ Vue.component('my-game', {
 			this.getRidOfTooltip(e.currentTarget);
 			document.getElementById("modal-fenedit").checked = true;
 		},
-		toggleExpertMode: function(e) {
-			this.getRidOfTooltip(e.currentTarget);
-			this.expert = !this.expert;
-			setCookie("expert", this.expert ? "1" : "0");
-		},
 		resign: function(e) {
 			this.getRidOfTooltip(e.currentTarget);
 			if (this.mode == "human" && this.oppConnected)
@@ -855,7 +920,6 @@ Vue.component('my-game', {
 				}
 				return;
 			}
-			this.gameId = getRandString();
 			this.vr = new VariantRules(fen, moves || []);
 			this.score = "*";
 			this.pgnTxt = ""; //redundant with this.score = "*", but cleaner
@@ -895,17 +959,6 @@ Vue.component('my-game', {
 		},
 		playComputerMove: function() {
 			const timeStart = Date.now();
-			// We use moves' count to know if search finished:
-			const nbMoves = this.vr.moves.length;
-			const gameId = this.gameId; //to know if game was reset before timer end
-			setTimeout(
-				() => {
-					if (gameId != this.gameId)
-						return; //game stopped
-					const L = this.vr.moves.length;
-					if (nbMoves == L || !this.vr.moves[L-1].notation) //move search didn't finish
-						this.vr.shouldReturn = true;
-				}, 5000);
 			const compMove = this.vr.getComputerMove();
 			// (first move) HACK: avoid selecting elements before they appear on page:
 			const delay = Math.max(500-(Date.now()-timeStart), 0);