Pause. Next move: generalize base_rules.js to different boards, and complete Hex
[xogo.git] / variants / Hex / class.js
1 getSvgChessboard() {
2 const flipped = (this.playerColor == 'b');
3 let board = `
4 <svg
5 width="2771.2px" height="1700px"
6 class="chessboard_SVG">
7 <defs>
8 <g id="hexa">
9 <polygon
10 style="fill:none;stroke:#000000;stroke-width:1px"
11 points="0,-100.0 86.6,-50.0 86.6,50.0 0,100.0 -86.6,50.0 -86.6,-50.0"
12 />
13 </g>
14 </defs>`;
15 for (let i=0; i < this.size.x; i++) {
16 for (let j=0; j < this.size.y; j++) {
17 let classes = this.getSquareColorClass(i, j);
18 board += `<rect
19 class="${classes}"
20 id="${this.coordsToId([i, j])}"
21 width="10"
22 height="10"
23 x="${10*j}" ///////////// + resize ! ratio
24 y="${10*i}" />`;
25 }
26 }
27 board += "</g></svg>";
28 return board;
29 }
30
31 // neutral-light neutral-dark --> specify per variant in CSS file
32 getSquareColorClass(i, j) {
33 return ((i+j) % 2 == 0 ? "light-square": "dark-square");
34 }
35
36 // TODO: generalize base_rules.js to not assume size.x == width and size.y == height (not true here).