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

diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue
index 41398625..0430c68f 100644
--- a/client/src/components/Board.vue
+++ b/client/src/components/Board.vue
@@ -60,19 +60,22 @@ export default {
     if (!!lm) {
       if (!Array.isArray(lm)) lm = [lm];
       lm.forEach(m => {
-        if (V.OnBoard(m.start.x, m.start.y))
+        if (!m.start.noHighlight && 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))
+        if (!m.end.noHighlight && V.OnBoard(m.end.x, m.end.y))
           lmHighlights[m.end.x + sizeX * m.end.y] = true;
+        if (!!m.start.toplay)
+          // For Dice variant (at least?)
+          lmHighlights[m.start.toplay[0] + sizeX * m.start.toplay[1]] = true;
       });
     }
     const showLight = (
       this.settings.highlight &&
-      ["all","highlight"].includes(V.ShowMoves)
+      ["all", "highlight"].includes(V.ShowMoves)
     );
     const showCheck = (
       this.settings.highlight &&
-      ["all","highlight","byrow"].includes(V.ShowMoves)
+      ["all", "highlight", "byrow"].includes(V.ShowMoves)
     );
     const orientation = !V.CanFlip ? "w" : this.orientation;
     // Ensure that squares colors do not change when board is flipped
@@ -121,27 +124,28 @@ export default {
             const squareId = "sq-" + ci + "-" + cj;
             let elems = [];
             if (showPiece(ci, cj)) {
-              elems.push(
-                h("img", {
-                  "class": {
-                    piece: true,
-                    ghost:
-                      !!this.selectedPiece &&
-                      this.selectedPiece.parentNode.id == squareId
-                  },
-                  attrs: {
-                    src:
-                      "/images/pieces/" +
-                      this.vr.getPpath(
-                        this.vr.board[ci][cj],
-                        // Extra args useful for some variants:
-                        this.userColor,
-                        this.score,
-                        this.orientation) +
-                      V.IMAGE_EXTENSION
-                  }
-                })
-              );
+              let pieceSpecs = {
+                "class": {
+                  piece: true,
+                  ghost:
+                    !!this.selectedPiece &&
+                    this.selectedPiece.parentNode.id == squareId
+                },
+                attrs: {
+                  src:
+                    "/images/pieces/" +
+                    this.vr.getPpath(
+                      this.vr.board[ci][cj],
+                      // Extra args useful for some variants:
+                      this.userColor,
+                      this.score,
+                      this.orientation) +
+                    V.IMAGE_EXTENSION
+                }
+              };
+              if (this.arrows.length == 0)
+                pieceSpecs["style"] = { position: "absolute" };
+              elems.push(h("img", pieceSpecs));
             }
             if (this.settings.hints && hintSquares[ci][cj]) {
               elems.push(
@@ -174,16 +178,19 @@ export default {
                 "class": {
                   board: true,
                   ["board" + sizeY]: true,
-                  "light-square": lightSquare && !V.Monochrome,
-                  "dark-square": !lightSquare || !!V.Monochrome,
+                  "light-square":
+                    !V.Notoodark && lightSquare && !V.Monochrome,
+                  "dark-square":
+                    !V.Notoodark && (!lightSquare || !!V.Monochrome),
+                  "middle-square": V.Notoodark,
                   [this.settings.bcolor]: true,
                   "in-shadow": inShadow(ci, cj),
-                  "highlight-light": inHighlight(ci, cj) && lightSquare,
-                  "highlight-dark": inHighlight(ci, cj) && !lightSquare,
+                  "highlight": inHighlight(ci, cj),
                   "incheck-light":
                     showCheck && lightSquare && incheckSq[ci][cj],
                   "incheck-dark":
-                    showCheck && !lightSquare && incheckSq[ci][cj]
+                    showCheck && !lightSquare && incheckSq[ci][cj],
+                  "hover-highlight": this.vr.hoverHighlight(ci, cj)
                 },
                 attrs: {
                   id: getSquareId({ x: ci, y: cj })
@@ -201,120 +208,153 @@ export default {
       // Some variants have more than sizeY reserve pieces (Clorange: 10)
       const reserveSquareNb = Math.max(sizeY, V.RESERVE_PIECES.length);
       let myReservePiecesArray = [];
-      for (let i = 0; i < V.RESERVE_PIECES.length; i++) {
-        const qty = this.vr.reserve[playingColor][V.RESERVE_PIECES[i]];
-        myReservePiecesArray.push(
-          h(
-            "div",
-            {
-              "class": { board: true, ["board" + reserveSquareNb]: true },
-              attrs: { id: getSquareId({ x: sizeX + shiftIdx, y: i }) },
-              style: { opacity: qty > 0 ? 1 : 0.35 }
-            },
-            [
-              h("img", {
-                "class": { piece: true, reserve: true },
-                attrs: {
-                  src:
-                    "/images/pieces/" +
-                    this.vr.getReservePpath(i, playingColor, orientation) +
-                    ".svg"
-                }
-              }),
-              h("sup", { "class": { "reserve-count": true } }, [ qty ])
-            ]
-          )
-        );
+      if (!!this.vr.reserve[playingColor]) {
+        for (let i = 0; i < V.RESERVE_PIECES.length; i++) {
+          const qty = this.vr.reserve[playingColor][V.RESERVE_PIECES[i]];
+          myReservePiecesArray.push(
+            h(
+              "div",
+              {
+                "class": { board: true, ["board" + reserveSquareNb]: true },
+                attrs: { id: getSquareId({ x: sizeX + shiftIdx, y: i }) },
+                style: { opacity: qty > 0 ? 1 : 0.35 }
+              },
+              [
+                h("img", {
+                  // NOTE: class "reserve" not used currently
+                  "class": { piece: true, reserve: true },
+                  attrs: {
+                    src:
+                      "/images/pieces/" +
+                      this.vr.getReservePpath(i, playingColor, orientation) +
+                      ".svg"
+                  }
+                }),
+                h(
+                  "sup",
+                  {
+                    "class": { "reserve-count": true },
+                    style: { top: "calc(100% + 5px)" }
+                  },
+                  [ qty ]
+                )
+              ]
+            )
+          );
+        }
       }
       let oppReservePiecesArray = [];
       const oppCol = V.GetOppCol(playingColor);
-      for (let i = 0; i < V.RESERVE_PIECES.length; i++) {
-        const qty = this.vr.reserve[oppCol][V.RESERVE_PIECES[i]];
-        oppReservePiecesArray.push(
-          h(
-            "div",
-            {
-              "class": { board: true, ["board" + reserveSquareNb]: true },
-              attrs: { id: getSquareId({ x: sizeX + (1 - shiftIdx), y: i }) },
-              style: { opacity: qty > 0 ? 1 : 0.35 }
-            },
-            [
-              h("img", {
-                "class": { piece: true, reserve: true },
-                attrs: {
-                  src:
-                    "/images/pieces/" +
-                    this.vr.getReservePpath(i, oppCol, orientation) +
-                    ".svg"
-                }
-              }),
-              h("sup", { "class": { "reserve-count": true } }, [ qty ])
-            ]
-          )
-        );
+      if (!!this.vr.reserve[oppCol]) {
+        for (let i = 0; i < V.RESERVE_PIECES.length; i++) {
+          const qty = this.vr.reserve[oppCol][V.RESERVE_PIECES[i]];
+          oppReservePiecesArray.push(
+            h(
+              "div",
+              {
+                "class": { board: true, ["board" + reserveSquareNb]: true },
+                attrs: { id: getSquareId({ x: sizeX + (1 - shiftIdx), y: i }) },
+                style: { opacity: qty > 0 ? 1 : 0.35 }
+              },
+              [
+                h("img", {
+                  "class": { piece: true, reserve: true },
+                  attrs: {
+                    src:
+                      "/images/pieces/" +
+                      this.vr.getReservePpath(i, oppCol, orientation) +
+                      ".svg"
+                  }
+                }),
+                h(
+                  "sup",
+                  {
+                    "class": { "reserve-count": true },
+                    style: { top: "calc(100% + 5px)" }
+                  },
+                  [ qty ]
+                )
+              ]
+            )
+          );
+        }
       }
       const myReserveTop = (
         (playingColor == 'w' && orientation == 'b') ||
         (playingColor == 'b' && orientation == 'w')
       );
+      const hasReserveTop = (
+        (myReserveTop && !!this.vr.reserve[playingColor]) ||
+        (!myReserveTop && !!this.vr.reserve[oppCol])
+      );
+      // "var" because must be reachable from outside this block
+      var hasReserveBottom = (
+        (myReserveTop && !!this.vr.reserve[oppCol]) ||
+        (!myReserveTop && !!this.vr.reserve[playingColor])
+      );
       // Center reserves, assuming same number of pieces for each side:
       const nbReservePieces = myReservePiecesArray.length;
       const marginLeft =
         ((100 - nbReservePieces * (100 / reserveSquareNb)) / 2) + "%";
-      const reserveTop =
-        h(
-          "div",
-          {
-            "class": {
-              game: true,
-              "reserve-div": true
-            },
-            style: {
-              "margin-left": marginLeft
-            }
-          },
-          [
-            h(
-              "div",
-              {
-                "class": {
-                  row: true,
-                  "reserve-row": true
-                }
+      if (hasReserveTop) {
+        var reserveTop =
+          h(
+            "div",
+            {
+              "class": {
+                game: true,
+                "reserve-div": true
               },
-              myReserveTop ? myReservePiecesArray : oppReservePiecesArray
-            )
-          ]
-        );
-      var reserveBottom =
-        h(
-          "div",
-          {
-            "class": {
-              game: true,
-              "reserve-div": true
+              style: {
+                "margin-left": marginLeft
+              }
             },
-            style: {
-              "margin-left": marginLeft
-            }
-          },
-          [
-            h(
-              "div",
-              {
-                "class": {
-                  row: true,
-                  "reserve-row": true
-                }
+            [
+              h(
+                "div",
+                {
+                  "class": {
+                    row: true,
+                    "reserve-row": true
+                  }
+                },
+                myReserveTop ? myReservePiecesArray : oppReservePiecesArray
+              )
+            ]
+          );
+      }
+      if (hasReserveBottom) {
+        var reserveBottom =
+          h(
+            "div",
+            {
+              "class": {
+                game: true,
+                "reserve-div": true
               },
-              myReserveTop ? oppReservePiecesArray : myReservePiecesArray
-            )
-          ]
-        );
-      elementArray.push(reserveTop);
+              style: {
+                "margin-left": marginLeft
+              }
+            },
+            [
+              h(
+                "div",
+                {
+                  "class": {
+                    row: true,
+                    "reserve-row": true
+                  }
+                },
+                myReserveTop ? oppReservePiecesArray : myReservePiecesArray
+              )
+            ]
+          );
+      }
+      if (hasReserveTop) elementArray.push(reserveTop);
     }
     elementArray.push(gameDiv);
-    if (!!this.vr.reserve) elementArray.push(reserveBottom);
+    if (!!this.vr.reserve && hasReserveBottom)
+      elementArray.push(reserveBottom);
     const boardElt = document.getElementById("gamePosition");
     // boardElt might be undefine (at first drawing)
     if (this.choices.length > 0 && !!boardElt) {
@@ -403,7 +443,8 @@ export default {
           touchend: this.mouseup
         }
       };
-    } else {
+    }
+    else {
       onEvents = {
         on: {
           mousedown: this.mousedown,
@@ -548,7 +589,11 @@ export default {
             this.coordsToXY(line[1], bPos.top, bPos.left, squareWidth);
           let path =
             document.createElementNS("http://www.w3.org/2000/svg", "path");
-          path.classList.add("svg-line");
+          if (line[0][0] == line[1][0] || line[0][1] == line[1][1])
+            path.classList.add("svg-line");
+          else
+            // "Diagonals" are drawn with a lighter color (TODO: generalize)
+            path.classList.add("svg-diag");
           path.setAttribute(
             "d",
             "M" + lStart.x + "," + lStart.y + " " +
@@ -613,6 +658,7 @@ export default {
           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();
@@ -651,12 +697,7 @@ export default {
       // Cancel if off boardContainer
       const [offsetX, offsetY] =
         this.mobileBrowser
-          ?
-            [
-              e.changedTouches[0].pageX,
-              // TODO: fixing attempt for smartphones, removing window.scrollY
-              e.changedTouches[0].pageY - window.scrollY
-            ]
+          ? [e.changedTouches[0].clientX, e.changedTouches[0].clientY]
           : [e.clientX, e.clientY];
       if (
         offsetX < this.containerPos.left ||
@@ -736,11 +777,7 @@ export default {
       // Obtain the move from start and end squares
       const [offsetX, offsetY] =
         this.mobileBrowser
-          ?
-            [
-              e.changedTouches[0].pageX,
-              e.changedTouches[0].pageY - window.scrollY
-            ]
+          ? [e.changedTouches[0].clientX, e.changedTouches[0].clientY]
           : [e.clientX, e.clientY];
       let landing = document.elementFromPoint(offsetX, offsetY);
       // Next condition: classList.contains(piece) fails because of marks
@@ -824,6 +861,9 @@ export default {
 .svg-line
   stroke: black
 
+.svg-diag
+  stroke: grey
+
 .arrow-head
   fill: #5f0e78
 </style>
@@ -831,11 +871,15 @@ export default {
 <style lang="sass" scoped>
 @import "@/styles/_board_squares_img.sass";
 
-// NOTE: no variants with reserve of size != 8
-.game.reserve-div
-  margin-bottom: 18px
+//.game.reserve-div
+  // TODO: would be cleaner to restrict width so that it doesn't overflow
+  // Commented out because pieces would disappear over the board otherwise:
+  //overflow: hidden
 .reserve-count
-  padding-left: 40%
+  width: 100%
+  text-align: center
+  display: inline-block
+  position: absolute
 .reserve-row
   margin-bottom: 15px
 
@@ -867,6 +911,7 @@ export default {
       display: block
 
 img.ghost
+  // NOTE: no need to set z-index here, since opacity is low
   position: absolute
   opacity: 0.5
   top: 0
@@ -876,35 +921,38 @@ img.ghost
 .incheck-dark
   background-color: rgba(204, 51, 0, 0.9) !important
 
-.light-square.lichess
-  background-color: #f0d9b5;
-.dark-square.lichess
-  background-color: #b58863;
-
-.light-square.chesscom
-  background-color: #e5e5ca;
-.dark-square.chesscom
-  background-color: #6f8f57;
-
-.light-square.chesstempo
-  background-color: #dfdfdf;
-.dark-square.chesstempo
-  background-color: #7287b6;
-
 // TODO: no predefined highlight colors, but layers. How?
 
-.light-square.lichess.highlight-light
-  background-color: #cdd26a
-.dark-square.lichess.highlight-dark
-  background-color: #aaa23a
-
-.light-square.chesscom.highlight-light
-  background-color: #f7f783
-.dark-square.chesscom.highlight-dark
-  background-color: #bacb44
+.hover-highlight:hover
+  // TODO: color dependant on board theme, or inner border...
+  background-color: #C571E6 !important
 
-.light-square.chesstempo.highlight-light
-  background-color: #9f9fff
-.dark-square.chesstempo.highlight-dark
-  background-color: #557fff
+.highlight
+  &.light-square
+    &.lichess
+      background-color: #cdd26a
+    &.chesscom
+      background-color: #f7f783
+    &.chesstempo
+      background-color: #9f9fff
+    &.orangecc
+      background-color: #fef273
+  &.dark-square
+    &.lichess
+      background-color: #aaa23a
+    &.chesscom
+      background-color: #bacb44
+    &.chesstempo
+      background-color: #557fff
+    &.orangecc
+      background-color: #e8c525
+  &.middle-square
+    &.lichess
+      background-color: #BCBA52
+    &.chesscom
+      background-color: #D9E164
+    &.chesstempo
+      background-color: #7A8FFF
+    &.orangecc
+      background-color: #F3DC4C
 </style>