X-Git-Url: https://git.auder.net/?p=xogo.git;a=blobdiff_plain;f=base_rules.js;h=88197ea0bed834c970659b95068aa5bec6f0b1aa;hp=79e8650bc5c57ed9e470acaa5c97fd38b6a6639f;hb=HEAD;hpb=b4ae3ff62916d54d56778f63ef0231bfb5761142 diff --git a/base_rules.js b/base_rules.js index 79e8650..3d8e463 100644 --- a/base_rules.js +++ b/base_rules.js @@ -1,8 +1,24 @@ -import { Random } from "/utils/alea.js"; -import { ArrayFun } from "/utils/array.js"; +import {Random} from "/utils/alea.js"; +import {ArrayFun} from "/utils/array.js"; +import {FenUtil} from "/utils/setupPieces.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 { @@ -19,7 +35,6 @@ export default class ChessRules { // Users can generally select a randomness level from 0 to 2. static get Options() { return { - // NOTE: some options are required for FEN generation, some aren't. select: [{ label: "Randomness", variable: "randomness", @@ -30,16 +45,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 @@ -62,18 +79,8 @@ export default class ChessRules { }; } - // Pawns specifications - get pawnSpecs() { - return { - directions: {w: -1, b: 1}, - initShift: {w: 1, b: 1}, - twoSquares: true, - threeSquares: false, - canCapture: true, - captureBackward: false, - bidirectional: false, - promotions: ['r', 'n', 'b', 'q'] - }; + get pawnPromotions() { + return ['q', 'r', 'n', 'b']; } // Some variants don't have flags: @@ -90,37 +97,66 @@ export default class ChessRules { return true; } + // Allow to take (moving: not disappearing) own pieces? + get hasSelfCaptures() { + return ( + this.options["recycle"] || + (this.options["teleport"] && this.subTurnTeleport == 1) + ); + } + get hasReserve() { return ( !!this.options["crazyhouse"] || (!!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"]; } + // Some variants use only click information + get clickOnly() { + return false; + } + + // Some variants reveal moves only after both players played + get hideMoves() { + return false; + } + + // Some variants do not flip board as black + get flippedBoard() { + return (this.playerColor == 'b'); + } + // Some variants use click infos: - doClick([x, y]) { - if (typeof x != "number") + doClick(coords) { + if (typeof coords.x != "number") return null; //click on reserves if ( this.options["teleport"] && this.subTurnTeleport == 2 && - this.board[x][y] == "" + 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({ - x: x, - y: y, - c: this.captured.c, //this.turn, + x: coords.x, + y: coords.y, + c: this.captured.c, p: this.captured.p }) ], vanish: [] }); + res.drag = {c: this.captured.c, p: this.captured.p}; + return res; } return null; } @@ -128,46 +164,41 @@ export default class ChessRules { //////////////////// // COORDINATES UTILS - // 3 --> d (column number to letter) - static CoordToColumn(colnum) { - return String.fromCharCode(97 + colnum); - } - - // d --> 3 (column letter to number) - static ColumnToCoord(columnStr) { - return columnStr.charCodeAt(0) - 97; - } - - // 7 (numeric) --> 1 (str) [from black viewpoint]. - static CoordToRow(rownum) { - return rownum; + // 3a --> {x:3, y:10} + static SquareToCoords(sq) { + return ArrayFun.toObject(["x", "y"], + [0, 1].map(i => parseInt(sq[i], 36))); } - // NOTE: wrong row index (1 should be 7 ...etc). But OK for the usage. - static RowToCoord(rownumStr) { - // NOTE: 30 is way more than enough (allow up to 29 rows on one character) - return parseInt(rownumStr, 30); + // {x:11, y:12} --> bc + static CoordsToSquare(cd) { + return Object.values(cd).map(c => c.toString(36)).join(""); } - // a2 --> {x:2,y:0} (this is in fact a6) - static SquareToCoords(sq) { - return { - x: C.RowToCoord(sq[1]), - // NOTE: column is always one char => max 26 columns - y: C.ColumnToCoord(sq[0]) - }; + // c10 --> 02 (assuming 10 rows) + static SquareFromUsual(sq) { + return ( + (this.size.x - parseInt(sq.substring(1), 10)).toString(36) + + (sq.charCodeAt(0) - 97).toString(36) + ); } - // {x:0,y:4} --> e0 (should be e8) - static CoordsToSquare(coords) { - return C.CoordToColumn(coords.y) + C.CoordToRow(coords.x); + // 02 --> c10 + static UsualFromSquare(sq) { + return ( + String.fromCharCode(parseInt(sq.charAt(1), 36) + 97) + + (this.size.x - parseInt(sq.charAt(0), 36)).toString(10) + ); } - coordsToId([x, y]) { - if (typeof x == "number") - return `${this.containerId}|sq-${x.toString(30)}-${y.toString(30)}`; + coordsToId(cd) { + if (typeof cd.x == "number") { + return ( + `${this.containerId}|sq-${cd.x.toString(36)}-${cd.y.toString(36)}` + ); + } // Reserve : - return `${this.containerId}|rsq-${x}-${y}`; + return `${this.containerId}|rsq-${cd.x}-${cd.y}`; } idToCoords(targetId) { @@ -183,9 +214,9 @@ export default class ChessRules { } const squares = idParts[1].split('-'); if (squares[0] == "sq") - return [ parseInt(squares[1], 30), parseInt(squares[2], 30) ]; - // squares[0] == "rsq" : reserve, 'c' + 'p' (letters) - return [squares[1], squares[2]]; + return {x: parseInt(squares[1], 36), y: parseInt(squares[2], 36)}; + // squares[0] == "rsq" : reserve, 'c' + 'p' (letters color & piece) + return {x: squares[1], y: squares[2]}; } ///////////// @@ -193,97 +224,41 @@ 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: - fen = "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w 0"; - - else { - // Randomize - 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"]) { - if (c == 'b' && this.options.randomness == 1) { - pieces['b'] = pieces['w']; - flags += flags; - break; - } + Random.setSeed(seed); //may be unused + let baseFen = this.genRandInitBaseFen(); + baseFen.o = Object.assign({init: true}, baseFen.o); + const parts = this.getPartFen(baseFen.o); + return ( + baseFen.fen + " w 0" + + (Object.keys(parts).length > 0 ? (" " + JSON.stringify(parts)) : "") + ); + } - let positions = ArrayFun.range(8); - - // Get random squares for bishops - let randIndex = 2 * Random.randInt(4); - const bishop1Pos = positions[randIndex]; - // The second bishop must be on a square of different color - let randIndex_tmp = 2 * Random.randInt(4) + 1; - const bishop2Pos = positions[randIndex_tmp]; - // Remove chosen squares - positions.splice(Math.max(randIndex, randIndex_tmp), 1); - positions.splice(Math.min(randIndex, randIndex_tmp), 1); - - // Get random squares for knights - randIndex = Random.randInt(6); - const knight1Pos = positions[randIndex]; - positions.splice(randIndex, 1); - randIndex = Random.randInt(5); - const knight2Pos = positions[randIndex]; - positions.splice(randIndex, 1); - - // Get random square for queen - randIndex = Random.randInt(4); - const queenPos = positions[randIndex]; - positions.splice(randIndex, 1); - - // Rooks and king positions are now fixed, - // because of the ordering rook-king-rook - const rook1Pos = positions[0]; - const kingPos = positions[1]; - const rook2Pos = positions[2]; - - // Finally put the shuffled pieces in the board array - pieces[c][rook1Pos] = "r"; - pieces[c][knight1Pos] = "n"; - pieces[c][bishop1Pos] = "b"; - pieces[c][queenPos] = "q"; - pieces[c][kingPos] = "k"; - pieces[c][bishop2Pos] = "b"; - pieces[c][knight2Pos] = "n"; - pieces[c][rook2Pos] = "r"; - flags += rook1Pos.toString() + rook2Pos.toString(); + // Setup the initial random-or-not (asymmetric-or-not) position + genRandInitBaseFen() { + const s = FenUtil.setupPieces( + ['r', 'n', 'b', 'q', 'k', 'b', 'n', 'r'], + { + randomness: this.options["randomness"], + between: [{p1: 'k', p2: 'r'}], + diffCol: ['b'], + flags: ['r'] } - fen = ( - pieces["b"].join("") + - "/pppppppp/8/8/8/8/PPPPPPPP/" + - pieces["w"].join("").toUpperCase() + - " w 0" - ); - } - // Add turn + flags + enpassant (+ reserve) - let parts = []; - if (this.hasFlags) - parts.push(`"flags":"${flags}"`); - if (this.hasEnpassant) - parts.push('"enpassant":"-"'); - if (this.hasReserve) - parts.push('"reserve":"000000000000"'); - if (this.options["crazyhouse"]) - parts.push('"ispawn":"-"'); - if (parts.length >= 1) - fen += " {" + parts.join(",") + "}"; - return fen; + ); + return { + fen: s.b.join("") + "/pppppppp/8/8/8/8/PPPPPPPP/" + + s.w.join("").toUpperCase(), + o: {flags: s.flags} + }; } // "Parse" FEN: just return untransformed string data @@ -301,48 +276,54 @@ export default class ChessRules { // Return current fen (game state) getFen() { - let fen = ( - this.getBaseFen() + " " + - this.getTurnFen() + " " + - this.movesCount + const parts = this.getPartFen({}); + return ( + this.getBaseFen() + + (Object.keys(parts).length > 0 ? (" " + JSON.stringify(parts)) : "") ); - let parts = []; + } + + getBaseFen() { + return this.getPosition() + " " + this.turn + " " + this.movesCount; + } + + getPartFen(o) { + let parts = {}; if (this.hasFlags) - parts.push(`"flags":"${this.getFlagsFen()}"`); + parts["flags"] = o.init ? o.flags : this.getFlagsFen(); if (this.hasEnpassant) - parts.push(`"enpassant":"${this.getEnpassantFen()}"`); - if (this.hasReserve) - parts.push(`"reserve":"${this.getReserveFen()}"`); + parts["enpassant"] = o.init ? "-" : this.getEnpassantFen(); + if (this.hasReserveFen) + parts["reserve"] = this.getReserveFen(o); if (this.options["crazyhouse"]) - parts.push(`"ispawn":"${this.getIspawnFen()}"`); - if (parts.length >= 1) - fen += " {" + parts.join(",") + "}"; - return fen; + parts["ispawn"] = this.getIspawnFen(o); + return parts; + } + + 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 - getBaseFen() { - 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); - }; + getPosition() { let position = ""; - for (let i = 0; i < this.size.y; i++) { + for (let i = 0; i < this.size.x; i++) { let emptyCount = 0; - for (let j = 0; j < this.size.x; j++) { + for (let j = 0; j < this.size.y; j++) { if (this.board[i][j] == "") emptyCount++; 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]); @@ -350,73 +331,84 @@ export default class ChessRules { } if (emptyCount > 0) // "Flush remainder" - position += format(emptyCount); - if (i < this.size.y - 1) + position += C.FenEmptySquares(emptyCount); + if (i < this.size.x - 1) position += "/"; //separate rows } return position; } - getTurnFen() { - return this.turn; - } - // Flags part of the FEN string getFlagsFen() { - return ["w", "b"].map(c => { - return this.castleFlags[c].map(x => x.toString(30)).join(""); + return ['w', 'b'].map(c => { + return this.castleFlags[c].map(x => x.toString(36)).join(""); }).join(""); } // Enpassant part of the FEN string getEnpassantFen() { if (!this.epSquare) - return "-"; //no en-passant + return "-"; return C.CoordsToSquare(this.epSquare); } - getReserveFen() { + getReserveFen(o) { + if (o.init) + return Array(2 * V.ReserveArray.length).fill('0').join(""); return ( - ["w","b"].map(c => Object.values(this.reserve[c]).join("")).join("") + ['w', 'b'].map(c => Object.values(this.reserve[c]).join("")).join("") ); } - getIspawnFen() { - const coords = Object.keys(this.ispawn); - if (coords.length == 0) + getIspawnFen(o) { + if (o.init) + // NOTE: cannot merge because this.ispawn doesn't exist yet + return "-"; + const squares = Object.keys(this.ispawn); + if (squares.length == 0) return "-"; - return coords.map(C.CoordsToSquare).join(","); + return squares.join(","); } // Set flags from fen (castle: white a,h then black a,h) setFlags(fenflags) { this.castleFlags = { - w: [0, 1].map(i => parseInt(fenflags.charAt(i), 30)), - b: [2, 3].map(i => parseInt(fenflags.charAt(i), 30)) + w: [0, 1].map(i => parseInt(fenflags.charAt(i), 36)), + b: [2, 3].map(i => parseInt(fenflags.charAt(i), 36)) }; } ////////////////// // INITIALIZATION - // Fen string fully describes the game state 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; + }); + + // Some variables this.playerColor = o.color; - this.afterPlay = o.afterPlay; + this.afterPlay = o.afterPlay; //trigger some actions after playing a move + this.containerId = o.element; + this.isDiagram = o.diagram; + this.marks = o.marks; - // FEN-related: + // Initializations if (!o.fen) o.fen = this.genRandInitFen(o.seed); - const fenParsed = this.parseFen(o.fen); - this.board = this.getBoard(fenParsed.position); + this.re_initFromFen(o.fen); + 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); - - // Graphical (can use variables defined above) - this.containerId = o.element; - this.graphicalInit(); } // Turn position fen into double array ["wb","wp","bk",...] @@ -446,132 +438,61 @@ export default class ChessRules { 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); - this.subTurn = 1; //may be unused if (this.options["teleport"]) { this.subTurnTeleport = 1; this.captured = null; } if (this.options["dark"]) { - this.enlightened = ArrayFun.init(this.size.x, this.size.y); // Setup enlightened: squares reachable by player side - this.updateEnlightened(false); - } - } - - updateEnlightened(withGraphics) { - let newEnlightened = ArrayFun.init(this.size.x, this.size.y, false); - const pawnShift = { w: -1, b: 1 }; - // Add pieces positions + all squares reachable by moves (includes Zen): - // (watch out special pawns case) - for (let x=0; x { - const [i, j] = [x + step[0], this.computeY(y + step[1])]; - if (this.onBoard(i, j) && this.board[i][j] == "") - newEnlightened[i][j] = true; - }); - } - this.getPotentialMovesFrom([x, y]).forEach(m => { - newEnlightened[m.end.x][m.end.y] = true; - }); - } - } - } - if (this.epSquare) - this.enlightEnpassant(newEnlightened); - if (withGraphics) - this.graphUpdateEnlightened(newEnlightened); - this.enlightened = newEnlightened; - } - - // Include en-passant capturing square if any: - enlightEnpassant(newEnlightened) { - const steps = this.pieces(this.playerColor)["p"].attack; - for (let step of steps) { - const x = this.epSquare.x - step[0], - y = this.computeY(this.epSquare.y - step[1]); - if ( - this.onBoard(x, y) && - this.getColor(x, y) == this.playerColor && - this.getPieceType(x, y) == "p" - ) { - newEnlightened[x][this.epSquare.y] = true; - break; - } + 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 = []; } - // Apply diff this.enlightened --> newEnlightened on board - graphUpdateEnlightened(newEnlightened) { - let chessboard = - document.getElementById(this.containerId).querySelector(".chessboard"); - const r = chessboard.getBoundingClientRect(); - const pieceWidth = this.getPieceWidth(r.width); - for (let x=0; x this.g_pieces[x][y].classList.add(cl)); - this.g_pieces[x][y].style.width = pieceWidth + "px"; - this.g_pieces[x][y].style.height = pieceWidth + "px"; - const [ip, jp] = this.getPixelPosition(x, y, r); - this.g_pieces[x][y].style.transform = - `translate(${ip}px,${jp}px)`; - chessboard.appendChild(this.g_pieces[x][y]); - } - } - } - } + // ordering as in pieces() p,r,n,b,q,k + static get ReserveArray() { + return ['p', 'r', 'n', 'b', 'q', 'k']; } - // ordering p,r,n,b,q,k (most general + count in base 30 if needed) initReserves(reserveStr) { - const counts = reserveStr.split("").map(c => parseInt(c, 30)); - this.reserve = { w: {}, b: {} }; - const pieceName = Object.keys(this.pieces()); - for (let i of ArrayFun.range(12)) { - if (i < 6) - this.reserve['w'][pieceName[i]] = counts[i]; - else - this.reserve['b'][pieceName[i-6]] = counts[i]; - } + const counts = reserveStr.split("").map(c => parseInt(c, 36)); + const L = V.ReserveArray.length; + this.reserve = { + w: ArrayFun.toObject(V.ReserveArray, counts.slice(0, L)), + b: ArrayFun.toObject(V.ReserveArray, counts.slice(L, 2 * L)) + }; } initIspawn(ispawnStr) { - if (ispawnStr != "-") { - this.ispawn = ispawnStr.split(",").map(C.SquareToCoords) - .reduce((o, key) => ({ ...o, [key]: true}), {}); - } + if (ispawnStr != "-") + this.ispawn = ArrayFun.toObject(ispawnStr.split(","), true); else this.ispawn = {}; } + //////////////// + // VISUAL UTILS + + getPieceWidth(rwidth) { + return (rwidth / Math.max(this.size.x, this.size.y)); + } + + getReserveSquareSize(rwidth, nbR) { + const sqSize = this.getPieceWidth(rwidth); + return Math.min(sqSize, rwidth / nbR); + } + + getReserveNumId(color, piece) { + return `${this.containerId}|rnum-${color}${piece}`; + } + getNbReservePieces(color) { return ( Object.values(this.reserve[color]).reduce( @@ -579,75 +500,94 @@ export default class ChessRules { ); } - ////////////// - // VISUAL PART + getRankInReserve(c, p) { + const pieces = Object.keys(this.pieces(c, c, p)); + const lastIndex = pieces.findIndex(pp => pp == p) + let toTest = pieces.slice(0, lastIndex); + return toTest.reduce( + (oldV,newV) => oldV + (this.reserve[c][newV] > 0 ? 1 : 0), 0); + } - getPieceWidth(rwidth) { - return (rwidth / this.size.y); + static AddClass_es(elt, class_es) { + if (!Array.isArray(class_es)) + class_es = [class_es]; + class_es.forEach(cl => elt.classList.add(cl)); } - getSquareWidth(rwidth) { - return this.getPieceWidth(rwidth); + static RemoveClass_es(elt, class_es) { + if (!Array.isArray(class_es)) + class_es = [class_es]; + class_es.forEach(cl => elt.classList.remove(cl)); } - getReserveSquareSize(rwidth, nbR) { - const sqSize = this.getSquareWidth(rwidth); - return Math.min(sqSize, rwidth / nbR); + // Generally light square bottom-right + getSquareColorClass(x, y) { + return ((x+y) % 2 == 0 ? "light-square": "dark-square"); } - getReserveNumId(color, piece) { - return `${this.containerId}|rnum-${color}${piece}`; + getMaxDistance(r) { + // Works for all rectangular boards: + return Math.sqrt(r.width ** 2 + r.height ** 2); + } + + getDomPiece(x, y) { + return (typeof x == "string" ? this.r_pieces : this.g_pieces)[x][y]; } + ////////////////// + // 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"); - new ResizeObserver(this.rescale).observe(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); - const aspectRatio = this.size.y / this.size.x; // Compare window ratio width / height to aspectRatio: - const windowRatio = window.innerWidth / window.innerHeight; + const windowRatio = rc.width / rc.height; let cbWidth, cbHeight; - if (windowRatio <= aspectRatio) { + const vRatio = this.size.ratio || 1; + if (windowRatio <= vRatio) { // Limiting dimension is width: - cbWidth = Math.min(window.innerWidth, 767); - cbHeight = cbWidth / aspectRatio; + cbWidth = Math.min(rc.width, 767); + cbHeight = cbWidth / vRatio; } else { // Limiting dimension is height: - cbHeight = Math.min(window.innerHeight, 767); - cbWidth = cbHeight * aspectRatio; + cbHeight = Math.min(rc.height, 767); + cbWidth = cbHeight * vRatio; } - if (this.reserve) { + if (this.hasReserve && !this.isDiagram) { const sqSize = cbWidth / this.size.y; // NOTE: allocate space for reserves (up/down) even if they are empty - if ((window.innerHeight - cbHeight) / 2 < sqSize + 5) { - cbHeight = window.innerHeight - 2 * (sqSize + 5); - cbWidth = cbHeight * aspectRatio; + // Cannot use getReserveSquareSize() here, but sqSize is an upper bound. + 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, // because chessboard might not be drawn yet. - this.setupPieces({ + this.setupVisualPieces({ width: cbWidth, height: cbHeight, x: spaceLeft, @@ -657,109 +597,128 @@ export default class ChessRules { // Get SVG board (background, no pieces) getSvgChessboard() { - const [sizeX, sizeY] = [this.size.x, this.size.y]; - const flipped = (this.playerColor == 'b'); let board = ` - `; - for (let i=0; i < sizeX; i++) { - for (let j=0; j < sizeY; j++) { + viewBox="0 0 ${10*this.size.y} ${10*this.size.x}" + class="chessboard_SVG">`; + board += this.getBaseSvgChessboard(); + board += ""; + return board; + } + + getBaseSvgChessboard() { + let board = ""; + const flipped = this.flippedBoard; + for (let i=0; i < this.size.x; i++) { + for (let j=0; j < this.size.y; j++) { + if (!this.onBoard(i, j)) + continue; const ii = (flipped ? this.size.x - 1 - i : i); const jj = (flipped ? this.size.y - 1 - j : j); 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. - board += ``; + board += ` + `; } } - board += ""; return board; } - // Generally light square bottom-right - getSquareColorClass(i, j) { - return ((i+j) % 2 == 0 ? "light-square": "dark-square"); - } - - setupPieces(r) { - if (this.g_pieces) { - // Refreshing: delete old pieces first - for (let i=0; i { + 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 { + const formattedSquare = C.SquareFromUsual(m); + const mCoords = C.SquareToCoords(formattedSquare); + addPiece(mCoords.x, mCoords.y, 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] != "" && - (!this.options["dark"] || this.enlightened[i][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"); - this.g_pieces[i][j].classList.add(this.pieces()[piece]["class"]); - this.g_pieces[i][j].classList.add(color == "w" ? "white" : "black"); - 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)`; - chessboard.appendChild(this.g_pieces[i][j]); + addPiece(i, j, "g_pieces", this.pieces(color, i, j)[piece]["class"]); + this.g_pieces[i][j].classList.add(V.GetColorClass(color)); + if (this.enlightened && !this.enlightened[i][j]) + this.g_pieces[i][j].classList.add("hidden"); + } + 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.reserve) + if (this.hasReserve && !this.isDiagram) 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); @@ -777,20 +736,19 @@ 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; let r_cell = document.createElement("div"); - r_cell.id = this.coordsToId([c, p]); + r_cell.id = this.coordsToId({x: c, y: p}); r_cell.classList.add("reserve-cell"); r_cell.style.width = sqResSize + "px"; r_cell.style.height = sqResSize + "px"; rcontainer.appendChild(r_cell); let piece = document.createElement("piece"); - const pieceSpec = this.pieces(c)[p]; - piece.classList.add(pieceSpec["class"]); - piece.classList.add(c == 'w' ? "white" : "black"); + C.AddClass_es(piece, this.pieces(c, c, p)[p]["class"]); + piece.classList.add(V.GetColorClass(c)); piece.style.width = "100%"; piece.style.height = "100%"; this.r_pieces[c][p] = piece; @@ -813,8 +771,8 @@ export default class ChessRules { piece = "k"; //capturing cannibal king: back to king form const oldCount = this.reserve[color][piece]; this.reserve[color][piece] = count; - // Redrawing is much easier if count==0 - if ([oldCount, count].includes(0)) + // Redrawing is much easier if count==0 (or undefined) + if ([oldCount, count].some(item => !item)) this.re_drawReserve([color]); else { const numId = this.getReserveNumId(color, piece); @@ -822,43 +780,50 @@ export default class ChessRules { } } - // After resize event: no need to destroy/recreate pieces - rescale() { + // Resize board: no need to destroy/recreate pieces + rescale(mode) { const container = document.getElementById(this.containerId); - if (!container) - return; //useful at initial loading let chessboard = container.querySelector(".chessboard"); - const r = chessboard.getBoundingClientRect(); - const newRatio = r.width / r.height; - const aspectRatio = this.size.y / this.size.x; - let newWidth = r.width, - newHeight = r.height; - if (newRatio > aspectRatio) { - newWidth = r.height * aspectRatio; - chessboard.style.width = newWidth + "px"; - } - else if (newRatio < aspectRatio) { - newHeight = r.width / aspectRatio; - chessboard.style.height = newHeight + "px"; - } - const newX = (window.innerWidth - newWidth) / 2; + 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 > rc.width) { + newWidth = rc.width; + newHeight = newWidth / vRatio; + } + if (newHeight > rc.height) { + newHeight = rc.height; + newWidth = newHeight * vRatio; + } + chessboard.style.width = newWidth + "px"; + chessboard.style.height = newHeight + "px"; + 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 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.board[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); } @@ -883,29 +848,40 @@ export default class ChessRules { Object.keys(this.reserve[c]).forEach(p => { if (this.reserve[c][p] == 0) return; - let r_cell = document.getElementById(this.coordsToId([c, p])); + let r_cell = document.getElementById(this.coordsToId({x: c, y: p})); r_cell.style.width = sqResSize + "px"; r_cell.style.height = sqResSize + "px"; }); } } - // 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) { - const sqSize = this.getSquareWidth(r.width); if (i < 0 || j < 0) return [0, 0]; //piece vanishes - const flipped = (this.playerColor == 'b'); - const x = (flipped ? this.size.y - 1 - j : j) * sqSize; - const y = (flipped ? this.size.x - 1 - i : i) * sqSize; - return [x, y]; + let x, y; + if (typeof i == "string") { + // Reserves: need to know the rank of piece + const nbR = this.getNbReservePieces(i); + const rsqSize = this.getReserveSquareSize(r.width, nbR); + x = this.getRankInReserve(i, j) * rsqSize; + y = (this.playerColor == i ? y = r.height + 5 : - 5 - rsqSize); + } + else { + const sqSize = r.width / Math.max(this.size.x, this.size.y); + const flipped = this.flippedBoard; + x = (flipped ? this.size.y - 1 - j : j) * sqSize + + Math.abs(this.size.x - this.size.y) * sqSize / 2; + y = (flipped ? this.size.x - 1 - i : i) * sqSize; + } + 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) @@ -920,47 +896,47 @@ export default class ChessRules { touchLocation = e.changedTouches[0]; if (touchLocation) return {x: touchLocation.clientX, y: touchLocation.clientY}; - return [0, 0]; //shouldn't reach here =) + return {x: 0, y: 0}; //shouldn't reach here =) } const centerOnCursor = (piece, e) => { - const centerShift = sqSize / 2; + 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, r = null, startPiece, curPiece = null, - sqSize; + pieceWidth; const mousedown = (e) => { // Disable zoom on smartphones: if (e.touches && e.touches.length > 1) e.preventDefault(); r = chessboard.getBoundingClientRect(); - sqSize = this.getSquareWidth(r.width); - const square = this.idToCoords(e.target.id); - if (square) { - const [i, j] = square; - const move = this.doClick([i, j]); + pieceWidth = this.getPieceWidth(r.width); + const cd = this.idToCoords(e.target.id); + if (cd) { + const move = this.doClick(cd); if (move) - this.playPlusVisual(move); - else { - if (typeof i != "number") - startPiece = this.r_pieces[i][j]; - else if (this.g_pieces[i][j]) - startPiece = this.g_pieces[i][j]; - if (startPiece && this.canIplay(i, j)) { + this.buildMoveStack(move, r); + else if (!this.clickOnly) { + const [x, y] = Object.values(cd); + if (typeof x != "number") + startPiece = this.r_pieces[x][y]; + else + startPiece = this.g_pieces[x][y]; + if (startPiece && this.canIplay(x, y)) { e.preventDefault(); - start = { x: i, y: j }; + start = cd; curPiece = startPiece.cloneNode(); curPiece.style.transform = "none"; curPiece.style.zIndex = 5; - curPiece.style.width = sqSize + "px"; - curPiece.style.height = sqSize + "px"; + 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"; } @@ -979,11 +955,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]; @@ -993,54 +964,86 @@ export default class ChessRules { startPiece.style.opacity = "1"; const offset = getOffset(e); const landingElt = document.elementFromPoint(offset.x, offset.y); - const sq = this.idToCoords(landingElt.id); - if (sq) { - const [i, j] = sq; + const cd = + (landingElt ? this.idToCoords(landingElt.id) : undefined); + if (cd) { // NOTE: clearly suboptimal, but much easier, and not a big deal. const potentialMoves = this.getPotentialMovesFrom([x, y]) - .filter(m => m.end.x == i && m.end.y == j); + .filter(m => m.end.x == cd.x && m.end.y == cd.y); const moves = this.filterValid(potentialMoves); 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(); }; + const resize = (e) => this.rescale(e.deltaY < 0 ? "up" : "down"); + if ('onmousedown' in window) { - document.addEventListener("mousedown", mousedown); - document.addEventListener("mousemove", mousemove); - document.addEventListener("mouseup", mouseup); + this.mouseListeners = [ + {type: "mousedown", listener: mousedown}, + {type: "mousemove", listener: mousemove}, + {type: "mouseup", listener: mouseup}, + {type: "wheel", listener: resize} + ]; + this.mouseListeners.forEach(ml => { + document.addEventListener(ml.type, ml.listener); + }); } if ('ontouchstart' in window) { - // https://stackoverflow.com/a/42509310/12660887 - document.addEventListener("touchstart", mousedown, {passive: false}); - document.addEventListener("touchmove", mousemove, {passive: false}); - document.addEventListener("touchend", mouseup, {passive: false}); + this.touchListeners = [ + {type: "touchstart", listener: mousedown}, + {type: "touchmove", listener: mousemove}, + {type: "touchend", listener: mouseup} + ]; + this.touchListeners.forEach(tl => { + // https://stackoverflow.com/a/42509310/12660887 + document.addEventListener(tl.type, tl.listener, {passive: false}); + }); } // TODO: onpointerdown/move/up ? See reveal.js /controllers/touch.js } + // NOTE: not called if isDiagram + removeListeners() { + let container = document.getElementById(this.containerId); + this.windowResizeObs.unobserve(container); + if ('onmousedown' in window) { + this.mouseListeners.forEach(ml => { + document.removeEventListener(ml.type, ml.listener); + }); + } + if ('ontouchstart' in window) { + this.touchListeners.forEach(tl => { + // https://stackoverflow.com/a/42509310/12660887 + document.removeEventListener(tl.type, tl.listener); + }); + } + } + showChoices(moves, r) { let container = document.getElementById(this.containerId); 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"; choices.style.top = r.y + "px"; chessboard.style.opacity = "0.5"; container.appendChild(choices); - const squareWidth = this.getSquareWidth(r.width); + const squareWidth = r.width / this.size.y; const firstUpLeft = (r.width - (moves.length * squareWidth)) / 2; const firstUpTop = (r.height - squareWidth) / 2; const color = moves[0].appear[0].c; 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"); @@ -1052,9 +1055,10 @@ export default class ChessRules { choice.style.backgroundColor = "lightyellow"; choice.onclick = () => callback(moves[i]); const piece = document.createElement("piece"); - const pieceSpec = this.pieces(color)[moves[i].appear[0].p]; - piece.classList.add(pieceSpec["class"]); - piece.classList.add(color == 'w' ? "white" : "black"); + 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(V.GetColorClass(color)); piece.style.width = "100%"; piece.style.height = "100%"; choice.appendChild(piece); @@ -1062,123 +1066,266 @@ export default class ChessRules { } } - ////////////// - // BASIC UTILS - - get size() { - return { "x": 8, "y": 8 }; - } - - // Color of thing on square (i,j). 'undefined' if square is empty - getColor(i, j) { - return this.board[i][j].charAt(0); - } - - // Assume square i,j isn't empty - getPiece(i, j) { - return this.board[i][j].charAt(1); + displayMessage(elt, msg, classe_s, timeout) { + if (elt) + // Fixed element, e.g. for Dice Chess + elt.innerHTML = msg; + else { + // Temporary div (Chakart, Apocalypse...) + let divMsg = document.createElement("div"); + C.AddClass_es(divMsg, classe_s); + divMsg.innerHTML = msg; + let container = document.getElementById(this.containerId); + container.appendChild(divMsg); + setTimeout(() => container.removeChild(divMsg), timeout); + } } - // Piece type on square (i,j) - getPieceType(i, j) { - const p = this.board[i][j].charAt(1); - return C.CannibalKings[p] || p; //a cannibal king move as... - } + //////////////// + // DARK METHODS - // Get opponent color - static GetOppCol(color) { - return (color == "w" ? "b" : "w"); + updateEnlightened() { + this.oldEnlightened = this.enlightened; + this.enlightened = ArrayFun.init(this.size.x, this.size.y, false); + // Add pieces positions + all squares reachable by moves (includes Zen): + for (let x=0; x { + this.enlightened[m.end.x][m.end.y] = true; + }); + } + } + } + if (this.epSquare) + this.enlightEnpassant(); } - // Can thing on square1 take thing on square2 - canTake([x1, y1], [x2, y2]) { - return ( - (this.getColor(x1, y1) !== this.getColor(x2, y2)) || - ( - (this.options["recycle"] || this.options["teleport"]) && - this.getPieceType(x2, y2) != "k" - ) - ); + // Include square of the en-passant capturing square: + enlightEnpassant() { + // NOTE: shortcut, pawn has only one attack type, doesn't depend on square + // TODO: (0, 0) is wrong, would need to place an attacker here... + const steps = this.pieces(this.playerColor, 0, 0)["p"].attack[0].steps; + for (let step of steps) { + const x = this.epSquare.x - step[0], //NOTE: epSquare.x not on edge + y = this.getY(this.epSquare.y - step[1]); + if ( + this.onBoard(x, y) && + this.getColor(x, y) == this.playerColor && + this.getPieceType(x, y) == "p" + ) { + this.enlightened[x][this.epSquare.y] = true; + break; + } + } + } + + // Apply diff this.enlightened --> oldEnlightened on board + graphUpdateEnlightened() { + let chessboard = + document.getElementById(this.containerId).querySelector(".chessboard"); + const r = chessboard.getBoundingClientRect(); + const pieceWidth = this.getPieceWidth(r.width); + for (let x=0; x= 0 && x < this.size.x && y >= 0 && y < this.size.y; + return (x >= 0 && x < this.size.x && + y >= 0 && y < this.size.y); } - // Used in interface: 'side' arg == player color + // 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); } //////////////////////// // PIECES SPECIFICATIONS - pieces(color) { - const pawnShift = (color == "w" ? -1 : 1); + getPawnShift(color) { + return (color == "w" ? -1 : 1); + } + isPawnInitRank(x, color) { + return (color == 'w' && x >= 6) || (color == 'b' && x <= 1); + } + + pieces(color, x, y) { + const pawnShift = this.getPawnShift(color || 'w'); return { 'p': { "class": "pawn", - steps: [[pawnShift, 0]], - range: 1, - attack: [[pawnShift, 1], [pawnShift, -1]] + moves: [ + { + steps: [[pawnShift, 0]], + range: (this.isPawnInitRank(x, color) ? 2 : 1) + } + ], + attack: [ + { + steps: [[pawnShift, 1], [pawnShift, -1]], + range: 1 + } + ] }, - // rook 'r': { "class": "rook", - steps: [[0, 1], [0, -1], [1, 0], [-1, 0]] + both: [ + {steps: [[0, 1], [0, -1], [1, 0], [-1, 0]]} + ] }, - // knight 'n': { "class": "knight", - steps: [ - [1, 2], [1, -2], [-1, 2], [-1, -2], - [2, 1], [-2, 1], [2, -1], [-2, -1] - ], - range: 1 + both: [ + { + steps: [ + [1, 2], [1, -2], [-1, 2], [-1, -2], + [2, 1], [-2, 1], [2, -1], [-2, -1] + ], + range: 1 + } + ] }, - // bishop 'b': { "class": "bishop", - steps: [[1, 1], [1, -1], [-1, 1], [-1, -1]] + both: [ + {steps: [[1, 1], [1, -1], [-1, 1], [-1, -1]]} + ] }, - // queen 'q': { "class": "queen", - steps: [ - [0, 1], [0, -1], [1, 0], [-1, 0], - [1, 1], [1, -1], [-1, 1], [-1, -1] + both: [ + { + steps: [ + [0, 1], [0, -1], [1, 0], [-1, 0], + [1, 1], [1, -1], [-1, 1], [-1, -1] + ] + } ] }, - // king 'k': { "class": "king", - steps: [ - [0, 1], [0, -1], [1, 0], [-1, 0], - [1, 1], [1, -1], [-1, 1], [-1, -1] - ], - range: 1 + both: [ + { + steps: [ + [0, 1], [0, -1], [1, 0], [-1, 0], + [1, 1], [1, -1], [-1, 1], [-1, -1] + ], + range: 1 + } + ] }, // Cannibal kings: - 's': { "class": "king-pawn" }, - 'u': { "class": "king-rook" }, - 'o': { "class": "king-knight" }, - 'c': { "class": "king-bishop" }, - 't': { "class": "king-queen" } + '!': {"class": "king-pawn", moveas: "p"}, + '#': {"class": "king-rook", moveas: "r"}, + '$': {"class": "king-knight", moveas: "n"}, + '%': {"class": "king-bishop", moveas: "b"}, + '*': {"class": "king-queen", moveas: "q"} }; } - //////////////////// - // 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; @@ -1186,34 +1333,140 @@ export default class ChessRules { res += this.size.y; return res; } + // Circular? + getX(x) { + return x; //generally, no + } + + increment([x, y], step) { + return [ + this.getX(x + step[0]), + this.getY(y + step[1]) + ]; + } + + getSegments(curSeg, segStart, segEnd) { + if (curSeg.length == 0) + return undefined; + let segments = JSON.parse(JSON.stringify(curSeg)); //not altering + segments.push([[segStart[0], segStart[1]], [segEnd[0], segEnd[1]]]); + return segments; + } + + getStepSpec(color, x, y, piece) { + let pieceType = piece; + let allSpecs = this.pieces(color, x, y); + if (!piece) + pieceType = this.getPieceType(x, y); + else if (allSpecs[piece].moveas) + pieceType = allSpecs[piece].moveas; + let res = allSpecs[pieceType]; + if (!res["both"]) + res.both = []; + if (!res["moves"]) + res.moves = []; + if (!res["attack"]) + res.attack = []; + return res; + } + + // Can thing on square1 capture thing on square2? + canTake([x1, y1], [x2, y2]) { + return this.getColor(x1, y1) !== this.getColor(x2, y2); + } + + // Teleport & Recycle. Assumption: color(x1,y1) == color(x2,y2) + canSelfTake([x1, y1], [x2, y2]) { + return !this.isKing(x2, y2); + } + + canStepOver(i, j, p) { + // In some variants, objects on boards don't stop movement (Chakart) + return this.board[i][j] == ""; + } + + canDrop([c, p], [i, j]) { + return ( + this.board[i][j] == "" && + (!this.enlightened || this.enlightened[i][j]) && + ( + p != "p" || + (c == 'w' && i < this.size.x - 1) || + (c == 'b' && i > 0) + ) + ); + } + + // 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 oppCols = this.getOppCols(color); + const piece = this.getPieceType(x, y); + const stepSpec = this.getStepSpec(color, x, y, piece); + const attacks = stepSpec.both.concat(stepSpec.attack); + for (let a of attacks) { + outerLoop: for (let step of a.steps) { + let [i, j] = this.increment([x, y], step); + let stepCounter = 0; + while (this.onBoard(i, j) && this.board[i][j] == "") { + if (a.range <= stepCounter++) + continue outerLoop; + [i, j] = this.increment([i, j], step); + } + if ( + this.onBoard(i, j) && + oppCols.includes(this.getColor(i, j)) && + 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 specs = this.pieces(color)[this.getPieceType(i, j)]; - const steps = specs.attack || specs.steps; - outerLoop: for (let step of 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 (specs.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 = (sq1, sq2) => { + return ( + // NOTE: canTake is reversed for Zen. + // Generally ok because of the symmetry. TODO? + this.canTake(sq1, sq2) && + this.filterValid( + [this.getBasicMove(sq1, sq2)]).length >= 1 + ); + }; + for (let i=0; i impossible + (!Number.isFinite(rx) && !Number.isNaN(rx)) || + (!Number.isFinite(ry) && !Number.isNaN(ry)) || + // Negative number of step (impossible) + (rx < 0 || ry < 0) || + // Not the same number of steps in both directions: + (!Number.isNaN(rx) && !Number.isNaN(ry) && Math.abs(rx - ry) > epsilon) + ) { + continue; + } + let distance = (Number.isNaN(rx) ? ry : rx); + if (Math.abs(distance - Math.round(distance)) > epsilon) + continue; + distance = Math.round(distance); //in case of (numerical...) + if (!range || 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 = []; for (let i=0; i 0) - ) - ) { - moves.push( - new Move({ - start: {x: c, y: p}, - end: {x: i, y: j}, - appear: [new PiPo({x: i, y: j, c: c, p: p})], - vanish: [] - }) - ); + if (this.onBoard(i, j) && this.canDrop([c, p], [i, j])) { + let mv = new Move({ + start: {x: c, y: p}, + end: {x: i, y: j}, + appear: [new PiPo({x: i, y: j, c: c, p: p})], + vanish: [] + }); + if (this.board[i][j] != "") { + mv.vanish.push(new PiPo({ + x: i, + y: j, + c: this.getColor(i, j), + p: this.getPiece(i, j) + })); + } + moves.push(mv); } } } @@ -1254,24 +1537,20 @@ export default class ChessRules { } // All possible moves from selected square - getPotentialMovesFrom(sq, color) { - if (typeof sq[0] == "string") - return this.getDropMovesFrom(sq); - if (this.options["madrasi"] && this.isImmobilized(sq)) + // TODO: generalize usage if arg "color" (e.g. Checkered) + getPotentialMovesFrom([x, y], color) { + if (this.subTurnTeleport == 2) return []; - const piece = this.getPieceType(sq[0], sq[1]); - let moves; - if (piece == "p") - moves = this.getPotentialPawnMoves(sq); - else - moves = this.getPotentialMovesOf(piece, sq); - if ( - piece == "k" && - this.hasCastle && - this.castleFlags[color || this.turn].some(v => v < this.size.y) - ) { - Array.prototype.push.apply(moves, this.getCastleMoves(sq)); - } + if (typeof x == "string") + return this.getDropMovesFrom([x, y]); + if (this.isImmobilized([x, y])) + return []; + const piece = this.getPieceType(x, y); + let moves = this.getPotentialMovesOf(piece, [x, y]); + if (piece == "p" && this.hasEnpassant && this.epSquare) + Array.prototype.push.apply(moves, this.getEnpassantCaptures([x, y])); + if (this.isKing(0, 0, piece) && this.hasCastle) + Array.prototype.push.apply(moves, this.getCastleMoves([x, y])); return this.postProcessPotentialMoves(moves); } @@ -1279,230 +1558,358 @@ export default class ChessRules { if (moves.length == 0) return []; const color = this.getColor(moves[0].start.x, moves[0].start.y); - const oppCol = C.GetOppCol(color); - - if (this.options["capture"] && this.atLeastOneCapture()) { - // Filter out non-capturing moves (not using m.vanish because of - // self captures of Recycle and Teleport). - moves = moves.filter(m => { - return ( - this.board[m.end.x][m.end.y] != "" && - this.getColor(m.end.x, m.end.y) == oppCol - ); - }); - } + const oppCols = this.getOppCols(color); - if (this.options["atomic"]) { - moves.forEach(m => { - if ( - this.board[m.end.x][m.end.y] != "" && - this.getColor(m.end.x, m.end.y) == oppCol - ) { - // Explosion! - let steps = [ - [-1, -1], - [-1, 0], - [-1, 1], - [0, -1], - [0, 1], - [1, -1], - [1, 0], - [1, 1] - ]; - for (let step of steps) { - let x = m.end.x + step[0]; - let y = this.computeY(m.end.y + step[1]); - if ( - this.onBoard(x, y) && - this.board[x][y] != "" && - this.getPieceType(x, y) != "p" - ) { - m.vanish.push( - new PiPo({ - p: this.getPiece(x, y), - c: this.getColor(x, y), - x: x, - y: y - }) - ); - } - } - if (!this.options["rifle"]) - m.appear.pop(); //nothin appears - } - }); - } + if (this.options["capture"] && this.atLeastOneCapture(color)) + moves = this.capturePostProcess(moves, oppCols); + + if (this.options["atomic"]) + moves = this.atomicPostProcess(moves, color, oppCols); if ( - this.options["cannibal"] && - this.options["rifle"] && - this.pawnSpecs.promotions + moves.length > 0 && + this.getPieceType(moves[0].start.x, moves[0].start.y) == "p" ) { - // In this case a rifle-capture from last rank may promote a pawn - const lastRank = (color == "w" ? 0 : this.size.x - 1); - let newMoves = []; - moves.forEach(m => { - if ( - m.start.x == lastRank && - m.appear.length >= 1 && - m.appear[0].p == "p" && - 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.pawnSpecs.promotions[0]; - for (let i=1; i { + return ( + this.board[m.end.x][m.end.y] != "" && + oppCols.includes(this.getColor(m.end.x, m.end.y)) + ); + }); } - static get CannibalKingCode() { - return { - "p": "s", - "r": "u", - "n": "o", - "b": "c", - "q": "t", - "k": "k" - }; + atomicPostProcess(moves, color, oppCols) { + moves.forEach(m => { + if ( + this.board[m.end.x][m.end.y] != "" && + oppCols.includes(this.getColor(m.end.x, m.end.y)) + ) { + // Explosion! + let steps = [ + [-1, -1], + [-1, 0], + [-1, 1], + [0, -1], + [0, 1], + [1, -1], + [1, 0], + [1, 1] + ]; + let mNext = new Move({ + start: m.end, + end: m.end, + appear: [], + vanish: [] + }); + for (let step of steps) { + let [x, y] = this.increment([m.end.x, m.end.y], step); + if ( + this.onBoard(x, y) && + this.board[x][y] != "" && + (x != m.start.x || y != m.start.y) && + this.getPieceType(x, y) != "p" + ) { + mNext.vanish.push( + new PiPo({ + p: this.getPiece(x, y), + c: this.getColor(x, y), + x: x, + y: y + }) + ); + } + } + 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; + } + }); + return moves; } - isKing(symbol) { - return ( - symbol == 'k' || - (this.options["cannibal"] && C.CannibalKings[symbol]) - ); + pawnPostProcess(moves, color, oppCols) { + let moreMoves = []; + const lastRank = (color == "w" ? 0 : this.size.x - 1); + const initPiece = this.getPiece(moves[0].start.x, moves[0].start.y); + moves.forEach(m => { + const [x1, y1] = [m.start.x, m.start.y]; + const [x2, y2] = [m.end.x, m.end.y]; + const promotionOk = ( + x2 == lastRank && + (!this.options["rifle"] || this.board[x2][y2] == "") + ); + if (!promotionOk) + return; //nothing to do + if (this.options["pawnfall"]) { + m.appear.shift(); + return; + } + let finalPieces; + if ( + this.options["cannibal"] && + this.board[x2][y2] != "" && + oppCols.includes(this.getColor(x2, y2)) + ) { + 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 { if ( - this.onBoard(i, j) && - this.getColor(i, j) == oppCol && - this.getPieceType(i, j) == piece + m.start.x == lastRank && + m.appear.length >= 1 && + m.appear[0].p == "p" && + m.appear[0].x == m.start.x && + m.appear[0].y == m.start.y ) { - return true; + m.appear[0].p = this.pawnPromotions[0]; + for (let i=1; i { + return ( + (!this.options["zen"] || this.isKing(i2, j2)) && + this.canTake([i1, j1], [i2, j2]) + ); + } + ); + } + const noSpecials = this.findDestSquares( + [x, y], + { + moveOnly: !!stepSpec.attack || this.options["zen"], + stepSpec: stepSpec } + ); + Array.prototype.push.apply(squares, noSpecials); + if (this.options["zen"]) { + let zenCaptures = this.findCapturesOn( + [x, y], + {}, //byCol: default is ok + ([i1, j1], [i2, j2]) => + !this.isKing(i1, j1) && this.canTake([i2, j2], [i1, j1]) + ); + // Technical step: segments (if any) are reversed + zenCaptures.forEach(z => { + if (!!z.segments) + z.segments = z.segments.reverse().map(s => s.reverse()) + }); + Array.prototype.push.apply(squares, zenCaptures); } - if (this.options["zen"]) - Array.prototype.push.apply(moves, this.getZenCaptures(x, y)); - return moves; + if (this.hasSelfCaptures) { + const selfCaptures = this.findDestSquares( + [x, y], + { + attackOnly: true, + stepSpec: stepSpec + }, + ([i1, j1], [i2, j2]) => { + return ( + this.getColor(i2, j2) == color && + this.canSelfTake([i1, j1], [i2, j2]) + ); + } + ); + Array.prototype.push.apply(squares, selfCaptures); + } + return squares.map(s => { + let mv = this.getBasicMove([x, y], s.sq); + if (!!s.segments) + mv.segments = s.segments; + return mv; + }); } - getZenCaptures(x, y) { - let moves = []; - // Find reverse captures (opponent takes) - const color = this.getColor(x, y); - const pieceType = this.getPieceType(x, y); - const oppCol = C.GetOppCol(color); - const pieces = this.pieces(oppCol); - Object.keys(pieces).forEach(p => { - if ( - p == "k" || - (this.options["cannibal"] && C.CannibalKings[p]) - ) { - return; //king isn't captured this way - } - const steps = pieces[p].attack || pieces[p].steps; - if (!steps) - return; //cannibal king for example (TODO...) - const range = pieces[p].range; - steps.forEach(s => { - // From x,y: revert step - let [i, j] = [x - s[0], this.computeY(y - s[1])]; - let stepCounter = 1; - while (this.onBoard(i, j) && this.board[i][j] == "") { - if (range <= stepCounter++) - return; - i -= s[0]; - j = this.computeY(j - s[1]); + findDestSquares([x, y], o, allowed) { + if (!allowed) + allowed = (sq1, sq2) => this.canTake(sq1, sq2); + const apparentPiece = this.getPiece(x, y); //how it looks + let res = []; + // Next 3 for Cylinder mode or circular (useless otherwise) + let explored = {}; + let segments = []; + let segStart = []; + const addSquare = ([i, j]) => { + let elt = {sq: [i, j]}; + if (segments.length >= 1) + elt.segments = this.getSegments(segments, segStart, [i, j]); + res.push(elt); + }; + const exploreSteps = (stepArray, mode) => { + for (let s of stepArray) { + outerLoop: for (let step of s.steps) { + 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; + if ( + !o.captureTarget || + (o.captureTarget[0] == i && o.captureTarget[1] == j) + ) { + if (o.one && mode != "attack") + return true; + if (mode != "attack") + addSquare(!o.captureTarget ? [i, j] : [x, y]); + if (o.captureTarget) + return res[0]; + } + } + if (s.range <= stepCounter++) + continue outerLoop; + const oldIJ = [i, j]; + [i, j] = this.increment([i, j], step); + if ( + Math.abs(i - oldIJ[0]) != Math.abs(step[0]) || + Math.abs(j - oldIJ[1]) != Math.abs(step[1]) + ) { + // Boundary between segments (cylinder or circular mode) + segments.push([[segStart[0], segStart[1]], oldIJ]); + segStart = [i, j]; + } + } + if (!this.onBoard(i, j)) + continue; + const pieceIJ = this.getPieceType(i, j); + if (!explored[i + "." + j]) { + explored[i + "." + j] = true; + if (allowed([x, y], [i, j])) { + if (o.one && mode != "moves") + return true; + if (mode != "moves") + addSquare(!o.captureTarget ? [i, j] : [x, y]); + if ( + o.captureTarget && + o.captureTarget[0] == i && o.captureTarget[1] == j + ) { + return res[0]; + } + } + } } + } + return undefined; //default, but let's explicit it + }; + if (o.captureTarget) + return exploreSteps(o.captureSteps, "attack"); + else { + const stepSpec = + o.stepSpec || this.getStepSpec(this.getColor(x, y), x, y); + let outOne = false; + if (!o.attackOnly) + outOne = exploreSteps(stepSpec.both.concat(stepSpec.moves), "moves"); + if (!outOne && !o.moveOnly) + outOne = exploreSteps(stepSpec.both.concat(stepSpec.attack), "attack"); + return (o.one ? outOne : res); + } + } + + // Search for enemy (or not) pieces attacking [x, y] + findCapturesOn([x, y], o, allowed) { + if (!o.byCol) + o.byCol = this.getOppCols(this.getColor(x, y) || this.turn); + let res = []; + for (let i=0; i= 1) mv.appear[0].p = trPiece; @@ -1598,8 +2001,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, @@ -1610,170 +2020,35 @@ export default class ChessRules { } // Special case of en-passant captures: treated separately - getEnpassantCaptures([x, y], shiftX) { + getEnpassantCaptures([x, y]) { const color = this.getColor(x, y); - const oppCol = C.GetOppCol(color); - let enpassantMove = null; + const shiftX = (color == 'w' ? -1 : 1); + const oppCols = this.getOppCols(color); if ( - !!this.epSquare && - this.epSquare.x == x + shiftX && - Math.abs(this.computeY(this.epSquare.y - y)) == 1 && - this.getColor(x, this.epSquare.y) == oppCol //Doublemove guard... + this.epSquare && + this.epSquare.x == x + shiftX && //NOTE: epSquare.x not on edge + Math.abs(this.getY(this.epSquare.y - y)) == 1 && + // Doublemove (and Progressive?) guards: + this.board[this.epSquare.x][this.epSquare.y] == "" && + oppCols.includes(this.getColor(x, this.epSquare.y)) ) { const [epx, epy] = [this.epSquare.x, this.epSquare.y]; - this.board[epx][epy] = oppCol + "p"; - enpassantMove = this.getBasicMove([x, y], [epx, epy]); + this.board[epx][epy] = this.board[x][this.epSquare.y]; + let enpassantMove = this.getBasicMove([x, y], [epx, epy]); this.board[epx][epy] = ""; const lastIdx = enpassantMove.vanish.length - 1; //think Rifle enpassantMove.vanish[lastIdx].x = x; + return [enpassantMove]; } - return !!enpassantMove ? [enpassantMove] : []; + return []; } - // Consider all potential promotions. - // NOTE: "promotions" arg = special override for Hiddenqueen variant - addPawnMoves([x1, y1], [x2, y2], moves, promotions) { - let finalPieces = ["p"]; - const color = this.getColor(x1, y1); - const oppCol = C.GetOppCol(color); - const lastRank = (color == "w" ? 0 : this.size.x - 1); - const promotionOk = - x2 == lastRank && (!this.options["rifle"] || this.board[x2][y2] == ""); - if (promotionOk && !this.options["pawnfall"]) { - if ( - this.options["cannibal"] && - this.board[x2][y2] != "" && - this.getColor(x2, y2) == oppCol - ) { - finalPieces = [this.getPieceType(x2, y2)]; - } - else if (promotions) - finalPieces = promotions; - else if (this.pawnSpecs.promotions) - finalPieces = this.pawnSpecs.promotions; - } - for (let piece of finalPieces) { - const tr = !this.options["pawnfall"] && piece != "p" - ? { c: color, p: piece } - : null; - let newMove = this.getBasicMove([x1, y1], [x2, y2], tr); - if (promotionOk && this.options["pawnfall"]) { - newMove.appear.shift(); - newMove.pawnfall = true; //required in prePlay() - } - moves.push(newMove); - } - } - - // What are the pawn moves from square x,y ? - getPotentialPawnMoves([x, y], promotions) { - const color = this.getColor(x, y); //this.turn doesn't work for Dark mode - const [sizeX, sizeY] = [this.size.x, this.size.y]; - const pawnShiftX = this.pawnSpecs.directions[color]; - const firstRank = (color == "w" ? sizeX - 1 : 0); - const forward = (color == 'w' ? -1 : 1); - - // Pawn movements in shiftX direction: - const getPawnMoves = (shiftX) => { - let moves = []; - // NOTE: next condition is generally true (no pawn on last rank) - if (x + shiftX >= 0 && x + shiftX < sizeX) { - if (this.board[x + shiftX][y] == "") { - // One square forward (or backward) - this.addPawnMoves([x, y], [x + shiftX, y], moves, promotions); - // Next condition because pawns on 1st rank can generally jump - if ( - this.pawnSpecs.twoSquares && - ( - ( - color == 'w' && - x >= this.size.x - 1 - this.pawnSpecs.initShift['w'] - ) - || - (color == 'b' && x <= this.pawnSpecs.initShift['b']) - ) - ) { - if ( - shiftX == forward && - this.board[x + 2 * shiftX][y] == "" - ) { - // Two squares jump - moves.push(this.getBasicMove([x, y], [x + 2 * shiftX, y])); - if ( - this.pawnSpecs.threeSquares && - this.board[x + 3 * shiftX, y] == "" - ) { - // Three squares jump - moves.push(this.getBasicMove([x, y], [x + 3 * shiftX, y])); - } - } - } - } - // Captures - if (this.pawnSpecs.canCapture) { - for (let shiftY of [-1, 1]) { - const yCoord = this.computeY(y + shiftY); - if (yCoord >= 0 && yCoord < sizeY) { - if ( - this.board[x + shiftX][yCoord] != "" && - this.canTake([x, y], [x + shiftX, yCoord]) && - ( - !this.options["zen"] || - this.getPieceType(x + shiftX, yCoord) == "k" - ) - ) { - this.addPawnMoves( - [x, y], [x + shiftX, yCoord], - moves, promotions - ); - } - if ( - this.pawnSpecs.captureBackward && shiftX == forward && - x - shiftX >= 0 && x - shiftX < this.size.x && - this.board[x - shiftX][yCoord] != "" && - this.canTake([x, y], [x - shiftX, yCoord]) && - ( - !this.options["zen"] || - this.getPieceType(x + shiftX, yCoord) == "k" - ) - ) { - this.addPawnMoves( - [x, y], [x - shiftX, yCoord], - moves, promotions - ); - } - } - } - } - } - return moves; - } - - let pMoves = getPawnMoves(pawnShiftX); - if (this.pawnSpecs.bidirectional) - pMoves = pMoves.concat(getPawnMoves(-pawnShiftX)); - - if (this.hasEnpassant) { - // NOTE: backward en-passant captures are not considered - // because no rules define them (for now). - Array.prototype.push.apply( - pMoves, - this.getEnpassantCaptures([x, y], pawnShiftX) - ); - } - - if (this.options["zen"]) - Array.prototype.push.apply(pMoves, this.getZenCaptures(x, y)); - - return pMoves; - } - - // "castleInCheck" arg to let some variants castle under check - getCastleMoves([x, y], finalSquares, castleInCheck, castleWith) { + getCastleMoves([x, y], finalSquares, castleWith, castleFlags) { const c = this.getColor(x, y); + castleFlags = castleFlags || this.castleFlags[c]; // Castling ? - const oppCol = C.GetOppCol(c); + const oppCols = this.getOppCols(c); let moves = []; // King, then rook: finalSquares = @@ -1784,17 +2059,17 @@ export default class ChessRules { castleSide < 2; castleSide++ //large, then small ) { - if (this.castleFlags[c][castleSide] >= this.size.y) + if (castleFlags[castleSide] >= this.size.y) continue; // If this code is reached, rook and king are on initial position // NOTE: in some variants this is not a rook - const rookPos = this.castleFlags[c][castleSide]; + const rookPos = castleFlags[castleSide]; const castlingPiece = this.getPiece(x, rookPos); if ( this.board[x][rookPos] == "" || this.getColor(x, rookPos) != c || - (!!castleWith && !castleWith.includes(castlingPiece)) + (castleWith && !castleWith.includes(castlingPiece)) ) { // Rook is not here, or changed color (see Benedict) continue; @@ -1805,7 +2080,13 @@ export default class ChessRules { let i = y; do { if ( - (!castleInCheck && this.underCheck([x, i], oppCol)) || + // NOTE: next weird test because underCheck() verification + // will be executed in filterValid() later. + ( + i != finalSquares[castleSide][0] && + this.underCheck([[x, i]], oppCols) + ) + || ( this.board[x][i] != "" && // NOTE: next check is enough, because of chessboard constraints @@ -1837,7 +2118,7 @@ export default class ChessRules { } } - // If this code is reached, castle is valid + // If this code is reached, castle is potentially valid moves.push( new Move({ appear: [ @@ -1861,8 +2142,8 @@ export default class ChessRules { ], end: Math.abs(y - rookPos) <= 2 - ? { x: x, y: rookPos } - : { x: x, y: y + 2 * (castleSide == 0 ? -1 : 1) } + ? {x: x, y: rookPos} + : {x: x, y: y + 2 * (castleSide == 0 ? -1 : 1)} }) ); } @@ -1873,147 +2154,133 @@ export default class ChessRules { //////////////////// // MOVES VALIDATION - // Is (king at) given position under check by "color" ? - underCheck([x, y], color) { - if (this.options["taking"] || this.options["dark"]) - return false; - color = color || C.GetOppCol(this.getColor(x, y)); - const pieces = this.pieces(color); - return Object.keys(pieces).some(p => { - return this.isAttackedBy([x, y], p, color, pieces[p]); - }); + // Is piece (or square) at given position attacked by "oppCol(s)" ? + underAttack([x, y], oppCols) { + // An empty square is considered as king, + // since it's used only in getCastleMoves (TODO?) + const king = this.board[x][y] == "" || this.isKing(x, y); + return ( + ( + (!this.options["zen"] || king) && + this.findCapturesOn( + [x, y], + { + byCol: oppCols, + one: true + } + ) + ) + || + ( + (!!this.options["zen"] && !king) && + this.findDestSquares( + [x, y], + { + attackOnly: true, + one: true + }, + ([i1, j1], [i2, j2]) => oppCols.includes(this.getColor(i2, j2)) + ) + ) + ); } - isAttackedBy([x, y], piece, color, stepSpec) { - const steps = stepSpec.attack || stepSpec.steps; - if (!steps) - return false; //cannibal king, for example - const range = stepSpec.range; - let explored = {}; //for Cylinder mode - outerLoop: for (let step of steps) { - let rx = x - step[0], - ry = this.computeY(y - step[1]); - let stepCounter = 1; - while ( - this.onBoard(rx, ry) && - this.board[rx][ry] == "" && - !explored[rx + "." + ry] - ) { - explored[rx + "." + ry] = true; - if (range <= stepCounter++) - continue outerLoop; - rx -= step[0]; - ry = this.computeY(ry - step[1]); - } - if ( - this.onBoard(rx, ry) && - this.board[rx][ry] != "" && - this.getPieceType(rx, ry) == piece && - this.getColor(rx, ry) == color && - (!this.options["madrasi"] || !this.isImmobilized([rx, ry])) - ) { - return true; - } - } - return false; + // Argument is (very generally) an array of squares (= arrays) + underCheck(square_s, oppCols) { + if (this.options["taking"] || this.options["dark"]) + return false; + return square_s.some(sq => this.underAttack(sq, oppCols)); } - // Stop at first king found (TODO: multi-kings) + // Scan board for king(s) searchKingPos(color) { + let res = []; 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))) - return [i, j]; + if (this.getColor(i, j) == color && this.isKing(i, j)) + res.push([i, j]); } } - return [-1, -1]; //king not found + return res; } - filterValid(moves) { - if (moves.length == 0) - return []; - const 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; - }); + // cb: callback returning a boolean (false if king missing) + trackKingWrap(move, kingPos, cb) { + if (move.appear.length == 0 && move.vanish.length == 0) + return true; + const color = + (move.vanish.length > 0 ? move.vanish[0].c : move.appear[0].c); + let newKingPP = null, + sqIdx = 0, + res = true; //a priori valid + const oldKingPP = + move.vanish.find(v => this.isKing(0, 0, v.p) && v.c == color); + if (oldKingPP) { + // Search king in appear array: + newKingPP = + move.appear.find(a => this.isKing(0, 0, a.p) && a.c == color); + if (newKingPP) { + sqIdx = kingPos.findIndex(kp => + kp[0] == oldKingPP.x && kp[1] == oldKingPP.y); + kingPos[sqIdx] = [newKingPP.x, newKingPP.y]; + } + else + res = false; //king vanished } - if (this.options["taking"] || this.options["dark"]) - return moves; - const kingPos = this.searchKingPos(color); - let filtered = {}; //avoid re-checking similar moves (promotions...) + res &&= cb(kingPos); + if (oldKingPP && newKingPP) + kingPos[sqIdx] = [oldKingPP.x, oldKingPP.y]; + return res; + } + + // 'color' arg because some variants (e.g. Refusal) check opponent moves + filterValid(moves, color) { + if (!color) + color = this.turn; + const oppCols = this.getOppCols(color); + let kingPos = this.searchKingPos(color); return moves.filter(m => { - const key = m.start.x + m.start.y + '.' + m.end.x + m.end.y; - if (!filtered[key]) { - this.playOnBoard(m); - let square = kingPos, - res = true; //a priori valid - if (m.vanish.some(v => { - return (v.p == "k" || C.CannibalKings[v.p]) && 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; - }); - if (newKingIdx >= 0) - square = [m.appear[newKingIdx].x, m.appear[newKingIdx].y]; - else - res = false; - } - res &&= !this.underCheck(square, oppCol); - this.undoOnBoard(m); - filtered[key] = res; - return res; - } - return filtered[key]; + this.playOnBoard(m); + const res = this.trackKingWrap(m, kingPos, (kp) => { + return !this.underCheck(kp, oppCols); + }); + this.undoOnBoard(m); + return res; }); } ///////////////// // MOVES PLAYING - // Aggregate flags into one object - aggregateFlags() { - return this.castleFlags; - } - - // Reverse operation - disaggregateFlags(flags) { - this.castleFlags = flags; - } - // 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) { + // NOTE: arg "castleFlags" for Coregal or Twokings + updateCastleFlags(move, castleFlags, king) { + castleFlags = castleFlags || this.castleFlags; + // If flags already off, no need to re-check: + if ( + Object.values(castleFlags).every(cvals => + cvals.every(val => val >= this.size.y)) + ) { + return; + } // Update castling flags if start or arrive from/at rook/king locations move.appear.concat(move.vanish).forEach(psq => { - if ( - this.board[psq.x][psq.y] != "" && - this.getPieceType(psq.x, psq.y) == "k" - ) { - this.castleFlags[psq.c] = [this.size.y, this.size.y]; - } + if ((king && psq.p == king) || (!king && this.isKing(0, 0, psq.p))) + castleFlags[psq.c] = [this.size.y, this.size.y]; // NOTE: not "else if" because king can capture enemy rook... let c = ""; if (psq.x == 0) @@ -2021,57 +2288,64 @@ export default class ChessRules { else if (psq.x == this.size.x - 1) c = "w"; if (c != "") { - const fidx = this.castleFlags[c].findIndex(f => f == psq.y); + const fidx = castleFlags[c].findIndex(f => f == psq.y); if (fidx >= 0) - this.castleFlags[c][fidx] = this.size.y; + castleFlags[c][fidx] = this.size.y; } }); } prePlay(move) { - if ( - typeof move.start.x == "number" && - (!this.options["teleport"] || this.subTurnTeleport == 1) - ) { - // 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) - ) { - if (this.ispawn[initSquare]) { - delete this.ispawn[initSquare]; - this.ispawn[C.CoordsToSquare(move.end)] = true; + if (this.hasCastle) + this.updateCastleFlags(move); + if (this.options["crazyhouse"]) { + 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] || + (move.vanish[0].p == 'p' && move.appear[0].p != 'p') + ) { + this.ispawn[destSquare] = true; } else if ( - move.vanish[0].p == "p" && - move.appear[0].p != "p" + this.ispawn[destSquare] && + this.getColor(move.end.x, move.end.y) != move.vanish[0].c ) { - this.ispawn[C.CoordsToSquare(move.end)] = true; + move.vanish[1].p = 'p'; + delete this.ispawn[destSquare]; } } + move.vanish.forEach(v => { + const square = C.CoordsToSquare({x: v.x, y: v.y}); + if (this.ispawn[square]) + delete this.ispawn[square]; + }); } 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.length == 2 && + move.appear.length == 1 && + move.vanish[1].c == this.turn ) { - const v = move.vanish[move.vanish.length - 1]; + const v = move.vanish[1]; this.captured = {x: v.x, y: v.y, c: v.c, p: v.p}; this.subTurnTeleport = 2; return; @@ -2103,40 +2376,54 @@ 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.underCheck(oppKingPos, color)) { - this.subTurn++; - return; - } - } - this.turn = oppCol; + this.tryChangeTurn(move); + } + + tryChangeTurn(move) { + if (this.isLastMove(move)) { + this.turn = C.GetOppTurn(this.turn); + 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 oppKingPos = this.searchKingPos(C.GetOppTurn(color)); + if (oppKingPos.length == 0 || this.underCheck(oppKingPos, [color])) + return true; + return ( + ( + !this.options["balance"] || + ![1, 2].includes(this.movesCount) || + this.subTurn == 2 + ) + && + ( + !this.options["doublemove"] || + this.movesCount == 0 || + this.subTurn == 2 + ) + && + ( + !this.options["progressive"] || + this.subTurn == this.movesCount + 1 + ) + ); } // "Stop at the first move found" atLeastOneMove(color) { - color = color || this.turn; 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) { // NOTE: in fact searching for all potential moves from i,j. // I don't believe this is an issue, for now at least. - const moves = this.getPotentialMovesFrom([i, j]); + const moves = this.getPotentialMovesFrom([i, j], color); if (moves.some(m => this.filterValid([m]).length >= 1)) return true; } @@ -2153,32 +2440,36 @@ export default class ChessRules { } // What is the score ? (Interesting if game is over) - getCurrentScore(move) { - const color = this.turn; - const oppCol = C.GetOppCol(color); - const kingPos = [this.searchKingPos(color), this.searchKingPos(oppCol)]; - if (kingPos[0][0] < 0 && kingPos[1][0] < 0) + getCurrentScore(move_s) { + const move = move_s[move_s.length - 1]; + // Shortcut in case the score was computed before: + if (move.result) + return move.result; + const oppTurn = C.GetOppTurn(this.turn); + const kingPos = { + w: this.searchKingPos('w'), + b: this.searchKingPos('b') + }; + if (kingPos[this.turn].length == 0 && kingPos[oppTurn].length == 0) return "1/2"; - if (kingPos[0][0] < 0) - return (color == "w" ? "0-1" : "1-0"); - if (kingPos[1][0] < 0) - return (color == "w" ? "1-0" : "0-1"); - if (this.atLeastOneMove()) + if (kingPos[this.turn].length == 0) + return (this.turn == "w" ? "0-1" : "1-0"); + if (kingPos[oppTurn].length == 0) + return (this.turn == "w" ? "1-0" : "0-1"); + if (this.atLeastOneMove(this.turn)) return "*"; // No valid move: stalemate or checkmate? - if (!this.underCheck(kingPos, color)) + if (!this.underCheck(kingPos[this.turn], this.getOppCols(this.turn))) return "1/2"; // OK, checkmate - return (color == "w" ? "0-1" : "1-0"); + return (this.turn == "w" ? "0-1" : "1-0"); } - // NOTE: quite suboptimal for eg. Benedict (not a big deal I think) playVisual(move, r) { move.vanish.forEach(v => { - if (!this.enlightened || this.enlightened[v.x][v.y]) { + if (this.g_pieces[v.x][v.y]) //can be null (e.g. Apocalypse) this.g_pieces[v.x][v.y].remove(); - this.g_pieces[v.x][v.y] = null; - } + this.g_pieces[v.x][v.y] = null; }); let chessboard = document.getElementById(this.containerId).querySelector(".chessboard"); @@ -2186,139 +2477,235 @@ export default class ChessRules { r = chessboard.getBoundingClientRect(); const pieceWidth = this.getPieceWidth(r.width); move.appear.forEach(a => { - if (this.enlightened && !this.enlightened[a.x][a.y]) - return; 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(V.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]); }); + if (this.options["dark"]) + this.graphUpdateEnlightened(); + } + + // TODO: send stack receive stack, or allow incremental? (good/bad points) + buildMoveStack(move, r) { + this.moveStack.push(move); + this.computeNextMove(move); + const then = () => { + const newTurn = this.turn; + if (this.moveStack.length == 1 && !this.hideMoves) + 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 = []; + }); + } + } + }; + // If hiding moves, then they are revealed in play() with callback + this.play(move, this.hideMoves ? then : null); + if (!this.hideMoves) + then(); } - playPlusVisual(move, r) { - this.playVisual(move, r); - this.play(move); - this.afterPlay(move); //user method - } + // Implemented in variants using (automatic) moveStack + computeNextMove(move) {} - // Assumes reserve on top (usage case otherwise? TODO?) - getReserveShift(c, p, r) { - let nbR = 0, - ridx = 0; - for (let pi of Object.keys(this.reserve[c])) { - if (this.reserve[c][pi] == 0) - continue; - if (pi == p) - ridx = nbR; - nbR++; + animateMoving(start, end, drag, segments, cb) { + let initPiece = this.getDomPiece(start.x, start.y); + if (!initPiece) { //TODO: shouldn't occur! + cb(); + return; + } + // 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"; + } + 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(V.GetColorClass(apparentColor)); + movingPiece.classList.add(V.GetColorClass(drag.c)); + } } - const rsqSize = this.getReserveSquareSize(r.width, nbR); - return [-ridx * rsqSize, rsqSize]; //slightly inaccurate... TODO? + container.appendChild(movingPiece); + const animateSegment = (index, cb) => { + // 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; + // 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); + }; + let index = 0; + const animateSegmentCallback = () => { + if (index < segments.length) + animateSegment(index++, animateSegmentCallback); + else { + 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) { + if (this.noAnimate || move.noAnimate) { callback(); return; } - const [i1, j1] = [move.start.x, move.start.y]; - const dropMove = (typeof i1 == "string"); - const startArray = (dropMove ? this.r_pieces : this.g_pieces); - let startPiece = startArray[i1][j1]; - let chessboard = - document.getElementById(this.containerId).querySelector(".chessboard"); - const clonePiece = ( - !dropMove && - this.options["rifle"] || - (this.options["teleport"] && this.subTurnTeleport == 2) - ); - if (clonePiece) { - startPiece = startPiece.cloneNode(); - if (this.options["rifle"]) - startArray[i1][j1].style.opacity = "0"; - if (this.options["teleport"] && this.subTurnTeleport == 2) { - const pieces = this.pieces(); - const startCode = (dropMove ? j1 : this.getPiece(i1, j1)); - startPiece.classList.remove(pieces[startCode]["class"]); - startPiece.classList.add(pieces[this.captured.p]["class"]); - // Color: OK + 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()); } - chessboard.appendChild(startPiece); - } - const [i2, j2] = [move.end.x, move.end.y]; - let startCoords; - if (dropMove) { - startCoords = [ - i1 == this.playerColor ? this.size.x : 0, - this.size.y / 2 //not trying to be accurate here... (TODO?) - ]; } - else - startCoords = [i1, j1]; - const r = chessboard.getBoundingClientRect(); - const arrival = this.getPixelPosition(i2, j2, r); //TODO: arrival on drop? - let rs = [0, 0]; - if (dropMove) - rs = this.getReserveShift(i1, j1, r); - const distance = - Math.sqrt((startCoords[0] - i2) ** 2 + (startCoords[1] - j2) ** 2); - const maxDist = Math.sqrt((this.size.x - 1)** 2 + (this.size.y - 1) ** 2); - const multFact = (distance - 1) / (maxDist - 1); //1 == minDist - const duration = 0.2 + multFact * 0.3; - const initTransform = startPiece.style.transform; - startPiece.style.transform = - `translate(${arrival[0] + rs[0]}px, ${arrival[1] + rs[1]}px)`; - startPiece.style.transitionDuration = duration + "s"; - setTimeout( - () => { - if (clonePiece) { - if (this.options["rifle"]) - startArray[i1][j1].style.opacity = "1"; - startPiece.remove(); - } - else { - startPiece.style.transform = initTransform; - startPiece.style.transitionDuration = "0s"; - } - callback(); - }, - duration * 1000 - ); + targetObj.target += + this.tryAnimateCastle(move, () => targetObj.increment()); + targetObj.target += + this.customAnimate(move, segments, () => targetObj.increment()); + if (targetObj.target == 0) + callback(); } - playReceivedMove(moves, callback) { - const launchAnimation = () => { - const r = container.querySelector(".chessboard").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); + tryAnimateCastle(move, cb) { + if ( + this.hasCastle && + move.vanish.length == 2 && + move.appear.length == 2 && + this.isKing(0, 0, move.vanish[0].p) && + this.isKing(0, 0, move.appear[0].p) + ) { + const start = {x: move.vanish[1].x, y: move.vanish[1].y}, + end = {x: move.appear[1].x, y: move.appear[1].y}; + const segments = [ [[start.x, start.y], [end.x, end.y]] ]; + this.animateMoving(start, end, null, segments, cb); + return 1; + } + return 0; + } + + // Potential other animations (e.g. for Suction variant) + customAnimate(move, segments, cb) { + return 0; //nb of targets + } + + launchAnimation(moves, container, callback) { + if (this.hideMoves) { + for (let i=0; i {}); + return; + } + const r = container.querySelector(".chessboard").getBoundingClientRect(); + const animateRec = i => { + this.animate(moves[i], () => { + this.play(moves[i]); + this.playVisual(moves[i], r); + if (i < moves.length - 1) + setTimeout(() => animateRec(i+1), 300); + else + callback(); + }); }; + animateRec(0); + } + + playReceivedMove(moves, callback) { // Delay if user wasn't focused: const checkDisplayThenAnimate = (delay) => { if (container.style.display == "none") { alert("New move! Let's go back to game..."); document.getElementById("gameInfos").style.display = "none"; container.style.display = "block"; - setTimeout(launchAnimation, 700); + setTimeout( + () => this.launchAnimation(moves, container, callback), + 700 + ); + } + else { + setTimeout( + () => this.launchAnimation(moves, container, callback), + delay || 0 + ); } - else - setTimeout(launchAnimation, delay || 0); }; let container = document.getElementById(this.containerId); if (document.hidden) { document.onvisibilitychange = () => { + // TODO here: page reload ?! (some issues if tab changed...) document.onvisibilitychange = undefined; checkDisplayThenAnimate(700); };