| 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). |