{label: "Asymmetric random", value: 2}
]
}],
- check: [
+ input: [
{
label: "Capture king",
- defaut: false,
- variable: "taking"
+ variable: "taking",
+ type: "checkbox",
+ defaut: false
},
{
label: "Falling pawn",
- defaut: false,
- variable: "pawnfall"
+ variable: "pawnfall",
+ type: "checkbox",
+ defaut: false
}
],
// Game modifiers (using "elementary variants"). Default: false
else {
// Randomize
- let pieces = { w: new Array(8), b: new Array(8) };
+ let pieces = {w: new Array(8), b: new Array(8)};
flags = "";
// Shuffle pieces on first (and last rank if randomness == 2)
for (let c of ["w", "b"]) {
//////////////////
// INITIALIZATION
- constructor(o) {
+ constructor(o, genFenOnly) {
this.options = o.options;
// Fill missing options (always the case if random challenge)
(V.Options.select || []).concat(V.Options.input || []).forEach(opt => {
if (this.options[opt.variable] === undefined)
this.options[opt.variable] = opt.defaut;
});
+ if (genFenOnly)
+ // This object will be used only for initial FEN generation
+ return;
this.playerColor = o.color;
this.afterPlay = o.afterPlay; //trigger some actions after playing a move
this.initMouseEvents();
const chessboard =
document.getElementById(this.containerId).querySelector(".chessboard");
- // TODO: calling with "this" seems required by Hex. Understand why...
- new ResizeObserver(() => this.rescale(this)).observe(chessboard);
}
re_drawBoardElements() {
}
}
- // After resize event: no need to destroy/recreate pieces
- rescale(self) {
- const container = document.getElementById(self.containerId);
- if (!container)
- return; //useful at initial loading
- let chessboard = container.querySelector(".chessboard");
- let r = chessboard.getBoundingClientRect();
- let [newWidth, newHeight] = [r.width, r.height];
+ // Resize board: no need to destroy/recreate pieces
+ rescale(mode) {
+ let chessboard =
+ document.getElementById(this.containerId).querySelector(".chessboard");
+ const r = chessboard.getBoundingClientRect();
+ const multFact = (mode == "up" ? 1.05 : 0.95);
+ let [newWidth, newHeight] = [multFact * r.width, multFact * r.height];
// Stay in window:
- if (newWidth > window.innerWidth)
+ if (newWidth > window.innerWidth) {
newWidth = window.innerWidth;
- if (newHeight > window.innerHeight)
+ newHeight = newWidth / this.size.ratio;
+ }
+ if (newHeight > window.innerHeight) {
newHeight = window.innerHeight;
- const newRatio = newWidth / newHeight;
- if (newRatio > self.size.ratio)
- newWidth = newHeight * self.size.ratio;
- else if (newRatio < self.size.ratio)
- newHeight = newWidth / self.size.ratio;
+ newWidth = newHeight * this.size.ratio;
+ }
chessboard.style.width = newWidth + "px";
chessboard.style.height = newHeight + "px";
const newX = (window.innerWidth - newWidth) / 2;
const newY = (window.innerHeight - newHeight) / 2;
chessboard.style.top = newY + "px";
const newR = {x: newX, y: newY, width: newWidth, height: newHeight};
- const pieceWidth = self.getPieceWidth(newWidth);
+ const pieceWidth = this.getPieceWidth(newWidth);
// NOTE: next "if" for variants which use squares filling
// instead of "physical", moving pieces
if (this.g_pieces) {
- for (let i=0; i < self.size.x; i++) {
- for (let j=0; j < self.size.y; j++) {
- if (self.g_pieces[i][j]) {
+ for (let i=0; i < this.size.x; i++) {
+ for (let j=0; j < this.size.y; j++) {
+ if (this.g_pieces[i][j]) {
// NOTE: could also use CSS transform "scale"
- self.g_pieces[i][j].style.width = pieceWidth + "px";
- self.g_pieces[i][j].style.height = pieceWidth + "px";
- const [ip, jp] = self.getPixelPosition(i, j, newR);
+ this.g_pieces[i][j].style.width = pieceWidth + "px";
+ this.g_pieces[i][j].style.height = pieceWidth + "px";
+ const [ip, jp] = this.getPixelPosition(i, j, newR);
// Translate coordinates to use chessboard as reference:
- self.g_pieces[i][j].style.transform =
+ this.g_pieces[i][j].style.transform =
`translate(${ip - newX}px,${jp - newY}px)`;
}
}
}
}
- if (self.hasReserve)
- self.rescaleReserve(newR);
+ if (this.hasReserve)
+ this.rescaleReserve(newR);
}
rescaleReserve(r) {
};
const mouseup = (e) => {
- const newR = chessboard.getBoundingClientRect();
- if (newR.width != r.width || newR.height != r.height) {
- this.rescale();
- return;
- }
if (!start)
return;
const [x, y] = [start.x, start.y];
document.addEventListener("mousedown", mousedown);
document.addEventListener("mousemove", mousemove);
document.addEventListener("mouseup", mouseup);
+ document.addEventListener("wheel",
+ (e) => this.rescale(e.deltaY < 0 ? "up" : "down"));
}
if ('ontouchstart' in window) {
// https://stackoverflow.com/a/42509310/12660887
playVisual(move, r) {
move.vanish.forEach(v => {
- // TODO: next "if" shouldn't be required
- if (this.g_pieces[v.x][v.y])
- this.g_pieces[v.x][v.y].remove();
+ this.g_pieces[v.x][v.y].remove();
this.g_pieces[v.x][v.y] = null;
});
let chessboard =
return;
}
let initPiece = this.getDomPiece(move.start.x, move.start.y);
- if (!initPiece) { //TODO this shouldn't be required
- callback();
- return;
- }
// NOTE: cloning generally not required, but light enough, and simpler
let movingPiece = initPiece.cloneNode();
initPiece.style.opacity = "0";
projects / xogo.git / blobdiff