X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBaseGame.vue;h=8a053765c56a680aac22cb4eb42a220f41e3e549;hb=cd49e617866590dbc68530ad961b109cdbe1ce55;hp=ae6c128feb7af01e84b35e348cf4c251b61e79db;hpb=ff3a8d16dc0aed16ff471834fe7af0253b50ead6;p=vchess.git diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index ae6c128f..8a053765 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" @@ -212,6 +212,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 +262,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 +285,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 +354,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 +413,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 +530,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 +591,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 +618,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 +637,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 +650,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 +689,9 @@ export default { padding-top: 5px padding-bottom: 5px +p#fenAnalyze + margin: 5px + .in-autoplay background-color: #FACF8C