Add unambiguous section in the PGN + some fixes + code formatting and fix typos

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

diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue
index 447040f..71cac15 100644 (file)
--- 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) => {
@@ -317,8 +325,8 @@ export default {
               // 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 = [];
+              this.play(m);
             };
             const onClick =
               this.mobileBrowser
@@ -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
                 })
               ]
@@ -486,16 +492,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