From: Benjamin Auder <benjamin.auder@somewhere>
Date: Mon, 4 Jul 2022 14:08:01 +0000 (+0200)
Subject: Add AbstractClickFillRules for games filling squares (no pieces)
X-Git-Url: https://git.auder.net/js/pieces/%7B%7B%20asset%28%27mixstore/css/doc/index.css?a=commitdiff_plain;h=4fd396b4d42189eae78583f332d845db9111a0fb;p=xogo.git

Add AbstractClickFillRules for games filling squares (no pieces)
---

diff --git a/variants/Arena/rules.html b/variants/Arena/rules.html
index fca97fe..5aa8716 100644
--- a/variants/Arena/rules.html
+++ b/variants/Arena/rules.html
@@ -1,3 +1,21 @@
-<p>TODO</p>
+<p>
+  Only moves ending in the Arena zone (where no piece stand initially)
+  are allowed. If starting from inside the Arena, then a move must capture
+  something.
+</p>
+
+<ul>
+  <li>King and queen move like a queen restricted to 3 squares.</li>
+  <li>Pawns can capture backwards.</li>
+</ul>
+
+<p>
+  The first player who cannot make a move loses.
+  A player who lose both king and queen also lose the game.
+</p>
+
+<a href="https://www.chessvariants.com/32turn.dir/arenachess.html">
+  chessvariants page.
+</a>
 
 <p class="author">Jeff Kiska (2000).</p>
diff --git a/variants/Hex/class.js b/variants/Hex/class.js
index 0797c91..1919bc8 100644
--- a/variants/Hex/class.js
+++ b/variants/Hex/class.js
@@ -1,8 +1,8 @@
-import ChessRules from "/base_rules.js";
+import AbstractClickFillRules from "/variants/_ClickFill/class.js";
 import PiPo from "/utils/PiPo.js";
 import Move from "/utils/Move.js";
 
-export default class HexRules extends ChessRules {
+export default class HexRules extends AbstractClickFillRules {
 
   static get Options() {
     return {
@@ -153,19 +153,6 @@ export default class HexRules extends ChessRules {
     return board;
   }
 
-  setupPieces() {
-    for (let i=0; i<this.size.x; i++) {
-      for (let j=0; j<this.size.y; j++) {
-        if (this.board[i][j] != "") {
-          const sqColor = (this.getColor(i, j) == 'w' ? "white" : "black");
-          const elt = document.getElementById(this.coordsToId({x: i, y: j}));
-          elt.classList.remove("neutral-square");
-          elt.classList.add("bg-" + sqColor);
-        }
-      }
-    }
-  }
-
   get size() {
     const baseRatio = 1.6191907514450865; //2801.2 / 1730, "widescreen"
     const rc =
@@ -228,15 +215,4 @@ export default class HexRules extends ChessRules {
     return "*";
   }
 
-  playVisual(move) {
-    move.vanish.forEach(v => {
-      let elt = document.getElementById(this.coordsToId({x: v.x, y: v.y}));
-      elt.classList.remove("bg-" + (v.c == 'w' ? "white" : "black"));
-    });
-    move.appear.forEach(a => {
-      let elt = document.getElementById(this.coordsToId({x: a.x, y: a.y}));
-      elt.classList.add("bg-" + (a.c == 'w' ? "white" : "black"));
-    });
-  }
-
 };
diff --git a/variants/_ClickFill/class.js b/variants/_ClickFill/class.js
new file mode 100644
index 0000000..b16b221
--- /dev/null
+++ b/variants/_ClickFill/class.js
@@ -0,0 +1,80 @@
+import ChessRules from "/base_rules.js";
+
+export default class AbstractClickFillRules extends ChessRules {
+
+  static get Aliases() {
+    return Object.assign({'A': AbstractClickFillRules}, ChessRules.Aliases);
+  }
+
+  static get Options() {
+    return {}
+  }
+
+  setupPieces() {
+    for (let i=0; i<this.size.x; i++) {
+      for (let j=0; j<this.size.y; j++) {
+        const markHere =
+          !!this.marks && this.marks.some(m => m[0] == i && m[1] == j);
+        if (this.board[i][j] != "" || markHere) {
+          let elt = document.getElementById(this.coordsToId({x: i, y: j}));
+          elt.classList.remove("neutral-square");
+          if (markHere)
+            elt.classList.add("bg-mark");
+          else {
+            const sqColor = (this.getColor(i, j) == 'w' ? "white" : "black");
+            elt.classList.add("bg-" + sqColor);
+          }
+        }
+      }
+    }
+  }
+
+  playVisual(move) {
+    move.vanish.forEach(v => {
+      let elt = document.getElementById(this.coordsToId({x: v.x, y: v.y}));
+      elt.classList.remove("bg-" + (v.c == 'w' ? "white" : "black"));
+    });
+    move.appear.forEach(a => {
+      let elt = document.getElementById(this.coordsToId({x: a.x, y: a.y}));
+      elt.classList.add("bg-" + (a.c == 'w' ? "white" : "black"));
+    });
+  }
+
+  animateFading(arr, cb) {
+    const animLength = 350; //TODO: 350ms? More? Less?
+    arr.forEach(e => {
+      let fadingSquare =
+        document.getElementById(this.coordsToId({x: e.x, y: e.y}));
+      fadingSquare.style.transitionDuration = (animLength / 1000) + "s";
+      //fadingSquare.style.backgroundColor = "0"; //TODO: type in or out
+      if (this.board[e.x][e.y] != "") {
+        // TODO: fade out curCol --> neutral
+      }
+      else {
+        // TODO: fade in neutral --> this.getColor(e.x, e.y)
+      }
+    });
+    setTimeout(cb, animLength);
+  }
+
+  animate(move, callback) {
+    // No movement, but use fading effects: TODO
+    // https://stackoverflow.com/questions/14350126/transition-color-fade-on-hover
+    // https://stackoverflow.com/questions/22581789/fade-in-fade-out-background-color-of-an-html-element-with-javascript-or-jquer
+    if (true || this.noAnimate || move.noAnimate) {
+      callback();
+      return;
+    }
+    let targetObj = new TargetObj(callback);
+    const allChanges = move.appear.concat(move.vanish);
+    if (allChanges.length > 0) {
+      targetObj.target++;
+      this.animateFading(allChanges, () => targetObj.increment());
+    }
+    targetObj.target +=
+      this.customAnimate(move, segments, () => targetObj.increment());
+    if (targetObj.target == 0)
+      callback();
+  }
+
+};
diff --git a/variants/_ClickFill/style.css b/variants/_ClickFill/style.css
new file mode 100644
index 0000000..8f414f5
--- /dev/null
+++ b/variants/_ClickFill/style.css
@@ -0,0 +1 @@
+/* TODO */