X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=80a79a4a294d2209c6d9365ac964f3f7bc19ce5c;hb=c0b036aaf5a2a8e477c955623df2a8e5ce826151;hp=d89ee40498c0a2fd205934b1987ceb4ae99b05ee;hpb=d54f6261c9e30f4eabb402ad301dd5c5e40fb656;p=vchess.git

diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue
index d89ee404..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: [
@@ -87,7 +87,7 @@ export default {
     const gameDiv = h(
       "div",
       {
-        class: {
+        "class": {
           game: true,
           clearer: true
         }
@@ -97,7 +97,7 @@ export default {
         return h(
           "div",
           {
-            class: {
+            "class": {
               row: true
             },
             style: { opacity: this.choices.length > 0 ? "0.5" : "1" }
@@ -108,7 +108,7 @@ export default {
             if (showPiece(ci, cj)) {
               elems.push(
                 h("img", {
-                  class: {
+                  "class": {
                     piece: true,
                     ghost:
                       !!this.selectedPiece &&
@@ -131,7 +131,7 @@ export default {
             if (this.settings.hints && hintSquares[ci][cj]) {
               elems.push(
                 h("img", {
-                  class: {
+                  "class": {
                     "mark-square": true
                   },
                   attrs: {
@@ -144,7 +144,7 @@ export default {
             return h(
               "div",
               {
-                class: {
+                "class": {
                   board: true,
                   ["board" + sizeY]: true,
                   "light-square": lightSquare,
@@ -153,8 +153,10 @@ export default {
                   "in-shadow": inShadow(ci, cj),
                   "highlight-light": inHighlight(ci, cj) && lightSquare,
                   "highlight-dark": inHighlight(ci, cj) && !lightSquare,
-                  "incheck-light": showCheck && lightSquare && incheckSq[ci][cj],
-                  "incheck-dark": showCheck && !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 })
@@ -176,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/" +
@@ -190,7 +192,7 @@ export default {
                     ".svg"
                 }
               }),
-              h("sup", { class: { "reserve-count": true } }, [ qty ])
+              h("sup", { "class": { "reserve-count": true } }, [ qty ])
             ]
           )
         );
@@ -203,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/" +
@@ -217,7 +219,7 @@ export default {
                     ".svg"
                 }
               }),
-              h("sup", { class: { "reserve-count": true } }, [ qty ])
+              h("sup", { "class": { "reserve-count": true } }, [ qty ])
             ]
           )
         );
@@ -233,7 +235,7 @@ export default {
         h(
           "div",
           {
-            class: {
+            "class": {
               game: true,
               "reserve-div": true
             },
@@ -245,7 +247,7 @@ export default {
             h(
               "div",
               {
-                class: {
+                "class": {
                   row: true,
                   "reserve-row": true
                 }
@@ -258,7 +260,7 @@ export default {
         h(
           "div",
           {
-            class: {
+            "class": {
               game: true,
               "reserve-div": true
             },
@@ -270,7 +272,7 @@ export default {
             h(
               "div",
               {
-                class: {
+                "class": {
                   row: true,
                   "reserve-row": true
                 }
@@ -300,7 +302,7 @@ export default {
         "div",
         {
           attrs: { id: "choices" },
-          class: { row: true },
+          "class": { row: true },
           style: {
             top: topOffset + "px",
             left:
@@ -313,7 +315,9 @@ export default {
         },
         [ h(
           "div",
-          { },
+          {
+            "class": { "full-width": true }
+          },
           this.choices.map(m => {
             // A "choice" is a move
             const applyMove = (e) => {
@@ -331,7 +335,7 @@ export default {
             return h(
               "div",
               {
-                class: {
+                "class": {
                   board: true,
                   ["board" + sizeY]: true
                 },
@@ -345,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
                 })
               ]
@@ -386,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);
@@ -490,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