const ii = (flipped ? this.size.x - 1 - i : i);
const jj = (flipped ? this.size.y - 1 - j : j);
let fillOpacity = '1';
- if (this.options["dark"] && !this.enlightened[ii][jj])
- fillOpacity = '0.5';
+ let classes = this.getSquareColorClass(ii, jj);
+ if (this.enlightened && !this.enlightened[ii][jj])
+ classes += " in-shadow";
// NOTE: x / y reversed because coordinates system is reversed.
- // TODO: CSS "wood" style, rect --> style --> background-image ?
- board += `<rect style="fill-opacity:${fillOpacity};
- fill:#${this.getSquareColor(ii, jj)}"
+ board += `<rect
+ class="${classes}"
id="${this.coordsToId([ii, jj])}"
width="10"
height="10"
}
// Generally light square bottom-right; TODO: user-defined colors at least
- getSquareColor(i, j) {
- return ((i+j) % 2 == 0 ? "f0d9b5": "b58863");
+ getSquareColorClass(i, j) {
+ return ((i+j) % 2 == 0 ? "light-square": "dark-square");
}
setupPieces(r) {
}
else this.g_pieces = ArrayFun.init(this.size.x, this.size.y, null);
let container = document.getElementById(this.containerId);
+ if (!r) r = container.getBoundingClientRect();
const pieceWidth = this.getPieceWidth(r.width);
for (let i=0; i < this.size.x; i++) {
for (let j=0; j < this.size.y; j++) {
}
// All possible moves from selected square
- getPotentialMovesFrom(sq) {
+ getPotentialMovesFrom(sq, color) {
if (typeof sq[0] == "string") return this.getDropMovesFrom(sq);
if (this.options["madrasi"] && this.isImmobilized(sq)) return [];
const piece = this.getPiece(sq[0], sq[1]);
}
playReceivedMove(moves, callback) {
- const r =
- document.getElementById(this.containerId).getBoundingClientRect();
- const animateRec = i => {
- this.animate(moves[i], () => {
- this.playVisual(moves[i], r);
- this.play(moves[i]);
- if (i < moves.length - 1) setTimeout(() => animateRec(i+1), 300);
- else callback();
- });
+ const launchAnimation = () => {
+ const r =
+ document.getElementById(this.containerId).getBoundingClientRect();
+ const animateRec = i => {
+ this.animate(moves[i], () => {
+ this.playVisual(moves[i], r);
+ this.play(moves[i]);
+ if (i < moves.length - 1) setTimeout(() => animateRec(i+1), 300);
+ else callback();
+ });
+ };
+ animateRec(0);
};
- animateRec(0);
+ const checkDisplayThenAnimate = () => {
+ if (boardContainer.style.display == "none") {
+ alert("New move! Let's go back to game...");
+ document.getElementById("gameInfos").style.display = "none";
+ boardContainer.style.display = "block";
+ setTimeout(launchAnimation, 700);
+ }
+ else launchAnimation(); //focused user!
+ };
+ let boardContainer = document.getElementById("boardContainer");
+ if (!document.hasFocus()) {
+ window.onfocus = () => {
+ window.onfocus = undefined;
+ checkDisplayThenAnimate();
+ };
+ }
+ else checkDisplayThenAnimate();
}
};