X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=variants%2FHex%2Fclass.js;h=91a0fe67ce89e3394388d004fc6a6588fca9c33f;hb=437dfd42748eb2359103fd87a7d0e780121a7865;hp=ec14a0632718ee2ac0538649132adebd1b2ec3c5;hpb=d621e620e7b568df94c53611f6c71ab318f4ffe3;p=xogo.git

diff --git a/variants/Hex/class.js b/variants/Hex/class.js
index ec14a06..91a0fe6 100644
--- a/variants/Hex/class.js
+++ b/variants/Hex/class.js
@@ -1,4 +1,7 @@
-// https://www.boardspace.net/hex/english/Rules%20-%20HexWiki.htm
+import ChessRules from "/base_rules.js";
+import PiPo from "/utils/PiPo.js";
+import Move from "/utils/Move.js";
+
 export default class HexRules extends ChessRules {
 
   static get Options() {
@@ -6,21 +9,26 @@ export default class HexRules extends ChessRules {
       input: [
         {
           label: "Board size",
+          variable: "bsize",
           type: "number",
-          defaut: 11,
-          variable: "bsize"
-        }
-      ],
-      check: [
+          defaut: 11
+        },
         {
           label: "Swap",
-          defaut: true,
-          variable: "swap"
+          variable: "swap",
+          type: "checkbox",
+          defaut: true
         }
       ]
     };
   }
 
+  get hasFlags() {
+    return false;
+  }
+  get hasEnpassant() {
+    return false;
+  }
   get hasReserve() {
     return false;
   }
@@ -31,8 +39,11 @@ export default class HexRules extends ChessRules {
 
   doClick(coords) {
     if (
-      this.board[coords.x][coords.y] != "" &&
-      (!this.swap || this.movesCount >= 2)
+      this.playerColor != this.turn ||
+      (
+        this.board[coords.x][coords.y] != "" &&
+        (!this.options["swap"] || this.movesCount >= 2)
+      )
     ) {
       return null;
     }
@@ -63,58 +74,89 @@ export default class HexRules extends ChessRules {
 
   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);
+    const emptyCount = C.FenEmptySquares(this.size.x);
+    return (emptyCount + "/").repeat(this.size.x).slice(0, -1) + " w 0";
   }
 
-  getPieceWidth(rwidth) {
-    return (rwidth / this.size.y); //TODO
-  }
-
-  // TODO
+  // TODO: enable vertical board (rotate?)
   getSvgChessboard() {
+    // NOTE: with small margin seems nicer
+    let width = 173.2 * this.size.y + 173.2 * (this.size.y-1) / 2 + 30,
+        height = 50 + Math.floor(150 * this.size.x) + 30,
+        min_x = -86.6 - 15,
+        min_y = -100 - 15;
+//    if (this.size.ratio < 1) {
+//      [width, height] = [height, width];
+//      [min_x, min_y] = [min_y, min_x];
+//    }
     let board = `
       <svg
-        width="2771.2px" height="1700px"
-        class="chessboard_SVG">
+        viewBox="${min_x} ${min_y} ${width} ${height}"
+        class="chessboard_SVG"`;
+//    if (this.size.ratio < 1)
+//      board += ` transform="rotate(90 ${min_x} ${min_y})"`
+    board += `>
       <defs>
         <g id="hexa">
           <polygon
-            style="fill:none;stroke:#000000;stroke-width:1px"
+            style="stroke:#000000;stroke-width:1"
             points="0,-100.0 86.6,-50.0 86.6,50.0 0,100.0 -86.6,50.0 -86.6,-50.0"
           />
         </g>
       </defs>`;
+    board += "<g>";
     for (let i=0; i < this.size.x; i++) {
       for (let j=0; j < this.size.y; j++) {
-        let classes = this.getSquareColorClass(i, j);
-        board += `<rect
-          class="neutral-square"
-          id="${this.coordsToId([i, j])}"
-          width="10"
-          height="10"
-          x="${10*j}" ///////////// + resize ! ratio
-          y="${10*i}" />`;
+        board += `
+          <use
+            href="#hexa"
+            class="neutral-square"
+            id="${this.coordsToId({x: i, y: j})}"
+            x="${173.2*j + 86.6*i}"
+            y="${150*i}"
+          />`;
       }
     }
-    board += "</g></svg>";
+    board += `</g><g style="fill:none;stroke-width:10">`;
+    // Goals: up/down/left/right
+    board += `<polyline style="stroke:red" points="`
+    for (let i=0; i<=2*this.size.y; i++)
+      board += ((i-1)*86.6) + ',' + (i % 2 == 0 ? -50 : -100) + ' ';
+    board += `"/><polyline style="stroke:red" points="`;
+    for (let i=1; i<=2*this.size.y; i++) {
+      const jShift = 200 * Math.floor((this.size.y+1)/2) +
+                     100 * (Math.floor(this.size.y/2) - 1) +
+                     (i % 2 == 0 ? -50 : 0) +
+                     (this.size.y % 2 == 0 ? 50 : 0);
+      board += ((i+this.size.y-2)*86.6) + ',' + jShift + ' ';
+    }
+    board += `"/><polyline style="stroke:blue" points="`;
+    let sumY = -100;
+    for (let i=0; i<=2*this.size.x; i++) {
+      board += ((Math.floor(i/2)-1) * 86.6) + ',' +
+               (sumY += (i % 2 == 0 ? 50 : 100)) + ' ';
+    }
+    board += `"/><polyline style="stroke:blue" points="`;
+    sumY = -100;
+    for (let i=0; i<2*this.size.x; i++) {
+      board += (173.2*this.size.x + (Math.floor(i/2)-1) * 86.6) + ',' +
+               (sumY += (i % 2 == 0 ? 50 : 100)) + ' ';
+    }
+    board += `"/></g></svg>`;
     return board;
   }
 
   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];
