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

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index 11f99b01..1178b64a 100644
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -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}),
@@ -248,20 +249,12 @@ Vue.component('my-game', {
 							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")]),
 					]
@@ -348,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',
@@ -383,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',
@@ -515,7 +508,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");
 			}
 		};
@@ -642,21 +634,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);
@@ -679,7 +656,13 @@ 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)
@@ -690,15 +673,31 @@ Vue.component('my-game', {
 			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;
+			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");
+		},
 		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");
@@ -727,6 +726,7 @@ Vue.component('my-game', {
 			// random enough (TODO: function)
 			this.gameId = (Date.now().toString(36) + Math.random().toString(36).substr(2, 7)).toUpperCase();
 			this.vr = new VariantRules(fen, moves || []);
+			this.score = "*";
 			this.pgnTxt = ""; //redundant with this.score = "*", but cleaner
 			this.mode = mode;
 			this.incheck = []; //in case of
@@ -919,15 +919,20 @@ Vue.component('my-game', {
 				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 => {});
 			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
 			if (this.mode != "idle")
@@ -943,6 +948,8 @@ Vue.component('my-game', {
 			// 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: ?!