Fix Dark variant (opacity --> in-shadow)

[xogo.git] / base_rules.js

diff --git a/base_rules.js b/base_rules.js
index 6f11aa1..ff698f4 100644 (file)
--- a/base_rules.js
+++ b/base_rules.js
@@ -482,7 +482,7 @@ export default class ChessRules {
       for (let y=0; y<this.size.y; y++) {
         if (this.enlightened[x][y] && !newEnlightened[x][y]) {
           let elt = document.getElementById(this.coordsToId([x, y]));
-          elt.style.fillOpacity = "0.5";
+          elt.classList.add("in-shadow");
           if (this.g_pieces[x][y]) {
             this.g_pieces[x][y].remove();
             this.g_pieces[x][y] = null;
@@ -490,7 +490,7 @@ export default class ChessRules {
         }
         else if (!this.enlightened[x][y] && newEnlightened[x][y]) {
           let elt = document.getElementById(this.coordsToId([x, y]));
-          elt.style.fillOpacity = "1";
+          elt.classList.remove("in-shadow");
           if (this.board[x][y] != "") {
             const piece = this.getPiece(x, y);
             const color = this.getColor(x, y);
@@ -627,13 +627,12 @@ export default class ChessRules {
       for (let j=0; j < sizeY; j++) {
         const ii = (flipped ? this.size.x - 1 - i : i);
         const jj = (flipped ? this.size.y - 1 - j : j);
-        let fillOpacity = '1';
-        if (this.options["dark"] && !this.enlightened[ii][jj])
-          fillOpacity = '0.5';
+        let classes = this.getSquareColorClass(ii, jj);
+        if (this.enlightened && !this.enlightened[ii][jj])
+          classes += " in-shadow";
         // NOTE: x / y reversed because coordinates system is reversed.
-        // TODO: CSS "wood" style, rect --> style --> background-image ?
-        board += `<rect style="fill-opacity:${fillOpacity};
-                               fill:#${this.getSquareColor(ii, jj)}"
+        board += `<rect
+          class="${classes}"
           id="${this.coordsToId([ii, jj])}"
           width="10"
           height="10"
@@ -646,8 +645,8 @@ export default class ChessRules {
   }
 
   // Generally light square bottom-right; TODO: user-defined colors at least
-  getSquareColor(i, j) {
-    return ((i+j) % 2 == 0 ? "f0d9b5": "b58863");
+  getSquareColorClass(i, j) {
+    return ((i+j) % 2 == 0 ? "light-square": "dark-square");
   }
 
   setupPieces(r) {
@@ -664,6 +663,7 @@ export default class ChessRules {
     }
     else this.g_pieces = ArrayFun.init(this.size.x, this.size.y, null);
     let container = document.getElementById(this.containerId);
+    if (!r) r = container.getBoundingClientRect();
     const pieceWidth = this.getPieceWidth(r.width);
     for (let i=0; i < this.size.x; i++) {
       for (let j=0; j < this.size.y; j++) {
@@ -1171,7 +1171,7 @@ export default class ChessRules {
   }
 
   // All possible moves from selected square
-  getPotentialMovesFrom(sq) {
+  getPotentialMovesFrom(sq, color) {
     if (typeof sq[0] == "string") return this.getDropMovesFrom(sq);
     if (this.options["madrasi"] && this.isImmobilized(sq)) return [];
     const piece = this.getPiece(sq[0], sq[1]);
@@ -2067,24 +2067,36 @@ export default class ChessRules {
   }
 
   playReceivedMove(moves, callback) {
+    const launchAnimation = () => {
+      const r =
+        document.getElementById(this.containerId).getBoundingClientRect();
+      const animateRec = i => {
+        this.animate(moves[i], () => {
+          this.playVisual(moves[i], r);
+          this.play(moves[i]);
+          if (i < moves.length - 1) setTimeout(() => animateRec(i+1), 300);
+          else callback();
+        });
+      };
+      animateRec(0);
+    };
+    const checkDisplayThenAnimate = () => {
+      if (boardContainer.style.display == "none") {
+        alert("New move! Let's go back to game...");
+        document.getElementById("gameInfos").style.display = "none";
+        boardContainer.style.display = "block";
+        setTimeout(launchAnimation, 700);
+      }
+      else launchAnimation(); //focused user!
+    };
+    let boardContainer = document.getElementById("boardContainer");
     if (!document.hasFocus()) {
       window.onfocus = () => {
         window.onfocus = undefined;
-        setTimeout(() => this.playReceivedMove(moves, callback), 700);
+        checkDisplayThenAnimate();
       };
-      return;
     }
-    const r =
-      document.getElementById(this.containerId).getBoundingClientRect();
-    const animateRec = i => {
-      this.animate(moves[i], () => {
-        this.playVisual(moves[i], r);
-        this.play(moves[i]);
-        if (i < moves.length - 1) setTimeout(() => animateRec(i+1), 300);
-        else callback();
-      });
-    };
-    animateRec(0);
+    else checkDisplayThenAnimate();
   }
 
 };