X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=base_rules.js;h=ce0de11244674b7cbfcac38bbf3f40b1ee677752;hb=af9c9be34f416500f9e025e28f39fe89a8c7c345;hp=e7d58b26ebfa2c5b7470ea13cf4213cf4cf7bbae;hpb=449d72e350051d3ddb86a360c7bb4a4327cbeb75;p=xogo.git diff --git a/base_rules.js b/base_rules.js index e7d58b2..ce0de11 100644 --- a/base_rules.js +++ b/base_rules.js @@ -3,6 +3,21 @@ import { ArrayFun } from "/utils/array.js"; import PiPo from "/utils/PiPo.js"; import Move from "/utils/Move.js"; +// Helper class for move animation +class TargetObj { + + constructor(callOnComplete) { + this.value = 0; + this.target = 0; + this.callOnComplete = callOnComplete; + } + increment() { + if (++this.value == this.target) + this.callOnComplete(); + } + +}; + // NOTE: x coords: top to bottom (white perspective); y: left to right // NOTE: ChessRules is aliased as window.C, and variants as window.V export default class ChessRules { @@ -29,16 +44,18 @@ export default class ChessRules { {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 @@ -85,6 +102,10 @@ export default class ChessRules { (!!this.options["recycle"] && !this.options["teleport"]) ); } + // Some variants do not store reserve state (Align4, Chakart...) + get hasReserveFen() { + return this.hasReserve; + } get noAnimate() { return !!this.options["dark"]; @@ -98,7 +119,7 @@ export default class ChessRules { this.options["teleport"] && this.subTurnTeleport == 2 && this.board[coords.x][coords.y] == "" ) { - return new Move({ + let res = new Move({ start: {x: this.captured.x, y: this.captured.y}, appear: [ new PiPo({ @@ -108,9 +129,10 @@ export default class ChessRules { p: this.captured.p }) ], - vanish: [], - drag: {c: this.captured.c, p: this.captured.p} + vanish: [] }); + res.drag = {c: this.captured.c, p: this.captured.p}; + return res; } return null; } @@ -118,13 +140,13 @@ export default class ChessRules { //////////////////// // COORDINATES UTILS - // a3 --> {x:10, y:3} + // 3a --> {x:3, y:10} static SquareToCoords(sq) { return ArrayFun.toObject(["x", "y"], [0, 1].map(i => parseInt(sq[i], 36))); } - // {x:1, y:12} --> 1c + // {x:11, y:12} --> bc static CoordsToSquare(cd) { return Object.values(cd).map(c => c.toString(36)).join(""); } @@ -162,18 +184,16 @@ export default class ChessRules { // Turn "wb" into "B" (for FEN) board2fen(b) { - return b[0] == "w" ? b[1].toUpperCase() : b[1]; + return (b[0] == "w" ? b[1].toUpperCase() : b[1]); } // Turn "p" into "bp" (for board) fen2board(f) { - return f.charCodeAt(0) <= 90 ? "w" + f.toLowerCase() : "b" + f; + return (f.charCodeAt(0) <= 90 ? "w" + f.toLowerCase() : "b" + f); } // Setup the initial random-or-not (asymmetric-or-not) position genRandInitFen(seed) { - Random.setSeed(seed); - let fen, flags = "0707"; if (!this.options.randomness) // Deterministic: @@ -181,7 +201,8 @@ export default class ChessRules { else { // Randomize - let pieces = { w: new Array(8), b: new Array(8) }; + Random.setSeed(seed); + 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"]) { @@ -246,7 +267,7 @@ export default class ChessRules { parts.push(`"flags":"${flags}"`); if (this.hasEnpassant) parts.push('"enpassant":"-"'); - if (this.hasReserve) + if (this.hasReserveFen) parts.push('"reserve":"000000000000"'); if (this.options["crazyhouse"]) parts.push('"ispawn":"-"'); @@ -280,7 +301,7 @@ export default class ChessRules { parts.push(`"flags":"${this.getFlagsFen()}"`); if (this.hasEnpassant) parts.push(`"enpassant":"${this.getEnpassantFen()}"`); - if (this.hasReserve) + if (this.hasReserveFen) parts.push(`"reserve":"${this.getReserveFen()}"`); if (this.options["crazyhouse"]) parts.push(`"ispawn":"${this.getIspawnFen()}"`); @@ -289,19 +310,20 @@ export default class ChessRules { return fen; } + static FenEmptySquares(count) { + // if more than 9 consecutive free spaces, break the integer, + // otherwise FEN parsing will fail. + if (count <= 9) + return count; + // Most boards of size < 18: + if (count <= 18) + return "9" + (count - 9); + // Except Gomoku: + return "99" + (count - 18); + } + // Position part of the FEN string getPosition() { - const format = (count) => { - // if more than 9 consecutive free spaces, break the integer, - // otherwise FEN parsing will fail. - if (count <= 9) - return count; - // Most boards of size < 18: - if (count <= 18) - return "9" + (count - 9); - // Except Gomoku: - return "99" + (count - 18); - }; let position = ""; for (let i = 0; i < this.size.y; i++) { let emptyCount = 0; @@ -311,7 +333,7 @@ export default class ChessRules { else { if (emptyCount > 0) { // Add empty squares in-between - position += format(emptyCount); + position += C.FenEmptySquares(emptyCount); emptyCount = 0; } position += this.board2fen(this.board[i][j]); @@ -319,7 +341,7 @@ export default class ChessRules { } if (emptyCount > 0) // "Flush remainder" - position += format(emptyCount); + position += C.FenEmptySquares(emptyCount); if (i < this.size.y - 1) position += "/"; //separate rows } @@ -370,23 +392,35 @@ export default class ChessRules { constructor(o) { 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 (o.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 // Fen string fully describes the game state if (!o.fen) o.fen = this.genRandInitFen(o.seed); - const fenParsed = this.parseFen(o.fen); - this.board = this.getBoard(fenParsed.position); - this.turn = fenParsed.turn; - this.movesCount = parseInt(fenParsed.movesCount, 10); - this.setOtherVariables(fenParsed); + this.re_initFromFen(o.fen); // Graphical (can use variables defined above) this.containerId = o.element; this.graphicalInit(); } + re_initFromFen(fen, oldBoard) { + const fenParsed = this.parseFen(fen); + this.board = oldBoard || this.getBoard(fenParsed.position); + this.turn = fenParsed.turn; + this.movesCount = parseInt(fenParsed.movesCount, 10); + this.setOtherVariables(fenParsed); + } + // Turn position fen into double array ["wb","wp","bk",...] getBoard(position) { const rows = position.split("/"); @@ -418,7 +452,6 @@ export default class ChessRules { this.initReserves(fenParsed.reserve); if (this.options["crazyhouse"]) this.initIspawn(fenParsed.ispawn); - this.subTurn = 1; //may be unused if (this.options["teleport"]) { this.subTurnTeleport = 1; this.captured = null; @@ -428,6 +461,9 @@ export default class ChessRules { this.enlightened = ArrayFun.init(this.size.x, this.size.y, false); this.updateEnlightened(); } + this.subTurn = 1; //may be unused + if (!this.moveStack) //avoid resetting (unwanted) + this.moveStack = []; } updateEnlightened() { @@ -455,7 +491,7 @@ export default class ChessRules { const steps = this.pieces(this.playerColor)["p"].attack[0].steps; for (let step of steps) { const x = this.epSquare.x - step[0], - y = this.computeY(this.epSquare.y - step[1]); + y = this.getY(this.epSquare.y - step[1]); if ( this.onBoard(x, y) && this.getColor(x, y) == this.playerColor && @@ -519,6 +555,22 @@ export default class ChessRules { return `${this.containerId}|rnum-${color}${piece}`; } + static AddClass_es(piece, class_es) { + if (!Array.isArray(class_es)) + class_es = [class_es]; + class_es.forEach(cl => { + piece.classList.add(cl); + }); + } + + static RemoveClass_es(piece, class_es) { + if (!Array.isArray(class_es)) + class_es = [class_es]; + class_es.forEach(cl => { + piece.classList.remove(cl); + }); + } + graphicalInit() { // NOTE: not window.onresize = this.re_drawBoardElts because scope (this) window.onresize = () => this.re_drawBoardElements(); @@ -526,7 +578,6 @@ export default class ChessRules { this.initMouseEvents(); const chessboard = document.getElementById(this.containerId).querySelector(".chessboard"); - new ResizeObserver(this.rescale).observe(chessboard); } re_drawBoardElements() { @@ -539,23 +590,24 @@ export default class ChessRules { // Compare window ratio width / height to aspectRatio: const windowRatio = window.innerWidth / window.innerHeight; let cbWidth, cbHeight; - if (windowRatio <= this.size.ratio) { + const vRatio = this.size.ratio || 1; + if (windowRatio <= vRatio) { // Limiting dimension is width: cbWidth = Math.min(window.innerWidth, 767); - cbHeight = cbWidth / this.size.ratio; + cbHeight = cbWidth / vRatio; } else { // Limiting dimension is height: cbHeight = Math.min(window.innerHeight, 767); - cbWidth = cbHeight * this.size.ratio; + cbWidth = cbHeight * vRatio; } - if (this.reserve) { + if (this.hasReserve) { 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); - cbWidth = cbHeight * this.size.ratio; + cbWidth = cbHeight * vRatio; } } chessboard.style.width = cbWidth + "px"; @@ -580,9 +632,8 @@ export default class ChessRules { const flipped = (this.playerColor == 'b'); let board = ` - `; + viewBox="0 0 ${10*this.size.y} ${10*this.size.x}" + class="chessboard_SVG">`; for (let i=0; i < this.size.x; i++) { for (let j=0; j < this.size.y; j++) { const ii = (flipped ? this.size.x - 1 - i : i); @@ -591,16 +642,18 @@ export default class ChessRules { if (this.enlightened && !this.enlightened[ii][jj]) classes += " in-shadow"; // NOTE: x / y reversed because coordinates system is reversed. - board += ``; + board += ` + `; } } - board += ""; + board += ""; return board; } @@ -634,49 +687,47 @@ export default class ChessRules { const color = this.getColor(i, j); const piece = this.getPiece(i, j); this.g_pieces[i][j] = document.createElement("piece"); - this.g_pieces[i][j].classList.add(this.pieces()[piece]["class"]); + C.AddClass_es(this.g_pieces[i][j], + 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"; - const [ip, jp] = this.getPixelPosition(i, j, r); - this.g_pieces[i][j].style.transform = `translate(${ip}px,${jp}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.reserve) + if (this.hasReserve) this.re_drawReserve(['w', 'b'], r); } - // NOTE: assume !!this.reserve + // NOTE: assume this.reserve != null re_drawReserve(colors, r) { if (this.r_pieces) { // Remove (old) reserve pieces for (let c of colors) { - if (!this.reserve[c]) - continue; - Object.keys(this.reserve[c]).forEach(p => { - if (this.r_pieces[c][p]) { - this.r_pieces[c][p].remove(); - delete this.r_pieces[c][p]; - const numId = this.getReserveNumId(c, p); - document.getElementById(numId).remove(); - } + Object.keys(this.r_pieces[c]).forEach(p => { + this.r_pieces[c][p].remove(); + delete this.r_pieces[c][p]; + const numId = this.getReserveNumId(c, p); + document.getElementById(numId).remove(); }); - let reservesDiv = document.getElementById("reserves_" + c); - if (reservesDiv) - reservesDiv.remove(); } } else - this.r_pieces = { 'w': {}, 'b': {} }; - let chessboard = - document.getElementById(this.containerId).querySelector(".chessboard"); + this.r_pieces = { w: {}, b: {} }; + let container = document.getElementById(this.containerId); if (!r) - r = chessboard.getBoundingClientRect(); + r = container.querySelector(".chessboard").getBoundingClientRect(); for (let c of colors) { + let reservesDiv = document.getElementById("reserves_" + c); + if (reservesDiv) + reservesDiv.remove(); if (!this.reserve[c]) continue; const nbR = this.getNbReservePieces(c); @@ -694,7 +745,7 @@ export default class ChessRules { // NOTE: +1 fix display bug on Firefox at least rcontainer.style.width = (nbR * sqResSize + 1) + "px"; rcontainer.style.height = sqResSize + "px"; - chessboard.appendChild(rcontainer); + container.appendChild(rcontainer); for (let p of Object.keys(this.reserve[c])) { if (this.reserve[c][p] == 0) continue; @@ -705,8 +756,7 @@ export default class ChessRules { r_cell.style.height = sqResSize + "px"; rcontainer.appendChild(r_cell); let piece = document.createElement("piece"); - const pieceSpec = this.pieces()[p]; - piece.classList.add(pieceSpec["class"]); + C.AddClass_es(piece, this.pieces(c, c, p)[p]["class"]); piece.classList.add(C.GetColorClass(c)); piece.style.width = "100%"; piece.style.height = "100%"; @@ -748,13 +798,13 @@ export default class ChessRules { for (let x=0; x this.size.ratio) { - newWidth = r.height * this.size.ratio; - chessboard.style.width = newWidth + "px"; + 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; + newHeight = newWidth / vRatio; } - else if (newRatio < this.size.ratio) { - newHeight = r.width / this.size.ratio; - chessboard.style.height = newHeight + "px"; + if (newHeight > window.innerHeight) { + newHeight = window.innerHeight; + newWidth = newHeight * vRatio; } + chessboard.style.width = newWidth + "px"; + chessboard.style.height = newHeight + "px"; const newX = (window.innerWidth - newWidth) / 2; chessboard.style.left = newX + "px"; const newY = (window.innerHeight - newHeight) / 2; chessboard.style.top = newY + "px"; - const newR = { x: newX, y: newY, width: newWidth, height: newHeight }; + const newR = {x: newX, y: newY, width: newWidth, height: newHeight}; const pieceWidth = this.getPieceWidth(newWidth); - 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" - 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); - this.g_pieces[i][j].style.transform = `translate(${ip}px,${jp}px)`; + // NOTE: next "if" for variants which use squares filling + // instead of "physical", moving pieces + if (this.g_pieces) { + 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" + 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: + this.g_pieces[i][j].style.transform = + `translate(${ip - newX}px,${jp - newY}px)`; + } } } } - if (this.reserve) + if (this.hasReserve) this.rescaleReserve(newR); } @@ -830,7 +887,7 @@ export default class ChessRules { } } - // Return the absolute pixel coordinates (on board) given current position. + // Return the absolute pixel coordinates given current position. // Our coordinate system differs from CSS one (x <--> y). // We return here the CSS coordinates (more useful). getPixelPosition(i, j, r) { @@ -850,12 +907,12 @@ export default class ChessRules { x = (flipped ? this.size.y - 1 - j : j) * sqSize; y = (flipped ? this.size.x - 1 - i : i) * sqSize; } - return [x, y]; + return [r.x + x, r.y + y]; } initMouseEvents() { - let chessboard = - document.getElementById(this.containerId).querySelector(".chessboard"); + let container = document.getElementById(this.containerId); + let chessboard = container.querySelector(".chessboard"); const getOffset = e => { if (e.clientX) @@ -876,8 +933,8 @@ export default class ChessRules { const centerOnCursor = (piece, e) => { const centerShift = this.getPieceWidth(r.width) / 2; const offset = getOffset(e); - piece.style.left = (offset.x - r.x - centerShift) + "px"; - piece.style.top = (offset.y - r.y - centerShift) + "px"; + piece.style.left = (offset.x - centerShift) + "px"; + piece.style.top = (offset.y - centerShift) + "px"; } let start = null, @@ -894,7 +951,7 @@ export default class ChessRules { if (cd) { const move = this.doClick(cd); if (move) - this.playPlusVisual(move); + this.buildMoveStack(move, r); else { const [x, y] = Object.values(cd); if (typeof x != "number") @@ -910,7 +967,7 @@ export default class ChessRules { curPiece.style.width = pieceWidth + "px"; curPiece.style.height = pieceWidth + "px"; centerOnCursor(curPiece, e); - chessboard.appendChild(curPiece); + container.appendChild(curPiece); startPiece.style.opacity = "0.4"; chessboard.style.cursor = "none"; } @@ -929,11 +986,6 @@ export default class ChessRules { }; 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]; @@ -953,7 +1005,7 @@ export default class ChessRules { if (moves.length >= 2) this.showChoices(moves, r); else if (moves.length == 1) - this.playPlusVisual(moves[0], r); + this.buildMoveStack(moves[0], r); } curPiece.remove(); }; @@ -962,6 +1014,8 @@ export default class ChessRules { 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 @@ -977,6 +1031,8 @@ export default class ChessRules { let chessboard = container.querySelector(".chessboard"); let choices = document.createElement("div"); choices.id = "choices"; + if (!r) + r = chessboard.getBoundingClientRect(); choices.style.width = r.width + "px"; choices.style.height = r.height + "px"; choices.style.left = r.x + "px"; @@ -990,7 +1046,7 @@ export default class ChessRules { const callback = (m) => { chessboard.style.opacity = "1"; container.removeChild(choices); - this.playPlusVisual(m, r); + this.buildMoveStack(m, r); } for (let i=0; i < moves.length; i++) { let choice = document.createElement("div"); @@ -1002,8 +1058,9 @@ export default class ChessRules { choice.style.backgroundColor = "lightyellow"; choice.onclick = () => callback(moves[i]); const piece = document.createElement("piece"); - const pieceSpec = this.pieces()[moves[i].appear[0].p]; - piece.classList.add(pieceSpec["class"]); + const cdisp = moves[i].choice || moves[i].appear[0].p; + C.AddClass_es(piece, + this.pieces(color, moves[i].end.x, moves[i].end.y)[cdisp]["class"]); piece.classList.add(C.GetColorClass(color)); piece.style.width = "100%"; piece.style.height = "100%"; @@ -1019,7 +1076,7 @@ export default class ChessRules { return { x: 8, y: 8, - ratio: 1 //for rectangular board = y / x + ratio: 1 //for rectangular board = y / x (optional, 1 = default) }; } @@ -1031,7 +1088,11 @@ export default class ChessRules { } static GetColorClass(c) { - return (c == 'w' ? "white" : "black"); + if (c == 'w') + return "white"; + if (c == 'b') + return "black"; + return "other-color"; //unidentified color } // Assume square i,j isn't empty @@ -1042,8 +1103,9 @@ export default class ChessRules { } // Piece type on square (i,j) - getPieceType(i, j) { - const p = (typeof i == "string" ? j : this.board[i][j].charAt(1)); + getPieceType(i, j, p) { + if (!p) + p = this.getPiece(i, j); return C.CannibalKings[p] || p; //a cannibal king move as... } @@ -1052,11 +1114,6 @@ export default class ChessRules { return (color == "w" ? "b" : "w"); } - // Can thing on square1 capture (no return) thing on square2? - canTake([x1, y1], [x2, y2]) { - return (this.getColor(x1, y1) !== this.getColor(x2, y2)); - } - // Is (x,y) on the chessboard? onBoard(x, y) { return (x >= 0 && x < this.size.x && @@ -1065,13 +1122,7 @@ export default class ChessRules { // Am I allowed to move thing at square x,y ? canIplay(x, y) { - return ( - this.playerColor == this.turn && - ( - (typeof x == "number" && this.getColor(x, y) == this.turn) || - (typeof x == "string" && x == this.turn) //reserve - ) - ); + return (this.playerColor == this.turn && this.getColor(x, y) == this.turn); } //////////////////////// @@ -1079,7 +1130,8 @@ export default class ChessRules { pieces(color, x, y) { const pawnShift = (color == "w" ? -1 : 1); - const initRank = ((color == 'w' && x == 6) || (color == 'b' && x == 1)); + // NOTE: jump 2 squares from first rank (pawns can be here sometimes) + const initRank = ((color == 'w' && x >= 6) || (color == 'b' && x <= 1)); return { 'p': { "class": "pawn", @@ -1157,11 +1209,34 @@ export default class ChessRules { }; } - //////////////////// - // MOVES GENERATION + // NOTE: using special symbols to not interfere with variants' pieces codes + static get CannibalKings() { + return { + "!": "p", + "#": "r", + "$": "n", + "%": "b", + "*": "q", + "k": "k" + }; + } + + static get CannibalKingCode() { + return { + "p": "!", + "r": "#", + "n": "$", + "b": "%", + "q": "*", + "k": "k" + }; + } + + ////////////////////////// + // MOVES GENERATION UTILS // For Cylinder: get Y coordinate - computeY(y) { + getY(y) { if (!this.options["cylinder"]) return y; let res = y % this.size.y; @@ -1170,36 +1245,65 @@ export default class ChessRules { return res; } + // Can thing on square1 capture thing on square2? + canTake([x1, y1], [x2, y2]) { + return this.getColor(x1, y1) !== this.getColor(x2, y2); + } + + canStepOver(i, j, p) { + // In some variants, objects on boards don't stop movement (Chakart) + return this.board[i][j] == ""; + } + + // For Madrasi: + // (redefined in Baroque etc, where Madrasi condition doesn't make sense) + isImmobilized([x, y]) { + if (!this.options["madrasi"]) + return false; + const color = this.getColor(x, y); + const oppCol = C.GetOppCol(color); + const piece = this.getPieceType(x, y); //ok not cannibal king + const stepSpec = this.getStepSpec(color, x, y); + const attacks = stepSpec.attack || stepSpec.moves; + for (let a of attacks) { + outerLoop: for (let step of a.steps) { + let [i, j] = [x + step[0], y + step[1]]; + let stepCounter = 1; + while (this.onBoard(i, j) && this.board[i][j] == "") { + if (a.range <= stepCounter++) + continue outerLoop; + i += step[0]; + j = this.getY(j + step[1]); + } + if ( + this.onBoard(i, j) && + this.getColor(i, j) == oppCol && + this.getPieceType(i, j) == piece + ) { + return true; + } + } + } + return false; + } + // Stop at the first capture found atLeastOneCapture(color) { - color = color || this.turn; const oppCol = C.GetOppCol(color); - for (let i = 0; i < this.size.x; i++) { - for (let j = 0; j < this.size.y; j++) { - if (this.board[i][j] != "" && this.getColor(i, j) == color) { - const allSpecs = this.pieces(color, i, j) - let specs = allSpecs[this.getPieceType(i, j)]; - const attacks = specs.attack || specs.moves; - for (let a of attacks) { - outerLoop: for (let step of a.steps) { - let [ii, jj] = [i + step[0], this.computeY(j + step[1])]; - let stepCounter = 1; - while (this.onBoard(ii, jj) && this.board[ii][jj] == "") { - if (a.range <= stepCounter++) - continue outerLoop; - ii += step[0]; - jj = this.computeY(jj + step[1]); - } - if ( - this.onBoard(ii, jj) && - this.getColor(ii, jj) == oppCol && - this.filterValid( - [this.getBasicMove([i, j], [ii, jj])] - ).length >= 1 - ) { - return true; - } - } + const allowed = ([x, y]) => { + this.getColor(x, y) == oppCol && + this.filterValid([this.getBasicMove([i, j], [x, y])]).length >= 1 + }; + for (let i=0; i 1e-7) + continue; + distance = Math.round(distance); //in case of (numerical...) + if (range >= distance) + return true; + } + return false; + } + + //////////////////// + // MOVES GENERATION + getDropMovesFrom([c, p]) { // NOTE: by design, this.reserve[c][p] >= 1 on user click - // (but not necessarily otherwise) + // (but not necessarily otherwise: atLeastOneMove() etc) if (this.reserve[c][p] == 0) return []; let moves = []; @@ -1275,7 +1422,7 @@ export default class ChessRules { moves = this.capturePostProcess(moves, oppCol); if (this.options["atomic"]) - this.atomicPostProcess(moves, oppCol); + this.atomicPostProcess(moves, color, oppCol); if ( moves.length > 0 && @@ -1289,7 +1436,7 @@ export default class ChessRules { this.options["rifle"] ) { // In this case a rifle-capture from last rank may promote a pawn - this.riflePromotePostProcess(moves); + this.riflePromotePostProcess(moves, color); } return moves; @@ -1306,7 +1453,7 @@ export default class ChessRules { }); } - atomicPostProcess(moves, oppCol) { + atomicPostProcess(moves, color, oppCol) { moves.forEach(m => { if ( this.board[m.end.x][m.end.y] != "" && @@ -1323,15 +1470,22 @@ export default class ChessRules { [1, 0], [1, 1] ]; + let mNext = new Move({ + start: m.end, + end: m.end, + appear: [], + vanish: [] + }); for (let step of steps) { let x = m.end.x + step[0]; - let y = this.computeY(m.end.y + step[1]); + let y = this.getY(m.end.y + step[1]); if ( this.onBoard(x, y) && this.board[x][y] != "" && + (x != m.start.x || y != m.start.y) && this.getPieceType(x, y) != "p" ) { - m.vanish.push( + mNext.vanish.push( new PiPo({ p: this.getPiece(x, y), c: this.getColor(x, y), @@ -1341,8 +1495,18 @@ export default class ChessRules { ); } } - if (!this.options["rifle"]) - m.appear.pop(); //nothin appears + if (!this.options["rifle"]) { + // The moving piece also vanish + mNext.vanish.unshift( + new PiPo({ + x: m.end.x, + y: m.end.y, + c: color, + p: this.getPiece(m.start.x, m.start.y) + }) + ); + } + m.next = mNext; } }); } @@ -1352,7 +1516,6 @@ export default class ChessRules { const lastRank = (color == "w" ? 0 : this.size.x - 1); const initPiece = this.getPiece(moves[0].start.x, moves[0].start.y); moves.forEach(m => { - let finalPieces = ["p"]; const [x1, y1] = [m.start.x, m.start.y]; const [x2, y2] = [m.end.x, m.end.y]; const promotionOk = ( @@ -1361,41 +1524,37 @@ export default class ChessRules { ); if (!promotionOk) return; //nothing to do - if (!this.options["pawnfall"]) { - if ( - this.options["cannibal"] && - this.board[x2][y2] != "" && - this.getColor(x2, y2) == oppCol - ) { - finalPieces = [this.getPieceType(x2, y2)]; - } - else - finalPieces = this.pawnPromotions; + if (this.options["pawnfall"]) { + m.appear.shift(); + return; } + let finalPieces = ["p"]; + if ( + this.options["cannibal"] && + this.board[x2][y2] != "" && + this.getColor(x2, y2) == oppCol + ) { + finalPieces = [this.getPieceType(x2, y2)]; + } + else + finalPieces = this.pawnPromotions; m.appear[0].p = finalPieces[0]; if (initPiece == "!") //cannibal king-pawn m.appear[0].p = C.CannibalKingCode[finalPieces[0]]; for (let i=1; i { @@ -1406,7 +1565,6 @@ export default class ChessRules { m.appear[0].x == m.start.x && m.appear[0].y == m.start.y ) { - const promotionPiece0 = this.pawnSpecs.promotions[0]; m.appear[0].p = this.pawnPromotions[0]; for (let i=1; i { + return ( + (!this.options["zen"] || this.getPieceType(i, j) == 'k') && + this.canTake([x, y], [i, j]) + ); } + ); + } + const noSpecials = this.findDestSquares( + [x, y], + { + moveOnly: specialAttack || this.options["zen"], + segments: this.options["cylinder"] + }, + ([i, j]) => this.board[i][j] == "" || this.canTake([x, y], [i, j]) + ); + Array.prototype.push.apply(squares, noSpecials); + if (this.options["zen"]) { + let zenCaptures = this.findCapturesOn( + [x, y], + {}, + ([i, j]) => this.getPieceType(i, j) != 'k' + ); + // Technical step: segments (if any) are reversed + if (this.options["cylinder"]) { + zenCaptures.forEach(z => { + if (z.segments) + z.segments = z.segments.reverse().map(s => s.reverse()) + }); } + Array.prototype.push.apply(squares, zenCaptures); } - return false; + if ( + this.options["recycle"] || + (this.options["teleport"] && this.subTurnTeleport == 1) + ) { + const selfCaptures = this.findDestSquares( + [x, y], + { + attackOnly: true, + segments: this.options["cylinder"] + }, + ([i, j]) => + this.getColor(i, j) == color && this.getPieceType(i, j) != 'k' + ); + Array.prototype.push.apply(squares, selfCaptures); + } + return squares.map(s => { + let mv = this.getBasicMove([x, y], s.sq); + if (this.options["cylinder"] && s.segments.length >= 2) + mv.segments = s.segments; + return mv; + }); } - // Generic method to find possible moves of "sliding or jumping" pieces - getPotentialMovesOf(piece, [x, y]) { - const color = this.getColor(x, y); - const stepSpec = this.pieces(color, x, y)[piece]; - let moves = []; - let explored = {}; //for Cylinder mode - - const findAddMoves = (type, stepArray) => { + findDestSquares([x, y], o, allowed) { + if (!allowed) + allowed = () => true; + const apparentPiece = this.getPiece(x, y); //how it looks + let res = []; + // Next 3 for Cylinder mode: (unused if !o.segments) + let explored = {}; + let segments = []; + let segStart = []; + const addSquare = ([i, j]) => { + let elt = {sq: [i, j]}; + if (o.segments) + elt.segments = this.getSegments(segments, segStart, end); + res.push(elt); + }; + const exploreSteps = (stepArray) => { for (let s of stepArray) { - // TODO: if jump in y (computeY, Cylinder), move.segments outerLoop: for (let step of s.steps) { - let [i, j] = [x + step[0], this.computeY(y + step[1])]; - let stepCounter = 1; - while (this.onBoard(i, j) && this.board[i][j] == "") { - if (type != "attack" && !explored[i + "." + j]) { + if (o.segments) { + segments = []; + segStart = [x, y]; + } + let [i, j] = [x, y]; + let stepCounter = 0; + while ( + this.onBoard(i, j) && + ((i == x && j == y) || this.canStepOver(i, j, apparentPiece)) + ) { + if (!explored[i + "." + j] && (i != x || j != y)) + { explored[i + "." + j] = true; - moves.push(this.getBasicMove([x, y], [i, j])); + if ( + allowed([i, j]) && + ( + !o.captureTarget || + (o.captureTarget[0] == i && o.captureTarget[1] == j) + ) + ) { + if (o.one && !o.attackOnly) + return true; + if (!o.attackOnly) + addSquare(!o.captureTarget ? [i, j] : [x, y]); + if (o.captureTarget) + return res[0]; + } } if (s.range <= stepCounter++) continue outerLoop; + const oldIJ = [i, j]; i += step[0]; - j = this.computeY(j + step[1]); + j = this.getY(j + step[1]); + if (o.segments && Math.abs(j - oldIJ[1]) > 1) { + // Boundary between segments (cylinder mode) + segments.push([[segStart[0], segStart[1]], oldIJ]); + segStart = [i, j]; + } } if (!this.onBoard(i, j)) continue; const pieceIJ = this.getPieceType(i, j); - if ( - type != "moveonly" && - !explored[i + "." + j] && - ( - !this.options["zen"] || - pieceIJ == "k" - ) && - ( - this.canTake([x, y], [i, j]) || - ( - (this.options["recycle"] || this.options["teleport"]) && - pieceIJ != "k" - ) - ) - ) { + if (!explored[i + "." + j]) { explored[i + "." + j] = true; - moves.push(this.getBasicMove([x, y], [i, j])); + if (allowed([i, j])) { + if (o.one && !o.moveOnly) + return true; + if (!o.moveOnly) + addSquare(!o.captureTarget ? [i, j] : [x, y]); + if ( + o.captureTarget && + o.captureTarget[0] == i && o.captureTarget[1] == j + ) { + return res[0]; + } + } } } } }; - - const specialAttack = !!stepSpec.attack; - if (specialAttack) - findAddMoves("attack", stepSpec.attack); - findAddMoves(specialAttack ? "moveonly" : "all", stepSpec.moves); - if (this.options["zen"]) - Array.prototype.push.apply(moves, this.findCapturesOn([x, y], true)); - return moves; + if (o.captureTarget) + exploreSteps(o.captureSteps) + else { + const stepSpec = this.getStepSpec(this.getColor(x, y), x, y); + if (!o.attackOnly || !stepSpec.attack) + exploreSteps(stepSpec.moves); + if (!o.moveOnly && !!stepSpec.attack) + exploreSteps(stepSpec.attack); + } + return o.captureTarget ? null : (o.one ? false : res); } - findCapturesOn([x, y], zen) { - let moves = []; - // Find reverse captures (opponent takes) - const color = this.getColor(x, y); - const pieceType = this.getPieceType(x, y); - const oppCol = C.GetOppCol(color); + // Search for enemy (or not) pieces attacking [x, y] + findCapturesOn([x, y], o, allowed) { + if (!allowed) + allowed = () => true; + let res = []; + if (!o.byCol) + o.byCol = [C.GetOppCol(this.getColor(x, y) || this.turn)]; for (let i=0; i this.canTake([ii, jj], [x, y]) + ); + if (newSquare) + if (o.one) + return true; + res.push(newSquare); } } } } } } - return moves; - } - - static CompatibleStep([x1, y1], [x2, y2], step, range) { - const rx = (x2 - x1) / step[0], - ry = (y2 - y1) / step[1]; - if ( - (!Number.isFinite(rx) && !Number.isNaN(rx)) || - (!Number.isFinite(ry) && !Number.isNaN(ry)) - ) { - return false; - } - let distance = (Number.isNaN(rx) ? ry : rx); - // TODO: 1e-7 here is totally arbitrary - if (Math.abs(distance - Math.round(distance)) > 1e-7) - return false; - distance = Math.round(distance); //in case of (numerical...) - if (range < distance) - return false; - return true; + return (one ? false : res); } // Build a regular move from its initial and destination squares. @@ -1641,14 +1826,10 @@ export default class ChessRules { p: this.getPiece(ex, ey) }) ); - if (this.options["rifle"]) - // Rifle captures are tricky in combination with Atomic etc, - // so it's useful to mark the move : - mv.capture = true; if (this.options["cannibal"] && destColor != initColor) { const lastIdx = mv.vanish.length - 1; let trPiece = mv.vanish[lastIdx].p; - if (this.isKing(this.getPiece(sx, sy))) + if (this.getPieceType(sx, sy) == 'k') trPiece = C.CannibalKingCode[trPiece]; if (mv.appear.length >= 1) mv.appear[0].p = trPiece; @@ -1691,8 +1872,15 @@ export default class ChessRules { s.y == e.y && Math.abs(s.x - e.x) == 2 && // Next conditions for variants like Atomic or Rifle, Recycle... - (move.appear.length > 0 && move.appear[0].p == "p") && - (move.vanish.length > 0 && move.vanish[0].p == "p") + ( + move.appear.length > 0 && + this.getPieceType(0, 0, move.appear[0].p) == "p" + ) + && + ( + move.vanish.length > 0 && + this.getPieceType(0, 0, move.vanish[0].p) == "p" + ) ) { return { x: (s.x + e.x) / 2, @@ -1711,7 +1899,7 @@ export default class ChessRules { if ( !!this.epSquare && this.epSquare.x == x + shiftX && - Math.abs(this.computeY(this.epSquare.y - y)) == 1 && + Math.abs(this.getY(this.epSquare.y - y)) == 1 && this.getColor(x, this.epSquare.y) == oppCol //Doublemove guard... ) { const [epx, epy] = [this.epSquare.x, this.epSquare.y]; @@ -1829,46 +2017,48 @@ export default class ChessRules { //////////////////// // MOVES VALIDATION - // Is (king at) given position under check by "color" ? - underCheck([x, y], color) { + // Is piece (or square) at given position attacked by "oppCol" ? + underAttack([x, y], oppCol) { + const king = this.getPieceType(x, y) == 'k'; + return ( + ( + (!this.options["zen"] || king) && + this.findCapturesOn([x, y], + {oppCol: oppCol, segments: this.options["cylinder"], one: true}, + ([i, j]) => this.canTake([i, j], [x, y])).length == 1 + ) + || + ( + (this.options["zen"] && !king) && + this.findDestSquares([x, y], + {attackOnly: true, segments: this.options["cylinder"], one: true}, + ([i, j]) => this.canTake([i, j], [x, y])).length == 1 + ) + ); + } + + underCheck([x, y], oppCol) { if (this.options["taking"] || this.options["dark"]) return false; - return (this.findCapturesOn([x, y]).length >= 1); + return this.underAttack([x, y], oppCol); } // Stop at first king found (TODO: multi-kings) searchKingPos(color) { for (let i=0; i < this.size.x; i++) { for (let j=0; j < this.size.y; j++) { - if (this.getColor(i, j) == color && this.isKing(this.getPiece(i, j))) + if (this.getColor(i, j) == color && this.getPieceType(i, j) == 'k') return [i, j]; } } return [-1, -1]; //king not found } - filterValid(moves) { - if (moves.length == 0) - return []; - const color = this.turn; + // 'color' arg because some variants (e.g. Refusal) check opponent moves + filterValid(moves, color) { + if (!color) + color = this.turn; const oppCol = C.GetOppCol(color); - if (this.options["balance"] && [1, 3].includes(this.movesCount)) { - // Forbid moves either giving check or exploding opponent's king: - const oppKingPos = this.searchKingPos(oppCol); - moves = moves.filter(m => { - if ( - m.vanish.some(v => v.c == oppCol && v.p == "k") && - m.appear.every(a => a.c != oppCol || a.p != "k") - ) - return false; - this.playOnBoard(m); - const res = !this.underCheck(oppKingPos, color); - this.undoOnBoard(m); - return res; - }); - } - if (this.options["taking"] || this.options["dark"]) - return moves; const kingPos = this.searchKingPos(color); let filtered = {}; //avoid re-checking similar moves (promotions...) return moves.filter(m => { @@ -1878,12 +2068,12 @@ export default class ChessRules { let square = kingPos, res = true; //a priori valid if (m.vanish.some(v => { - return (v.p == "k" || C.CannibalKings[v.p]) && v.c == color; + return this.getPieceType(0, 0, v.p) == 'k' && v.c == color; })) { // Search king in appear array: const newKingIdx = m.appear.findIndex(a => { - return (a.p == "k" || C.CannibalKings[a.p]) && a.c == color; + return this.getPieceType(0, 0, a.p) == 'k' && a.c == color; }); if (newKingIdx >= 0) square = [m.appear[newKingIdx].x, m.appear[newKingIdx].y]; @@ -1914,13 +2104,17 @@ export default class ChessRules { // Apply a move on board playOnBoard(move) { - for (let psq of move.vanish) this.board[psq.x][psq.y] = ""; - for (let psq of move.appear) this.board[psq.x][psq.y] = psq.c + psq.p; + for (let psq of move.vanish) + this.board[psq.x][psq.y] = ""; + for (let psq of move.appear) + this.board[psq.x][psq.y] = psq.c + psq.p; } // Un-apply the played move undoOnBoard(move) { - for (let psq of move.appear) this.board[psq.x][psq.y] = ""; - for (let psq of move.vanish) this.board[psq.x][psq.y] = psq.c + psq.p; + for (let psq of move.appear) + this.board[psq.x][psq.y] = ""; + for (let psq of move.vanish) + this.board[psq.x][psq.y] = psq.c + psq.p; } updateCastleFlags(move) { @@ -1948,31 +2142,26 @@ export default class ChessRules { prePlay(move) { if ( - typeof move.start.x == "number" && - (!this.options["teleport"] || this.subTurnTeleport == 1) + this.hasCastle && + // If flags already off, no need to re-check: + Object.keys(this.castleFlags).some(c => { + return this.castleFlags[c].some(val => val < this.size.y)}) ) { - // OK, not a drop move - if ( - this.hasCastle && - // If flags already off, no need to re-check: - Object.keys(this.castleFlags).some(c => { - return this.castleFlags[c].some(val => val < this.size.y)}) - ) { - this.updateCastleFlags(move); - } - const initSquare = C.CoordsToSquare(move.start); - if ( - this.options["crazyhouse"] && - (!this.options["rifle"] || !move.capture) - ) { + this.updateCastleFlags(move); + } + if (this.options["crazyhouse"]) { + move.vanish.forEach(v => { + const square = C.CoordsToSquare({x: v.x, y: v.y}); + if (this.ispawn[square]) + delete this.ispawn[square]; + }); + if (move.appear.length > 0 && move.vanish.length > 0) { + // Assumption: something is moving + const initSquare = C.CoordsToSquare(move.start); const destSquare = C.CoordsToSquare(move.end); - if (this.ispawn[initSquare]) { - delete this.ispawn[initSquare]; - this.ispawn[destSquare] = true; - } - else if ( - move.vanish[0].p == "p" && - move.appear[0].p != "p" + if ( + this.ispawn[initSquare] || + (move.vanish[0].p == "p" && move.appear[0].p != "p") ) { this.ispawn[destSquare] = true; } @@ -1986,18 +2175,28 @@ export default class ChessRules { } } const minSize = Math.min(move.appear.length, move.vanish.length); - if (this.hasReserve && !move.pawnfall) { + if ( + this.hasReserve && + // Warning; atomic pawn removal isn't a capture + (!this.options["atomic"] || !this.rempawn || this.movesCount >= 1) + ) { const color = this.turn; for (let i=minSize; i move.appear.length && - move.vanish[move.vanish.length - 1].c == color + move.vanish[1].c == color ) { const v = move.vanish[move.vanish.length - 1]; this.captured = {x: v.x, y: v.y, c: v.c, p: v.p}; @@ -2029,35 +2227,40 @@ export default class ChessRules { this.subTurnTeleport = 1; this.captured = null; } - if (this.options["balance"]) { - if (![1, 3].includes(this.movesCount)) - this.turn = oppCol; - } - else { - if ( - ( - this.options["doublemove"] && - this.movesCount >= 1 && - this.subTurn == 1 - ) || - (this.options["progressive"] && this.subTurn <= this.movesCount) - ) { - const oppKingPos = this.searchKingPos(oppCol); - if ( - oppKingPos[0] >= 0 && - ( - this.options["taking"] || - !this.underCheck(oppKingPos, color) - ) - ) { - this.subTurn++; - return; - } - } + if (this.isLastMove(move)) { this.turn = oppCol; + this.movesCount++; + this.subTurn = 1; } - this.movesCount++; - this.subTurn = 1; + else if (!move.next) + this.subTurn++; + } + + isLastMove(move) { + if (move.next) + return false; + const color = this.turn; + const oppCol = C.GetOppCol(color); + const oppKingPos = this.searchKingPos(oppCol); + if (oppKingPos[0] < 0 || this.underCheck(oppKingPos, color)) + return true; + return ( + ( + !this.options["balance"] || + ![1, 3].includes(this.movesCount) + ) + && + ( + !this.options["doublemove"] || + this.movesCount == 0 || + this.subTurn == 2 + ) + && + ( + !this.options["progressive"] || + this.subTurn == this.movesCount + 1 + ) + ); } // "Stop at the first move found" @@ -2104,12 +2307,9 @@ export default class ChessRules { return (color == "w" ? "0-1" : "1-0"); } - // NOTE: quite suboptimal for eg. Benedict (not a big deal I think) 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 = @@ -2119,12 +2319,15 @@ export default class ChessRules { const pieceWidth = this.getPieceWidth(r.width); move.appear.forEach(a => { this.g_pieces[a.x][a.y] = document.createElement("piece"); - this.g_pieces[a.x][a.y].classList.add(this.pieces()[a.p]["class"]); - this.g_pieces[a.x][a.y].classList.add(a.c == "w" ? "white" : "black"); + C.AddClass_es(this.g_pieces[a.x][a.y], + this.pieces(a.c, a.x, a.y)[a.p]["class"]); + this.g_pieces[a.x][a.y].classList.add(C.GetColorClass(a.c)); this.g_pieces[a.x][a.y].style.width = pieceWidth + "px"; this.g_pieces[a.x][a.y].style.height = pieceWidth + "px"; const [ip, jp] = this.getPixelPosition(a.x, a.y, r); - this.g_pieces[a.x][a.y].style.transform = `translate(${ip}px,${jp}px)`; + // Translate coordinates to use chessboard as reference: + this.g_pieces[a.x][a.y].style.transform = + `translate(${ip - r.x}px,${jp - r.y}px)`; if (this.enlightened && !this.enlightened[a.x][a.y]) this.g_pieces[a.x][a.y].classList.add("hidden"); chessboard.appendChild(this.g_pieces[a.x][a.y]); @@ -2133,82 +2336,154 @@ export default class ChessRules { this.graphUpdateEnlightened(); } - playPlusVisual(move, r) { + // TODO: send stack receive stack, or allow incremental? (good/bad points) + buildMoveStack(move, r) { + this.moveStack.push(move); + this.computeNextMove(move); this.play(move); - this.playVisual(move, r); - this.afterPlay(move); //user method + const newTurn = this.turn; + if (this.moveStack.length == 1) + this.playVisual(move, r); + if (move.next) { + this.gameState = { + fen: this.getFen(), + board: JSON.parse(JSON.stringify(this.board)) //easier + }; + this.buildMoveStack(move.next, r); + } + else { + if (this.moveStack.length == 1) { + // Usual case (one normal move) + this.afterPlay(this.moveStack, newTurn, {send: true, res: true}); + this.moveStack = [] + } + else { + this.afterPlay(this.moveStack, newTurn, {send: true, res: false}); + this.re_initFromFen(this.gameState.fen, this.gameState.board); + this.playReceivedMove(this.moveStack.slice(1), () => { + this.afterPlay(this.moveStack, newTurn, {send: false, res: true}); + this.moveStack = [] + }); + } + } } - getMaxDistance(rwidth) { + // Implemented in variants using (automatic) moveStack + computeNextMove(move) {} + + getMaxDistance(r) { // Works for all rectangular boards: - return Math.sqrt(rwidth ** 2 + (rwidth / this.size.ratio) ** 2); + return Math.sqrt(r.width ** 2 + r.height ** 2); } getDomPiece(x, y) { return (typeof x == "string" ? this.r_pieces : this.g_pieces)[x][y]; } - animate(move, callback) { - if (this.noAnimate || move.noAnimate) { - callback(); - return; + animateMoving(start, end, drag, segments, cb) { + let initPiece = this.getDomPiece(start.x, start.y); + // NOTE: cloning often not required, but light enough, and simpler + let movingPiece = initPiece.cloneNode(); + initPiece.style.opacity = "0"; + let container = + document.getElementById(this.containerId) + const r = container.querySelector(".chessboard").getBoundingClientRect(); + if (typeof start.x == "string") { + // Need to bound width/height (was 100% for reserve pieces) + const pieceWidth = this.getPieceWidth(r.width); + movingPiece.style.width = pieceWidth + "px"; + movingPiece.style.height = pieceWidth + "px"; } - let movingPiece = this.getDomPiece(move.start.x, move.start.y); - const initTransform = movingPiece.style.transform; - let chessboard = - document.getElementById(this.containerId).querySelector(".chessboard"); - const r = chessboard.getBoundingClientRect(); - const [ix, iy] = this.getPixelPosition(move.start.x, move.start.y, r); - const maxDist = this.getMaxDistance(r.width); - // NOTE: move.drag could be generalized per-segment (usage?) - if (move.drag) { - // Drag something else: require cloning - movingPiece = movingPiece.cloneNode(); - const pieces = this.pieces(); - const startCode = this.getPiece(move.start.x, move.start.y); - movingPiece.classList.remove(pieces[startCode]["class"]); - movingPiece.classList.add(pieces[move.drag.p]["class"]); - const apparentColor = this.getColor(move.start.x, move.start.y); - if (apparentColor != move.drag.c) { + const maxDist = this.getMaxDistance(r); + const apparentColor = this.getColor(start.x, start.y); + const pieces = this.pieces(apparentColor, start.x, start.y); + if (drag) { + const startCode = this.getPiece(start.x, start.y); + C.RemoveClass_es(movingPiece, pieces[startCode]["class"]); + C.AddClass_es(movingPiece, pieces[drag.p]["class"]); + if (apparentColor != drag.c) { movingPiece.classList.remove(C.GetColorClass(apparentColor)); - movingPiece.classList.add(C.GetColorClass(move.drag.c)); + movingPiece.classList.add(C.GetColorClass(drag.c)); } - chessboard.appendChild(movingPiece); } + container.appendChild(movingPiece); const animateSegment = (index, cb) => { - const [i1, j1] = move.segments[index][0]; - const [i2, j2] = move.segments[index][1]; + // NOTE: move.drag could be generalized per-segment (usage?) + const [i1, j1] = segments[index][0]; + const [i2, j2] = segments[index][1]; const dep = this.getPixelPosition(i1, j1, r); const arr = this.getPixelPosition(i2, j2, r); + movingPiece.style.transitionDuration = "0s"; + movingPiece.style.transform = `translate(${dep[0]}px, ${dep[1]}px)`; const distance = Math.sqrt((arr[0] - dep[0]) ** 2 + (arr[1] - dep[1]) ** 2); const duration = 0.2 + (distance / maxDist) * 0.3; - movingPiece.style.transform = `translate(${arr[0]}px, ${arr[1]}px)`; - movingPiece.style.transitionDuration = duration + "s"; - setTimeout(cb, duration * 1000); + // TODO: unclear why we need this new delay below: + setTimeout(() => { + movingPiece.style.transitionDuration = duration + "s"; + // movingPiece is child of container: no need to adjust coordinates + movingPiece.style.transform = `translate(${arr[0]}px, ${arr[1]}px)`; + setTimeout(cb, duration * 1000); + }, 50); }; - if (!move.segments) { - move.segments = [ - [[move.start.x, move.start.y], [move.end.x, move.end.y]] - ]; - } let index = 0; const animateSegmentCallback = () => { - if (index < move.segments.length) + if (index < segments.length) animateSegment(index++, animateSegmentCallback); else { - if (move.drag) - movingPiece.remove(); - else { - movingPiece.style.transform = initTransform; - movingPiece.style.transitionDuration = "0s"; - } - callback(); + movingPiece.remove(); + initPiece.style.opacity = "1"; + cb(); } }; animateSegmentCallback(); } + // Input array of objects with at least fields x,y (e.g. PiPo) + animateFading(arr, cb) { + const animLength = 350; //TODO: 350ms? More? Less? + arr.forEach(v => { + let fadingPiece = this.getDomPiece(v.x, v.y); + fadingPiece.style.transitionDuration = (animLength / 1000) + "s"; + fadingPiece.style.opacity = "0"; + }); + setTimeout(cb, animLength); + } + + animate(move, callback) { + if (this.noAnimate || move.noAnimate) { + callback(); + return; + } + let segments = move.segments; + if (!segments) + segments = [ [[move.start.x, move.start.y], [move.end.x, move.end.y]] ]; + let targetObj = new TargetObj(callback); + if (move.start.x != move.end.x || move.start.y != move.end.y) { + targetObj.target++; + this.animateMoving(move.start, move.end, move.drag, segments, + () => targetObj.increment()); + } + if (move.vanish.length > move.appear.length) { + const arr = move.vanish.slice(move.appear.length) + // Ignore disappearing pieces hidden by some appearing ones: + .filter(v => move.appear.every(a => a.x != v.x || a.y != v.y)); + if (arr.length > 0) { + targetObj.target++; + this.animateFading(arr, () => targetObj.increment()); + } + } + targetObj.target += + this.customAnimate(move, segments, () => targetObj.increment()); + if (targetObj.target == 0) + callback(); + } + + // Potential other animations (e.g. for Suction variant) + customAnimate(move, segments, cb) { + return 0; //nb of targets + } + playReceivedMove(moves, callback) { const launchAnimation = () => { const r = container.querySelector(".chessboard").getBoundingClientRect();