First version of complete Chakart rules (unfinished). Draft diagramer (missing marks...
[xogo.git] / variants / Hex / class.js
1 import ChessRules from "/base_rules.js";
2 import PiPo from "/utils/PiPo.js";
3 import Move from "/utils/Move.js";
4
5 export default class HexRules extends ChessRules {
6
7 static get Options() {
8 return {
9 input: [
10 {
11 label: "Board size",
12 variable: "bsize",
13 type: "number",
14 defaut: 11
15 },
16 {
17 label: "Swap",
18 variable: "swap",
19 type: "checkbox",
20 defaut: true
21 }
22 ]
23 };
24 }
25
26 get hasFlags() {
27 return false;
28 }
29 get hasEnpassant() {
30 return false;
31 }
32 get hasReserve() {
33 return false;
34 }
35 get noAnimate() {
36 return true;
37 }
38 get clickOnly() {
39 return true;
40 }
41
42 doClick(coords) {
43 if (
44 this.playerColor != this.turn ||
45 (
46 this.board[coords.x][coords.y] != "" &&
47 (!this.options["swap"] || this.movesCount >= 2)
48 )
49 ) {
50 return null;
51 }
52 let res = new Move({
53 start: {x: coords.x, y: coords.y},
54 appear: [
55 new PiPo({
56 x: coords.x,
57 y: coords.y,
58 c: this.turn,
59 p: 'p'
60 })
61 ],
62 vanish: []
63 });
64 if (this.board[coords.x][coords.y] != "") {
65 res.vanish.push(
66 new PiPo({
67 x: coords.x,
68 y: coords.y,
69 c: C.GetOppCol(this.turn),
70 p: 'p'
71 })
72 );
73 }
74 return res;
75 }
76
77 genRandInitFen() {
78 // NOTE: size.x == size.y (square boards)
79 const emptyCount = C.FenEmptySquares(this.size.x);
80 return (emptyCount + "/").repeat(this.size.x).slice(0, -1) + " w 0";
81 }
82
83 getSvgChessboard() {
84 // NOTE: with small margin seems nicer
85 let width = 173.2 * this.size.y + 173.2 * (this.size.y-1) / 2 + 30,
86 height = 50 + Math.floor(150 * this.size.x) + 30,
87 min_x = -86.6 - 15,
88 min_y = -100 - 15;
89 if (this.size.ratio < 1) {
90 // Rotate by 30 degrees to display vertically
91 [width, height] = [height, width];
92 [min_x, min_y] = [min_y, min_x];
93 }
94 let board = `
95 <svg
96 viewBox="${min_x} ${min_y} ${width} ${height}"
97 class="chessboard_SVG">
98 <defs>
99 <g id="hexa">
100 <polygon
101 style="stroke:#000000;stroke-width:1"
102 points="0,-100.0 86.6,-50.0 86.6,50.0 0,100.0 -86.6,50.0 -86.6,-50.0"
103 />
104 </g>
105 </defs>`;
106 board += "<g";
107 if (this.size.ratio < 1)
108 board += ` transform="rotate(30)"`
109 board += ">";
110 for (let i=0; i < this.size.x; i++) {
111 for (let j=0; j < this.size.y; j++) {
112 board += `
113 <use
114 href="#hexa"
115 class="neutral-square"
116 id="${this.coordsToId({x: i, y: j})}"
117 x="${173.2*j + 86.6*i}"
118 y="${150*i}"
119 />`;
120 }
121 }
122 board += `</g><g style="fill:none;stroke-width:10"`;
123 if (this.size.ratio < 1)
124 board += ` transform="rotate(30)"`
125 // Goals: up/down/left/right
126 board += `><polyline style="stroke:red" points="`
127 for (let i=0; i<=2*this.size.y; i++)
128 board += ((i-1)*86.6) + ',' + (i % 2 == 0 ? -50 : -100) + ' ';
129 board += `"/><polyline style="stroke:red" points="`;
130 for (let i=1; i<=2*this.size.y; i++) {
131 const jShift = 200 * Math.floor((this.size.y+1)/2) +
132 100 * (Math.floor(this.size.y/2) - 1) +
133 (i % 2 == 0 ? -50 : 0) +
134 (this.size.y % 2 == 0 ? 50 : 0);
135 board += ((i+this.size.y-2)*86.6) + ',' + jShift + ' ';
136 }
137 board += `"/><polyline style="stroke:blue" points="`;
138 let sumY = -100;
139 for (let i=0; i<=2*this.size.x; i++) {
140 board += ((Math.floor(i/2)-1) * 86.6) + ',' +
141 (sumY += (i % 2 == 0 ? 50 : 100)) + ' ';
142 }
143 board += `"/><polyline style="stroke:blue" points="`;
144 sumY = -100;
145 for (let i=0; i<2*this.size.x; i++) {
146 board += (173.2*this.size.x + (Math.floor(i/2)-1) * 86.6) + ',' +
147 (sumY += (i % 2 == 0 ? 50 : 100)) + ' ';
148 }
149 board += `"/></g></svg>`;
150 return board;
151 }
152
153 setupPieces() {
154 for (let i=0; i<this.size.x; i++) {
155 for (let j=0; j<this.size.y; j++) {
156 if (this.board[i][j] != "") {
157 const sqColor = (this.getColor(i, j) == 'w' ? "white" : "black");
158 const elt = document.getElementById(this.coordsToId({x: i, y: j}));
159 elt.classList.remove("neutral-square");
160 elt.classList.add("bg-" + sqColor);
161 }
162 }
163 }
164 }
165
166 get size() {
167 const baseRatio = 1.6191907514450865; //2801.2 / 1730, "widescreen"
168 const rc =
169 document.getElementById(this.containerid).getBoundingClientRect();
170 const rotate = rc.width < rc.height; //"vertical screen"
171 return {
172 x: this.options["bsize"],
173 y: this.options["bsize"],
174 ratio: (rotate ? 1 / baseRatio : baseRatio)
175 };
176 }
177
178 play(move) {
179 this.playOnBoard(move);
180 this.movesCount++;
181 this.turn = C.GetOppCol(this.turn);
182 }
183
184 getCurrentScore(move) {
185 const oppCol = C.GetOppCol(this.turn);
186 // Search for connecting path of opp color:
187 let explored = {}, component;
188 let min, max;
189 const getIndex = (x, y) => x + "." + y;
190 // Explore one connected component:
191 const neighborsSearch = ([x, y], index) => {
192 // Let's say "white" connects on x and "black" on y
193 const z = (oppCol == 'w' ? x : y);
194 if (z < min)
195 min = z;
196 if (z > max)
197 max = z;
198 explored[index] = true;
199 component[index] = true;
200 for (let [dx, dy] of super.pieces()['k'].moves[0].steps) {
201 const [nx, ny] = [x + dx, y + dy];
202 const nidx = getIndex(nx, ny);
203 if (
204 this.onBoard(nx, ny) &&
205 this.getColor(nx, ny) == oppCol &&
206 !component[nidx]
207 ) {
208 neighborsSearch([nx, ny], nidx);
209 }
210 }
211 };
212 // Explore all components:
213 for (let i=0; i<this.size.x; i++) {
214 for (let j=0; j<this.size.y; j++) {
215 const index = getIndex(i, j);
216 if (this.getColor(i, j) == oppCol && !explored[index]) {
217 component = {};
218 [min, max] = [this.size.x, 0];
219 neighborsSearch([i, j], index);
220 if (max - min == this.size.x - 1)
221 return (oppCol == "w" ? "1-0" : "0-1");
222 }
223 }
224 }
225 return "*";
226 }
227
228 playVisual(move) {
229 move.vanish.forEach(v => {
230 let elt = document.getElementById(this.coordsToId({x: v.x, y: v.y}));
231 elt.classList.remove("bg-" + (v.c == 'w' ? "white" : "black"));
232 });
233 move.appear.forEach(a => {
234 let elt = document.getElementById(this.coordsToId({x: a.x, y: a.y}));
235 elt.classList.add("bg-" + (a.c == 'w' ? "white" : "black"));
236 });
237 }
238
239 };