Trying to prevent horizontal swipe effect on smartphones (Chrome)

[xogo.git] / base_rules.js

diff --git a/base_rules.js b/base_rules.js
index 038126e..a39cc0a 100644 (file)
--- a/base_rules.js
+++ b/base_rules.js
@@ -495,8 +495,8 @@ export default class ChessRules {
           let elt = document.getElementById(this.coordsToId([x, y]));
           elt.classList.remove("in-shadow");
           if (this.board[x][y] != "") {
-            const color = this.getColor(i, j);
-            const piece = this.getPiece(i, j);
+            const color = this.getColor(x, y);
+            const piece = this.getPiece(x, y);
             this.g_pieces[x][y] = document.createElement("piece");
             let newClasses = [
               this.pieces()[piece]["class"],
@@ -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";
       });
     }
   }
@@ -860,7 +859,7 @@ export default class ChessRules {
         // Touch screen, dragend
         touchLocation = e.changedTouches[0];
       if (touchLocation)
-        return {x: touchLocation.pageX, y: touchLocation.pageY};
+        return {x: touchLocation.clientX, y: touchLocation.clientY};
       return [0, 0]; //Big trouble here =)
     }
 
@@ -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);
@@ -908,6 +909,9 @@ export default class ChessRules {
         e.preventDefault();
         centerOnCursor(curPiece, e);
       }
+      else if (e.changedTouches && e.changedTouches.length >= 1)
+        // Attempt to prevent horizontal swipe...
+        e.preventDefault();
     };
 
     const mouseup = (e) => {
@@ -943,10 +947,12 @@ 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});
     }
+    // TODO: onpointerdown/move/up ? See reveal.js /controllers/touch.js
   }
 
   showChoices(moves, r) {
@@ -1543,11 +1549,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;
     }