db60da74843a76b47bfea0a6890592ad79236efe
[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
36 get noAnimate() {
37 return true;
38 }
39
40 doClick(coords) {
41 if (
42 this.playerColor != this.turn ||
43 (
44 this.board[coords.x][coords.y] != "" &&
45 (!this.options["swap"] || this.movesCount >= 2)
46 )
47 ) {
48 return null;
49 }
50 let res = new Move({
51 start: {x: coords.x, y: coords.y},
52 appear: [
53 new PiPo({
54 x: coords.x,
55 y: coords.y,
56 c: this.turn,
57 p: 'p'
58 })
59 ],
60 vanish: []
61 });
62 if (this.board[coords.x][coords.y] != "") {
63 res.vanish.push(
64 new PiPo({
65 x: coords.x,
66 y: coords.y,
67 c: C.GetOppCol(this.turn),
68 p: 'p'
69 })
70 );
71 }
72 return res;
73 }
74
75 genRandInitFen() {
76 // NOTE: size.x == size.y (square boards)
77 const emptyCount = C.FenEmptySquares(this.size.x);
78 return (emptyCount + "/").repeat(this.size.x).slice(0, -1) + " w 0";
79 }
80
81 getSvgChessboard() {
82 // NOTE: with small margin seems nicer
83 let width = 173.2 * this.size.y + 173.2 * (this.size.y-1) / 2 + 30,
84 height = 50 + Math.floor(150 * this.size.x) + 30,
85 min_x = -86.6 - 15,
86 min_y = -100 - 15;
87 if (this.size.ratio < 1) {
88 // Rotate by 30 degrees to display vertically
89 [width, height] = [height, width];
90 [min_x, min_y] = [min_y, min_x];
91 }
92 let board = `
93 <svg
94 viewBox="${min_x} ${min_y} ${width} ${height}"
95 class="chessboard_SVG">
96 <defs>
97 <g id="hexa">
98 <polygon
99 style="stroke:#000000;stroke-width:1"
100 points="0,-100.0 86.6,-50.0 86.6,50.0 0,100.0 -86.6,50.0 -86.6,-50.0"
101 />
102 </g>
103 </defs>`;
104 board += "<g";
105 if (this.size.ratio < 1)
106 board += ` transform="rotate(30)"`
107 board += ">";
108 for (let i=0; i < this.size.x; i++) {
109 for (let j=0; j < this.size.y; j++) {
110 board += `
111 <use
112 href="#hexa"
113 class="neutral-square"
114 id="${this.coordsToId({x: i, y: j})}"
115 x="${173.2*j + 86.6*i}"
116 y="${150*i}"
117 />`;
118 }
119 }
120 board += `</g><g style="fill:none;stroke-width:10"`;
121 if (this.size.ratio < 1)
122 board += ` transform="rotate(30)"`
123 // Goals: up/down/left/right
124 board += `><polyline style="stroke:red" points="`
125 for (let i=0; i<=2*this.size.y; i++)
126 board += ((i-1)*86.6) + ',' + (i % 2 == 0 ? -50 : -100) + ' ';
127 board += `"/><polyline style="stroke:red" points="`;
128 for (let i=1; i<=2*this.size.y; i++) {
129 const jShift = 200 * Math.floor((this.size.y+1)/2) +
130 100 * (Math.floor(this.size.y/2) - 1) +
131 (i % 2 == 0 ? -50 : 0) +
132 (this.size.y % 2 == 0 ? 50 : 0);
133 board += ((i+this.size.y-2)*86.6) + ',' + jShift + ' ';
134 }
135 board += `"/><polyline style="stroke:blue" points="`;
136 let sumY = -100;
137 for (let i=0; i<=2*this.size.x; i++) {
138 board += ((Math.floor(i/2)-1) * 86.6) + ',' +
139 (sumY += (i % 2 == 0 ? 50 : 100)) + ' ';
140 }
141 board += `"/><polyline style="stroke:blue" points="`;
142 sumY = -100;
143 for (let i=0; i<2*this.size.x; i++) {
144 board += (173.2*this.size.x + (Math.floor(i/2)-1) * 86.6) + ',' +
145 (sumY += (i % 2 == 0 ? 50 : 100)) + ' ';
146 }
147 board += `"/></g></svg>`;
148 return board;
149 }
150
151 setupPieces() {
152 for (let i=0; i<this.size.x; i++) {
153 for (let j=0; j<this.size.y; j++) {
154 if (this.board[i][j] != "") {
155 const sqColor = (this.getColor(i, j) == 'w' ? "white" : "black");
156 const elt = document.getElementById(this.coordsToId({x: i, y: j}));
157 elt.classList.remove("neutral-square");
158 elt.classList.add("bg-" + sqColor);
159 }
160 }
161 }
162 }
163
164 initMouseEvents() {
165 const mousedown = (e) => {
166 if (e.touches && e.touches.length > 1)
167 e.preventDefault();
168 const cd = this.idToCoords(e.target.id);
169 if (cd) {
170 const move = this.doClick(cd);
171 if (move)
172 this.playPlusVisual(move);
173 }
174 };
175
176 if ('onmousedown' in window) {
177 document.addEventListener("mousedown", mousedown);
178 document.addEventListener("wheel",
179 (e) => this.rescale(e.deltaY < 0 ? "up" : "down"));
180 }
181 if ('ontouchstart' in window)
182 document.addEventListener("touchstart", mousedown, {passive: false});
183 }
184
185 get size() {
186 const baseRatio = 1.6191907514450865; //2801.2 / 1730, "widescreen"
187 const rotate = window.innerWidth < window.innerHeight; //"vertical screen"
188 return {
189 x: this.options["bsize"],
190 y: this.options["bsize"],
191 ratio: (rotate ? 1 / baseRatio : baseRatio)
192 };
193 }
194
195 play(move) {
196 this.playOnBoard(move);
197 this.movesCount++;
198 this.turn = C.GetOppCol(this.turn);
199 }
200
201 getCurrentScore(move) {
202 const oppCol = C.GetOppCol(this.turn);
203 // Search for connecting path of opp color:
204 let explored = {}, component;
205 let min, max;
206 const getIndex = (x, y) => x + "." + y;
207 // Explore one connected component:
208 const neighborsSearch = ([x, y], index) => {
209 // Let's say "white" connects on x and "black" on y
210 const z = (oppCol == 'w' ? x : y);
211 if (z < min)
212 min = z;
213 if (z > max)
214 max = z;
215 explored[index] = true;
216 component[index] = true;
217 for (let [dx, dy] of super.pieces()['k'].moves[0].steps) {
218 const [nx, ny] = [x + dx, y + dy];
219 const nidx = getIndex(nx, ny);
220 if (
221 this.onBoard(nx, ny) &&
222 this.getColor(nx, ny) == oppCol &&
223 !component[nidx]
224 ) {
225 neighborsSearch([nx, ny], nidx);
226 }
227 }
228 };
229 // Explore all components:
230 for (let i=0; i<this.size.x; i++) {
231 for (let j=0; j<this.size.y; j++) {
232 const index = getIndex(i, j);
233 if (this.getColor(i, j) == oppCol && !explored[index]) {
234 component = {};
235 [min, max] = [this.size.x, 0];
236 neighborsSearch([i, j], index);
237 if (max - min == this.size.x - 1)
238 return (oppCol == "w" ? "1-0" : "0-1");
239 }
240 }
241 }
242 return "*";
243 }
244
245 playVisual(move) {
246 move.vanish.forEach(v => {
247 let elt = document.getElementById(this.coordsToId({x: v.x, y: v.y}));
248 elt.classList.remove("bg-" + (v.c == 'w' ? "white" : "black"));
249 });
250 move.appear.forEach(a => {
251 let elt = document.getElementById(this.coordsToId({x: a.x, y: a.y}));
252 elt.classList.add("bg-" + (a.c == 'w' ? "white" : "black"));
253 });
254 }
255
256 };