X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=9e23fc5697f136760e6462678cf62c70747d889a;hb=7c05a5f2297bea540c700ebceb0cc8b03a7f6775;hp=0430c68fe2c2e528b7323ed59bde9e71109997b8;hpb=1e8a838649e16509c80c9933d99d78856e11b5c2;p=vchess.git

diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue
index 0430c68f..9e23fc56 100644
--- a/client/src/components/Board.vue
+++ b/client/src/components/Board.vue
@@ -171,7 +171,11 @@ export default {
                 })
               );
             }
-            const lightSquare = (ci + cj) % 2 == lightSquareMod;
+            const oddity = (ci + cj) % 2;
+            const lightSquare = (
+              (!V.DarkBottomRight && oddity == lightSquareMod) ||
+              (V.DarkBottomRight && oddity != lightSquareMod)
+            );
             return h(
               "div",
               {
@@ -190,7 +194,9 @@ export default {
                     showCheck && lightSquare && incheckSq[ci][cj],
                   "incheck-dark":
                     showCheck && !lightSquare && incheckSq[ci][cj],
-                  "hover-highlight": this.vr.hoverHighlight(ci, cj)
+                  "hover-highlight":
+                    this.vr.hoverHighlight(
+                      [ci, cj], !this.analyze ? this.userColor : null)
                 },
                 attrs: {
                   id: getSquareId({ x: ci, y: cj })
@@ -361,7 +367,7 @@ export default {
       const squareWidth = boardElt.offsetWidth / sizeY;
       const offset = [boardElt.offsetTop, boardElt.offsetLeft];
       const maxNbeltsPerRow = Math.min(this.choices.length, sizeY);
-      let topOffset = offset[0] + (sizeY / 2) * squareWidth - squareWidth / 2;
+      let topOffset = offset[0] + ((sizeX - 1) / 2) * squareWidth;
       let choicesHeight = squareWidth;
       if (this.choices.length >= sizeY) {
         // A second row is required (Eightpieces variant)
@@ -398,10 +404,12 @@ export default {
               this.choices = [];
               this.play(m);
             };
+            const stopPropagation = (e) => { e.stopPropagation(); }
             const onClick =
               this.mobileBrowser
-                ? { touchend: applyMove }
-                : { mouseup: applyMove };
+                // Must cancel mousedown logic:
+                ? { touchstart: stopPropagation, touchend: applyMove }
+                : { mousedown: stopPropagation, mouseup: applyMove };
             return h(
               "div",
               {
@@ -419,7 +427,7 @@ export default {
                   attrs: {
                     src:
                       "/images/pieces/" +
-                      // orientation: extra arg useful for some variants:
+                      // orientation: extra arg useful for some variants
                       this.vr.getPPpath(m, this.orientation) +
                       V.IMAGE_EXTENSION
                   },
@@ -569,11 +577,12 @@ export default {
       return path;
     },
     re_setDrawings: function() {
+      // Add some drawing on board (for some variants + arrows and circles)
+      const boardElt = document.getElementById("gamePosition");
+      if (!boardElt) return;
       // Remove current canvas, if any
       const curCanvas = document.getElementById("arrowCanvas");
       if (!!curCanvas) curCanvas.parentNode.removeChild(curCanvas);
-      // Add some drawing on board (for some variants + arrows and circles)
-      const boardElt = document.getElementById("gamePosition");
       const squareWidth = boardElt.offsetWidth / V.size.y;
       const bPos = boardElt.getBoundingClientRect();
       let svgArrows = [];
@@ -644,45 +653,48 @@ export default {
             document.getElementById("boardContainer").getBoundingClientRect();
           // NOTE: classList[0] is enough: 'piece' is the first assigned class
           const withPiece = (e.target.classList[0] == "piece");
-          // Emit the click event which could be used by some variants
-          this.$emit(
-            "click-square",
-            getSquareFromId(withPiece ? e.target.parentNode.id : e.target.id)
-          );
-          // Start square must contain a piece.
-          if (!withPiece) return;
-          let parent = e.target.parentNode; //surrounding square
           // Show possible moves if current player allowed to play
-          const startSquare = getSquareFromId(parent.id);
+          const startSquare =
+            getSquareFromId(withPiece ? e.target.parentNode.id : e.target.id);
           this.possibleMoves = [];
           const color = this.analyze ? this.vr.turn : this.userColor;
-          if (this.vr.canIplay(color, startSquare))
-            this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare);
-          else return;
-          // For potential drag'n drop, remember start coordinates
-          // (to center the piece on mouse cursor)
-          const rect = parent.getBoundingClientRect();
-          this.start = {
-            x: rect.x + rect.width / 2,
-            y: rect.y + rect.width / 2,
-            id: parent.id
-          };
-          // Add the moving piece to the board, just after current image
-          this.selectedPiece = e.target.cloneNode();
-          Object.assign(
-            this.selectedPiece.style,
-            {
-              position: "absolute",
-              top: 0,
-              display: "inline-block",
-              zIndex: 3000
+          if (this.vr.canIplay(color, startSquare)) {
+            // Emit the click event which could be used by some variants
+            const targetId =
+              (withPiece ? e.target.parentNode.id : e.target.id);
+            const sq = getSquareFromId(targetId);
+            this.$emit("click-square", sq);
+            if (withPiece && !this.vr.onlyClick(sq)) {
+              this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare);
+              if (this.possibleMoves.length > 0) {
+                // For potential drag'n drop, remember start coordinates
+                // (to center the piece on mouse cursor)
+                let parent = e.target.parentNode; //surrounding square
+                const rect = parent.getBoundingClientRect();
+                this.start = {
+                  x: rect.x + rect.width / 2,
+                  y: rect.y + rect.width / 2,
+                  id: parent.id
+                };
+                // Add the moving piece to the board, just after current image
+                this.selectedPiece = e.target.cloneNode();
+                Object.assign(
+                  this.selectedPiece.style,
+                  {
+                    position: "absolute",
+                    top: 0,
+                    display: "inline-block",
+                    zIndex: 3000
+                  }
+                );
+                parent.insertBefore(this.selectedPiece, e.target.nextSibling);
+              }
             }
-          );
-          parent.insertBefore(this.selectedPiece, e.target.nextSibling);
-        } else {
-          this.processMoveAttempt(e);
+          }
         }
-      } else if (e.which == 3) {
+        else this.processMoveAttempt(e);
+      }
+      else if (e.which == 3) {
         // Mouse right button
         this.containerPos =
           document.getElementById("gamePosition").getBoundingClientRect();