Pause. Next move: generalize base_rules.js to different boards, and complete Hex

diff --git a/base_rules.js b/base_rules.js
index 2b2ecfa..353af39 100644 (file)
--- a/base_rules.js
+++ b/base_rules.js
@@ -619,16 +619,14 @@ export default class ChessRules {
 
   // Get SVG board (background, no pieces)
   getSvgChessboard() {
-    const [sizeX, sizeY] = [this.size.x, this.size.y];
     const flipped = (this.playerColor == 'b');
     let board = `
       <svg
         viewBox="0 0 80 80"
-        version="1.1"
         class="chessboard_SVG">
       <g>`;
-    for (let i=0; i < sizeX; i++) {
-      for (let j=0; j < sizeY; j++) {
+    for (let i=0; i < this.size.x; i++) {
+      for (let j=0; j < this.size.y; j++) {
         const ii = (flipped ? this.size.x - 1 - i : i);
         const jj = (flipped ? this.size.y - 1 - j : j);
         let classes = this.getSquareColorClass(ii, jj);
@@ -1026,7 +1024,7 @@ export default class ChessRules {
   // BASIC UTILS
 
   get size() {
-    return {"x": 8, "y": 8};
+    return {x: 8, y: 8};
   }
 
   // Color of thing on square (i,j). 'undefined' if square is empty

diff --git a/variants/Hex/Hex_board_11x11.svg b/variants/Hex/Hex_board_11x11.svg
deleted file mode 100644 (file)
index 67082d7..0000000
--- a/variants/Hex/Hex_board_11x11.svg
+++ /dev/null
@@ -1,21 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="470"
-xmlns:xlink="http://www.w3.org/1999/xlink" height="296">
-<path fill="#07F" d="m14,20-7,12 147,254h293l14-24-147-254"/>
-<path fill="red" d="m21,8-7,12 193,120 107-132z
-m133,278 107-118 193,106-7,12"/>
-<g id="n"><g id="m"><g id="k"><g id="j"><g id="i">
-<path id="h" fill="#DDD" stroke="#000" stroke-width="1"
-d="m26,28v15l13,7.5 13-7.5v-15l-13-7.5z"/> 
-<use xlink:href="#h" transform="translate(26,0)"/></g>
-<use xlink:href="#i" transform="translate(52,0)"/></g>
-<use xlink:href="#j" transform="translate(104,0)"/>
-<use xlink:href="#j" transform="translate(182,0)"/></g>
-<use xlink:href="#k" transform="translate(13,22.5)"/></g>
-<use xlink:href="#m" transform="translate(26,45)"/></g>
-<use xlink:href="#n" transform="translate(52,90)"/>
-<use xlink:href="#n" transform="translate(91,157.5)"/>
-<text fill="#FF3" font-size="10" text-anchor="middle"
-font-family="Arial Bold" x="30" y="20">A<tspan x="56">B</tspan><tspan x="82">C</tspan><tspan x="108">D</tspan><tspan x="134">E</tspan><tspan x="160">F</tspan><tspan x="186">G</tspan><tspan x="212">H</tspan><tspan x="238">I</tspan><tspan x="264">J</tspan><tspan x="290">K</tspan><tspan x="178" y="281">A</tspan><tspan x="204">B</tspan><tspan x="230">C</tspan><tspan x="256">D</tspan><tspan x="282">E</tspan><tspan x="308">F</tspan><tspan x="334">G</tspan><tspan x="360">H</tspan><tspan x="386">I</tspan><tspan x="412">J</tspan><tspan x="438">K</tspan><tspan x="19" y="38">1</tspan><tspan x="320">1</tspan><tspan x="32" y="61">2</tspan><tspan x="333">2</tspan><tspan x="45" y="83">3</tspan><tspan x="346">3</tspan><tspan x="58" y="106">4</tspan><tspan x="359">4</tspan><tspan x="71" y="128">5</tspan><tspan x="372">5</tspan><tspan x="84" y="151">6</tspan><tspan x="385">6</tspan><tspan x="97" y="173">7</tspan><tspan x="398">7</tspan><tspan x="110" y="196">8</tspan><tspan x="411">8</tspan><tspan x="123" y="218">9</tspan><tspan x="424">9</tspan><tspan x="136" y="241">10</tspan><tspan x="437">10</tspan><tspan x="149" y="263">11</tspan><tspan x="450">11</tspan></text>
-</svg>
-<!--Source: https://fr.m.wikipedia.org/wiki/Fichier:Hex_board_11x11.svg-->

diff --git a/variants/Hex/Regular_hexagon.svg b/variants/Hex/Regular_hexagon.svg
index fc1c0d2..fc47b04 100644 (file)
--- a/variants/Hex/Regular_hexagon.svg
+++ b/variants/Hex/Regular_hexagon.svg
@@ -1,5 +1,9 @@
-<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\r
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\r
-<svg width="400px" height="400px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" version="1.1">\r
-  <polygon style="fill:none;stroke:#000000;stroke-width:2.5px" points="148,183.138438763306 52,183.138438763306 4,100 52,16.8615612366939 148,16.8615612366939 196,100"/>\r
-</svg>\r
+<svg width="173.2px" height="400.0px" viewBox="-86.6 -100.0 173.2 400.0">
+  <defs>
+    <g id="hexa">
+      <polygon style="fill:none;stroke:#000000;stroke-width:1px" 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>
+  <use href="#hexa" x="0" y="0"/>
+  <use href="#hexa" x="0" y="200"/>
+</svg>

diff --git a/variants/Hex/class.js b/variants/Hex/class.js
new file mode 100644 (file)
index 0000000..f1e3a83
--- /dev/null
+++ b/variants/Hex/class.js
@@ -0,0 +1,36 @@
+  getSvgChessboard() {
+    const flipped = (this.playerColor == 'b');
+    let board = `
+      <svg
+        width="2771.2px" height="1700px"
+        class="chessboard_SVG">
+      <defs>
+        <g id="hexa">
+          <polygon
+            style="fill:none;stroke:#000000;stroke-width:1px"
+            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>`;
+    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="${classes}"
+          id="${this.coordsToId([i, j])}"
+          width="10"
+          height="10"
+          x="${10*j}" ///////////// + resize ! ratio
+          y="${10*i}" />`;
+      }
+    }
+    board += "</g></svg>";
+    return board;
+  }
+
+// neutral-light neutral-dark --> specify per variant in CSS file
+  getSquareColorClass(i, j) {
+    return ((i+j) % 2 == 0 ? "light-square": "dark-square");
+  }
+
+// TODO: generalize base_rules.js to not assume size.x == width and size.y == height (not true here).