X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBaseGame.vue;h=3d8e7eb9d26465dab61785ecbfdd6e0f919b4ac7;hb=c1e3a8fd50e2ea1cf6652478744e354e812ec1bd;hp=572c80ad4e018606c79467e56c8ff48c3c1e9295;hpb=af34341d92d47d14f396e7f4adb81f2a7e9d9a61;p=vchess.git diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index 572c80ad..3d8e7eb9 100644 --- a/client/src/components/BaseGame.vue +++ b/client/src/components/BaseGame.vue @@ -14,7 +14,7 @@ div#baseGame ref="board" :vr="vr" :last-move="lastMove" - :analyze="game.mode=='analyze'" + :analyze="mode=='analyze'" :score="game.score" :user-color="game.mycolor" :orientation="orientation" @@ -40,6 +40,7 @@ div#baseGame img.inline(src="/images/icons/play.svg") button(@click="gotoEnd()") img.inline(src="/images/icons/fast-forward.svg") + p#fenAnalyze(v-show="showFen") {{ (!!vr ? vr.getFen() : "") }} #movesList MoveList( :show="showMoves" @@ -52,7 +53,7 @@ div#baseGame :cursor="cursor" @download="download" @showrules="showRules" - @analyze="analyzePosition" + @analyze="toggleAnalyze" @goto-move="gotoMove" @reset-arrows="resetArrows" ) @@ -84,6 +85,7 @@ export default { vr: null, //VariantRules object, game state endgameMessage: "", orientation: "w", + mode: "", score: "*", //'*' means 'unfinished' moves: [], cursor: -1, //index of the move just played @@ -92,7 +94,6 @@ export default { incheck: [], //for Board inMultimove: false, autoplay: false, - autoplayLoop: null, inPlay: false, stackToPlay: [] }; @@ -111,6 +112,12 @@ export default { : "" ); }, + showFen: function() { + return ( + this.mode == "analyze" && + this.$router.currentRoute.path.indexOf("/analyse") === -1 + ); + }, // TODO: is it OK to pass "computed" as properties? // Also, some are seemingly not recomputed when vr is initialized. showMoves: function() { @@ -156,7 +163,8 @@ export default { .addEventListener("click", processModalClick); }, beforeDestroy: function() { - if (!!this.autoplayLoop) clearInterval(this.autoplayLoop); + // TODO: probably not required + this.autoplay = false; }, methods: { focusBg: function() { @@ -192,14 +200,15 @@ export default { this.$refs["board"].cancelResetArrows(); }, showRules: function() { - //this.$router.push("/variants/" + this.game.vname); - window.open("#/variants/" + this.game.vname, "_blank"); //better + // The button is here only on Game page: + document.getElementById("modalRules").checked = true; }, re_setVariables: function(game) { if (!game) game = this.game; //in case of... this.endgameMessage = ""; // "w": default orientation for observed games this.orientation = game.mycolor || "w"; + this.mode = game.mode || game.type; //TODO: merge... this.moves = JSON.parse(JSON.stringify(game.moves || [])); // Post-processing: decorate each move with notation and FEN this.vr = new V(game.fenStart); @@ -207,6 +216,10 @@ export default { const firstMoveColor = parsedFen.turn; this.firstMoveNumber = Math.floor(parsedFen.movesCount / 2) + 1; let L = this.moves.length; + if (L == 0) { + this.incheck = []; + this.score = "*"; + } this.moves.forEach((move,idx) => { // Strategy working also for multi-moves: if (!Array.isArray(move)) move = [move]; @@ -217,10 +230,11 @@ export default { this.vr.play(m); const checkSquares = this.vr.getCheckSquares(); if (checkSquares.length > 0) m.notation += "+"; + if (idxM == Lm - 1) m.fen = this.vr.getFen(); if (idx == L - 1 && idxM == Lm - 1) { this.incheck = checkSquares; - const score = this.vr.getCurrentScore(); - if (["1-0", "0-1"].includes(score)) m.notation += "#"; + this.score = this.vr.getCurrentScore(); + if (["1-0", "0-1"].includes(this.score)) m.notation += "#"; } }); }); @@ -243,14 +257,32 @@ export default { if (index >= 0) this.lastMove = this.moves[index]; else this.lastMove = null; }, - analyzePosition: function() { - let newUrl = - "/analyse/" + - this.game.vname + - "/?fen=" + - this.vr.getFen().replace(/ /g, "_"); - if (!!this.game.mycolor) newUrl += "&side=" + this.game.mycolor; - window.open("#" + newUrl); + toggleAnalyze: function() { + if (this.mode != "analyze") { + // Enter analyze mode: + this.gameMode = this.mode; //was not 'analyze' + this.mode = "analyze"; + this.gameCursor = this.cursor; + this.gameMoves = JSON.parse(JSON.stringify(this.moves)); + document.getElementById("analyzeBtn").classList.add("active"); + } + else { + // Exit analyze mode: + this.mode = this.gameMode ; + this.cursor = this.gameCursor; + this.moves = this.gameMoves; + let fen = this.game.fenStart; + if (this.cursor >= 0) { + let mv = this.moves[this.cursor]; + if (!Array.isArray(mv)) mv = [mv]; + fen = mv[mv.length-1].fen; + } + this.vr = new V(fen); + this.incheck = this.vr.getCheckSquares(); + if (this.cursor >= 0) this.lastMove = this.moves[this.cursor]; + else this.lastMove = null; + document.getElementById("analyzeBtn").classList.remove("active"); + } }, download: function() { const content = this.getPgn(); @@ -305,32 +337,15 @@ export default { document.getElementById("modalEog").checked = true; }, runAutoplay: function() { - const infinitePlay = () => { - if (this.cursor == this.moves.length - 1) { - clearInterval(this.autoplayLoop); - this.autoplayLoop = null; - this.autoplay = false; - return; - } - if (this.inPlay || this.inMultimove) - // Wait next tick - return; - this.play(); - }; if (this.autoplay) { this.autoplay = false; - clearInterval(this.autoplayLoop); - this.autoplayLoop = null; - } else { + if (this.stackToPlay.length > 0) + // Move(s) arrived in-between + this.play(this.stackToPlay.pop(), "received"); + } + else if (this.cursor < this.moves.length - 1) { this.autoplay = true; - setTimeout( - () => { - infinitePlay(); - this.autoplayLoop = setInterval(infinitePlay, 1500); - }, - // Small delay otherwise the first move is played too fast - 500 - ); + this.play(null, null, null, "autoplay"); } }, // Animate an elementary move @@ -389,25 +404,42 @@ export default { if (!!move) this.play(move); }, // "light": if gotoMove() or gotoEnd() - play: function(move, received, light, noemit) { + play: function(move, received, light, autoplay) { // Freeze while choices are shown: if (this.$refs["board"].choices.length > 0) return; - // The board may show some the possible moves: (TODO: bad solution) - this.$refs["board"].resetCurrentAttempt(); - if (!!noemit) { - if (this.inPlay) { - // Received moves in observed games can arrive too fast: + const navigate = !move; + // Forbid navigation during autoplay: + if (navigate && this.autoplay && !autoplay) return; + // Forbid playing outside analyze mode, except if move is received. + // Sufficient condition because Board already knows which turn it is. + if ( + this.mode != "analyze" && + !navigate && + !received && + (this.game.score != "*" || this.cursor < this.moves.length - 1) + ) { + return; + } + if (!!received) { + if (this.autoplay || this.inPlay) { + // Received moves while autoplaying are stacked, + // and in observed games they could arrive too fast: this.stackToPlay.unshift(move); return; } this.inPlay = true; + if (this.mode == "analyze") this.toggleAnalyze(); + if (this.cursor < this.moves.length - 1) + // To play a received move, cursor must be at the end of the game: + this.gotoEnd(); } - const navigate = !move; + // The board may show some the possible moves: (TODO: bad solution) + this.$refs["board"].resetCurrentAttempt(); const playSubmove = (smove) => { smove.notation = this.vr.getNotation(smove); smove.unambiguous = V.GetUnambiguousNotation(smove); this.vr.play(smove); - if (!!this.lastMove) { + if (this.inMultimove && !!this.lastMove) { if (!Array.isArray(this.lastMove)) this.lastMove = [this.lastMove, smove]; else this.lastMove.push(smove); @@ -450,8 +482,7 @@ export default { if (animate && smove.start.x >= 0) { self.animateMove(smove, () => { playSubmove(smove); - if (moveIdx < move.length) - setTimeout(executeMove, 500); + if (moveIdx < move.length) setTimeout(executeMove, 500); else afterMove(smove, initurn); }); } else { @@ -464,7 +495,7 @@ export default { const computeScore = () => { const score = this.vr.getCurrentScore(); if (!navigate) { - if (["1-0","0-1"].includes(score)) { + if (["1-0", "0-1"].includes(score)) { if (Array.isArray(this.lastMove)) { const L = this.lastMove.length; this.lastMove[L - 1].notation += "#"; @@ -472,9 +503,9 @@ export default { else this.lastMove.notation += "#"; } } - if (score != "*" && this.game.mode == "analyze") { + if (score != "*" && ["analyze", "versus"].includes(this.mode)) { const message = getScoreMessage(score); - // Just show score on screen (allow undo) + // Show score on screen this.showEndgameMsg(score + " . " + this.st.tr[message]); } return score; @@ -488,18 +519,27 @@ export default { this.emitFenIfAnalyze(); this.inMultimove = false; this.score = computeScore(); - if (this.game.mode != "analyze" && !navigate) { - if (!noemit) { + if (this.autoplay) { + if (this.cursor < this.moves.length - 1) + setTimeout(() => this.play(null, null, null, "autoplay"), 1000); + else { + this.autoplay = false; + if (this.stackToPlay.length > 0) + // Move(s) arrived in-between + this.play(this.stackToPlay.pop(), "received"); + } + } + if (this.mode != "analyze" && !navigate) { + if (!received) { // Post-processing (e.g. computer play). const L = this.moves.length; - // NOTE: always emit the score, even in unfinished, - // to tell Game::processMove() that it's not a received move. + // NOTE: always emit the score, even in unfinished this.$emit("newmove", this.moves[L-1], { score: this.score }); } else { this.inPlay = false; if (this.stackToPlay.length > 0) // Move(s) arrived in-between - this.play(this.stackToPlay.pop(), received, light, noemit); + this.play(this.stackToPlay.pop(), "received"); } } } @@ -523,19 +563,6 @@ export default { return; } } - // Forbid playing outside analyze mode, except if move is received. - // Sufficient condition because Board already knows which turn it is. - if ( - this.game.mode != "analyze" && - !navigate && - !received && - (this.game.score != "*" || this.cursor < this.moves.length - 1) - ) { - return; - } - // To play a received move, cursor must be at the end of the game: - if (received && this.cursor < this.moves.length - 1) - this.gotoEnd(); playMove(); }, cancelCurrentMultimove: function() { @@ -555,7 +582,7 @@ export default { // "light": if gotoMove() or gotoBegin() undo: function(move, light) { // Freeze while choices are shown: - if (this.$refs["board"].choices.length > 0) return; + if (this.$refs["board"].choices.length > 0 || this.autoplay) return; this.$refs["board"].resetCurrentAttempt(); if (this.inMultimove) { this.cancelCurrentMultimove(); @@ -580,7 +607,7 @@ export default { } }, gotoMove: function(index) { - if (this.$refs["board"].choices.length > 0) return; + if (this.$refs["board"].choices.length > 0 || this.autoplay) return; this.$refs["board"].resetCurrentAttempt(); if (this.inMultimove) this.cancelCurrentMultimove(); if (index == this.cursor) return; @@ -599,7 +626,7 @@ export default { this.emitFenIfAnalyze(); }, gotoBegin: function() { - if (this.$refs["board"].choices.length > 0) return; + if (this.$refs["board"].choices.length > 0 || this.autoplay) return; this.$refs["board"].resetCurrentAttempt(); if (this.inMultimove) this.cancelCurrentMultimove(); const minCursor = @@ -612,7 +639,7 @@ export default { this.emitFenIfAnalyze(); }, gotoEnd: function() { - if (this.$refs["board"].choices.length > 0) return; + if (this.$refs["board"].choices.length > 0 || this.autoplay) return; this.$refs["board"].resetCurrentAttempt(); if (this.cursor == this.moves.length - 1) return; this.gotoMove(this.moves.length - 1); @@ -629,6 +656,7 @@ export default {