-import ChessRules from "/base_rules.js";
+import AbstractClickFillRules from "/variants/_ClickFill/class.js";
import PiPo from "/utils/PiPo.js";
import Move from "/utils/Move.js";
-export default class HexRules extends ChessRules {
+export default class HexRules extends AbstractClickFillRules {
static get Options() {
return {
get hasReserve() {
return false;
}
-
get noAnimate() {
return true;
}
+ get clickOnly() {
+ return true;
+ }
doClick(coords) {
if (
new PiPo({
x: coords.x,
y: coords.y,
- c: C.GetOppCol(this.turn),
+ c: C.GetOppTurn(this.turn),
p: 'p'
})
);
return res;
}
- genRandInitFen() {
+ genRandInitBaseFen() {
// NOTE: size.x == size.y (square boards)
const emptyCount = C.FenEmptySquares(this.size.x);
- return (emptyCount + "/").repeat(this.size.x).slice(0, -1) + " w 0";
+ return {
+ fen: (emptyCount + "/").repeat(this.size.x - 1) + emptyCount,
+ o: {}
+ };
}
- // TODO: re-enable rotation
getSvgChessboard() {
// NOTE: with small margin seems nicer
let width = 173.2 * this.size.y + 173.2 * (this.size.y-1) / 2 + 30,
height = 50 + Math.floor(150 * this.size.x) + 30,
min_x = -86.6 - 15,
min_y = -100 - 15;
-// if (this.size.rotate) {
-// [width, height] = [height, width];
-// [min_x, min_y] = [min_y, min_x];
-// }
+ if (this.size.ratio < 1) {
+ // Rotate by 30 degrees to display vertically
+ [width, height] = [height, width];
+ [min_x, min_y] = [min_y, min_x];
+ }
let board = `
<svg
viewBox="${min_x} ${min_y} ${width} ${height}"
- class="chessboard_SVG"`;
-// if (this.size.rotate)
-// board += ` transform="rotate(90 ${min_x} ${min_y})"`
- board += `>
+ class="chessboard_SVG">
<defs>
<g id="hexa">
<polygon
/>
</g>
</defs>`;
- board += "<g>";
+ board += "<g";
+ if (this.size.ratio < 1)
+ board += ` transform="rotate(30)"`
+ board += ">";
for (let i=0; i < this.size.x; i++) {
for (let j=0; j < this.size.y; j++) {
board += `
/>`;
}
}
- board += `</g><g style="fill:none;stroke-width:10">`;
+ board += `</g><g style="fill:none;stroke-width:10"`;
+ if (this.size.ratio < 1)
+ board += ` transform="rotate(30)"`
// Goals: up/down/left/right
- board += `<polyline style="stroke:red" points="`
+ board += `><polyline style="stroke:red" points="`
for (let i=0; i<=2*this.size.y; i++)
board += ((i-1)*86.6) + ',' + (i % 2 == 0 ? -50 : -100) + ' ';
board += `"/><polyline style="stroke:red" points="`;
return board;
}
- setupPieces() {
- for (let i=0; i<this.size.x; i++) {
- for (let j=0; j<this.size.y; j++) {
- if (this.board[i][j] != "") {
- const sqColor = (this.getColor(i, j) == 'w' ? "white" : "black");
- const elt = document.getElementById(this.coordsToId({x: i, y: j}));
- elt.classList.remove("neutral-square");
- elt.classList.add("bg-" + sqColor);
- }
- }
- }
- }
-
- initMouseEvents() {
- const mousedown = (e) => {
- if (e.touches && e.touches.length > 1)
- e.preventDefault();
- const cd = this.idToCoords(e.target.id);
- if (cd) {
- const move = this.doClick(cd);
- if (move)
- this.playPlusVisual(move);
- }
- };
-
- if ('onmousedown' in window)
- document.addEventListener("mousedown", mousedown);
- if ('ontouchstart' in window)
- document.addEventListener("touchstart", mousedown, {passive: false});
- }
-
get size() {
- const baseRatio = 1.619191; // 2801.2 / 1730, "widescreen"
- const rotate = window.innerWidth < window.innerHeight; //"vertical screen"
+ const baseRatio = 1.6191907514450865; //2801.2 / 1730, "widescreen"
+ const rc =
+ document.getElementById(this.containerId).getBoundingClientRect();
+ const rotate = rc.width < rc.height; //"vertical screen"
return {
x: this.options["bsize"],
y: this.options["bsize"],
- ratio: rotate ? 1 / baseRatio : baseRatio,
- rotate: rotate
+ ratio: (rotate ? 1 / baseRatio : baseRatio)
};
}
play(move) {
this.playOnBoard(move);
this.movesCount++;
- this.turn = C.GetOppCol(this.turn);
+ this.turn = C.GetOppTurn(this.turn);
}
- getCurrentScore(move) {
- const oppCol = C.GetOppCol(this.turn);
+ getCurrentScore() {
+ const oppCol = C.GetOppTurn(this.turn);
// Search for connecting path of opp color:
let explored = {}, component;
let min, max;
max = z;
explored[index] = true;
component[index] = true;
- for (let [dx, dy] of super.pieces()['k'].moves[0].steps) {
+ for (let [dx, dy] of super.pieces()['k'].both[0].steps) {
const [nx, ny] = [x + dx, y + dy];
const nidx = getIndex(nx, ny);
if (
return "*";
}
- playVisual(move) {
- move.vanish.forEach(v => {
- let elt = document.getElementById(this.coordsToId({x: v.x, y: v.y}));
- elt.classList.remove("bg-" + (v.c == 'w' ? "white" : "black"));
- });
- move.appear.forEach(a => {
- let elt = document.getElementById(this.coordsToId({x: a.x, y: a.y}));
- elt.classList.add("bg-" + (a.c == 'w' ? "white" : "black"));
- });
- }
-
};