X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FBoard.vue;h=7827af1645abbd65a49bc67b8c1cb421ccca41a3;hb=f63ba2771b8bc09885952a24b4115ab4d8c6aaa1;hp=7f2e43e4c343ee1cc9810eb41f869c022daeeed5;hpb=ffeaef854d80445ef87f2cdf4fe71d60347a81bf;p=vchess.git

diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue
index 7f2e43e4..7827af16 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
@@ -182,13 +185,12 @@ export default {
                   "middle-square": V.Notoodark,
                   [this.settings.bcolor]: true,
                   "in-shadow": inShadow(ci, cj),
-                  "highlight-light": inHighlight(ci, cj) && lightSquare,
-                  "highlight-dark":
-                    inHighlight(ci, cj) && (V.Monochrome || !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 })
@@ -568,7 +570,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 + " " +
@@ -633,6 +639,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();
@@ -671,12 +678,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 ||
@@ -756,11 +758,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
@@ -844,6 +842,9 @@ export default {
 .svg-line
   stroke: black
 
+.svg-diag
+  stroke: grey
+
 .arrow-head
   fill: #5f0e78
 </style>
@@ -901,44 +902,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
-
-.middle-square.lichess
-  background-color: #D3B18C
-
-.middle-square.chesscom
-  background-color: #AABA91
-
-.middle-square.chesstempo
-  background-color: #A9B3CB
-
 // 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>