Add falling pawn mode for Recycle + fix animation bug
[xogo.git] / base_rules.js
index 715f4e0..9100173 100644 (file)
@@ -26,11 +26,18 @@ export default class ChessRules {
           { label: "Asymmetric random", value: 2 }
         ]
       }],
-      check: [{
-        label: "Capture king?",
-        defaut: false,
-        variable: "taking"
-      }],
+      check: [
+        {
+          label: "Capture king",
+          defaut: false,
+          variable: "taking"
+        },
+        {
+          label: "Falling pawn",
+          defaut: false,
+          variable: "pawnfall"
+        }
+      ],
       // Game modifiers (using "elementary variants"). Default: false
       styles: [
         "atomic",
@@ -495,8 +502,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 +720,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 +733,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 +742,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];
@@ -810,7 +817,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 +828,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 +866,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 +882,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 +916,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 +954,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) {
@@ -1539,21 +1552,37 @@ export default class ChessRules {
     return !!enpassantMove ? [enpassantMove] : [];
   }
 
-  // Consider all potential promotions:
+  // Consider all potential promotions.
+  // NOTE: "promotions" arg = special override for Hiddenqueen variant
   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;
+    const promotionOk =
+      x2 == lastRank && (!this.options["rifle"] || this.board[x2][y2] == "");
+    if (promotionOk && !this.options["pawnfall"]) {
+      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;
     }
     for (let piece of finalPieces) {
-      const tr = (piece != "p" ? { c: color, p: piece } : null);
-      moves.push(this.getBasicMove([x1, y1], [x2, y2], tr));
+      const tr = !this.options["pawnfall"] && piece != "p"
+        ? { c: color, p: piece }
+        : null;
+      let newMove = this.getBasicMove([x1, y1], [x2, y2], tr);
+      if (promotionOk && this.options["pawnfall"]) {
+        newMove.appear.shift();
+        newMove.pawnfall = true; //required in prePlay()
+      }
+      moves.push(newMove);
     }
   }
 
@@ -1765,7 +1794,7 @@ export default class ChessRules {
 
   // Is (king at) given position under check by "color" ?
   underCheck([x, y], color) {
-    if (this.taking || this.options["dark"]) return false;
+    if (this.options["taking"] || this.options["dark"]) return false;
     color = color || C.GetOppCol(this.getColor(x, y));
     const pieces = this.pieces(color);
     return Object.keys(pieces).some(p => {
@@ -1835,7 +1864,7 @@ export default class ChessRules {
         return res;
       });
     }
-    if (this.taking || this.options["dark"]) return moves;
+    if (this.options["taking"] || this.options["dark"]) return moves;
     const kingPos = this.searchKingPos(color);
     let filtered = {}; //avoid re-checking similar moves (promotions...)
     return moves.filter(m => {
@@ -1941,7 +1970,7 @@ export default class ChessRules {
       }
     }
     const minSize = Math.min(move.appear.length, move.vanish.length);
-    if (this.hasReserve) {
+    if (this.hasReserve && !move.pawnfall) {
       const color = this.turn;
       for (let i=minSize; i<move.appear.length; i++) {
         // Something appears = dropped on board (some exceptions, Chakart...)
@@ -2083,7 +2112,7 @@ export default class ChessRules {
       nbR++;
     }
     const rsqSize = this.getReserveSquareSize(r.width, nbR);
-    return [ridx * rsqSize, rsqSize]; //slightly inaccurate... TODO?
+    return [-ridx * rsqSize, rsqSize]; //slightly inaccurate... TODO?
   }
 
   animate(move, callback) {
@@ -2131,6 +2160,7 @@ export default class ChessRules {
     const maxDist = Math.sqrt((this.size.x - 1)** 2 + (this.size.y - 1) ** 2);
     const multFact = (distance - 1) / (maxDist - 1); //1 == minDist
     const duration = 0.2 + multFact * 0.3;
+    const initTransform = startPiece.style.transform;
     startPiece.style.transform =
       `translate(${arrival[0] + rs[0]}px, ${arrival[1] + rs[1]}px)`;
     startPiece.style.transitionDuration = duration + "s";
@@ -2140,6 +2170,10 @@ export default class ChessRules {
           if (this.options["rifle"]) startArray[i1][j1].style.opacity = "1";
           startPiece.remove();
         }
+        else {
+          startPiece.style.transform = initTransform;
+          startPiece.style.transitionDuration = "0s";
+        }
         callback();
       },
       duration * 1000