Better reserves display fix for Firefox

[xogo.git] / base_rules.js

diff --git a/base_rules.js b/base_rules.js
index da72320..30cb272 100644 (file)
--- a/base_rules.js
+++ b/base_rules.js
@@ -713,7 +713,6 @@ export default class ChessRules {
       const container = document.getElementById(this.containerId);
       r = container.getBoundingClientRect();
     }
-    const epsilon = 1e-4; //fix display bug on Firefox at least
     for (let c of colors) {
       if (!this.reserve[c]) continue;
       const nbR = this.getNbReservePieces(c);
@@ -727,7 +726,8 @@ export default class ChessRules {
       rcontainer.classList.add("reserves");
       rcontainer.style.left = i0 + "px";
       rcontainer.style.top = j0 + "px";
-      rcontainer.style.width = (nbR * sqResSize) + "px";
+      // NOTE: +1 fix display bug on Firefox at least
+      rcontainer.style.width = (nbR * sqResSize + 1) + "px";
       rcontainer.style.height = sqResSize + "px";
       document.getElementById("boardContainer").appendChild(rcontainer);
       for (let p of Object.keys(this.reserve[c])) {
@@ -735,8 +735,8 @@ export default class ChessRules {
         let r_cell = document.createElement("div");
         r_cell.id = this.coordsToId([c, p]);
         r_cell.classList.add("reserve-cell");
-        r_cell.style.width = (sqResSize - epsilon) + "px";
-        r_cell.style.height = (sqResSize - epsilon) + "px";
+        r_cell.style.width = sqResSize + "px";
+        r_cell.style.height = sqResSize + "px";
         rcontainer.appendChild(r_cell);
         let piece = document.createElement("piece");
         const pieceSpec = this.pieces(c)[p];
@@ -760,7 +760,7 @@ export default class ChessRules {
   }
 
   updateReserve(color, piece, count) {
-    if (this.options["cannibal"] && C.CannibalKing[piece])
+    if (this.options["cannibal"] && C.CannibalKings[piece])
       piece = "k"; //capturing cannibal king: back to king form
     const oldCount = this.reserve[color][piece];
     this.reserve[color][piece] = count;
@@ -810,7 +810,6 @@ export default class ChessRules {
   }
 
   rescaleReserve(r) {
-    const epsilon = 1e-4;
     for (let c of ['w','b']) {
       if (!this.reserve[c]) continue;
       const nbR = this.getNbReservePieces(c);
@@ -822,15 +821,15 @@ export default class ChessRules {
       let rcontainer = document.getElementById("reserves_" + c);
       rcontainer.style.left = i0 + "px";
       rcontainer.style.top = j0 + "px";
-      rcontainer.style.width = (nbR * sqResSize) + "px";
+      rcontainer.style.width = (nbR * sqResSize + 1) + "px";
       rcontainer.style.height = sqResSize + "px";
       // And then reserve cells:
       const rpieceWidth = this.getReserveSquareSize(r.width, nbR);
       Object.keys(this.reserve[c]).forEach(p => {
         if (this.reserve[c][p] == 0) return;
         let r_cell = document.getElementById(this.coordsToId([c, p]));
-        r_cell.style.width = (sqResSize - epsilon) + "px";
-        r_cell.style.height = (sqResSize - epsilon) + "px";
+        r_cell.style.width = sqResSize + "px";
+        r_cell.style.height = sqResSize + "px";
       });
     }
   }
@@ -876,6 +875,8 @@ export default class ChessRules {
         startPiece, curPiece = null,
         sqSize;
     const mousedown = (e) => {
+      // Disable zoom on smartphones:
+      if (e.touches && e.touches.length > 1) e.preventDefault();
       r = container.getBoundingClientRect();
       sqSize = this.getSquareWidth(r.width);
       const square = this.idToCoords(e.target.id);
@@ -943,9 +944,10 @@ export default class ChessRules {
       document.addEventListener("mouseup", mouseup);
     }
     if ('ontouchstart' in window) {
-      document.addEventListener("touchstart", mousedown);
-      document.addEventListener("touchmove", mousemove);
-      document.addEventListener("touchend", mouseup);
+      // https://stackoverflow.com/a/42509310/12660887
+      document.addEventListener("touchstart", mousedown, {passive: false});
+      document.addEventListener("touchmove", mousemove, {passive: false});
+      document.addEventListener("touchend", mouseup, {passive: false});
     }
   }
 
@@ -1543,11 +1545,19 @@ export default class ChessRules {
   addPawnMoves([x1, y1], [x2, y2], moves, promotions) {
     let finalPieces = ["p"];
     const color = this.getColor(x1, y1);
+    const oppCol = C.GetOppCol(color);
     const lastRank = (color == "w" ? 0 : this.size.x - 1);
     if (x2 == lastRank && (!this.options["rifle"] || this.board[x2][y2] == ""))
     {
       // promotions arg: special override for Hiddenqueen variant
-      if (promotions) finalPieces = promotions;
+      if (
+        this.options["cannibal"] &&
+        this.board[x2][y2] != "" &&
+        this.getColor(x2, y2) == oppCol
+      ) {
+        finalPieces = [this.getPieceType(x2, y2)];
+      }
+      else if (promotions) finalPieces = promotions;
       else if (this.pawnSpecs.promotions)
         finalPieces = this.pawnSpecs.promotions;
     }
@@ -2160,20 +2170,21 @@ export default class ChessRules {
       };
       animateRec(0);
     };
-    const checkDisplayThenAnimate = () => {
+    // Delay if user wasn't focused:
+    const checkDisplayThenAnimate = (delay) => {
       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!
+      else setTimeout(launchAnimation, delay || 0);
     };
     let boardContainer = document.getElementById("boardContainer");
     if (document.hidden) {
       document.onvisibilitychange = () => {
         document.onvisibilitychange = undefined;
-        checkDisplayThenAnimate();
+        checkDisplayThenAnimate(700);
       };
     }
     else checkDisplayThenAnimate();