X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBaseGame.vue;h=07d62cf7b345bd7ac1779de5757a4c16efcbb31b;hb=20620465247585ed4e845885c4d9fee8cd6920c1;hp=b2dd4a72365a0458a7a9d9468fa96ccfb79800a7;hpb=6808d7a16ec1e761c6a2dffec2281c96953e4d89;p=vchess.git

diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue
index b2dd4a72..07d62cf7 100644
--- a/client/src/components/BaseGame.vue
+++ b/client/src/components/BaseGame.vue
@@ -33,15 +33,15 @@ div#baseGame(
       Board(
         :vr="vr"
         :last-move="lastMove"
-        :analyze="analyze"
+        :analyze="game.mode=='analyze'"
+        :score="game.score"
         :user-color="game.mycolor"
         :orientation="orientation"
         :vname="game.vname"
         :incheck="incheck"
         @play-move="play"
       )
-      #turnIndicator(v-if="game.vname=='Dark' && game.score=='*'")
-        | {{ st.tr[vr.turn + " to move"] }}
+      #turnIndicator(v-if="showTurn") {{ turn }}
       #controls
         button(@click="gotoBegin()") <<
         button(@click="undo()") <
@@ -49,16 +49,16 @@ div#baseGame(
         button(@click="play()") >
         button(@click="gotoEnd()") >>
       #belowControls
-        #downloadDiv(v-if="game.vname!='Dark' || game.score!='*'")
+        #downloadDiv(v-if="allowDownloadPGN")
           a#download(href="#")
           button(@click="download()") {{ st.tr["Download"] }} PGN
-        button(onClick="doClick('modalAdjust')") &#10530;
+        button(onClick="window.doClick('modalAdjust')") &#10530;
         button(
-          v-if="game.vname!='Dark' && game.mode!='analyze'"
+          v-if="canAnalyze"
           @click="analyzePosition()"
         )
           | {{ st.tr["Analyse"] }}
-        // NOTE: rather ugly hack to avoid showing twice "rules" link...
+        // NOTE: variants pages already have a "Rules" link on top
         button(
           v-if="!$route.path.match('/variants/')"
           @click="showRules()"
@@ -123,14 +123,19 @@ export default {
   },
   computed: {
     showMoves: function() {
-      return this.game.vname != "Dark" || this.game.score != "*";
+      return this.game.score != "*" || (window.V && V.ShowMoves == "all");
     },
-    analyze: function() {
-      return (
-        this.game.mode == "analyze" ||
-        // From Board viewpoint, a finished Dark game == analyze (TODO: unclear)
-        (this.game.vname == "Dark" && this.game.score != "*")
-      );
+    showTurn: function() {
+      return this.game.score == '*' && window.V && V.ShowMoves != "all";
+    },
+    turn: function() {
+      return this.st.tr[(this.vr.turn == 'w' ? "White" : "Black") + " to move"];
+    },
+    canAnalyze: function() {
+      return this.game.mode != "analyze" && window.V && V.CanAnalyze;
+    },
+    allowDownloadPGN: function() {
+      return this.game.score != "*" || (window.V && V.ShowMoves == "all");
     }
   },
   created: function() {
@@ -169,7 +174,6 @@ export default {
   },
   methods: {
     focusBg: function() {
-      // NOTE: small blue border appears...
       document.getElementById("baseGame").focus();
     },
     adjustBoard: function() {
@@ -259,9 +263,9 @@ export default {
         this.game.vname +
         "/?fen=" +
         this.vr.getFen().replace(/ /g, "_");
+      // Open in same tab in live games (against cheating)
       if (this.game.type == "live") this.$router.push(newUrl);
-      //open in same tab: against cheating...
-      else window.open("#" + newUrl); //open in a new tab: more comfortable
+      else window.open("#" + newUrl);
     },
     download: function() {
       const content = this.getPgn();
@@ -305,9 +309,6 @@ export default {
     },
     animateMove: function(move, callback) {
       let startSquare = document.getElementById(getSquareId(move.start));
-      // TODO: error "flush nextTick callbacks" when observer reloads page:
-      // this late check is not a fix!
-      if (!startSquare) return;
       let endSquare = document.getElementById(getSquareId(move.end));
       let rectStart = startSquare.getBoundingClientRect();
       let rectEnd = endSquare.getBoundingClientRect();
@@ -318,9 +319,6 @@ export default {
       let movingPiece = document.querySelector(
         "#" + getSquareId(move.start) + " > img.piece"
       );
-      if (!movingPiece)
-        //TODO: shouldn't happen
-        return;
       // HACK for animation (with positive translate, image slides "under background")
       // Possible improvement: just alter squares on the piece's way...
       const squares = document.getElementsByClassName("board");
@@ -330,7 +328,7 @@ export default {
       }
       movingPiece.style.transform =
         "translate(" + translation.x + "px," + translation.y + "px)";
-      movingPiece.style.transitionDuration = "0.2s";
+      movingPiece.style.transitionDuration = "0.25s";
       movingPiece.style.zIndex = "3000";
       setTimeout(() => {
         for (let i = 0; i < squares.length; i++)
@@ -353,7 +351,8 @@ export default {
         return;
       }
       const doPlayMove = () => {
-        if (!!receive && this.cursor < this.moves.length - 1) this.gotoEnd(); //required to play the move
+        // To play a move, cursor must be at the end of the game:
+        if (!!receive && this.cursor < this.moves.length - 1) this.gotoEnd();
         if (navigate) {
           if (this.cursor == this.moves.length - 1) return; //no more moves
           move = this.moves[this.cursor + 1];
@@ -385,7 +384,7 @@ export default {
         if (!navigate && this.game.mode != "analyze")
           this.$emit("newmove", move); //post-processing (e.g. computer play)
       };
-      if (!!receive && this.game.vname != "Dark")
+      if (!!receive && V.ShowMoves == "all")
         this.animateMove(move, doPlayMove);
       else doPlayMove();
     },
@@ -433,6 +432,7 @@ export default {
 <style lang="sass" scoped>
 [type="checkbox"]#modalEog+div .card
   min-height: 45px
+
 [type="checkbox"]#modalAdjust+div .card
   padding: 5px
 
@@ -454,8 +454,11 @@ export default {
     display: inline-block
     width: 20%
     margin: 0
+
 #turnIndicator
   text-align: center
+  font-weight: bold
+
 #belowControls
   border-top: 1px solid #2f4f4f
   text-align: center
@@ -467,13 +470,16 @@ export default {
   & > button
     border-left: 1px solid #2f4f4f
     margin: 0
+
 #boardContainer
   float: left
 // TODO: later, maybe, allow movesList of variable width
 // or e.g. between 250 and 350px (but more complicated)
+
 #movesList
   width: 280px
   float: left
+
 @media screen and (max-width: 767px)
   #movesList
     width: 100%