X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=base_rules.js;h=a48bd3d7e0a9f0319e32774917a1a0b5fea0f0d2;hb=4cec374b0172e0888aa2fa33283ad72210be6e56;hp=7191c563b1a416903d4ccc1acefd61f06bd698ec;hpb=adf7c6595b5e41e7ecbb3d40cb33b21996e6b16c;p=xogo.git diff --git a/base_rules.js b/base_rules.js index 7191c56..a48bd3d 100644 --- a/base_rules.js +++ b/base_rules.js @@ -29,16 +29,18 @@ export default class ChessRules { {label: "Asymmetric random", value: 2} ] }], - check: [ + input: [ { label: "Capture king", - defaut: false, - variable: "taking" + variable: "taking", + type: "checkbox", + defaut: false }, { label: "Falling pawn", - defaut: false, - variable: "pawnfall" + variable: "pawnfall", + type: "checkbox", + defaut: false } ], // Game modifiers (using "elementary variants"). Default: false @@ -85,6 +87,10 @@ export default class ChessRules { (!!this.options["recycle"] && !this.options["teleport"]) ); } + // Some variants do not store reserve state (Align4, Chakart...) + get hasReserveFen() { + return this.hasReserve; + } get noAnimate() { return !!this.options["dark"]; @@ -98,7 +104,7 @@ export default class ChessRules { this.options["teleport"] && this.subTurnTeleport == 2 && this.board[coords.x][coords.y] == "" ) { - return new Move({ + let res = new Move({ start: {x: this.captured.x, y: this.captured.y}, appear: [ new PiPo({ @@ -108,9 +114,10 @@ export default class ChessRules { p: this.captured.p }) ], - vanish: [], - drag: {c: this.captured.c, p: this.captured.p} + vanish: [] }); + res.drag = {c: this.captured.c, p: this.captured.p}; + return res; } return null; } @@ -172,8 +179,6 @@ export default class ChessRules { // Setup the initial random-or-not (asymmetric-or-not) position genRandInitFen(seed) { - Random.setSeed(seed); - let fen, flags = "0707"; if (!this.options.randomness) // Deterministic: @@ -181,7 +186,8 @@ export default class ChessRules { else { // Randomize - let pieces = { w: new Array(8), b: new Array(8) }; + Random.setSeed(seed); + let pieces = {w: new Array(8), b: new Array(8)}; flags = ""; // Shuffle pieces on first (and last rank if randomness == 2) for (let c of ["w", "b"]) { @@ -280,7 +286,7 @@ export default class ChessRules { parts.push(`"flags":"${this.getFlagsFen()}"`); if (this.hasEnpassant) parts.push(`"enpassant":"${this.getEnpassantFen()}"`); - if (this.hasReserve) + if (this.hasReserveFen) parts.push(`"reserve":"${this.getReserveFen()}"`); if (this.options["crazyhouse"]) parts.push(`"ispawn":"${this.getIspawnFen()}"`); @@ -289,19 +295,20 @@ export default class ChessRules { return fen; } + static FenEmptySquares(count) { + // if more than 9 consecutive free spaces, break the integer, + // otherwise FEN parsing will fail. + if (count <= 9) + return count; + // Most boards of size < 18: + if (count <= 18) + return "9" + (count - 9); + // Except Gomoku: + return "99" + (count - 18); + } + // Position part of the FEN string getPosition() { - const format = (count) => { - // if more than 9 consecutive free spaces, break the integer, - // otherwise FEN parsing will fail. - if (count <= 9) - return count; - // Most boards of size < 18: - if (count <= 18) - return "9" + (count - 9); - // Except Gomoku: - return "99" + (count - 18); - }; let position = ""; for (let i = 0; i < this.size.y; i++) { let emptyCount = 0; @@ -311,7 +318,7 @@ export default class ChessRules { else { if (emptyCount > 0) { // Add empty squares in-between - position += format(emptyCount); + position += C.FenEmptySquares(emptyCount); emptyCount = 0; } position += this.board2fen(this.board[i][j]); @@ -319,7 +326,7 @@ export default class ChessRules { } if (emptyCount > 0) // "Flush remainder" - position += format(emptyCount); + position += C.FenEmptySquares(emptyCount); if (i < this.size.y - 1) position += "/"; //separate rows } @@ -370,6 +377,14 @@ export default class ChessRules { constructor(o) { this.options = o.options; + // Fill missing options (always the case if random challenge) + (V.Options.select || []).concat(V.Options.input || []).forEach(opt => { + if (this.options[opt.variable] === undefined) + this.options[opt.variable] = opt.defaut; + }); + if (o.genFenOnly) + // This object will be used only for initial FEN generation + return; this.playerColor = o.color; this.afterPlay = o.afterPlay; //trigger some actions after playing a move @@ -519,6 +534,22 @@ export default class ChessRules { return `${this.containerId}|rnum-${color}${piece}`; } + static AddClass_es(piece, class_es) { + if (!Array.isArray(class_es)) + class_es = [class_es]; + class_es.forEach(cl => { + piece.classList.add(cl); + }); + } + + static RemoveClass_es(piece, class_es) { + if (!Array.isArray(class_es)) + class_es = [class_es]; + class_es.forEach(cl => { + piece.classList.remove(cl); + }); + } + graphicalInit() { // NOTE: not window.onresize = this.re_drawBoardElts because scope (this) window.onresize = () => this.re_drawBoardElements(); @@ -526,7 +557,6 @@ export default class ChessRules { this.initMouseEvents(); const chessboard = document.getElementById(this.containerId).querySelector(".chessboard"); - new ResizeObserver(this.rescale).observe(chessboard); } re_drawBoardElements() { @@ -539,23 +569,24 @@ export default class ChessRules { // Compare window ratio width / height to aspectRatio: const windowRatio = window.innerWidth / window.innerHeight; let cbWidth, cbHeight; - if (windowRatio <= this.size.ratio) { + const vRatio = this.size.ratio || 1; + if (windowRatio <= vRatio) { // Limiting dimension is width: cbWidth = Math.min(window.innerWidth, 767); - cbHeight = cbWidth / this.size.ratio; + cbHeight = cbWidth / vRatio; } else { // Limiting dimension is height: cbHeight = Math.min(window.innerHeight, 767); - cbWidth = cbHeight * this.size.ratio; + cbWidth = cbHeight * vRatio; } - if (this.reserve) { + if (this.hasReserve) { const sqSize = cbWidth / this.size.y; // NOTE: allocate space for reserves (up/down) even if they are empty // Cannot use getReserveSquareSize() here, but sqSize is an upper bound. if ((window.innerHeight - cbHeight) / 2 < sqSize + 5) { cbHeight = window.innerHeight - 2 * (sqSize + 5); - cbWidth = cbHeight * this.size.ratio; + cbWidth = cbHeight * vRatio; } } chessboard.style.width = cbWidth + "px"; @@ -580,9 +611,8 @@ export default class ChessRules { const flipped = (this.playerColor == 'b'); let board = ` - `; + viewBox="0 0 ${10*this.size.y} ${10*this.size.x}" + class="chessboard_SVG">`; for (let i=0; i < this.size.x; i++) { for (let j=0; j < this.size.y; j++) { const ii = (flipped ? this.size.x - 1 - i : i); @@ -591,16 +621,18 @@ export default class ChessRules { if (this.enlightened && !this.enlightened[ii][jj]) classes += " in-shadow"; // NOTE: x / y reversed because coordinates system is reversed. - board += ``; + board += ` + `; } } - board += ""; + board += ""; return board; } @@ -634,7 +666,8 @@ export default class ChessRules { const color = this.getColor(i, j); const piece = this.getPiece(i, j); this.g_pieces[i][j] = document.createElement("piece"); - this.g_pieces[i][j].classList.add(this.pieces()[piece]["class"]); + C.AddClass_es(this.g_pieces[i][j], + this.pieces(color, i, j)[piece]["class"]); this.g_pieces[i][j].classList.add(C.GetColorClass(color)); this.g_pieces[i][j].style.width = pieceWidth + "px"; this.g_pieces[i][j].style.height = pieceWidth + "px"; @@ -648,28 +681,21 @@ export default class ChessRules { } } } - if (this.reserve) + if (this.hasReserve) this.re_drawReserve(['w', 'b'], r); } - // NOTE: assume !!this.reserve + // NOTE: assume this.reserve != null re_drawReserve(colors, r) { if (this.r_pieces) { // Remove (old) reserve pieces for (let c of colors) { - if (!this.reserve[c]) - continue; - Object.keys(this.reserve[c]).forEach(p => { - if (this.r_pieces[c][p]) { - this.r_pieces[c][p].remove(); - delete this.r_pieces[c][p]; - const numId = this.getReserveNumId(c, p); - document.getElementById(numId).remove(); - } + Object.keys(this.r_pieces[c]).forEach(p => { + this.r_pieces[c][p].remove(); + delete this.r_pieces[c][p]; + const numId = this.getReserveNumId(c, p); + document.getElementById(numId).remove(); }); - let reservesDiv = document.getElementById("reserves_" + c); - if (reservesDiv) - reservesDiv.remove(); } } else @@ -678,6 +704,9 @@ export default class ChessRules { if (!r) 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); @@ -706,8 +735,7 @@ export default class ChessRules { r_cell.style.height = sqResSize + "px"; rcontainer.appendChild(r_cell); let piece = document.createElement("piece"); - const pieceSpec = this.pieces()[p]; - piece.classList.add(pieceSpec["class"]); + C.AddClass_es(piece, this.pieces(c, c, p)[p]["class"]); piece.classList.add(C.GetColorClass(c)); piece.style.width = "100%"; piece.style.height = "100%"; @@ -764,44 +792,49 @@ export default class ChessRules { } } - // After resize event: no need to destroy/recreate pieces - rescale() { - const container = document.getElementById(this.containerId); - if (!container) - return; //useful at initial loading - let chessboard = container.querySelector(".chessboard"); + // Resize board: no need to destroy/recreate pieces + rescale(mode) { + let chessboard = + document.getElementById(this.containerId).querySelector(".chessboard"); const r = chessboard.getBoundingClientRect(); - const newRatio = r.width / r.height; - let newWidth = r.width, - newHeight = r.height; - if (newRatio > this.size.ratio) { - newWidth = r.height * this.size.ratio; - chessboard.style.width = newWidth + "px"; - } - else if (newRatio < this.size.ratio) { - newHeight = r.width / this.size.ratio; - chessboard.style.height = newHeight + "px"; - } + const multFact = (mode == "up" ? 1.05 : 0.95); + let [newWidth, newHeight] = [multFact * r.width, multFact * r.height]; + // Stay in window: + const vRatio = this.size.ratio || 1; + if (newWidth > window.innerWidth) { + newWidth = window.innerWidth; + newHeight = newWidth / vRatio; + } + if (newHeight > window.innerHeight) { + newHeight = window.innerHeight; + newWidth = newHeight * vRatio; + } + chessboard.style.width = newWidth + "px"; + chessboard.style.height = newHeight + "px"; const newX = (window.innerWidth - newWidth) / 2; chessboard.style.left = newX + "px"; const newY = (window.innerHeight - newHeight) / 2; chessboard.style.top = newY + "px"; const newR = {x: newX, y: newY, width: newWidth, height: newHeight}; const pieceWidth = this.getPieceWidth(newWidth); - for (let i=0; i < this.size.x; i++) { - for (let j=0; j < this.size.y; j++) { - if (this.g_pieces[i][j]) { - // NOTE: could also use CSS transform "scale" - this.g_pieces[i][j].style.width = pieceWidth + "px"; - this.g_pieces[i][j].style.height = pieceWidth + "px"; - const [ip, jp] = this.getPixelPosition(i, j, newR); - // Translate coordinates to use chessboard as reference: - this.g_pieces[i][j].style.transform = - `translate(${ip - newX}px,${jp - newY}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); } @@ -932,11 +965,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]; @@ -965,6 +993,8 @@ export default class ChessRules { document.addEventListener("mousedown", mousedown); document.addEventListener("mousemove", mousemove); document.addEventListener("mouseup", mouseup); + document.addEventListener("wheel", + (e) => this.rescale(e.deltaY < 0 ? "up" : "down")); } if ('ontouchstart' in window) { // https://stackoverflow.com/a/42509310/12660887 @@ -980,6 +1010,8 @@ export default class ChessRules { let chessboard = container.querySelector(".chessboard"); let choices = document.createElement("div"); choices.id = "choices"; + if (!r) + r = chessboard.getBoundingClientRect(); choices.style.width = r.width + "px"; choices.style.height = r.height + "px"; choices.style.left = r.x + "px"; @@ -1005,8 +1037,9 @@ export default class ChessRules { choice.style.backgroundColor = "lightyellow"; choice.onclick = () => callback(moves[i]); const piece = document.createElement("piece"); - const pieceSpec = this.pieces()[moves[i].appear[0].p]; - piece.classList.add(pieceSpec["class"]); + const cdisp = moves[i].choice || moves[i].appear[0].p; + C.AddClass_es(piece, + this.pieces(color, moves[i].end.x, moves[i].end.y)[cdisp]["class"]); piece.classList.add(C.GetColorClass(color)); piece.style.width = "100%"; piece.style.height = "100%"; @@ -1022,7 +1055,7 @@ export default class ChessRules { return { x: 8, y: 8, - ratio: 1 //for rectangular board = y / x + ratio: 1 //for rectangular board = y / x (optional, 1 = default) }; } @@ -1034,7 +1067,11 @@ export default class ChessRules { } static GetColorClass(c) { - return (c == 'w' ? "white" : "black"); + if (c == 'w') + return "white"; + if (c == 'b') + return "black"; + return "other-color"; //unidentified color } // Assume square i,j isn't empty @@ -1045,8 +1082,9 @@ export default class ChessRules { } // Piece type on square (i,j) - getPieceType(i, j) { - const p = this.getPiece(i, j); + getPieceType(i, j, p) { + if (!p) + p = this.getPiece(i, j); return C.CannibalKings[p] || p; //a cannibal king move as... } @@ -1055,7 +1093,7 @@ export default class ChessRules { return (color == "w" ? "b" : "w"); } - // Can thing on square1 capture (no return) thing on square2? + // Can thing on square1 capture (enemy) thing on square2? canTake([x1, y1], [x2, y2]) { return (this.getColor(x1, y1) !== this.getColor(x2, y2)); } @@ -1177,6 +1215,8 @@ export default class ChessRules { if (this.board[i][j] != "" && this.getColor(i, j) == color) { const allSpecs = this.pieces(color, i, j) let specs = allSpecs[this.getPieceType(i, j)]; + if (specs.moveas) + specs = allSpecs[specs.moveas]; const attacks = specs.attack || specs.moves; for (let a of attacks) { outerLoop: for (let step of a.steps) { @@ -1207,7 +1247,7 @@ export default class ChessRules { 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 = []; @@ -1445,7 +1485,10 @@ export default class ChessRules { const color = this.getColor(x, y); const oppCol = C.GetOppCol(color); const piece = this.getPieceType(x, y); //ok not cannibal king - const stepSpec = this.pieces(color, x, y)[piece]; + const allSpecs = this.pieces(color, x, y); + let stepSpec = allSpecs[piece]; + if (stepSpec.moveas) + stepSpec = allSpecs[stepSpec.moveas]; const attacks = stepSpec.attack || stepSpec.moves; for (let a of attacks) { outerLoop: for (let step of a.steps) { @@ -1469,10 +1512,19 @@ export default class ChessRules { return false; } + canStepOver(i, j, p) { + // In some variants, objects on boards don't stop movement (Chakart) + return this.board[i][j] == ""; + } + // Generic method to find possible moves of "sliding or jumping" pieces getPotentialMovesOf(piece, [x, y]) { const color = this.getColor(x, y); - const stepSpec = this.pieces(color, x, y)[piece]; + const apparentPiece = this.getPiece(x, y); //how it looks + const allSpecs = this.pieces(color, x, y); + let stepSpec = allSpecs[piece]; + if (stepSpec.moveas) + stepSpec = allSpecs[stepSpec.moveas]; let moves = []; // Next 3 for Cylinder mode: let explored = {}; @@ -1497,7 +1549,7 @@ export default class ChessRules { let stepCounter = 0; while ( this.onBoard(i, j) && - (this.board[i][j] == "" || (i == x && j == y)) + ((i == x && j == y) || this.canStepOver(i, j, apparentPiece)) ) { if ( type != "attack" && @@ -1568,8 +1620,14 @@ export default class ChessRules { ) { if (args.zen && this.isKing(this.getPiece(i, j))) continue; //king not captured in this way - const stepSpec = - this.pieces(args.oppCol, i, j)[this.getPieceType(i, j)]; + const apparentPiece = this.getPiece(i, j); + // Quick check: does this potential attacker target x,y ? + if (this.canStepOver(x, y, apparentPiece)) + continue; + const allSpecs = this.pieces(args.oppCol, i, j); + let stepSpec = allSpecs[this.getPieceType(i, j)]; + if (stepSpec.moveas) + stepSpec = allSpecs[stepSpec.moveas]; const attacks = stepSpec.attack || stepSpec.moves; for (let a of attacks) { for (let s of a.steps) { @@ -1712,8 +1770,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, @@ -1870,10 +1935,12 @@ export default class ChessRules { return [-1, -1]; //king not found } - filterValid(moves) { + // Some variants (e.g. Refusal) may need to check opponent moves too + filterValid(moves, color) { if (moves.length == 0) return []; - const color = this.turn; + if (!color) + color = this.turn; const oppCol = C.GetOppCol(color); if (this.options["balance"] && [1, 3].includes(this.movesCount)) { // Forbid moves either giving check or exploding opponent's king: @@ -1901,12 +1968,12 @@ export default class ChessRules { let square = kingPos, res = true; //a priori valid if (m.vanish.some(v => { - return C.CannibalKings[v.p] && v.c == color; + return this.isKing(v.p) && v.c == color; })) { // Search king in appear array: const newKingIdx = m.appear.findIndex(a => { - return C.CannibalKings[a.p] && a.c == color; + return this.isKing(a.p) && a.c == color; }); if (newKingIdx >= 0) square = [m.appear[newKingIdx].x, m.appear[newKingIdx].y]; @@ -2138,9 +2205,7 @@ export default class ChessRules { playVisual(move, r) { move.vanish.forEach(v => { - // TODO: next "if" shouldn't be required - if (this.g_pieces[v.x][v.y]) - this.g_pieces[v.x][v.y].remove(); + this.g_pieces[v.x][v.y].remove(); this.g_pieces[v.x][v.y] = null; }); let chessboard = @@ -2150,8 +2215,9 @@ export default class ChessRules { const pieceWidth = this.getPieceWidth(r.width); move.appear.forEach(a => { this.g_pieces[a.x][a.y] = document.createElement("piece"); - this.g_pieces[a.x][a.y].classList.add(this.pieces()[a.p]["class"]); - this.g_pieces[a.x][a.y].classList.add(a.c == "w" ? "white" : "black"); + C.AddClass_es(this.g_pieces[a.x][a.y], + this.pieces(a.c, a.x, a.y)[a.p]["class"]); + this.g_pieces[a.x][a.y].classList.add(C.GetColorClass(a.c)); this.g_pieces[a.x][a.y].style.width = pieceWidth + "px"; this.g_pieces[a.x][a.y].style.height = pieceWidth + "px"; const [ip, jp] = this.getPixelPosition(a.x, a.y, r); @@ -2172,9 +2238,9 @@ export default class ChessRules { this.afterPlay(move); //user method } - getMaxDistance(rwidth) { + getMaxDistance(r) { // Works for all rectangular boards: - return Math.sqrt(rwidth ** 2 + (rwidth / this.size.ratio) ** 2); + return Math.sqrt(r.width ** 2 + r.height ** 2); } getDomPiece(x, y) { @@ -2187,10 +2253,6 @@ export default class ChessRules { return; } let initPiece = this.getDomPiece(move.start.x, move.start.y); - if (!initPiece) { //TODO this shouldn't be required - callback(); - return; - } // NOTE: cloning generally not required, but light enough, and simpler let movingPiece = initPiece.cloneNode(); initPiece.style.opacity = "0"; @@ -2203,13 +2265,13 @@ export default class ChessRules { movingPiece.style.width = pieceWidth + "px"; movingPiece.style.height = pieceWidth + "px"; } - const maxDist = this.getMaxDistance(r.width); - const pieces = this.pieces(); + const maxDist = this.getMaxDistance(r); + const apparentColor = this.getColor(move.start.x, move.start.y); + const pieces = this.pieces(apparentColor, move.start.x, move.start.y); if (move.drag) { const startCode = this.getPiece(move.start.x, move.start.y); - movingPiece.classList.remove(pieces[startCode]["class"]); - movingPiece.classList.add(pieces[move.drag.p]["class"]); - const apparentColor = this.getColor(move.start.x, move.start.y); + C.RemoveClass_es(movingPiece, pieces[startCode]["class"]); + C.AddClass_es(movingPiece, pieces[move.drag.p]["class"]); if (apparentColor != move.drag.c) { movingPiece.classList.remove(C.GetColorClass(apparentColor)); movingPiece.classList.add(C.GetColorClass(move.drag.c));