// Graphical (can use variables defined above)
this.containerId = o.element;
+ this.isDiagram = o.diagram;
+ this.marks = o.marks;
this.graphicalInit();
}
this.setFlags(fenParsed.flags);
if (this.hasEnpassant)
this.epSquare = this.getEpSquare(fenParsed.enpassant);
- if (this.hasReserve)
+ if (this.hasReserve && !this.isDiagram)
this.initReserves(fenParsed.reserve);
if (this.options["crazyhouse"])
this.initIspawn(fenParsed.ispawn);
// VISUAL METHODS
graphicalInit() {
- // NOTE: not window.onresize = this.re_drawBoardElts because scope (this)
- window.onresize = () => this.re_drawBoardElements();
- this.re_drawBoardElements();
- this.initMouseEvents();
- const chessboard =
- document.getElementById(this.containerId).querySelector(".chessboard");
+ const g_init = () => {
+ this.re_drawBoardElements();
+ if (!this.isDiagram && !this.mouseListeners && !this.touchListeners)
+ this.initMouseEvents();
+ };
+ let container = document.getElementById(this.containerId);
+ this.windowResizeObs = new ResizeObserver(g_init);
+ this.windowResizeObs.observe(container);
}
re_drawBoardElements() {
const board = this.getSvgChessboard();
const oppCol = C.GetOppCol(this.playerColor);
- let chessboard =
- document.getElementById(this.containerId).querySelector(".chessboard");
+ const container = document.getElementById(this.containerId);
+ const rc = container.getBoundingClientRect();
+ let chessboard = container.querySelector(".chessboard");
chessboard.innerHTML = "";
chessboard.insertAdjacentHTML('beforeend', board);
// Compare window ratio width / height to aspectRatio:
- const windowRatio = window.innerWidth / window.innerHeight;
+ const windowRatio = rc.width / rc.height;
let cbWidth, cbHeight;
const vRatio = this.size.ratio || 1;
if (windowRatio <= vRatio) {
// Limiting dimension is width:
- cbWidth = Math.min(window.innerWidth, 767);
+ cbWidth = Math.min(rc.width, 767);
cbHeight = cbWidth / vRatio;
}
else {
// Limiting dimension is height:
- cbHeight = Math.min(window.innerHeight, 767);
+ cbHeight = Math.min(rc.height, 767);
cbWidth = cbHeight * vRatio;
}
- if (this.hasReserve) {
+ if (this.hasReserve && !this.isDiagram) {
const sqSize = cbWidth / this.size.y;
// NOTE: allocate space for reserves (up/down) even if they are empty
// Cannot use getReserveSquareSize() here, but sqSize is an upper bound.
- if ((window.innerHeight - cbHeight) / 2 < sqSize + 5) {
- cbHeight = window.innerHeight - 2 * (sqSize + 5);
+ if ((rc.height - cbHeight) / 2 < sqSize + 5) {
+ cbHeight = rc.height - 2 * (sqSize + 5);
cbWidth = cbHeight * vRatio;
}
}
chessboard.style.width = cbWidth + "px";
chessboard.style.height = cbHeight + "px";
// Center chessboard:
- const spaceLeft = (window.innerWidth - cbWidth) / 2,
- spaceTop = (window.innerHeight - cbHeight) / 2;
+ const spaceLeft = (rc.width - cbWidth) / 2,
+ spaceTop = (rc.height - cbHeight) / 2;
chessboard.style.left = spaceLeft + "px";
chessboard.style.top = spaceTop + "px";
// Give sizes instead of recomputing them,
}
setupPieces(r) {
- if (this.g_pieces) {
- // Refreshing: delete old pieces first
- for (let i=0; i<this.size.x; i++) {
- for (let j=0; j<this.size.y; j++) {
- if (this.g_pieces[i][j]) {
- this.g_pieces[i][j].remove();
- this.g_pieces[i][j] = null;
- }
- }
- }
- }
- else
- this.g_pieces = ArrayFun.init(this.size.x, this.size.y, null);
let chessboard =
document.getElementById(this.containerId).querySelector(".chessboard");
if (!r)
r = chessboard.getBoundingClientRect();
const pieceWidth = this.getPieceWidth(r.width);
+ const addPiece = (i, j, arrName, classes) => {
+ this[arrName][i][j] = document.createElement("piece");
+ C.AddClass_es(this[arrName][i][j], classes);
+ this[arrName][i][j].style.width = pieceWidth + "px";
+ this[arrName][i][j].style.height = pieceWidth + "px";
+ let [ip, jp] = this.getPixelPosition(i, j, r);
+ // Translate coordinates to use chessboard as reference:
+ this[arrName][i][j].style.transform =
+ `translate(${ip - r.x}px,${jp - r.y}px)`;
+ chessboard.appendChild(this[arrName][i][j]);
+ };
+ const conditionalReset = (arrName) => {
+ if (this[arrName]) {
+ // Refreshing: delete old pieces first. This isn't necessary,
+ // but simpler (this method isn't called many times)
+ for (let i=0; i<this.size.x; i++) {
+ for (let j=0; j<this.size.y; j++) {
+ if (this[arrName][i][j]) {
+ this[arrName][i][j].remove();
+ this[arrName][i][j] = null;
+ }
+ }
+ }
+ }
+ else
+ this[arrName] = ArrayFun.init(this.size.x, this.size.y, null);
+ if (arrName == "d_pieces")
+ this.marks.forEach(([i, j]) => addPiece(i, j, arrName, "mark"));
+ };
+ if (this.marks)
+ conditionalReset("d_pieces");
+ conditionalReset("g_pieces");
for (let i=0; i < this.size.x; i++) {
for (let j=0; j < this.size.y; j++) {
if (this.board[i][j] != "") {
const color = this.getColor(i, j);
const piece = this.getPiece(i, j);
- this.g_pieces[i][j] = document.createElement("piece");
- C.AddClass_es(this.g_pieces[i][j],
- this.pieces(color, i, j)[piece]["class"]);
+ addPiece(i, j, "g_pieces", this.pieces(color, i, j)[piece]["class"]);
this.g_pieces[i][j].classList.add(C.GetColorClass(color));
- this.g_pieces[i][j].style.width = pieceWidth + "px";
- this.g_pieces[i][j].style.height = pieceWidth + "px";
- let [ip, jp] = this.getPixelPosition(i, j, r);
- // Translate coordinates to use chessboard as reference:
- this.g_pieces[i][j].style.transform =
- `translate(${ip - r.x}px,${jp - r.y}px)`;
if (this.enlightened && !this.enlightened[i][j])
this.g_pieces[i][j].classList.add("hidden");
- chessboard.appendChild(this.g_pieces[i][j]);
+ }
+ if (this.marks && this.d_pieces[i][j]) {
+ let classes = ["mark"];
+ if (this.board[i][j] != "")
+ classes.push("transparent");
+ addPiece(i, j, "d_pieces", classes);
}
}
}
- if (this.hasReserve)
+ if (this.hasReserve && !this.isDiagram)
this.re_drawReserve(['w', 'b'], r);
}
// Resize board: no need to destroy/recreate pieces
rescale(mode) {
- let chessboard =
- document.getElementById(this.containerId).querySelector(".chessboard");
- const r = chessboard.getBoundingClientRect();
+ const container = document.getElementById(this.containerId);
+ let chessboard = container.querySelector(".chessboard");
+ const rc = container.getBoundingClientRect(),
+ r = chessboard.getBoundingClientRect();
const multFact = (mode == "up" ? 1.05 : 0.95);
let [newWidth, newHeight] = [multFact * r.width, multFact * r.height];
// Stay in window:
const vRatio = this.size.ratio || 1;
- if (newWidth > window.innerWidth) {
- newWidth = window.innerWidth;
+ if (newWidth > rc.width) {
+ newWidth = rc.width;
newHeight = newWidth / vRatio;
}
- if (newHeight > window.innerHeight) {
- newHeight = window.innerHeight;
+ if (newHeight > rc.height) {
+ newHeight = rc.height;
newWidth = newHeight * vRatio;
}
chessboard.style.width = newWidth + "px";
chessboard.style.height = newHeight + "px";
- const newX = (window.innerWidth - newWidth) / 2;
+ const newX = (rc.width - newWidth) / 2;
chessboard.style.left = newX + "px";
- const newY = (window.innerHeight - newHeight) / 2;
+ const newY = (rc.height - newHeight) / 2;
chessboard.style.top = newY + "px";
const newR = {x: newX, y: newY, width: newWidth, height: newHeight};
const pieceWidth = this.getPieceWidth(newWidth);
}
removeListeners() {
+ let container = document.getElementById(this.containerId);
+ this.windowResizeObs.unobserve(container);
+ if (this.isDiagram)
+ return; //no listeners in this case
if ('onmousedown' in window) {
this.mouseListeners.forEach(ml => {
document.removeEventListener(ml.type, ml.listener);