Monochrome: show first turn indication

[vchess.git] / client / src / components / BaseGame.vue

diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue
index 1a7e30f..62fae75 100644 (file)
--- 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"
@@ -61,13 +61,6 @@ div#baseGame
 </template>
 
 <script>
-
-// https://vchess.club/#/game/46
-// Bug 35eme coup blanc Rx(P)e2, d2 et aussi 18eme coup blanc Rd7, Pxe6
-// --> peut-être lié à prise, ou lié à getFen(), ou inMultimove pas changé car concatène à coup précédent...
-// TODO: also fix moves played on smartphone, annoying shift...
-// attention play undo pendant l'autoplay !!
-
 import Board from "@/components/Board.vue";
 import MoveList from "@/components/MoveList.vue";
 import params from "@/parameters";
@@ -112,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!"]
@@ -135,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() {
@@ -219,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;
@@ -265,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;
@@ -285,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;
@@ -352,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
@@ -411,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 (
@@ -526,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)
@@ -587,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 =
@@ -612,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;
@@ -631,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 =
@@ -644,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);
@@ -683,6 +694,9 @@ export default {
     padding-top: 5px
     padding-bottom: 5px
 
+p#fenAnalyze
+  margin: 5px
+
 .in-autoplay
   background-color: #FACF8C