Add Sittuyin + Doublemove2. A few fixes. TODO: fix Ambiguous bugs and playing on...

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

diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue
index cf0a70c..c7c3789 100644 (file)
--- a/client/src/components/Board.vue
+++ b/client/src/components/Board.vue
@@ -54,7 +54,18 @@ export default {
       incheckSq[sq[0]][sq[1]] = true;
     });
 
-    const lm = this.lastMove;
+    let lm = this.lastMove;
+    // Precompute lastMove highlighting squares
+    const lmHighlights = {};
+    if (!!lm) {
+      if (!Array.isArray(lm)) lm = [lm];
+      lm.forEach(m => {
+        if (V.OnBoard(m.start.x, m.start.y))
+          lmHighlights[m.start.x + sizeX * m.start.y] = true;
+        if (V.OnBoard(m.end.x, m.end.y))
+          lmHighlights[m.end.x + sizeX * m.end.y] = true;
+      });
+    }
     const showLight = (
       this.settings.highlight &&
       ["all","highlight"].includes(V.ShowMoves)
@@ -74,9 +85,7 @@ export default {
       );
     };
     const inHighlight = (x, y) => {
-      return showLight && !!lm && (
-        (lm.end.x == x && lm.end.y == y) ||
-        (lm.start.x == x && lm.start.y == y));
+      return showLight && !!lmHighlights[x + sizeX * y];
     };
     const inShadow = (x, y) => {
       return (
@@ -303,9 +312,9 @@ export default {
     elementArray.push(gameDiv);
     if (!!this.vr.reserve) elementArray.push(reserveBottom);
     const boardElt = document.querySelector(".game");
-    // Square width might be undefine (at first drawing),
+    // boardElt might be undefine (at first drawing),
     // but it won't be used in this case.
-    const squareWidth = boardElt.offsetWidth / sizeY;
+    const squareWidth = (!!boardElt ? boardElt.offsetWidth / sizeY : 42);
     if (this.choices.length > 0 && !!boardElt) {
       // No choices to show at first drawing
       const offset = [boardElt.offsetTop, boardElt.offsetLeft];
@@ -446,10 +455,10 @@ export default {
                     attrs: {
                       id: "arrow",
                       markerWidth: (2 * arrowWidth) + "px",
-                      markerHeight: (2 * arrowWidth) + "px",
+                      markerHeight: (3 * arrowWidth) + "px",
                       markerUnits: "userSpaceOnUse",
                       refX: "0",
-                      refY: arrowWidth + "px",
+                      refY: (1.5 * arrowWidth) + "px",
                       orient: "auto"
                     }
                   },
@@ -460,8 +469,8 @@ export default {
                         "class": { "arrow-head": true },
                         attrs: {
                           d: (
-                            "M0,0 L0," + (2 * arrowWidth) + " " +
-                            "L" + (2 * arrowWidth) + "," + arrowWidth + " z"
+                            "M0,0 L0," + (3 * arrowWidth) + " L" +
+                            (2 * arrowWidth) + "," + (1.5 * arrowWidth) + " z"
                           )
                         }
                       }
@@ -519,12 +528,11 @@ export default {
       };
     },
     mousedown: function(e) {
-      if (!([1, 3].includes(e.which))) return;
       e.preventDefault();
-      if (e.which != 3)
+      if (!this.mobileBrowser && e.which != 3)
         // Cancel current drawing and circles, if any
         this.cancelResetArrows();
-      if (e.which == 1 || this.mobileBrowser) {
+      if (this.mobileBrowser || e.which == 1) {
         // Mouse left button
         if (!this.start) {
           // NOTE: classList[0] is enough: 'piece' is the first assigned class
@@ -566,8 +574,8 @@ export default {
         } else {
           this.processMoveAttempt(e);
         }
-      } else {
-        // e.which == 3 : mouse right button
+      } else if (e.which == 3) {
+        // Mouse right button
         let elem = e.target;
         // Next loop because of potential marks
         while (elem.tagName == "IMG") elem = elem.parentNode;
@@ -612,21 +620,27 @@ export default {
       }
     },
     mouseup: function(e) {
-      if (!([1, 3].includes(e.which))) return;
       e.preventDefault();
-      if (e.which == 1) {
+      if (this.mobileBrowser || e.which == 1) {
         if (!this.selectedPiece) return;
         // Drag'n drop. Selected piece is no longer needed:
         this.selectedPiece.parentNode.removeChild(this.selectedPiece);
         delete this.selectedPiece;
         this.selectedPiece = null;
         this.processMoveAttempt(e);
-      } else {
-        // Mouse right button (e.which == 3)
+      } else if (e.which == 3) {
+        // Mouse right button
         this.movingArrow = { x: -1, y: -1 };
         this.processArrowAttempt(e);
       }
     },
+    // Called by BaseGame after partially undoing multi-moves:
+    resetCurrentAttempt: function() {
+      this.possibleMoves = [];
+      this.start = null;
+      this.click = "";
+      this.selectedPiece = null;
+    },
     processMoveAttempt: function(e) {
       // Obtain the move from start and end squares
       const [offsetX, offsetY] =
@@ -697,6 +711,8 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+@import "@/styles/_board_squares_img.sass";
+
 // NOTE: no variants with reserve of size != 8
 .game.reserve-div
   margin-bottom: 18px
@@ -790,5 +806,4 @@ img.ghost
   background-color: #9f9fff
 .dark-square.chesstempo.highlight-dark
   background-color: #557fff
-
 </style>