From 728cb1e3b2ae84b1cf4aaa7e66b295f77dea359e Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> Date: Tue, 3 May 2022 21:47:54 +0200 Subject: [PATCH] Pause. Next move: generalize base_rules.js to different boards, and complete Hex --- base_rules.js | 8 +++---- variants/Hex/Hex_board_11x11.svg | 21 ------------------- variants/Hex/Regular_hexagon.svg | 14 ++++++++----- variants/Hex/class.js | 36 ++++++++++++++++++++++++++++++++ 4 files changed, 48 insertions(+), 31 deletions(-) delete mode 100644 variants/Hex/Hex_board_11x11.svg create mode 100644 variants/Hex/class.js diff --git a/base_rules.js b/base_rules.js index 2b2ecfa..353af39 100644 --- 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 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 --- 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"?> -<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> -<svg width="400px" height="400px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" version="1.1"> - <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"/> -</svg> +<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 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). -- 2.44.0