X-Git-Url: https://git.auder.net/?p=vchess.git;a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBaseGame.vue;h=70a304b8711fcf287cf44ca4f98be0b3aa11ae33;hp=9878039ee8a260c8484c3095d486b57e67acfabd;hb=107dc1bd5361e2538b1551bdcc37c1e90a444b83;hpb=691d6952114dd716ca66193a029f5e60be50888c diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index 9878039e..70a304b8 100644 --- a/client/src/components/BaseGame.vue +++ b/client/src/components/BaseGame.vue @@ -40,7 +40,7 @@ div#baseGame img.inline(src="/images/icons/play.svg") button(@click="gotoEnd()") img.inline(src="/images/icons/fast-forward.svg") - p(v-show="showFen") {{ (!!vr ? vr.getFen() : "") }} + p#fenAnalyze(v-show="showFen") {{ (!!vr ? vr.getFen() : "") }} #movesList MoveList( :show="showMoves" @@ -55,7 +55,7 @@ div#baseGame @showrules="showRules" @analyze="toggleAnalyze" @goto-move="gotoMove" - @reset-arrows="resetArrows" + @redraw-board="redrawBoard" ) .clearer @@ -94,7 +94,6 @@ export default { incheck: [], //for Board inMultimove: false, autoplay: false, - autoplayLoop: null, inPlay: false, stackToPlay: [] }; @@ -106,7 +105,7 @@ export default { return this.st.tr[ (this.vr.turn == 'w' ? "White" : "Black") + " to move"]; } - // Cannot flip: racing king or circular chess + // Cannot flip (racing king or circular chess), or Monochrome return ( this.vr.movesCount == 0 && this.game.mycolor == "w" ? this.st.tr["It's your turn!"] @@ -129,7 +128,12 @@ export default { showTurn: function() { return ( this.game.score == '*' && - !!this.vr && (this.vr.showMoves != "all" || !this.vr.canFlip) + !!this.vr && + ( + this.vr.showMoves != "all" || + !this.vr.canFlip || + this.vr.showFirstTurn + ) ); }, canAnalyze: function() { @@ -164,7 +168,8 @@ export default { .addEventListener("click", processModalClick); }, beforeDestroy: function() { - if (!!this.autoplayLoop) clearInterval(this.autoplayLoop); + // TODO: probably not required + this.autoplay = false; }, methods: { focusBg: function() { @@ -195,9 +200,8 @@ export default { if (e.deltaY < 0) this.undo(); else if (e.deltaY > 0) this.play(); }, - resetArrows: function() { - // TODO: make arrows scale with board, and remove this - this.$refs["board"].cancelResetArrows(); + redrawBoard: function() { + this.$refs["board"].re_setDrawings(); }, showRules: function() { // The button is here only on Game page: @@ -212,28 +216,46 @@ export default { this.moves = JSON.parse(JSON.stringify(game.moves || [])); // Post-processing: decorate each move with notation and FEN this.vr = new V(game.fenStart); + this.inMultimove = false; //in case of + if (!!this.$refs["board"]) + // Also in case of: + this.$refs["board"].resetCurrentAttempt(); + let analyseBtn = document.getElementById("analyzeBtn"); + if (!!analyseBtn) analyseBtn.classList.remove("active"); const parsedFen = V.ParseFen(game.fenStart); const firstMoveColor = parsedFen.turn; this.firstMoveNumber = Math.floor(parsedFen.movesCount / 2) + 1; let L = this.moves.length; - this.moves.forEach((move,idx) => { - // Strategy working also for multi-moves: - if (!Array.isArray(move)) move = [move]; - const Lm = move.length; - move.forEach((m,idxM) => { - m.notation = this.vr.getNotation(m); - m.unambiguous = V.GetUnambiguousNotation(m); - 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 += "#"; - } + if (L == 0) { + // Could be started on a random position in analysis mode: + this.incheck = this.vr.getCheckSquares(); + this.score = this.vr.getCurrentScore(); + if (this.score != '*') { + // Show score on screen + const message = getScoreMessage(this.score); + this.showEndgameMsg(this.score + " . " + this.st.tr[message]); + } + } + else { + this.moves.forEach((move,idx) => { + // Strategy working also for multi-moves: + if (!Array.isArray(move)) move = [move]; + const Lm = move.length; + move.forEach((m,idxM) => { + m.notation = this.vr.getNotation(m); + m.unambiguous = V.GetUnambiguousNotation(m); + 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; + this.score = this.vr.getCurrentScore(); + if (["1-0", "0-1"].includes(this.score)) m.notation += "#"; + } + }); }); - }); + } if (firstMoveColor == "b") { // 'start' & 'end' is required for Board component this.moves.unshift({ @@ -254,8 +276,11 @@ export default { else this.lastMove = null; }, toggleAnalyze: function() { + // Freeze while choices are shown (and autoplay has priority) + if (this.$refs["board"].choices.length > 0 || this.autoplay) return; if (this.mode != "analyze") { // Enter analyze mode: + if (this.inMultimove) this.cancelCurrentMultimove(); this.gameMode = this.mode; //was not 'analyze' this.mode = "analyze"; this.gameCursor = this.cursor; @@ -274,7 +299,11 @@ export default { fen = mv[mv.length-1].fen; } this.vr = new V(fen); + this.inMultimove = false; //in case of + this.$refs["board"].resetCurrentAttempt(); //also in case of 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"); } }, @@ -331,32 +360,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 @@ -415,10 +427,17 @@ 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; + if ( + !!this.$refs["board"].selectedPiece || + this.$refs["board"].choices.length > 0 + ) { + return; + } 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 ( @@ -430,22 +449,17 @@ export default { return; } if (!!received) { - - if (this.mode == "analyze") { console.log("received move"); - console.log(move); } - - 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(); - } - if (!!noemit) { - if (this.inPlay) { - // Received moves in observed games can arrive too fast: + 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(); } // The board may show some the possible moves: (TODO: bad solution) this.$refs["board"].resetCurrentAttempt(); @@ -490,18 +504,13 @@ export default { let self = this; const initurn = this.vr.turn; (function executeMove() { -console.log("execute move " + move.length); const smove = move[moveIdx++]; // NOTE: condition "smove.start.x >= 0" required for Dynamo, // because second move may be empty. if (animate && smove.start.x >= 0) { self.animateMove(smove, () => { playSubmove(smove); - -console.log(moveIdx + " " + move.length); - - if (moveIdx < move.length) - setTimeout(executeMove, 500); + if (moveIdx < move.length) setTimeout(executeMove, 500); else afterMove(smove, initurn); }); } else { @@ -514,7 +523,7 @@ console.log(moveIdx + " " + move.length); 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 += "#"; @@ -522,18 +531,15 @@ console.log(moveIdx + " " + move.length); else this.lastMove.notation += "#"; } } - if (score != "*" && this.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; }; const afterMove = (smove, initurn) => { if (this.vr.turn != initurn) { - -console.log(smove); - // Turn has changed: move is complete if (!smove.fen) // NOTE: only FEN of last sub-move is required (=> setting it here) @@ -541,18 +547,27 @@ console.log(smove); this.emitFenIfAnalyze(); this.inMultimove = false; this.score = computeScore(); + 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 (!noemit && this.mode != "analyze") { + 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"); } } } @@ -594,12 +609,19 @@ console.log(smove); }, // "light": if gotoMove() or gotoBegin() undo: function(move, light) { - // Freeze while choices are shown: - if (this.$refs["board"].choices.length > 0) return; + if ( + this.autoplay || + !!this.$refs["board"].selectedPiece || + this.$refs["board"].choices.length > 0 + ) { + return; + } this.$refs["board"].resetCurrentAttempt(); if (this.inMultimove) { this.cancelCurrentMultimove(); this.incheck = this.vr.getCheckSquares(); + if (this.cursor >= 0) this.lastMove = this.moves[this.cursor]; + else this.lastMove = null; } else { if (!move) { const minCursor = @@ -620,7 +642,13 @@ console.log(smove); } }, gotoMove: function(index) { - if (this.$refs["board"].choices.length > 0) return; + if ( + this.autoplay || + !!this.$refs["board"].selectedPiece || + this.$refs["board"].choices.length > 0 + ) { + return; + } this.$refs["board"].resetCurrentAttempt(); if (this.inMultimove) this.cancelCurrentMultimove(); if (index == this.cursor) return; @@ -639,7 +667,13 @@ console.log(smove); this.emitFenIfAnalyze(); }, gotoBegin: function() { - if (this.$refs["board"].choices.length > 0) return; + if ( + this.autoplay || + !!this.$refs["board"].selectedPiece || + this.$refs["board"].choices.length > 0 + ) { + return; + } this.$refs["board"].resetCurrentAttempt(); if (this.inMultimove) this.cancelCurrentMultimove(); const minCursor = @@ -652,11 +686,8 @@ console.log(smove); this.emitFenIfAnalyze(); }, gotoEnd: function() { - if (this.$refs["board"].choices.length > 0) return; - this.$refs["board"].resetCurrentAttempt(); if (this.cursor == this.moves.length - 1) return; this.gotoMove(this.moves.length - 1); - this.emitFenIfAnalyze(); }, flip: function() { if (this.$refs["board"].choices.length > 0) return; @@ -669,6 +700,7 @@ console.log(smove);