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

diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue
index b2dd4a72..2f49169a 100644
--- a/client/src/components/BaseGame.vue
+++ b/client/src/components/BaseGame.vue
@@ -40,8 +40,7 @@ div#baseGame(
         :incheck="incheck"
         @play-move="play"
       )
-      #turnIndicator(v-if="game.vname=='Dark' && game.score=='*'")
-        | {{ st.tr[vr.turn + " to move"] }}
+      #turnIndicator(v-if="game.vname=='Dark' && game.score=='*'") {{ turn }}
       #controls
         button(@click="gotoBegin()") <<
         button(@click="undo()") <
@@ -52,7 +51,7 @@ div#baseGame(
         #downloadDiv(v-if="game.vname!='Dark' || game.score!='*'")
           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'"
           @click="analyzePosition()"
@@ -125,6 +124,9 @@ export default {
     showMoves: function() {
       return this.game.vname != "Dark" || this.game.score != "*";
     },
+    turn: function() {
+      return this.st.tr[(this.vr.turn == 'w' ? "White" : "Black") + " to move"];
+    },
     analyze: function() {
       return (
         this.game.mode == "analyze" ||
@@ -169,7 +171,6 @@ export default {
   },
   methods: {
     focusBg: function() {
-      // NOTE: small blue border appears...
       document.getElementById("baseGame").focus();
     },
     adjustBoard: function() {
@@ -259,9 +260,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 +306,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 +316,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 +325,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 +348,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];
@@ -433,6 +429,7 @@ export default {
 <style lang="sass" scoped>
 [type="checkbox"]#modalEog+div .card
   min-height: 45px
+
 [type="checkbox"]#modalAdjust+div .card
   padding: 5px
 
@@ -454,8 +451,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 +467,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%