X-Git-Url: https://git.auder.net/images/pieces/current/gitweb.js?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBaseGame.vue;h=62fae75349d5cad0adc25ec1a870dcd076ba50bf;hb=5246b49d18b711fb26ee27919ab392be24b80fba;hp=ae6c128feb7af01e84b35e348cf4c251b61e79db;hpb=ff3a8d16dc0aed16ff471834fe7af0253b50ead6;p=vchess.git diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index ae6c128f..62fae753 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" @@ -105,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!"] @@ -128,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() { @@ -212,6 +217,10 @@ 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 + this.$refs["board"].resetCurrentAttempt(); //also in case of + 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; @@ -258,8 +267,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; @@ -278,6 +290,8 @@ 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; @@ -345,7 +359,7 @@ export default { } else if (this.cursor < this.moves.length - 1) { this.autoplay = true; - this.play(); + this.play(null, null, null, "autoplay"); } }, // Animate an elementary move @@ -404,10 +418,12 @@ export default { if (!!move) this.play(move); }, // "light": if gotoMove() or gotoEnd() - play: function(move, received, light) { + play: function(move, received, light, autoplay) { // Freeze while choices are shown: if (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 ( @@ -519,7 +535,7 @@ export default { this.score = computeScore(); if (this.autoplay) { if (this.cursor < this.moves.length - 1) - setTimeout(this.play, 1000); + setTimeout(() => this.play(null, null, null, "autoplay"), 1000); else { this.autoplay = false; if (this.stackToPlay.length > 0) @@ -580,11 +596,13 @@ 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(); this.incheck = this.vr.getCheckSquares(); + if (this.cursor >= 0) this.lastMove = this.moves[this.cursor]; + else this.lastMove = null; } else { if (!move) { const minCursor = @@ -605,7 +623,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; @@ -624,7 +642,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 = @@ -637,7 +655,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); @@ -676,6 +694,9 @@ export default { padding-top: 5px padding-bottom: 5px +p#fenAnalyze + margin: 5px + .in-autoplay background-color: #FACF8C