X-Git-Url: https://git.auder.net/variants/%24%7Bvname%7D/current/git-favicon.png?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=80a79a4a294d2209c6d9365ac964f3f7bc19ce5c;hb=616561273f216debfeab7f5fc532d0b0a8bc8e2d;hp=921a5998830af4feb80c8295220322591a5e1cde;hpb=78c23cd6e4717d6d07c84177b515c6e03717da7e;p=vchess.git

diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue
index 921a5998..80a79a4a 100644
--- a/client/src/components/Board.vue
+++ b/client/src/components/Board.vue
@@ -4,7 +4,7 @@ import { ArrayFun } from "@/utils/array";
 import { store } from "@/store";
 export default {
   name: "my-board",
-  // Last move cannot be guessed from here, and is required to highlight squares
+  // Last move cannot be guessed from here, and is required for highlights.
   // vr: object to check moves, print board...
   // userColor is left undefined for an external observer
   props: [
@@ -55,6 +55,10 @@ export default {
       this.settings.highlight &&
       ["all","highlight"].includes(V.ShowMoves)
     );
+    const showCheck = (
+      this.settings.highlight &&
+      ["all","highlight","byrow"].includes(V.ShowMoves)
+    );
     const orientation = !V.CanFlip ? "w" : this.orientation;
     // Ensure that squares colors do not change when board is flipped
     const lightSquareMod = (sizeX + sizeY) % 2;
@@ -83,7 +87,7 @@ export default {
     const gameDiv = h(
       "div",
       {
-        class: {
+        "class": {
           game: true,
           clearer: true
         }
@@ -93,7 +97,7 @@ export default {
         return h(
           "div",
           {
-            class: {
+            "class": {
               row: true
             },
             style: { opacity: this.choices.length > 0 ? "0.5" : "1" }
@@ -104,7 +108,7 @@ export default {
             if (showPiece(ci, cj)) {
               elems.push(
                 h("img", {
-                  class: {
+                  "class": {
                     piece: true,
                     ghost:
                       !!this.selectedPiece &&
@@ -127,7 +131,7 @@ export default {
             if (this.settings.hints && hintSquares[ci][cj]) {
               elems.push(
                 h("img", {
-                  class: {
+                  "class": {
                     "mark-square": true
                   },
                   attrs: {
@@ -140,7 +144,7 @@ export default {
             return h(
               "div",
               {
-                class: {
+                "class": {
                   board: true,
                   ["board" + sizeY]: true,
                   "light-square": lightSquare,
@@ -149,8 +153,10 @@ export default {
                   "in-shadow": inShadow(ci, cj),
                   "highlight-light": inHighlight(ci, cj) && lightSquare,
                   "highlight-dark": inHighlight(ci, cj) && !lightSquare,
-                  "incheck-light": showLight && lightSquare && incheckSq[ci][cj],
-                  "incheck-dark": showLight && !lightSquare && incheckSq[ci][cj]
+                  "incheck-light":
+                    showCheck && lightSquare && incheckSq[ci][cj],
+                  "incheck-dark":
+                    showCheck && !lightSquare && incheckSq[ci][cj]
                 },
                 attrs: {
                   id: getSquareId({ x: ci, y: cj })
@@ -172,13 +178,13 @@ export default {
           h(
             "div",
             {
-              class: { board: true, ["board" + sizeY]: true },
+              "class": { board: true, ["board" + sizeY]: true },
               attrs: { id: getSquareId({ x: sizeX + shiftIdx, y: i }) },
               style: { opacity: qty > 0 ? 1 : 0.35 }
             },
             [
               h("img", {
-                class: { piece: true, reserve: true },
+                "class": { piece: true, reserve: true },
                 attrs: {
                   src:
                     "/images/pieces/" +
@@ -186,7 +192,7 @@ export default {
                     ".svg"
                 }
               }),
-              h("sup", { class: { "reserve-count": true } }, [ qty ])
+              h("sup", { "class": { "reserve-count": true } }, [ qty ])
             ]
           )
         );
@@ -199,13 +205,13 @@ export default {
           h(
             "div",
             {
-              class: { board: true, ["board" + sizeY]: true },
+              "class": { board: true, ["board" + sizeY]: true },
               attrs: { id: getSquareId({ x: sizeX + (1 - shiftIdx), y: i }) },
               style: { opacity: qty > 0 ? 1 : 0.35 }
             },
             [
               h("img", {
-                class: { piece: true, reserve: true },
+                "class": { piece: true, reserve: true },
                 attrs: {
                   src:
                     "/images/pieces/" +
@@ -213,7 +219,7 @@ export default {
                     ".svg"
                 }
               }),
-              h("sup", { class: { "reserve-count": true } }, [ qty ])
+              h("sup", { "class": { "reserve-count": true } }, [ qty ])
             ]
           )
         );
@@ -229,7 +235,7 @@ export default {
         h(
           "div",
           {
-            class: {
+            "class": {
               game: true,
               "reserve-div": true
             },
@@ -241,7 +247,7 @@ export default {
             h(
               "div",
               {
-                class: {
+                "class": {
                   row: true,
                   "reserve-row": true
                 }
@@ -254,7 +260,7 @@ export default {
         h(
           "div",
           {
-            class: {
+            "class": {
               game: true,
               "reserve-div": true
             },
@@ -266,7 +272,7 @@ export default {
             h(
               "div",
               {
-                class: {
+                "class": {
                   row: true,
                   "reserve-row": true
                 }
@@ -296,7 +302,7 @@ export default {
         "div",
         {
           attrs: { id: "choices" },
-          class: { row: true },
+          "class": { row: true },
           style: {
             top: topOffset + "px",
             left:
@@ -309,7 +315,9 @@ export default {
         },
         [ h(
           "div",
-          { },
+          {
+            "class": { "full-width": true }
+          },
           this.choices.map(m => {
             // A "choice" is a move
             const applyMove = (e) => {
@@ -327,7 +335,7 @@ export default {
             return h(
               "div",
               {
-                class: {
+                "class": {
                   board: true,
                   ["board" + sizeY]: true
                 },
@@ -341,13 +349,11 @@ export default {
                   attrs: {
                     src:
                       "/images/pieces/" +
-                      this.vr.getPPpath(
-                        m.appear[0].c + m.appear[0].p,
-                        // Extra arg useful for some variants:
-                        this.orientation) +
+                      // orientation: extra arg useful for some variants:
+                      this.vr.getPPpath(m, this.orientation) +
                       V.IMAGE_EXTENSION
                   },
-                  class: { "choice-piece": true },
+                  "class": { "choice-piece": true },
                   on: onClick
                 })
               ]
@@ -382,9 +388,15 @@ export default {
     mousedown: function(e) {
       e.preventDefault();
       if (!this.start) {
-        // Start square must contain a piece.
         // NOTE: classList[0] is enough: 'piece' is the first assigned class
-        if (e.target.classList[0] != "piece") return;
+        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);
@@ -486,16 +498,16 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+// NOTE: no variants with reserve of size != 8
 .game.reserve-div
   margin-bottom: 18px
-
 .reserve-count
   padding-left: 40%
-
 .reserve-row
   margin-bottom: 15px
 
-// NOTE: no variants with reserve of size != 8
+.full-width
+  width: 100%
 
 .game
   user-select: none