First draft of Hex game

[xogo.git] / variants / Hex / class.js

diff --git a/variants/Hex/class.js b/variants/Hex/class.js
index f1e3a83..ec14a06 100644 (file)
--- a/variants/Hex/class.js
+++ b/variants/Hex/class.js
@@ -1,5 +1,78 @@
+// https://www.boardspace.net/hex/english/Rules%20-%20HexWiki.htm
+export default class HexRules extends ChessRules {
+
+  static get Options() {
+    return {
+      input: [
+        {
+          label: "Board size",
+          type: "number",
+          defaut: 11,
+          variable: "bsize"
+        }
+      ],
+      check: [
+        {
+          label: "Swap",
+          defaut: true,
+          variable: "swap"
+        }
+      ]
+    };
+  }
+
+  get hasReserve() {
+    return false;
+  }
+
+  get noAnimate() {
+    return true;
+  }
+
+  doClick(coords) {
+    if (
+      this.board[coords.x][coords.y] != "" &&
+      (!this.swap || this.movesCount >= 2)
+    ) {
+      return null;
+    }
+    let res = new Move({
+      start: {x: coords.x, y: coords.y},
+      appear: [
+        new PiPo({
+          x: coords.x,
+          y: coords.y,
+          c: this.turn,
+          p: 'p'
+        })
+      ],
+      vanish: []
+    });
+    if (this.board[coords.x][coords.y] != "") {
+      res.vanish.push(
+        new PiPo({
+          x: coords.x,
+          y: coords.y,
+          c: C.GetOppCol(this.turn),
+          p: 'p'
+        })
+      );
+    }
+    return res;
+  }
+
+  genRandInitFen() {
+    // NOTE: size.x == size.y (square boards)
+    const emptyCount = C.FenEmptySquares(this.size.x.repeat);
+    return (emptyCount + "/").repeat(this.size.x).slice(0, -1);
+  }
+
+  getPieceWidth(rwidth) {
+    return (rwidth / this.size.y); //TODO
+  }
+
+  // TODO
   getSvgChessboard() {
-    const flipped = (this.playerColor == 'b');
     let board = `
       <svg
         width="2771.2px" height="1700px"
@@ -16,7 +89,7 @@
       for (let j=0; j < this.size.y; j++) {
         let classes = this.getSquareColorClass(i, j);
         board += `<rect
-          class="${classes}"
+          class="neutral-square"
           id="${this.coordsToId([i, j])}"
           width="10"
           height="10"
@@ -28,9 +101,82 @@
     return board;
   }
 
-// neutral-light neutral-dark --> specify per variant in CSS file
-  getSquareColorClass(i, j) {
-    return ((i+j) % 2 == 0 ? "light-square": "dark-square");
+  setupPieces() {
+    // TODO: just scan board and get IDs, and addClass "bg-white" or "bg-black"
+  }
+
+  // TODO (NOTE: no flip here, always same view)
+  getPixelPosition(i, j, r) {
+    if (i < 0 || j < 0)
+      return [0, 0]; //piece vanishes
+    let x, y;
+    const sqSize = r.width / this.size.y;
+    const flipped = (this.playerColor == 'b');
+    const x = (flipped ? this.size.y - 1 - j : j) * sqSize,
+          y = (flipped ? this.size.x - 1 - i : i) * sqSize;
+    return [r.x + x, r.y + y];
+  }
+
+  initMouseEvents() {
+    const mousedown = (e) => {
+      if (e.touches && e.touches.length > 1)
+        e.preventDefault();
+      const cd = this.idToCoords(e.target.id);
+      if (cd) {
+        const move = this.doClick(cd);
+        if (move)
+          this.playPlusVisual(move);
+      }
+    };
+
+    if ('onmousedown' in window)
+      document.addEventListener("mousedown", mousedown);
+    if ('ontouchstart' in window)
+      document.addEventListener("touchstart", mousedown, {passive: false});
+  }
+
+  get size() {
+    return {
+      x: this.bsize,
+      y: this.bsize,
+      ratio: 1.630118
+    };
+  }
+
+  pieces() {
+    return {
+      'p': {
+        "class": "pawn",
+      }
+    };
+  }
+
+  play(move) {
+    super.playOnBoard(move);
+  }
+
+  // TODO:
+  getCurrentScore(move) {
+    const oppCol = C.GetOppCol(this.turn);
+    // Search for connecting path of opp color: TODO
+    // ...
+    if (path found)
+      return (oppCol == "w" ? "1-0" : "0-1");
+    return "*";
+  }
+
+  playVisual(move) {
+    move.vanish.forEach(v => {
+// TODO: just get ID, and remClass "bg-white" or "bg-black" (in CSS: TODO)
+    });
+    move.appear.forEach(a => {
+// TODO: just get ID, and addClass "bg-white" or "bg-black" (in CSS: TODO)
+//      this.g_pieces[a.x][a.y] = document.createElement("piece");
+//      this.g_pieces[a.x][a.y].classList.add(this.pieces()[a.p]["class"]);
+//      this.g_pieces[a.x][a.y].classList.add(a.c == "w" ? "white" : "black");
+//      this.g_pieces[a.x][a.y].style.width = pieceWidth + "px";
+//      this.g_pieces[a.x][a.y].style.height = pieceWidth + "px";
+    });
   }
 
-// TODO: generalize base_rules.js to not assume size.x == width and size.y == height (not true here).
+};