X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=5a21771db5075458c97a748a53f3999e0b46edc1;hb=baa6f86f72e3b697ec2fcd34913986b2fa5f02eb;hp=4af6469160151c910fb4a1766c61372e796f7100;hpb=8764102a5f1e9ad16965dd5e2c249062b3d8a605;p=vchess.git

diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue
index 4af64691..5a21771d 100644
--- a/client/src/components/Board.vue
+++ b/client/src/components/Board.vue
@@ -68,11 +68,11 @@ export default {
     }
     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 +121,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,12 +175,16 @@ 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-dark":
+                    inHighlight(ci, cj) && (V.Monochrome || !lightSquare),
                   "incheck-light":
                     showCheck && lightSquare && incheckSq[ci][cj],
                   "incheck-dark":
@@ -213,6 +218,7 @@ export default {
             },
             [
               h("img", {
+                // NOTE: class "reserve" not used currently
                 "class": { piece: true, reserve: true },
                 attrs: {
                   src:
@@ -221,7 +227,14 @@ export default {
                     ".svg"
                 }
               }),
-              h("sup", { "class": { "reserve-count": true } }, [ qty ])
+              h(
+                "sup",
+                {
+                  "class": { "reserve-count": true },
+                  style: { top: "calc(100% + 5px)" }
+                },
+                [ qty ]
+              )
             ]
           )
         );
@@ -248,7 +261,14 @@ export default {
                     ".svg"
                 }
               }),
-              h("sup", { "class": { "reserve-count": true } }, [ qty ])
+              h(
+                "sup",
+                {
+                  "class": { "reserve-count": true },
+                  style: { top: "calc(100% + 5px)" }
+                },
+                [ qty ]
+              )
             ]
           )
         );
@@ -548,7 +568,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 + " " +
@@ -651,12 +675,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 ||
@@ -669,6 +688,8 @@ export default {
           delete this.selectedPiece;
           this.selectedPiece = null;
           this.start = null;
+          this.possibleMoves = []; //in case of
+          this.click = "";
           let selected = document.querySelector(".ghost");
           if (!!selected) selected.classList.remove("ghost");
         }
@@ -734,11 +755,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
@@ -822,6 +839,9 @@ export default {
 .svg-line
   stroke: black
 
+.svg-diag
+  stroke: grey
+
 .arrow-head
   fill: #5f0e78
 </style>
@@ -829,11 +849,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
 
@@ -865,6 +889,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
@@ -874,21 +899,6 @@ 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
@@ -905,4 +915,9 @@ img.ghost
   background-color: #9f9fff
 .dark-square.chesstempo.highlight-dark
   background-color: #557fff
+
+.light-square.orangecc.highlight-light
+  background-color: #fef273
+.dark-square.orangecc.highlight-dark
+  background-color: #e8c525
 </style>