+    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);
+        }
+      }
+    }
   }
 
   initMouseEvents() {
@@ -129,53 +171,84 @@ export default class HexRules extends ChessRules {
       }
     };
 
-    if ('onmousedown' in window)
+    if ('onmousedown' in window) {
       document.addEventListener("mousedown", mousedown);
+      document.addEventListener("wheel",
+        (e) => this.rescale(e.deltaY < 0 ? "up" : "down"));
+    }
     if ('ontouchstart' in window)
       document.addEventListener("touchstart", mousedown, {passive: false});
   }
 
+  // TODO: enable rotation
   get size() {
+    const baseRatio = 1.619191; // 2801.2 / 1730, "widescreen"
+    const rotate = false; //window.innerWidth < window.innerHeight; //"vertical screen"
     return {
-      x: this.bsize,
-      y: this.bsize,
-      ratio: 1.630118
-    };
-  }
-
-  pieces() {
-    return {
-      'p': {
-        "class": "pawn",
-      }
+      x: this.options["bsize"],
+      y: this.options["bsize"],
+      ratio: (rotate ? 1 / baseRatio : baseRatio)
     };
   }
 
   play(move) {
-    super.playOnBoard(move);
+    this.playOnBoard(move);
+    this.movesCount++;
+    this.turn = C.GetOppCol(this.turn);
   }
 
-  // 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");
+    // Search for connecting path of opp color:
+    let explored = {}, component;
+    let min, max;
+    const getIndex = (x, y) => x + "." + y;
+    // Explore one connected component:
+    const neighborsSearch = ([x, y], index) => {
+      // Let's say "white" connects on x and "black" on y
+      const z = (oppCol == 'w' ? x : y);
+      if (z < min)
+        min = z;
+      if (z > max)
+        max = z;
+      explored[index] = true;
+      component[index] = true;
+      for (let [dx, dy] of super.pieces()['k'].moves[0].steps) {
+        const [nx, ny] = [x + dx, y + dy];
+        const nidx = getIndex(nx, ny);
+        if (
+          this.onBoard(nx, ny) &&
+          this.getColor(nx, ny) == oppCol &&
+          !component[nidx]
+        ) {
+          neighborsSearch([nx, ny], nidx);
+        }
+      }
+    };
+    // Explore all components:
+    for (let i=0; i<this.size.x; i++) {
+      for (let j=0; j<this.size.y; j++) {
+        const index = getIndex(i, j);
+        if (this.getColor(i, j) == oppCol && !explored[index]) {
+          component = {};
+          [min, max] = [this.size.x, 0];
+          neighborsSearch([i, j], index);
+          if (max - min == this.size.x - 1)
+            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)
+      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 => {
-// 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";
+      let elt = document.getElementById(this.coordsToId({x: a.x, y: a.y}));
+      elt.classList.add("bg-" + (a.c == 'w' ? "white" : "black"));
     });
   }