X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=49db618860ff549af1a72f52e7eb88d21cdd3596;hb=7931e479adf93c87771ded1892a0873af72ae46d;hp=2da7ad050f2f92dfb1ed7f3de3eac5bb6cc35a31;hpb=b8a0ec4a8182967f25179f60ad9a4b989684d422;p=vchess.git

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 2da7ad05..49db6188 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -1,13 +1,14 @@
+// Game logic on a variant page
 Vue.component('my-game', {
 	data: function() {
 		return {
 			vr: null, //object to check moves, store them, FEN..
 			mycolor: "w",
 			possibleMoves: [], //filled after each valid click/dragstart
-			choices: [], //promotion pieces, or checkered captures... (contain possible pieces)
+			choices: [], //promotion pieces, or checkered captures... (as moves)
 			start: {}, //pixels coordinates + id of starting square (click or drag)
 			selectedPiece: null, //moving piece (or clicked piece)
-			conn: null, //socket messages
+			conn: null, //socket connection
 			score: "*", //'*' means 'unfinished'
 			mode: "idle", //human, friend, computer or idle (when not playing)
 			oppid: "", //opponent ID in case of HH game
@@ -16,13 +17,15 @@ 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: parseInt(getCookie("sound", "2")),
 		};
 	},
 	render(h) {
-		const [sizeX,sizeY] = VariantRules.size;
-		const smallScreen = (screen.width <= 500);
+		const [sizeX,sizeY] = [V.size.x,V.size.y];
+		const smallScreen = (window.innerWidth <= 420);
 		// Precompute hints squares to facilitate rendering
 		let hintSquares = doubleArray(sizeX, sizeY, false);
 		this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; });
@@ -86,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
+				: (smallScreen ? 31 : 37);
 			if (this.mode == "human")
 			{
 				let connectedIndic = h(
@@ -122,23 +128,25 @@ 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": !smallScreen,
+						"settings-btn-small": smallScreen,
 					},
 				},
-				[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" },
@@ -174,6 +182,9 @@ Vue.component('my-game', {
 				})
 			);
 			// Create board element (+ reserves if needed by variant or mode)
+			const lm = this.vr.lastMove;
+			const showLight = this.hints &&
+				(this.mode!="idle" || this.cursor==this.vr.moves.length);
 			let gameDiv = h('div',
 				{
 					'class': { 'game': true },
@@ -210,7 +221,7 @@ Vue.component('my-game', {
 									)
 								);
 							}
-							if (!this.expert && hintSquares[ci][cj])
+							if (this.hints && hintSquares[ci][cj])
 							{
 								elems.push(
 									h(
@@ -226,9 +237,6 @@ Vue.component('my-game', {
 									)
 								);
 							}
-							const lm = this.vr.lastMove;
-							const showLight = !this.expert &&
-								(this.mode!="idle" || this.cursor==this.vr.moves.length);
 							return h(
 								'div',
 								{
@@ -237,6 +245,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],
 									},
@@ -272,10 +281,12 @@ Vue.component('my-game', {
 				actionArray = actionArray.concat([
 					h('button',
 						{
-							style: { "margin-left": "30px" },
 							on: { click: e => this.undo() },
 							attrs: { "aria-label": 'Undo' },
-							"class": { "small": smallScreen },
+							"class": {
+								"small": smallScreen,
+								"marginleft": true,
+							},
 						},
 						[h('i', { 'class': { "material-icons": true } }, "fast_rewind")]),
 					h('button',
@@ -294,10 +305,12 @@ Vue.component('my-game', {
 				[
 					h('button',
 						{
-							style: { "margin-left": "30px" },
 							on: { click: this.undoInGame },
 							attrs: { "aria-label": 'Undo' },
-							"class": { "small": smallScreen },
+							"class": {
+								"small": smallScreen,
+								"marginleft": true,
+							},
 						},
 						[h('i', { 'class': { "material-icons": true } }, "undo")]
 					),
@@ -333,7 +346,7 @@ Vue.component('my-game', {
 							}
 						}),
 						h('sup',
-							{style: { "padding-left":"40%"} },
+							{"class": { "reserve-count": true } },
 							[ this.vr.reserve[this.mycolor][VariantRules.RESERVE_PIECES[i]] ]
 						)
 					]));
@@ -357,21 +370,25 @@ Vue.component('my-game', {
 							}
 						}),
 						h('sup',
-							{style: { "padding-left":"40%"} },
+							{"class": { "reserve-count": true } },
 							[ this.vr.reserve[oppCol][VariantRules.RESERVE_PIECES[i]] ]
 						)
 					]));
 				}
 				let reserves = h('div',
 					{
-						'class':{'game':true},
-						style: {"margin-bottom": "20px"},
+						'class':{
+							'game': true,
+							"reserve-div": true,
+						},
 					},
 					[
 						h('div',
 							{
-								'class': { 'row': true },
-								style: {"margin-bottom": "15px"},
+								'class': {
+									'row': true,
+									"reserve-row-1": true,
+								},
 							},
 							myReservePiecesArray
 						),
@@ -392,7 +409,7 @@ Vue.component('my-game', {
 					}),
 				h('div',
 					{
-						attrs: { "role": "dialog", "aria-labelledby": "modal-eog" },
+						attrs: { "role": "dialog", "aria-labelledby": "eogMessage" },
 					},
 					[
 						h('div',
@@ -408,6 +425,7 @@ Vue.component('my-game', {
 								),
 								h('h3',
 									{
+										attrs: { "id": "eogMessage" },
 										"class": { "section": true },
 										domProps: { innerHTML: eogMessage },
 									}
@@ -419,6 +437,7 @@ Vue.component('my-game', {
 			];
 			elementArray = elementArray.concat(modalEog);
 		}
+		// NOTE: this modal could be in Pug view (no usage of Vue functions or variables)
 		const modalNewgame = [
 			h('input',
 				{
@@ -427,7 +446,7 @@ Vue.component('my-game', {
 				}),
 			h('div',
 				{
-					attrs: { "role": "dialog", "aria-labelledby": "modal-newgame" },
+					attrs: { "role": "dialog", "aria-labelledby": "newGameTxt" },
 				},
 				[
 					h('div',
@@ -443,6 +462,7 @@ Vue.component('my-game', {
 							),
 							h('h3',
 								{
+									attrs: { "id": "newGameTxt" },
 									"class": { "section": true },
 									domProps: { innerHTML: "New game" },
 								}
@@ -467,7 +487,7 @@ Vue.component('my-game', {
 				}),
 			h('div',
 				{
-					attrs: { "role": "dialog", "aria-labelledby": "modal-fenedit" },
+					attrs: { "role": "dialog", "aria-labelledby": "titleFenedit" },
 				},
 				[
 					h('div',
@@ -483,6 +503,7 @@ Vue.component('my-game', {
 							),
 							h('h3',
 								{
+									attrs: { "id": "titleFenedit" },
 									"class": { "section": true },
 									domProps: { innerHTML: "Position + flags (FEN):" },
 								}
@@ -525,6 +546,155 @@ 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": "settingsTitle" },
+				},
+				[
+					h('div',
+						{
+							"class": { "card": true, "smallpad": true },
+						},
+						[
+							h('label',
+								{
+									attrs: { "id": "close-settings", "for": "modal-settings" },
+									"class": { "modal-close": true },
+								}
+							),
+							h('h3',
+								{
+									attrs: { "id": "settingsTitle" },
+									"class": { "section": true },
+									domProps: { innerHTML: "Preferences" },
+								}
+							),
+							h('fieldset',
+							  { },
+								[
+									//h('legend', { domProps: { innerHTML: "Legend title" } }),
+									h('label',
+										{
+											attrs: { for: "setHints" },
+											domProps: { innerHTML: "Show hints?" },
+										},
+									),
+									h('input',
+										{
+											attrs: {
+												"id": "setHints",
+												type: "checkbox",
+												checked: this.hints,
+											},
+											on: { "change": this.toggleHints },
+										}
+									),
+								]
+							),
+							h('fieldset',
+								{ },
+								[
+									h('label',
+										{
+											attrs: { for: "selectColor" },
+											domProps: { innerHTML: "Board colors" },
+										},
+									),
+									h("select",
+										{
+											attrs: { "id": "selectColor" },
+											on: { "change": this.setColor },
+										},
+										[
+											h("option",
+												{
+													domProps: {
+														"value": "lichess",
+														innerHTML: "brown"
+													},
+													attrs: { "selected": this.color=="lichess" },
+												}
+											),
+											h("option",
+												{
+													domProps: {
+														"value": "chesscom",
+														innerHTML: "green"
+													},
+													attrs: { "selected": this.color=="chesscom" },
+												}
+											),
+											h("option",
+												{
+													domProps: {
+														"value": "chesstempo",
+														innerHTML: "blue"
+													},
+													attrs: { "selected": this.color=="chesstempo" },
+												}
+											),
+										],
+									),
+								]
+							),
+							h('fieldset',
+								{ },
+								[
+									h('label',
+										{
+											attrs: { for: "selectSound" },
+											domProps: { innerHTML: "Play sounds?" },
+										},
+									),
+									h("select",
+										{
+											attrs: { "id": "selectSound" },
+											on: { "change": this.setSound },
+										},
+										[
+											h("option",
+												{
+													domProps: {
+														"value": "0",
+														innerHTML: "None"
+													},
+													attrs: { "selected": this.sound==0 },
+												}
+											),
+											h("option",
+												{
+													domProps: {
+														"value": "1",
+														innerHTML: "Newgame"
+													},
+													attrs: { "selected": this.sound==1 },
+												}
+											),
+											h("option",
+												{
+													domProps: {
+														"value": "2",
+														innerHTML: "All"
+													},
+													attrs: { "selected": this.sound==2 },
+												}
+											),
+										],
+									),
+								]
+							),
+						]
+					)
+				]
+			)
+		];
+		elementArray = elementArray.concat(modalSettings);
 		const actions = h('div',
 			{
 				attrs: { "id": "actions" },
@@ -537,7 +707,10 @@ Vue.component('my-game', {
 		{
 			elementArray.push(
 				h('div',
-					{ attrs: { id: "pgn-div" } },
+					{
+						attrs: { id: "pgn-div" },
+						"class": { "section-content": true },
+					},
 					[
 						h('a',
 							{
@@ -550,10 +723,16 @@ Vue.component('my-game', {
 						h('p',
 							{
 								attrs: { id: "pgn-game" },
-								on: { click: this.download },
 								domProps: { innerHTML: this.pgnTxt }
 							}
-						)
+						),
+						h('button',
+							{
+								attrs: { "id": "downloadBtn" },
+								on: { click: this.download },
+								domProps: { innerHTML: "Download game" },
+							}
+						),
 					]
 				)
 			);
@@ -563,7 +742,10 @@ Vue.component('my-game', {
 			// Show current FEN
 			elementArray.push(
 				h('div',
-					{ attrs: { id: "fen-div" } },
+					{
+						attrs: { id: "fen-div" },
+						"class": { "section-content": true },
+					},
 					[
 						h('p',
 							{
@@ -601,10 +783,11 @@ Vue.component('my-game', {
 	created: function() {
 		const url = socketUrl;
 		const continuation = (localStorage.getItem("variant") === variant);
-		this.myid = continuation ? localStorage.getItem("myid") : getRandString();
+		this.myid = (continuation ? localStorage.getItem("myid") : getRandString());
 		if (!continuation)
 		{
-			// HACK: play a small silent sound to allow "new game" sound later if tab not focused
+			// HACK: play a small silent sound to allow "new game" sound later
+			// if tab not focused (TODO: does it really work ?!)
 			new Audio("/sounds/silent.mp3").play().then(() => {}).catch(err => {});
 		}
 		this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant);
@@ -629,8 +812,15 @@ Vue.component('my-game', {
 			const data = JSON.parse(msg.data);
 			switch (data.code)
 			{
+				case "duplicate":
+					// We opened another tab on the same game
+					this.mode = "idle";
+					this.vr = null;
+					alert("Already playing a game in this variant on another tab!");
+					break;
 				case "newgame": //opponent found
-					this.newGame("human", data.fen, data.color, data.oppid); //oppid: opponent socket ID
+					// oppid: opponent socket ID
+					this.newGame("human", data.fen, data.color, data.oppid);
 					break;
 				case "newmove": //..he played!
 					this.play(data.move, "animate");
@@ -716,7 +906,8 @@ Vue.component('my-game', {
 			// 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();
 		},
 		endGame: function(score) {
@@ -775,6 +966,22 @@ 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");
+		},
+		setColor: function(e) {
+			this.color = e.target.options[e.target.selectedIndex].value;
+			setCookie("color", this.color);
+		},
+		setSound: function(e) {
+			this.sound = parseInt(e.target.options[e.target.selectedIndex].value);
+			setCookie("sound", this.sound);
+		},
 		clickGameSeek: function(e) {
 			this.getRidOfTooltip(e.currentTarget);
 			if (this.mode == "human")
@@ -798,11 +1005,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)
@@ -822,10 +1024,7 @@ Vue.component('my-game', {
 			{
 				const storageVariant = localStorage.getItem("variant");
 				if (!!storageVariant && storageVariant !== variant)
-				{
-					alert("Finish your " + storageVariant + " game first!");
-					return;
-				}
+					return alert("Finish your " + storageVariant + " game first!");
 				// Send game request and wait..
 				localStorage["newgame"] = variant;
 				this.seek = true;
@@ -843,7 +1042,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
@@ -853,14 +1051,14 @@ Vue.component('my-game', {
 			if (mode=="human")
 			{
 				// Opponent found!
-				if (!continuation)
+				if (!continuation) //not playing sound on game continuation
 				{
-					// Not playing sound on game continuation:
-					new Audio("/sounds/newgame.mp3").play().then(() => {}).catch(err => {});
+					if (this.sound >= 1)
+						new Audio("/sounds/newgame.mp3").play().then(() => {}).catch(err => {});
 					document.getElementById("modal-newgame").checked = false;
 				}
 				this.oppid = oppId;
-				this.oppConnected = true;
+				this.oppConnected = !continuation;
 				this.mycolor = color;
 				this.seek = false;
 				if (!!moves && moves.length > 0) //imply continuation
@@ -883,20 +1081,13 @@ Vue.component('my-game', {
 		},
 		playComputerMove: function() {
 			const timeStart = Date.now();
-			const nbMoves = this.vr.moves.length; //using played moves to know if search finished
-			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);
-			setTimeout(() => this.play(compMove, "animate"), delay);
+			setTimeout(() => {
+				if (this.mode == "computer") //Warning: mode could have changed!
+					this.play(compMove, "animate")
+			}, delay);
 		},
 		// Get the identifier of a HTML table cell from its numeric coordinates o.x,o.y.
 		getSquareId: function(o) {
@@ -942,7 +1133,8 @@ Vue.component('my-game', {
 				const iCanPlay = this.mode!="idle"
 					&& (this.mode=="friend" || this.vr.canIplay(this.mycolor,startSquare));
 				this.possibleMoves = iCanPlay ? this.vr.getPossibleMovesFrom(startSquare) : [];
-				// Next line add moving piece just after current image (required for Crazyhouse reserve)
+				// Next line add moving piece just after current image
+				// (required for Crazyhouse reserve)
 				e.target.parentNode.insertBefore(this.selectedPiece, e.target.nextSibling);
 			}
 		},
@@ -965,16 +1157,20 @@ Vue.component('my-game', {
 				return;
 			e = e || window.event;
 			// Read drop target (or parentElement, parentNode... if type == "img")
-			this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coordinates
+			this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coords
 			const [offsetX,offsetY] = !!e.clientX
 				? [e.clientX,e.clientY]
 				: [e.changedTouches[0].pageX, e.changedTouches[0].pageY];
 			let landing = document.elementFromPoint(offsetX, offsetY);
 			this.selectedPiece.style.zIndex = 3000;
-			while (landing.tagName == "IMG") //classList.contains(piece) fails because of mark/highlight
+			// Next condition: classList.contains(piece) fails because of marks
+			while (landing.tagName == "IMG")
 				landing = landing.parentNode;
-			if (this.start.id == landing.id) //a click: selectedPiece and possibleMoves already filled
+			if (this.start.id == landing.id)
+			{
+				// A click: selectedPiece and possibleMoves are already filled
 				return;
+			}
 			// OK: process move attempt
 			let endSquare = this.getSquareFromId(landing.id);
 			let moves = this.findMatchingMoves(endSquare);
@@ -1005,7 +1201,7 @@ Vue.component('my-game', {
 			let translation = {x:rectEnd.x-rectStart.x, y:rectEnd.y-rectStart.y};
 			let movingPiece =
 				document.querySelector("#" + this.getSquareId(move.start) + " > img.piece");
-			// HACK for animation (with positive translate, image slides "under background"...)
+			// HACK for animation (with positive translate, image slides "under background")
 			// Possible improvement: just alter squares on the piece's way...
 			squares = document.getElementsByClassName("board");
 			for (let i=0; i<squares.length; i++)
@@ -1014,7 +1210,8 @@ Vue.component('my-game', {
 				if (square.id != this.getSquareId(move.start))
 					square.style.zIndex = "-1";
 			}
-			movingPiece.style.transform = "translate(" + translation.x + "px," + translation.y + "px)";
+			movingPiece.style.transform = "translate(" + translation.x + "px," +
+				translation.y + "px)";
 			movingPiece.style.transitionDuration = "0.2s";
 			movingPiece.style.zIndex = "3000";
 			setTimeout( () => {
@@ -1040,7 +1237,8 @@ Vue.component('my-game', {
 			// Not programmatic, or animation is over
 			if (this.mode == "human" && this.vr.turn == this.mycolor)
 				this.conn.send(JSON.stringify({code:"newmove", move:move, oppid:this.oppid}));
-			new Audio("/sounds/chessmove1.mp3").play().then(() => {}).catch(err => {});
+			if (this.sound == 2)
+				new Audio("/sounds/chessmove1.mp3").play().then(() => {}).catch(err => {});
 			if (this.mode != "idle")
 			{
 				this.incheck = this.vr.getCheckSquares(move); //is opponent in check?