X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=072025502261cde928ec4073c254e28a56d886bf;hb=ea6bb36e86f23f1046d3d1dd03cfb46d598f97f7;hp=86f252106991c911a48f57740d9278d1a0b7a359;hpb=efb20746c30ac26f258f9c5de6dfb70b91980de4;p=vchess.git

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 86f25210..07202550 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -16,7 +16,7 @@ Vue.component('my-game', {
 			fenStart: "",
 			incheck: [],
 			pgnTxt: "",
-			expert: document.cookie.length>0 ? document.cookie.substr(-1)=="1" : false,
+			expert: getCookie("expert") === "1" ? true : false,
 			gameId: "", //used to limit computer moves' time
 		};
 	},
@@ -202,17 +202,18 @@ Vue.component('my-game', {
 								);
 							}
 							const lm = this.vr.lastMove;
-							const highlight = !!lm && _.isMatch(lm.end, {x:ci,y:cj});
+							const showLight = !this.expert &&
+								(this.mode!="idle" || this.cursor==this.vr.moves.length);
 							return h(
 								'div',
 								{
 									'class': {
 										'board': true,
 										['board'+sizeY]: true,
-										'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],
+										'light-square': (i+j)%2==0,
+										'dark-square': (i+j)%2==1,
+										'highlight': showLight && !!lm && _.isMatch(lm.end, {x:ci,y:cj}),
+										'incheck': showLight && incheckSq[ci][cj],
 									},
 									attrs: {
 										id: this.getSquareId({x:ci,y:cj}),
@@ -239,24 +240,98 @@ Vue.component('my-game', {
 						[h('i', { 'class': { "material-icons": true } }, "flag")])
 				);
 			}
+			else if (this.vr.moves.length > 0)
+			{
+				// A game finished, and another is not started yet: allow navigation
+				actionArray = actionArray.concat([
+					h('button',
+						{
+							style: { "margin-left": "30px" },
+							on: { click: e => this.undo() },
+							attrs: { "aria-label": 'Undo' },
+						},
+						[h('i', { 'class': { "material-icons": true } }, "fast_rewind")]),
+					h('button',
+						{
+							on: { click: e => this.play() },
+							attrs: { "aria-label": 'Play' },
+						},
+						[h('i', { 'class': { "material-icons": true } }, "fast_forward")]),
+					]
+				);
+			}
 			elementArray.push(gameDiv);
-	//			if (!!vr.reserve)
-	//			{
-	//				let reserve = h('div',
-	//					{'class':{'game':true}}, [
-	//						h('div',
-	//							{ 'class': { 'row': true }},
-	//							[
-	//								h('div',
-	//									{'class':{'board':true}},
-	//									[h('img',{'class':{"piece":true},attrs:{"src":"/images/pieces/wb.svg"}})]
-	//								)
-	//							]
-	//						)
-	//					],
-	//				);
-	//				elementArray.push(reserve);
-	//			}
+			if (!!this.vr.reserve)
+			{
+				const shiftIdx = (this.mycolor=="w" ? 0 : 1);
+				let myReservePiecesArray = [];
+				for (let i=0; i<VariantRules.RESERVE_PIECES.length; i++)
+				{
+					myReservePiecesArray.push(h('div',
+					{
+						'class': {'board':true, ['board'+sizeY]:true},
+						attrs: { id: this.getSquareId({x:sizeX+shiftIdx,y:i}) }
+					},
+					[
+						h('img',
+						{
+							'class': {"piece":true},
+							attrs: {
+								"src": "/images/pieces/" +
+									this.vr.getReservePpath(this.mycolor,i) + ".svg",
+							}
+						}),
+						h('sup',
+							{style: { "padding-left":"40%"} },
+							[ this.vr.reserve[this.mycolor][VariantRules.RESERVE_PIECES[i]] ]
+						)
+					]));
+				}
+				let oppReservePiecesArray = [];
+				const oppCol = this.vr.getOppCol(this.mycolor);
+				for (let i=0; i<VariantRules.RESERVE_PIECES.length; i++)
+				{
+					oppReservePiecesArray.push(h('div',
+					{
+						'class': {'board':true, ['board'+sizeY]:true},
+						attrs: { id: this.getSquareId({x:sizeX+(1-shiftIdx),y:i}) }
+					},
+					[
+						h('img',
+						{
+							'class': {"piece":true},
+							attrs: {
+								"src": "/images/pieces/" +
+									this.vr.getReservePpath(oppCol,i) + ".svg",
+							}
+						}),
+						h('sup',
+							{style: { "padding-left":"40%"} },
+							[ this.vr.reserve[oppCol][VariantRules.RESERVE_PIECES[i]] ]
+						)
+					]));
+				}
+				let reserves = h('div',
+					{
+						'class':{'game':true},
+						style: {"margin-bottom": "20px"},
+					},
+					[
+						h('div',
+							{
+								'class': { 'row': true },
+								style: {"margin-bottom": "15px"},
+							},
+							myReservePiecesArray
+						),
+						h('div',
+							{ 'class': { 'row': true }},
+							oppReservePiecesArray
+						)
+					]
+				);
+				elementArray.push(reserves);
+			}
 			const eogMessage = this.getEndgameMessage(this.score);
 			const modalEog = [
 				h('input',
@@ -266,7 +341,7 @@ Vue.component('my-game', {
 					}),
 				h('div',
 					{
-						attrs: { "role": "dialog", "aria-labelledby": "dialog-title" },
+						attrs: { "role": "dialog", "aria-labelledby": "modal-eog" },
 					},
 					[
 						h('div',
@@ -301,7 +376,7 @@ Vue.component('my-game', {
 				}),
 			h('div',
 				{
-					attrs: { "role": "dialog", "aria-labelledby": "dialog-title" },
+					attrs: { "role": "dialog", "aria-labelledby": "modal-newgame" },
 				},
 				[
 					h('div',
@@ -359,9 +434,24 @@ Vue.component('my-game', {
 							{
 								attrs: { id: "pgn-game" },
 								on: { click: this.download },
-								domProps: {
-									innerHTML: this.pgnTxt
-								}
+								domProps: { innerHTML: this.pgnTxt }
+							}
+						)
+					]
+				)
+			);
+		}
+		else if (this.mode != "idle")
+		{
+			// Show current FEN (at least for debug)
+			elementArray.push(
+				h('div',
+					{ attrs: { id: "fen-div" } },
+					[
+						h('p',
+							{
+								attrs: { id: "fen-string" },
+								domProps: { innerHTML: this.vr.getBaseFen() }
 							}
 						)
 					]
@@ -378,14 +468,14 @@ Vue.component('my-game', {
 					"col-lg-6":true,
 					"col-lg-offset-3":true,
 				},
-				// NOTE: click = mousedown + mouseup --> what about smartphone?!
+				// NOTE: click = mousedown + mouseup
 				on: {
 					mousedown: this.mousedown,
 					mousemove: this.mousemove,
 					mouseup: this.mouseup,
-					touchdown: this.mousedown,
+					touchstart: this.mousedown,
 					touchmove: this.mousemove,
-					touchup: this.mouseup,
+					touchend: this.mouseup,
 				},
 			},
 			elementArray
@@ -394,10 +484,7 @@ Vue.component('my-game', {
 	created: function() {
 		const url = socketUrl;
 		const continuation = (localStorage.getItem("variant") === variant);
-		this.myid = continuation
-			? localStorage.getItem("myid")
-			// random enough (TODO: function)
-			: (Date.now().toString(36) + Math.random().toString(36).substr(2, 7)).toUpperCase();
+		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
@@ -418,7 +505,6 @@ Vue.component('my-game', {
 			else if (localStorage.getItem("newgame") === variant)
 			{
 				// New game request has been cancelled on disconnect
-				this.seek = true;
 				this.newGame("human", undefined, undefined, undefined, undefined, "reconnect");
 			}
 		};
@@ -493,6 +579,18 @@ Vue.component('my-game', {
 		this.conn.onopen = socketOpenListener;
 		this.conn.onmessage = socketMessageListener;
 		this.conn.onclose = socketCloseListener;
+		// Listen to keyboard left/right to navigate in game
+		document.onkeydown = event => {
+			if (this.mode == "idle" && this.vr.moves.length > 0
+				&& [37,39].includes(event.keyCode))
+			{
+				event.preventDefault();
+				if (event.keyCode == 37) //Back
+					this.undo();
+				else //Forward (39)
+					this.play();
+			}
+		};
 	},
 	methods: {
 		download: function() {
@@ -514,6 +612,7 @@ Vue.component('my-game', {
 			if (this.mode == "human")
 				this.clearStorage();
 			this.mode = "idle";
+			this.cursor = this.vr.moves.length; //to navigate in finished game
 			this.oppid = "";
 		},
 		getEndgameMessage: function(score) {
@@ -532,21 +631,6 @@ 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)
-			{
-				try {
-					this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid}));
-				} catch (INVALID_STATE_ERR) {
-					return; //socket is not ready (and not yet reconnected)
-				}
-			}
-			this.endGame(this.mycolor=="w"?"0-1":"1-0");
-		},
 		setStorage: function() {
 			localStorage.setItem("myid", this.myid);
 			localStorage.setItem("variant", variant);
@@ -569,26 +653,49 @@ Vue.component('my-game', {
 			delete localStorage["fen"];
 			delete localStorage["moves"];
 		},
-		clickGameSeek: function() {
+		// HACK because mini-css tooltips are persistent after click...
+		getRidOfTooltip: function(elt) {
+			elt.style.visibility = "hidden";
+			setTimeout(() => { elt.style.visibility="visible"; }, 100);
+		},
+		clickGameSeek: function(e) {
+			this.getRidOfTooltip(e.currentTarget);
 			if (this.mode == "human")
 				return; //no newgame while playing
 			if (this.seek)
 			{
+				this.conn.send(JSON.stringify({code:"cancelnewgame"}));
 				delete localStorage["newgame"]; //cancel game seek
 				this.seek = false;
 			}
 			else
 				this.newGame("human");
 		},
-		clickComputerGame: function() {
+		clickComputerGame: function(e) {
+			this.getRidOfTooltip(e.currentTarget);
 			if (this.mode == "human")
 				return; //no newgame while playing
 			this.newGame("computer");
 		},
+		toggleExpertMode: function(e) {
+			this.getRidOfTooltip(e.currentTarget);
+			this.expert = !this.expert;
+			setCookie("expert", this.expert ? "1" : "0");
+		},
+		resign: function() {
+			if (this.mode == "human" && this.oppConnected)
+			{
+				try {
+					this.conn.send(JSON.stringify({code: "resign", oppid: this.oppid}));
+				} catch (INVALID_STATE_ERR) {
+					return; //socket is not ready (and not yet reconnected)
+				}
+			}
+			this.endGame(this.mycolor=="w"?"0-1":"1-0");
+		},
 		newGame: function(mode, fenInit, color, oppId, moves, continuation) {
 			const fen = fenInit || VariantRules.GenRandInitFen();
 			console.log(fen); //DEBUG
-			this.score = "*";
 			if (mode=="human" && !oppId)
 			{
 				const storageVariant = localStorage.getItem("variant");
@@ -614,9 +721,9 @@ Vue.component('my-game', {
 				}
 				return;
 			}
-			// random enough (TODO: function)
-			this.gameId = (Date.now().toString(36) + Math.random().toString(36).substr(2, 7)).toUpperCase();
+			this.gameId = getRandString();
 			this.vr = new VariantRules(fen, moves || []);
+			this.score = "*";
 			this.pgnTxt = ""; //redundant with this.score = "*", but cleaner
 			this.mode = mode;
 			this.incheck = []; //in case of
@@ -682,6 +789,19 @@ Vue.component('my-game', {
 		},
 		mousedown: function(e) {
 			e = e || window.event;
+			let ingame = false;
+			let elem = e.target;
+			while (!ingame && elem !== null)
+			{
+				if (elem.classList.contains("game"))
+				{
+					ingame = true;
+					break;
+				}
+				elem = elem.parentElement;
+			}
+			if (!ingame) //let default behavior (click on button...)
+				return;
 			e.preventDefault(); //disable native drag & drop
 			if (!this.selectedPiece && e.target.classList.contains("piece"))
 			{
@@ -701,7 +821,8 @@ Vue.component('my-game', {
 				this.possibleMoves = this.mode!="idle" && this.vr.canIplay(this.mycolor,startSquare)
 					? this.vr.getPossibleMovesFrom(startSquare)
 					: [];
-				e.target.parentNode.appendChild(this.selectedPiece);
+				// Next line add moving piece just after current image (required for Crazyhouse reserve)
+				e.target.parentNode.insertBefore(this.selectedPiece, e.target.nextSibling);
 			}
 		},
 		mousemove: function(e) {
@@ -711,8 +832,11 @@ Vue.component('my-game', {
 			// If there is an active element, move it around
 			if (!!this.selectedPiece)
 			{
-				this.selectedPiece.style.left = (e.clientX-this.start.x) + "px";
-				this.selectedPiece.style.top = (e.clientY-this.start.y) + "px";
+				const [offsetX,offsetY] = !!e.clientX
+					? [e.clientX,e.clientY] //desktop browser
+					: [e.changedTouches[0].pageX, e.changedTouches[0].pageY]; //smartphone
+				this.selectedPiece.style.left = (offsetX-this.start.x) + "px";
+				this.selectedPiece.style.top = (offsetY-this.start.y) + "px";
 			}
 		},
 		mouseup: function(e) {
@@ -721,7 +845,10 @@ Vue.component('my-game', {
 			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
-			let landing = document.elementFromPoint(e.clientX, e.clientY);
+			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
 				landing = landing.parentNode;
@@ -777,24 +904,52 @@ Vue.component('my-game', {
 			}, 200);
 		},
 		play: function(move, programmatic) {
+			if (!move)
+			{
+				// Navigate after game is over
+				if (this.cursor >= this.vr.moves.length)
+					return; //already at the end
+				move = this.vr.moves[this.cursor++];
+			}
 			if (!!programmatic) //computer or human opponent
 			{
 				this.animateMove(move);
 				return;
 			}
-			this.incheck = this.vr.getCheckSquares(move); //is opponent in check?
 			// 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 => {});
-			this.vr.play(move, "ingame");
+			if (this.mode != "idle")
+			{
+				this.incheck = this.vr.getCheckSquares(move); //is opponent in check?
+				this.vr.play(move, "ingame");
+			}
+			else
+			{
+				VariantRules.PlayOnBoard(this.vr.board, move);
+				this.$forceUpdate(); //TODO: ?!
+			}
 			if (this.mode == "human")
 				this.updateStorage(); //after our moves and opponent moves
-			const eog = this.vr.checkGameOver();
-			if (eog != "*")
-				this.endGame(eog);
-			else if (this.mode == "computer" && this.vr.turn != this.mycolor)
+			if (this.mode != "idle")
+			{
+				const eog = this.vr.checkGameOver();
+				if (eog != "*")
+					this.endGame(eog);
+			}
+			if (this.mode == "computer" && this.vr.turn != this.mycolor)
 				setTimeout(this.playComputerMove, 500);
 		},
+		undo: function() {
+			// Navigate after game is over
+			if (this.cursor == 0)
+				return; //already at the beginning
+			if (this.cursor == this.vr.moves.length)
+				this.incheck = []; //in case of...
+			const move = this.vr.moves[--this.cursor];
+			VariantRules.UndoOnBoard(this.vr.board, move);
+			this.$forceUpdate(); //TODO: ?!
+		}
 	},
 })