X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=c2de1769307fe5cc082e9d2edb75ff35a31a7fb0;hb=b0a0468aa6f436f2ad4962492561ef430a3bc15c;hp=5080e846b650d098cc6674f2aa26db96177d9e2f;hpb=28b32b4fc7c23b1c72bed68e1897576c5be46c3d;p=vchess.git

diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue
index 5080e846..c2de1769 100644
--- a/client/src/components/Board.vue
+++ b/client/src/components/Board.vue
@@ -25,6 +25,7 @@ export default {
       selectedPiece: null, //moving piece (or clicked piece)
       start: null, //pixels coordinates + id of starting square (click or drag)
       click: "",
+      clickTime: 0,
       settings: store.state.settings
     };
   },
@@ -112,7 +113,12 @@ export default {
                   attrs: {
                     src:
                       "/images/pieces/" +
-                      this.vr.getPpath(this.vr.board[ci][cj], this.userColor, this.score) +
+                      this.vr.getPpath(
+                        this.vr.board[ci][cj],
+                        // Extra args useful for some variants:
+                        this.userColor,
+                        this.score,
+                        this.orientation) +
                       ".svg"
                   }
                 })
@@ -275,9 +281,10 @@ export default {
     if (!!this.vr.reserve) elementArray.push(reserveBottom);
     const boardElt = document.querySelector(".game");
     if (this.choices.length > 0 && !!boardElt) {
-      //no choices to show at first drawing
+      // No choices to show at first drawing
       const squareWidth = boardElt.offsetWidth / sizeY;
       const offset = [boardElt.offsetTop, boardElt.offsetLeft];
+      // TODO: multi-rows if more than V.size.y pieces (as inEightpieces)
       const choices = h(
         "div",
         {
@@ -294,7 +301,19 @@ export default {
           }
         },
         this.choices.map(m => {
-          //a "choice" is a move
+          // A "choice" is a move
+          const applyMove = (e) => {
+            e.stopPropagation();
+            // Force a delay between move is shown and clicked
+            // (otherwise a "double-click" bug might occur)
+            if (Date.now() - this.clickTime < 200) return;
+            this.play(m);
+            this.choices = [];
+          };
+          const onClick =
+            this.mobileBrowser
+              ? { touchend: applyMove }
+              : { mouseup: applyMove };
           return h(
             "div",
             {
@@ -312,16 +331,14 @@ export default {
                 attrs: {
                   src:
                     "/images/pieces/" +
-                    this.vr.getPpath(m.appear[0].c + m.appear[0].p) +
+                    this.vr.getPPpath(
+                      m.appear[0].c + m.appear[0].p,
+                      // Extra arg useful for some variants:
+                      this.orientation) +
                     ".svg"
                 },
                 class: { "choice-piece": true },
-                on: {
-                  click: () => {
-                    this.play(m);
-                    this.choices = [];
-                  }
-                }
+                on: onClick
               })
             ]
           );
@@ -436,8 +453,10 @@ export default {
       let endSquare = getSquareFromId(landing.id);
       let moves = this.findMatchingMoves(endSquare);
       this.possibleMoves = [];
-      if (moves.length > 1) this.choices = moves;
-      else if (moves.length == 1) this.play(moves[0]);
+      if (moves.length > 1) {
+        this.clickTime = Date.now();
+        this.choices = moves;
+      } else if (moves.length == 1) this.play(moves[0]);
       // else: forbidden move attempt
     },
     findMatchingMoves: function(endSquare) {
@@ -519,18 +538,18 @@ img.ghost
 // TODO: no predefined highlight colors, but layers. How?
 
 .light-square.lichess.highlight-light
-  background-color: #cdd26a !important
+  background-color: #cdd26a
 .dark-square.lichess.highlight-dark
-  background-color: #aaa23a !important
+  background-color: #aaa23a
 
 .light-square.chesscom.highlight-light
-  background-color: #f7f783 !important
+  background-color: #f7f783
 .dark-square.chesscom.highlight-dark
-  background-color: #bacb44 !important
+  background-color: #bacb44
 
 .light-square.chesstempo.highlight-light
-  background-color: #9f9fff !important
+  background-color: #9f9fff
 .dark-square.chesstempo.highlight-dark
-  background-color: #557fff !important
+  background-color: #557fff
 
 </style>