From: Benjamin Auder <benjamin.auder@somewhere>
Date: Fri, 28 Feb 2020 12:40:20 +0000 (+0100)
Subject: Improve style
X-Git-Url: https://git.auder.net/variants/current/css/img/pieces/doc/%3C?a=commitdiff_plain;h=311cba767e3c461edb0c8c758bfb193ef670a68f;p=vchess.git

Improve style
---

diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue
index 488567b5..1253c063 100644
--- a/client/src/components/BaseGame.vue
+++ b/client/src/components/BaseGame.vue
@@ -255,9 +255,10 @@ export default {
         });
       });
       if (firstMoveColor == "b") {
-        // 'end' is required for Board component to check lastMove for e.p.
+        // 'start' & 'end' is required for Board component
         this.moves.unshift({
           notation: "...",
+          start: { x: -1, y: -1 },
           end: { x: -1, y: -1 }
         });
       }
@@ -413,7 +414,7 @@ export default {
             if (!navigate && this.game.mode != "analyze")
               this.$emit("gameover", score, message);
             // Just show score on screen (allow undo)
-            else this.showEndgameMsg(score + " . " + message);
+            else this.showEndgameMsg(score + " . " + this.st.tr[message]);
           }
           if (!navigate && this.game.mode != "analyze") {
             const L = this.moves.length;
diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue
index bf43051a..640ccca1 100644
--- a/client/src/components/Board.vue
+++ b/client/src/components/Board.vue
@@ -47,9 +47,32 @@ export default {
       incheckSq[sq[0]][sq[1]] = true;
     });
 
-    // Create board element (+ reserves if needed by variant)
     const lm = this.lastMove;
     const showLight = this.settings.highlight && V.ShowMoves == "all";
+    const orientation = !V.CanFlip ? "w" : this.orientation;
+    // Ensure that squares colors do not change when board is flipped
+    const lightSquareMod = (sizeX + sizeY) % 2;
+    const showPiece = (x, y) => {
+      return (
+        this.vr.board[x][y] != V.EMPTY &&
+        (!this.vr.enlightened || this.analyze || this.score != "*" ||
+          (!!this.userColor && this.vr.enlightened[this.userColor][x][y]))
+      );
+    };
+    const inHighlight = (x, y) => {
+      return showLight && !!lm && (
+        (lm.end.x == x && lm.end.y == y) ||
+        (lm.start.x == x && lm.start.y == y));
+    };
+    const inShadow = (x, y) => {
+      return (
+        !this.analyze &&
+        this.score == "*" &&
+        this.vr.enlightened &&
+        (!this.userColor || !this.vr.enlightened[this.userColor][x][y])
+      );
+    };
+    // Create board element (+ reserves if needed by variant)
     const gameDiv = h(
       "div",
       {
@@ -59,7 +82,7 @@ export default {
         }
       },
       [...Array(sizeX).keys()].map(i => {
-        let ci = !V.CanFlip || this.orientation == "w" ? i : sizeX - i - 1;
+        const ci = orientation == "w" ? i : sizeX - i - 1;
         return h(
           "div",
           {
@@ -69,14 +92,9 @@ export default {
             style: { opacity: this.choices.length > 0 ? "0.5" : "1" }
           },
           [...Array(sizeY).keys()].map(j => {
-            let cj = !V.CanFlip || this.orientation == "w" ? j : sizeY - j - 1;
+            const cj = orientation == "w" ? j : sizeY - j - 1;
             let elems = [];
-            if (
-              this.vr.board[ci][cj] != V.EMPTY &&
-              (!this.vr.enlightened || this.analyze || this.score != "*" ||
-                (!!this.userColor &&
-                  this.vr.enlightened[this.userColor][ci][cj]))
-            ) {
+            if (showPiece(ci, cj)) {
               elems.push(
                 h("img", {
                   class: {
@@ -106,24 +124,21 @@ export default {
                 })
               );
             }
+            const lightSquare = (ci + cj) % 2 == lightSquareMod;
             return h(
               "div",
               {
                 class: {
                   board: true,
                   ["board" + sizeY]: true,
-                  "light-square": (i + j) % 2 == 0,
-                  "dark-square": (i + j) % 2 == 1,
+                  "light-square": lightSquare,
+                  "dark-square": !lightSquare,
                   [this.settings.bcolor]: true,
-                  "in-shadow":
-                    !this.analyze &&
-                    this.score == "*" &&
-                    this.vr.enlightened &&
-                    (!this.userColor ||
-                      !this.vr.enlightened[this.userColor][ci][cj]),
-                  highlight:
-                    showLight && !!lm && lm.end.x == ci && lm.end.y == cj,
-                  incheck: showLight && incheckSq[ci][cj]
+                  "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]
                 },
                 attrs: {
                   id: getSquareId({ x: ci, y: cj })
@@ -410,11 +425,15 @@ img.ghost
   opacity: 0.4
   top: 0
 
-.highlight
-  background-color: #00cc66 !important
+.highlight-light
+  background-color: rgba(0, 204, 102, 0.7) !important
+.highlight-dark
+  background-color: rgba(0, 204, 102, 0.9) !important
 
-.incheck
-  background-color: #cc3300 !important
+.incheck-light
+  background-color: rgba(204, 51, 0, 0.7) !important
+.incheck-dark
+  background-color: rgba(204, 51, 0, 0.9) !important
 
 .light-square.lichess
   background-color: #f0d9b5;
diff --git a/client/src/components/MoveList.vue b/client/src/components/MoveList.vue
index b238758c..920d5240 100644
--- a/client/src/components/MoveList.vue
+++ b/client/src/components/MoveList.vue
@@ -2,7 +2,7 @@
 div
   #scoreInfo(v-if="score!='*'")
     p {{ score }}
-    p {{ message }}
+    p {{ st.tr[message] }}
   .moves-list
     .tr(v-for="moveIdx in evenNumbers")
       .td {{ firstNum + moveIdx / 2 + 1 }}
@@ -27,6 +27,11 @@ import { getFullNotation } from "@/utils/notation";
 export default {
   name: "my-move-list",
   props: ["moves", "show", "cursor", "score", "message", "firstNum"],
+  data: function() {
+    return {
+      st: store.state
+    };
+  },
   watch: {
     cursor: function(newCursor) {
       if (window.innerWidth <= 767) return; //scrolling would hide chessboard