X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=11f99b0191840eec6416f8dfd3bf4b78487d438f;hb=e64084dac6a278439e407733c69c324b8282900a;hp=04185a7835e8cb10c84fa6190af25846f3f1b013;hpb=b204a262a8a87f41aea79d3d13e6b907bedbcec4;p=vchess.git

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 04185a78..11f99b01 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -239,6 +239,34 @@ 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' },
+							'class': {
+								"tooltip":true,
+								"bottom": true,
+							},
+						},
+						[h('i', { 'class': { "material-icons": true } }, "fast_rewind")]),
+					h('button',
+						{
+							on: { click: e => this.play() },
+							attrs: { "aria-label": 'Play' },
+							'class': {
+								"tooltip":true,
+								"bottom": true,
+							},
+						},
+						[h('i', { 'class': { "material-icons": true } }, "fast_forward")]),
+					]
+				);
+			}
 			elementArray.push(gameDiv);
 			if (!!this.vr.reserve)
 			{
@@ -413,9 +441,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() }
 							}
 						)
 					]
@@ -432,14 +475,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,
-//					touchstart: this.mousedown, //TODO...
-//					touchmove: this.mousemove,
-//					touchend: this.mouseup,
+					touchstart: this.mousedown,
+					touchmove: this.mousemove,
+					touchend: this.mouseup,
 				},
 			},
 			elementArray
@@ -547,6 +590,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() {
@@ -568,6 +623,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) {
@@ -779,8 +835,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) {
@@ -789,7 +848,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;
@@ -845,6 +907,13 @@ 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);
@@ -855,14 +924,28 @@ Vue.component('my-game', {
 			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.vr.play(move, "ingame");
+			else
+				VariantRules.PlayOnBoard(this.vr.board, move);
 			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
+			const move = this.vr.moves[--this.cursor];
+			VariantRules.UndoOnBoard(this.vr.board, move);
+			this.$forceUpdate(); //TODO: ?!
+		}
 	},
 })