X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=base_rules.js;h=e987492b0682b1a05a757f044176f119039a60b4;hb=e8b85c869f8ed1a2e626f60c218c36121c49ec4e;hp=acee324a26f394eaaa40a7f16e55151cda5dcedd;hpb=016306e3aa2262e141899f8d4b900421d68f5439;p=xogo.git diff --git a/base_rules.js b/base_rules.js index acee324..e987492 100644 --- a/base_rules.js +++ b/base_rules.js @@ -4,8 +4,13 @@ import PiPo from "/utils/PiPo.js"; import Move from "/utils/Move.js"; // 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 { + static get Aliases() { + return {'C': ChessRules}; + } + ///////////////////////// // VARIANT SPECIFICATIONS @@ -20,16 +25,23 @@ export default class ChessRules { variable: "randomness", defaut: 0, options: [ - { label: "Deterministic", value: 0 }, - { label: "Symmetric random", value: 1 }, - { label: "Asymmetric random", value: 2 } + {label: "Deterministic", value: 0}, + {label: "Symmetric random", value: 1}, + {label: "Asymmetric random", value: 2} ] }], - check: [{ - label: "Capture king?", - defaut: false, - variable: "taking" - }], + check: [ + { + label: "Capture king", + defaut: false, + variable: "taking" + }, + { + label: "Falling pawn", + defaut: false, + variable: "pawnfall" + } + ], // Game modifiers (using "elementary variants"). Default: false styles: [ "atomic", @@ -53,8 +65,8 @@ export default class ChessRules { // Pawns specifications get pawnSpecs() { return { - directions: { 'w': -1, 'b': 1 }, - initShift: { w: 1, b: 1 }, + directions: {w: -1, b: 1}, + initShift: {w: 1, b: 1}, twoSquares: true, threeSquares: false, canCapture: true, @@ -91,9 +103,10 @@ export default class ChessRules { // Some variants use click infos: doClick([x, y]) { - if (typeof x != "number") return null; //click on reserves + if (typeof x != "number") + return null; //click on reserves if ( - this.options["teleport"] && this.subTurn == 2 && + this.options["teleport"] && this.subTurnTeleport == 2 && this.board[x][y] == "" ) { return new Move({ @@ -139,17 +152,15 @@ export default class ChessRules { // a2 --> {x:2,y:0} (this is in fact a6) static SquareToCoords(sq) { return { - x: ChessRules.RowToCoord(sq[1]), + x: C.RowToCoord(sq[1]), // NOTE: column is always one char => max 26 columns - y: ChessRules.ColumnToCoord(sq[0]) + y: C.ColumnToCoord(sq[0]) }; } // {x:0,y:4} --> e0 (should be e8) static CoordsToSquare(coords) { - return ( - ChessRules.CoordToColumn(coords.y) + ChessRules.CoordToRow(coords.x) - ); + return C.CoordToColumn(coords.y) + C.CoordToRow(coords.x); } coordsToId([x, y]) { @@ -160,7 +171,8 @@ export default class ChessRules { } idToCoords(targetId) { - if (!targetId) return null; //outside page, maybe... + if (!targetId) + return null; //outside page, maybe... const idParts = targetId.split('|'); //prefix|sq-2-3 (start at 0 => 3,4) if ( idParts.length < 2 || @@ -194,7 +206,7 @@ export default class ChessRules { Random.setSeed(seed); let fen, flags = "0707"; - if (this.options.randomness == 0 || !this.options.randomness) + if (!this.options.randomness) // Deterministic: fen = "rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w 0"; @@ -261,11 +273,16 @@ export default class ChessRules { } // 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(",") + "}"; + 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; } @@ -277,7 +294,8 @@ export default class ChessRules { turn: fenParts[1], movesCount: fenParts[2] }; - if (fenParts.length > 3) res = Object.assign(res, JSON.parse(fenParts[3])); + if (fenParts.length > 3) + res = Object.assign(res, JSON.parse(fenParts[3])); return res; } @@ -289,13 +307,16 @@ export default class ChessRules { this.movesCount ); let parts = []; - if (this.hasFlags) parts.push(`"flags":"${this.getFlagsFen()}"`); + if (this.hasFlags) + parts.push(`"flags":"${this.getFlagsFen()}"`); if (this.hasEnpassant) parts.push(`"enpassant":"${this.getEnpassantFen()}"`); - if (this.hasReserve) parts.push(`"reserve":"${this.getReserveFen()}"`); + if (this.hasReserve) + parts.push(`"reserve":"${this.getReserveFen()}"`); if (this.options["crazyhouse"]) parts.push(`"ispawn":"${this.getIspawnFen()}"`); - if (parts.length >= 1) fen += " {" + parts.join(",") + "}"; + if (parts.length >= 1) + fen += " {" + parts.join(",") + "}"; return fen; } @@ -304,9 +325,11 @@ export default class ChessRules { const format = (count) => { // if more than 9 consecutive free spaces, break the integer, // otherwise FEN parsing will fail. - if (count <= 9) return count; + if (count <= 9) + return count; // Most boards of size < 18: - if (count <= 18) return "9" + (count - 9); + if (count <= 18) + return "9" + (count - 9); // Except Gomoku: return "99" + (count - 18); }; @@ -314,7 +337,8 @@ export default class ChessRules { for (let i = 0; i < this.size.y; i++) { let emptyCount = 0; for (let j = 0; j < this.size.x; j++) { - if (this.board[i][j] == "") emptyCount++; + if (this.board[i][j] == "") + emptyCount++; else { if (emptyCount > 0) { // Add empty squares in-between @@ -327,7 +351,8 @@ export default class ChessRules { if (emptyCount > 0) // "Flush remainder" position += format(emptyCount); - if (i < this.size.y - 1) position += "/"; //separate rows + if (i < this.size.y - 1) + position += "/"; //separate rows } return position; } @@ -345,8 +370,9 @@ export default class ChessRules { // Enpassant part of the FEN string getEnpassantFen() { - if (!this.epSquare) return "-"; //no en-passant - return ChessRules.CoordsToSquare(this.epSquare); + if (!this.epSquare) + return "-"; //no en-passant + return C.CoordsToSquare(this.epSquare); } getReserveFen() { @@ -357,8 +383,9 @@ export default class ChessRules { getIspawnFen() { const coords = Object.keys(this.ispawn); - if (coords.length == 0) return "-"; - return coords.map(ChessRules.CoordsToSquare).join(","); + if (coords.length == 0) + return "-"; + return coords.join(","); } // Set flags from fen (castle: white a,h then black a,h) @@ -379,7 +406,8 @@ export default class ChessRules { this.afterPlay = o.afterPlay; // FEN-related: - if (!o.fen) o.fen = this.genRandInitFen(o.seed); + if (!o.fen) + o.fen = this.genRandInitFen(o.seed); const fenParsed = this.parseFen(o.fen); this.board = this.getBoard(fenParsed.position); this.turn = fenParsed.turn; @@ -401,9 +429,11 @@ export default class ChessRules { const character = rows[i][indexInRow]; const num = parseInt(character, 10); // If num is a number, just shift j: - if (!isNaN(num)) j += num; + if (!isNaN(num)) + j += num; // Else: something at position i,j - else board[i][j++] = this.fen2board(character); + else + board[i][j++] = this.fen2board(character); } } return board; @@ -412,13 +442,19 @@ export default class ChessRules { // Some additional variables from FEN (variant dependant) setOtherVariables(fenParsed) { // Set flags and enpassant: - if (this.hasFlags) this.setFlags(fenParsed.flags); + if (this.hasFlags) + this.setFlags(fenParsed.flags); if (this.hasEnpassant) this.epSquare = this.getEpSquare(fenParsed.enpassant); - if (this.hasReserve) this.initReserves(fenParsed.reserve); - if (this.options["crazyhouse"]) this.initIspawn(fenParsed.ispawn); + if (this.hasReserve) + this.initReserves(fenParsed.reserve); + if (this.options["crazyhouse"]) + this.initIspawn(fenParsed.ispawn); this.subTurn = 1; //may be unused - if (this.options["teleport"]) this.captured = null; + 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 @@ -436,10 +472,9 @@ export default class ChessRules { if (this.board[x][y] != "" && this.getColor(x, y) == this.playerColor) { newEnlightened[x][y] = true; - const piece = this.getPiece(x, y); - if (piece == ChessRules.PAWN) { + if (this.getPiece(x, y) == "p") { // Attacking squares wouldn't be highlighted if no captures: - this.pieces(this.playerColor)[piece].attack.forEach(step => { + this.pieces(this.playerColor)["p"].attack.forEach(step => { const [i, j] = [x + step[0], this.computeY(y + step[1])]; if (this.onBoard(i, j) && this.board[i][j] == "") newEnlightened[i][j] = true; @@ -451,21 +486,23 @@ export default class ChessRules { } } } - if (this.epSquare) this.enlightEnpassant(newEnlightened); - if (withGraphics) this.graphUpdateEnlightened(newEnlightened); + 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)[ChessRules.PAWN].attack; + 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.getPiece(x, y) == ChessRules.PAWN + this.getPieceType(x, y) == "p" ) { newEnlightened[x][this.epSquare.y] = true; break; @@ -475,8 +512,9 @@ export default class ChessRules { // Apply diff this.enlightened --> newEnlightened on board graphUpdateEnlightened(newEnlightened) { - let container = document.getElementById(this.containerId); - const r = container.getBoundingClientRect(); + let chessboard = + document.getElementById(this.containerId).querySelector(".chessboard"); + const r = chessboard.getBoundingClientRect(); const pieceWidth = this.getPieceWidth(r.width); for (let x=0; x ({ ...o, [key]: true}), {}); } - else this.ispawn = {}; + else + this.ispawn = {}; } getNbReservePieces(color) { @@ -563,17 +604,18 @@ export default class ChessRules { window.onresize = () => this.re_drawBoardElements(); this.re_drawBoardElements(); this.initMouseEvents(); - const container = document.getElementById(this.containerId); - new ResizeObserver(this.rescale).observe(container); + const chessboard = + document.getElementById(this.containerId).querySelector(".chessboard"); + new ResizeObserver(this.rescale).observe(chessboard); } re_drawBoardElements() { const board = this.getSvgChessboard(); - const oppCol = ChessRules.GetOppCol(this.playerColor); - let container = document.getElementById(this.containerId); - container.innerHTML = ""; - container.insertAdjacentHTML('beforeend', board); - let cb = container.querySelector("#" + this.containerId + "_SVG"); + const oppCol = C.GetOppCol(this.playerColor); + let chessboard = + document.getElementById(this.containerId).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; @@ -596,13 +638,13 @@ export default class ChessRules { cbWidth = cbHeight * aspectRatio; } } - container.style.width = cbWidth + "px"; - container.style.height = cbHeight + "px"; + chessboard.style.width = cbWidth + "px"; + chessboard.style.height = cbHeight + "px"; // Center chessboard: const spaceLeft = (window.innerWidth - cbWidth) / 2, spaceTop = (window.innerHeight - cbHeight) / 2; - container.style.left = spaceLeft + "px"; - container.style.top = spaceTop + "px"; + 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({ @@ -621,7 +663,7 @@ export default class ChessRules { + class="chessboard_SVG"> `; for (let i=0; i < sizeX; i++) { for (let j=0; j < sizeY; j++) { @@ -644,7 +686,7 @@ export default class ChessRules { return board; } - // Generally light square bottom-right; TODO: user-defined colors at least + // Generally light square bottom-right getSquareColorClass(i, j) { return ((i+j) % 2 == 0 ? "light-square": "dark-square"); } @@ -661,9 +703,12 @@ export default class ChessRules { } } } - else this.g_pieces = ArrayFun.init(this.size.x, this.size.y, null); - let container = document.getElementById(this.containerId); - if (!r) r = container.getBoundingClientRect(); + else + this.g_pieces = ArrayFun.init(this.size.x, this.size.y, null); + let chessboard = + document.getElementById(this.containerId).querySelector(".chessboard"); + if (!r) + r = chessboard.getBoundingClientRect(); const pieceWidth = this.getPieceWidth(r.width); for (let i=0; i < this.size.x; i++) { for (let j=0; j < this.size.y; j++) { @@ -671,8 +716,8 @@ export default class ChessRules { this.board[i][j] != "" && (!this.options["dark"] || this.enlightened[i][j]) ) { - const piece = this.getPiece(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"); @@ -680,11 +725,12 @@ export default class ChessRules { 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)`; - container.appendChild(this.g_pieces[i][j]); + chessboard.appendChild(this.g_pieces[i][j]); } } } - if (this.reserve) this.re_drawReserve(['w', 'b'], r); + if (this.reserve) + this.re_drawReserve(['w', 'b'], r); } // NOTE: assume !!this.reserve @@ -692,7 +738,8 @@ export default class ChessRules { if (this.r_pieces) { // Remove (old) reserve pieces for (let c of colors) { - if (!this.reserve[c]) continue; + if (!this.reserve[c]) + continue; Object.keys(this.reserve[c]).forEach(p => { if (this.r_pieces[c][p]) { this.r_pieces[c][p].remove(); @@ -702,19 +749,21 @@ export default class ChessRules { } }); let reservesDiv = document.getElementById("reserves_" + c); - if (reservesDiv) reservesDiv.remove(); + if (reservesDiv) + reservesDiv.remove(); } } - else this.r_pieces = { 'w': {}, 'b': {} }; - if (!r) { - const container = document.getElementById(this.containerId); - r = container.getBoundingClientRect(); - } - const epsilon = 1e-4; //fix display bug on Firefox at least + else + this.r_pieces = { 'w': {}, 'b': {} }; + let container = document.getElementById(this.containerId); + if (!r) + r = container.querySelector(".chessboard").getBoundingClientRect(); for (let c of colors) { - if (!this.reserve[c]) continue; + if (!this.reserve[c]) + continue; const nbR = this.getNbReservePieces(c); - if (nbR == 0) continue; + if (nbR == 0) + continue; const sqResSize = this.getReserveSquareSize(r.width, nbR); let ridx = 0; const vShift = (c == this.playerColor ? r.height + 5 : -sqResSize - 5); @@ -724,16 +773,18 @@ export default class ChessRules { rcontainer.classList.add("reserves"); rcontainer.style.left = i0 + "px"; rcontainer.style.top = j0 + "px"; - rcontainer.style.width = (nbR * sqResSize) + "px"; + // NOTE: +1 fix display bug on Firefox at least + rcontainer.style.width = (nbR * sqResSize + 1) + "px"; rcontainer.style.height = sqResSize + "px"; - document.getElementById("boardContainer").appendChild(rcontainer); + container.appendChild(rcontainer); for (let p of Object.keys(this.reserve[c])) { - if (this.reserve[c][p] == 0) continue; + if (this.reserve[c][p] == 0) + continue; let r_cell = document.createElement("div"); r_cell.id = this.coordsToId([c, p]); r_cell.classList.add("reserve-cell"); - r_cell.style.width = (sqResSize - epsilon) + "px"; - r_cell.style.height = (sqResSize - epsilon) + "px"; + 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]; @@ -757,10 +808,13 @@ export default class ChessRules { } updateReserve(color, piece, count) { + if (this.options["cannibal"] && C.CannibalKings[piece]) + 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)) this.re_drawReserve([color]); + if ([oldCount, count].includes(0)) + this.re_drawReserve([color]); else { const numId = this.getReserveNumId(color, piece); document.getElementById(numId).textContent = count; @@ -769,25 +823,27 @@ export default class ChessRules { // After resize event: no need to destroy/recreate pieces rescale() { - let container = document.getElementById(this.containerId); - if (!container) return; //useful at initial loading - const r = container.getBoundingClientRect(); + 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; - container.style.width = newWidth + "px"; + chessboard.style.width = newWidth + "px"; } else if (newRatio < aspectRatio) { newHeight = r.width / aspectRatio; - container.style.height = newHeight + "px"; + chessboard.style.height = newHeight + "px"; } const newX = (window.innerWidth - newWidth) / 2; - container.style.left = newX + "px"; + chessboard.style.left = newX + "px"; const newY = (window.innerHeight - newHeight) / 2; - container.style.top = newY + "px"; + 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++) { @@ -801,15 +857,17 @@ export default class ChessRules { } } } - if (this.reserve) this.rescaleReserve(newR); + if (this.reserve) + this.rescaleReserve(newR); } rescaleReserve(r) { - const epsilon = 1e-4; for (let c of ['w','b']) { - if (!this.reserve[c]) continue; + if (!this.reserve[c]) + continue; const nbR = this.getNbReservePieces(c); - if (nbR == 0) continue; + if (nbR == 0) + continue; // Resize container first const sqResSize = this.getReserveSquareSize(r.width, nbR); const vShift = (c == this.playerColor ? r.height + 5 : -sqResSize - 5); @@ -817,25 +875,27 @@ export default class ChessRules { let rcontainer = document.getElementById("reserves_" + c); rcontainer.style.left = i0 + "px"; rcontainer.style.top = j0 + "px"; - rcontainer.style.width = (nbR * sqResSize) + "px"; + rcontainer.style.width = (nbR * sqResSize + 1) + "px"; rcontainer.style.height = sqResSize + "px"; // And then reserve cells: const rpieceWidth = this.getReserveSquareSize(r.width, nbR); Object.keys(this.reserve[c]).forEach(p => { - if (this.reserve[c][p] == 0) return; + if (this.reserve[c][p] == 0) + return; let r_cell = document.getElementById(this.coordsToId([c, p])); - r_cell.style.width = (sqResSize - epsilon) + "px"; - r_cell.style.height = (sqResSize - epsilon) + "px"; + r_cell.style.width = sqResSize + "px"; + r_cell.style.height = sqResSize + "px"; }); } } - // Return the absolute pixel coordinates given current position. + // Return the absolute pixel coordinates (on board) 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 + 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; @@ -843,10 +903,13 @@ export default class ChessRules { } initMouseEvents() { - let container = document.getElementById(this.containerId); + let chessboard = + document.getElementById(this.containerId).querySelector(".chessboard"); const getOffset = e => { - if (e.clientX) return {x: e.clientX, y: e.clientY}; //Mouse + if (e.clientX) + // Mouse + return {x: e.clientX, y: e.clientY}; let touchLocation = null; if (e.targetTouches && e.targetTouches.length >= 1) // Touch screen, dragstart @@ -855,15 +918,15 @@ export default class ChessRules { // Touch screen, dragend touchLocation = e.changedTouches[0]; if (touchLocation) - return {x: touchLocation.pageX, y: touchLocation.pageY}; - return [0, 0]; //Big trouble here =) + return {x: touchLocation.clientX, y: touchLocation.clientY}; + return [0, 0]; //shouldn't reach here =) } const centerOnCursor = (piece, e) => { const centerShift = sqSize / 2; const offset = getOffset(e); - piece.style.left = (offset.x - centerShift) + "px"; - piece.style.top = (offset.y - centerShift) + "px"; + piece.style.left = (offset.x - r.x - centerShift) + "px"; + piece.style.top = (offset.y - r.y - centerShift) + "px"; } let start = null, @@ -871,16 +934,22 @@ export default class ChessRules { startPiece, curPiece = null, sqSize; const mousedown = (e) => { - r = container.getBoundingClientRect(); + // 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]); - if (move) this.playPlusVisual(move); + 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 (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)) { e.preventDefault(); start = { x: i, y: j }; @@ -890,9 +959,9 @@ export default class ChessRules { curPiece.style.width = sqSize + "px"; curPiece.style.height = sqSize + "px"; centerOnCursor(curPiece, e); - document.getElementById("boardContainer").appendChild(curPiece); + chessboard.appendChild(curPiece); startPiece.style.opacity = "0.4"; - container.style.cursor = "none"; + chessboard.style.cursor = "none"; } } } @@ -903,31 +972,37 @@ export default class ChessRules { e.preventDefault(); centerOnCursor(curPiece, e); } + else if (e.changedTouches && e.changedTouches.length >= 1) + // Attempt to prevent horizontal swipe... + e.preventDefault(); }; const mouseup = (e) => { - const newR = container.getBoundingClientRect(); + const newR = chessboard.getBoundingClientRect(); if (newR.width != r.width || newR.height != r.height) { this.rescale(); return; } - if (!start) return; + if (!start) + return; const [x, y] = [start.x, start.y]; start = null; e.preventDefault(); - container.style.cursor = "pointer"; + chessboard.style.cursor = "pointer"; startPiece.style.opacity = "1"; const offset = getOffset(e); const landingElt = document.elementFromPoint(offset.x, offset.y); - const sq = this.idToCoords(landingElt.id); + const sq = landingElt ? this.idToCoords(landingElt.id) : undefined; if (sq) { const [i, j] = sq; // 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); const moves = this.filterValid(potentialMoves); - if (moves.length >= 2) this.showChoices(moves, r); - else if (moves.length == 1) this.playPlusVisual(moves[0], r); + if (moves.length >= 2) + this.showChoices(moves, r); + else if (moves.length == 1) + this.playPlusVisual(moves[0], r); } curPiece.remove(); }; @@ -938,30 +1013,32 @@ export default class ChessRules { document.addEventListener("mouseup", mouseup); } if ('ontouchstart' in window) { - document.addEventListener("touchstart", mousedown); - document.addEventListener("touchmove", mousemove); - document.addEventListener("touchend", mouseup); + // https://stackoverflow.com/a/42509310/12660887 + document.addEventListener("touchstart", mousedown, {passive: false}); + document.addEventListener("touchmove", mousemove, {passive: false}); + document.addEventListener("touchend", mouseup, {passive: false}); } + // TODO: onpointerdown/move/up ? See reveal.js /controllers/touch.js } showChoices(moves, r) { let container = document.getElementById(this.containerId); + let chessboard = container.querySelector(".chessboard"); let choices = document.createElement("div"); choices.id = "choices"; choices.style.width = r.width + "px"; choices.style.height = r.height + "px"; choices.style.left = r.x + "px"; choices.style.top = r.y + "px"; - container.style.opacity = "0.5"; - let boardContainer = document.getElementById("boardContainer"); - boardContainer.appendChild(choices); + chessboard.style.opacity = "0.5"; + container.appendChild(choices); const squareWidth = this.getSquareWidth(r.width); const firstUpLeft = (r.width - (moves.length * squareWidth)) / 2; const firstUpTop = (r.height - squareWidth) / 2; const color = moves[0].appear[0].c; const callback = (m) => { - container.style.opacity = "1"; - boardContainer.removeChild(choices); + chessboard.style.opacity = "1"; + container.removeChild(choices); this.playPlusVisual(m, r); } for (let i=0; i < moves.length; i++) { @@ -996,11 +1073,17 @@ export default class ChessRules { return this.board[i][j].charAt(0); } - // Piece type on square (i,j). 'undefined' if square is empty + // Assume square i,j isn't empty getPiece(i, j) { return this.board[i][j].charAt(1); } + // 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... + } + // Get opponent color static GetOppCol(color) { return (color == "w" ? "b" : "w"); @@ -1009,11 +1092,11 @@ export default class ChessRules { // 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.getPiece(x2, y2) != ChessRules.KING - ) || - (this.getColor(x1, y1) !== this.getColor(x2, y2)) + this.getPieceType(x2, y2) != "k" + ) ); } @@ -1080,46 +1163,44 @@ export default class ChessRules { [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" } }; } - // Some pieces codes (for a clearer code) - static get PAWN() { - return "p"; - } - static get QUEEN() { - return "q"; - } - static get KING() { - return "k"; - } - //////////////////// // MOVES GENERATION // For Cylinder: get Y coordinate computeY(y) { - if (!this.options["cylinder"]) return y; + if (!this.options["cylinder"]) + return y; let res = y % this.size.y; - if (res < 0) res += this.size.y; + if (res < 0) + res += this.size.y; return res; } // Stop at the first capture found atLeastOneCapture(color) { color = color || this.turn; - const oppCol = ChessRules.GetOppCol(color); + 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.getPiece(i, j)]; + 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; + if (specs.range <= stepCounter++) + continue outerLoop; ii += step[0]; jj = this.computeY(jj + step[1]); } @@ -1142,7 +1223,8 @@ export default class ChessRules { getDropMovesFrom([c, p]) { // NOTE: by design, this.reserve[c][p] >= 1 on user click // (but not necessarily otherwise) - if (!this.reserve[c][p] || this.reserve[c][p] == 0) return []; + if (this.reserve[c][p] == 0) + return []; let moves = []; for (let i=0; i 0) ) @@ -1172,14 +1254,18 @@ 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)) return []; - const piece = this.getPiece(sq[0], sq[1]); + if (typeof sq[0] == "string") + return this.getDropMovesFrom(sq); + if (this.options["madrasi"] && this.isImmobilized(sq)) + return []; + const piece = this.getPieceType(sq[0], sq[1]); let moves; - if (piece == ChessRules.PAWN) moves = this.getPotentialPawnMoves(sq); - else moves = this.getPotentialMovesOf(piece, sq); + if (piece == "p") + moves = this.getPotentialPawnMoves(sq); + else + moves = this.getPotentialMovesOf(piece, sq); if ( - piece == ChessRules.KING && + piece == "k" && this.hasCastle && this.castleFlags[color || this.turn].some(v => v < this.size.y) ) { @@ -1189,9 +1275,10 @@ export default class ChessRules { } postProcessPotentialMoves(moves) { - if (moves.length == 0) return []; + if (moves.length == 0) + return []; const color = this.getColor(moves[0].start.x, moves[0].start.y); - const oppCol = ChessRules.GetOppCol(color); + const oppCol = C.GetOppCol(color); if (this.options["capture"] && this.atLeastOneCapture()) { // Filter out non-capturing moves (not using m.vanish because of @@ -1227,7 +1314,7 @@ export default class ChessRules { if ( this.onBoard(x, y) && this.board[x][y] != "" && - this.getPiece(x, y) != ChessRules.PAWN + this.getPieceType(x, y) != "p" ) { m.vanish.push( new PiPo({ @@ -1239,33 +1326,92 @@ export default class ChessRules { ); } } - if (!this.options["rifle"]) m.appear.pop(); //nothin appears + if (!this.options["rifle"]) + m.appear.pop(); //nothin appears + } + }); + } + + if ( + this.options["cannibal"] && + this.options["rifle"] && + this.pawnSpecs.promotions + ) { + // 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 { - if (p == ChessRules.KING) return; //king isn't captured this way + 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; + if (range <= stepCounter++) + return; i -= s[0]; j = this.computeY(j - s[1]); } if ( this.onBoard(i, j) && - this.getPiece(i, j) == p && + this.getPieceType(i, j) == p && this.getColor(i, j) == oppCol && //condition for Recycle & Teleport this.canTake([i, j], [x, y]) ) { - if (this.getPiece(x, y) != ChessRules.PAWN) + if (pieceType != "p") moves.push(this.getBasicMove([x, y], [i, j])); - else this.addPawnMoves([x, y], [i, j], moves); + else + this.addPawnMoves([x, y], [i, j], moves); } }); }); @@ -1351,7 +1508,7 @@ export default class ChessRules { // tr: transformation getBasicMove([sx, sy], [ex, ey], tr) { const initColor = this.getColor(sx, sy); - const initPiece = this.board[sx][sy].charAt(1); + const initPiece = this.getPiece(sx, sy); const destColor = (this.board[ex][ey] != "" ? this.getColor(ex, ey) : ""); let mv = new Move({ appear: [], @@ -1387,7 +1544,7 @@ export default class ChessRules { x: ex, y: ey, c: this.getColor(ex, ey), - p: this.board[ex][ey].charAt(1) + p: this.getPiece(ex, ey) }) ); if (this.options["rifle"]) @@ -1396,14 +1553,18 @@ export default class ChessRules { mv.capture = true; if (this.options["cannibal"] && destColor != initColor) { const lastIdx = mv.vanish.length - 1; - if (mv.appear.length >= 1) mv.appear[0].p = mv.vanish[lastIdx].p; + let trPiece = mv.vanish[lastIdx].p; + if (this.isKing(this.getPiece(sx, sy))) + trPiece = C.CannibalKingCode[trPiece]; + if (mv.appear.length >= 1) + mv.appear[0].p = trPiece; else if (this.options["rifle"]) { mv.appear.unshift( new PiPo({ x: sx, y: sy, c: initColor, - p: mv.vanish[lastIdx].p + p: trPiece }) ); mv.vanish.unshift( @@ -1424,8 +1585,9 @@ export default class ChessRules { getEpSquare(moveOrSquare) { if (typeof moveOrSquare === "string") { const square = moveOrSquare; - if (square == "-") return undefined; - return ChessRules.SquareToCoords(square); + if (square == "-") + return undefined; + return C.SquareToCoords(square); } // Argument is a move: const move = moveOrSquare; @@ -1435,8 +1597,8 @@ 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 == ChessRules.PAWN) && - (move.vanish.length > 0 && move.vanish[0].p == ChessRules.PAWN) + (move.appear.length > 0 && move.appear[0].p == "p") && + (move.vanish.length > 0 && move.vanish[0].p == "p") ) { return { x: (s.x + e.x) / 2, @@ -1449,7 +1611,7 @@ export default class ChessRules { // Special case of en-passant captures: treated separately getEnpassantCaptures([x, y], shiftX) { const color = this.getColor(x, y); - const oppCol = ChessRules.GetOppCol(color); + const oppCol = C.GetOppCol(color); let enpassantMove = null; if ( !!this.epSquare && @@ -1467,21 +1629,38 @@ export default class ChessRules { return !!enpassantMove ? [enpassantMove] : []; } - // Consider all potential promotions: + // Consider all potential promotions. + // NOTE: "promotions" arg = special override for Hiddenqueen variant addPawnMoves([x1, y1], [x2, y2], moves, promotions) { - let finalPieces = [ChessRules.PAWN]; + let finalPieces = ["p"]; const color = this.getColor(x1, y1); + const oppCol = C.GetOppCol(color); const lastRank = (color == "w" ? 0 : this.size.x - 1); - if (x2 == lastRank && (!this.options["rifle"] || this.board[x2][y2] == "")) - { - // promotions arg: special override for Hiddenqueen variant - if (promotions) finalPieces = promotions; + 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 = (piece != ChessRules.PAWN ? { c: color, p: piece } : null); - moves.push(this.getBasicMove([x1, y1], [x2, y2], tr)); + 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); } } @@ -1539,7 +1718,7 @@ export default class ChessRules { this.canTake([x, y], [x + shiftX, yCoord]) && ( !this.options["zen"] || - this.getPiece(x + shiftX, yCoord) == ChessRules.KING + this.getPieceType(x + shiftX, yCoord) == "k" ) ) { this.addPawnMoves( @@ -1554,7 +1733,7 @@ export default class ChessRules { this.canTake([x, y], [x - shiftX, yCoord]) && ( !this.options["zen"] || - this.getPiece(x + shiftX, yCoord) == ChessRules.KING + this.getPieceType(x + shiftX, yCoord) == "k" ) ) { this.addPawnMoves( @@ -1593,23 +1772,24 @@ export default class ChessRules { const c = this.getColor(x, y); // Castling ? - const oppCol = ChessRules.GetOppCol(c); + const oppCol = C.GetOppCol(c); let moves = []; // King, then rook: finalSquares = finalSquares || [ [2, 3], [this.size.y - 2, this.size.y - 3] ]; - const castlingKing = this.board[x][y].charAt(1); + const castlingKing = this.getPiece(x, y); castlingCheck: for ( let castleSide = 0; castleSide < 2; castleSide++ //large, then small ) { - if (this.castleFlags[c][castleSide] >= this.size.y) continue; + if (this.castleFlags[c][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 castlingPiece = this.board[x][rookPos].charAt(1); + const castlingPiece = this.getPiece(x, rookPos); if ( this.board[x][rookPos] == "" || this.getColor(x, rookPos) != c || @@ -1638,7 +1818,8 @@ export default class ChessRules { // Nothing on the path to the rook? step = (castleSide == 0 ? -1 : 1); for (i = y + step; i != rookPos; i += step) { - if (this.board[x][i] != "") continue castlingCheck; + if (this.board[x][i] != "") + continue castlingCheck; } // Nothing on final squares, except maybe king and castling rook? @@ -1693,8 +1874,9 @@ export default class ChessRules { // Is (king at) given position under check by "color" ? underCheck([x, y], color) { - if (this.taking || this.options["dark"]) return false; - color = color || ChessRules.GetOppCol(this.getColor(x, y)); + 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]); @@ -1703,6 +1885,8 @@ export default class ChessRules { 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) { @@ -1715,14 +1899,15 @@ export default class ChessRules { !explored[rx + "." + ry] ) { explored[rx + "." + ry] = true; - if (range <= stepCounter++) continue outerLoop; + if (range <= stepCounter++) + continue outerLoop; rx -= step[0]; ry = this.computeY(ry - step[1]); } if ( this.onBoard(rx, ry) && this.board[rx][ry] != "" && - this.getPiece(rx, ry) == piece && + this.getPieceType(rx, ry) == piece && this.getColor(rx, ry) == color && (!this.options["madrasi"] || !this.isImmobilized([rx, ry])) ) { @@ -1736,23 +1921,25 @@ export default class ChessRules { searchKingPos(color) { for (let i=0; i < this.size.x; i++) { for (let j=0; j < this.size.y; j++) { - if (this.board[i][j] == color + 'k') return [i, j]; + if (this.getColor(i, j) == color && this.isKing(this.getPiece(i, j))) + return [i, j]; } } return [-1, -1]; //king not found } filterValid(moves) { - if (moves.length == 0) return []; + if (moves.length == 0) + return []; const color = this.turn; - const oppCol = ChessRules.GetOppCol(color); + 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 == ChessRules.KING) && - m.appear.every(a => a.c != oppCol || a.p != ChessRUles.KING) + 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); @@ -1761,7 +1948,8 @@ export default class ChessRules { return res; }); } - if (this.taking || this.options["dark"]) return moves; + if (this.options["taking"] || this.options["dark"]) + return moves; const kingPos = this.searchKingPos(color); let filtered = {}; //avoid re-checking similar moves (promotions...) return moves.filter(m => { @@ -1770,13 +1958,18 @@ export default class ChessRules { this.playOnBoard(m); let square = kingPos, res = true; //a priori valid - if (m.vanish.some(v => v.p == ChessRules.KING && v.c == color)) { + 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 => a.p == ChessRules.KING && a.c == color); + 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; + else + res = false; } res &&= !this.underCheck(square, oppCol); this.undoOnBoard(m); @@ -1816,17 +2009,20 @@ export default class ChessRules { move.appear.concat(move.vanish).forEach(psq => { if ( this.board[psq.x][psq.y] != "" && - this.getPiece(psq.x, psq.y) == ChessRules.KING + this.getPieceType(psq.x, psq.y) == "k" ) { this.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) c = 'b'; - else if (psq.x == this.size.x - 1) c = 'w'; - if (c != '') { + let c = ""; + if (psq.x == 0) + c = "b"; + else if (psq.x == this.size.x - 1) + c = "w"; + if (c != "") { const fidx = this.castleFlags[c].findIndex(f => f == psq.y); - if (fidx >= 0) this.castleFlags[c][fidx] = this.size.y; + if (fidx >= 0) + this.castleFlags[c][fidx] = this.size.y; } }); } @@ -1834,7 +2030,7 @@ export default class ChessRules { prePlay(move) { if ( typeof move.start.x == "number" && - (!this.options["teleport"] || this.subTurn == 1) + (!this.options["teleport"] || this.subTurnTeleport == 1) ) { // OK, not a drop move if ( @@ -1845,25 +2041,33 @@ export default class ChessRules { ) { this.updateCastleFlags(move); } - const initSquare = ChessRules.CoordsToSquare(move.start); + const initSquare = C.CoordsToSquare(move.start); if ( this.options["crazyhouse"] && (!this.options["rifle"] || !move.capture) ) { + const destSquare = C.CoordsToSquare(move.end); if (this.ispawn[initSquare]) { delete this.ispawn[initSquare]; - this.ispawn[ChessRules.CoordsToSquare(move.end)] = true; + this.ispawn[destSquare] = true; + } + else if ( + move.vanish[0].p == "p" && + move.appear[0].p != "p" + ) { + this.ispawn[destSquare] = true; } else if ( - move.vanish[0].p == ChessRules.PAWN && - move.appear[0].p != ChessRules.PAWN + this.ispawn[destSquare] && + this.getColor(move.end.x, move.end.y) != move.vanish[0].c ) { - this.ispawn[ChessRules.CoordsToSquare(move.end)] = true; + move.vanish[1].p = "p"; + delete this.ispawn[destSquare]; } } } const minSize = Math.min(move.appear.length, move.vanish.length); - if (this.hasReserve) { + if (this.hasReserve && !move.pawnfall) { const color = this.turn; for (let i=minSize; i move.appear.length && move.vanish[move.vanish.length - 1].c == color ) { const v = move.vanish[move.vanish.length - 1]; this.captured = {x: v.x, y: v.y, c: v.c, p: v.p}; - this.subTurn = 2; + this.subTurnTeleport = 2; return; } + this.subTurnTeleport = 1; this.captured = null; } if (this.options["balance"]) { - if (![1, 3].includes(this.movesCount)) this.turn = oppCol; + if (![1, 3].includes(this.movesCount)) + this.turn = oppCol; } else { if ( @@ -1916,7 +2124,13 @@ export default class ChessRules { (this.options["progressive"] && this.subTurn <= this.movesCount) ) { const oppKingPos = this.searchKingPos(oppCol); - if (oppKingPos[0] >= 0 && !this.underCheck(oppKingPos, color)) { + if ( + oppKingPos[0] >= 0 && + ( + this.options["taking"] || + !this.underCheck(oppKingPos, color) + ) + ) { this.subTurn++; return; } @@ -1933,16 +2147,19 @@ export default class ChessRules { 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) { - // TODO?: do not search all possible moves here + // 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]); - if (moves.some(m => this.filterValid([m]).length >= 1)) return true; + if (moves.some(m => this.filterValid([m]).length >= 1)) + return true; } } } if (this.hasReserve && this.reserve[color]) { for (let p of Object.keys(this.reserve[color])) { const moves = this.getDropMovesFrom([color, p]); - if (moves.some(m => this.filterValid([m]).length >= 1)) return true; + if (moves.some(m => this.filterValid([m]).length >= 1)) + return true; } } return false; @@ -1951,31 +2168,41 @@ export default class ChessRules { // What is the score ? (Interesting if game is over) getCurrentScore(move) { const color = this.turn; - const oppCol = ChessRules.GetOppCol(color); + const oppCol = C.GetOppCol(color); const kingPos = [this.searchKingPos(color), this.searchKingPos(oppCol)]; - if (kingPos[0][0] < 0 && kingPos[1][0] < 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()) return "*"; + if (kingPos[0][0] < 0 && kingPos[1][0] < 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()) + return "*"; // No valid move: stalemate or checkmate? - if (!this.underCheck(kingPos, color)) return "1/2"; + if (!this.underCheck(kingPos, color)) + return "1/2"; // OK, checkmate return (color == "w" ? "0-1" : "1-0"); } - // NOTE: quite suboptimal for eg. Benedict (TODO?) + // 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]) { - this.g_pieces[v.x][v.y].remove(); + // 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] = null; } }); - let container = document.getElementById(this.containerId); - if (!r) r = container.getBoundingClientRect(); + let chessboard = + document.getElementById(this.containerId).querySelector(".chessboard"); + if (!r) + r = chessboard.getBoundingClientRect(); const pieceWidth = this.getPieceWidth(r.width); move.appear.forEach(a => { - if (this.enlightened && !this.enlightened[a.x][a.y]) return; + 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"); @@ -1983,7 +2210,7 @@ export default class ChessRules { 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)`; - container.appendChild(this.g_pieces[a.x][a.y]); + chessboard.appendChild(this.g_pieces[a.x][a.y]); }); } @@ -1998,12 +2225,14 @@ export default class ChessRules { 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; + if (this.reserve[c][pi] == 0) + continue; + if (pi == p) + ridx = nbR; nbR++; } const rsqSize = this.getReserveSquareSize(r.width, nbR); - return [ridx * rsqSize, rsqSize]; //slightly inaccurate... TODO? + return [-ridx * rsqSize, rsqSize]; //slightly inaccurate... TODO? } animate(move, callback) { @@ -2015,23 +2244,30 @@ export default class ChessRules { const dropMove = (typeof i1 == "string"); const startArray = (dropMove ? this.r_pieces : this.g_pieces); let startPiece = startArray[i1][j1]; - let container = document.getElementById(this.containerId); + // TODO: next "if" shouldn't be required + if (!startPiece) { + callback(); + return; + } + let chessboard = + document.getElementById(this.containerId).querySelector(".chessboard"); const clonePiece = ( !dropMove && this.options["rifle"] || - (this.options["teleport"] && this.subTurn == 2) + (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.subTurn == 2) { + 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 } - container.appendChild(startPiece); + chessboard.appendChild(startPiece); } const [i2, j2] = [move.end.x, move.end.y]; let startCoords; @@ -2041,25 +2277,33 @@ export default class ChessRules { this.size.y / 2 //not trying to be accurate here... (TODO?) ]; } - else startCoords = [i1, j1]; - const r = container.getBoundingClientRect(); + 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); + 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"; + if (this.options["rifle"]) + startArray[i1][j1].style.opacity = "1"; startPiece.remove(); } + else { + startPiece.style.transform = initTransform; + startPiece.style.transitionDuration = "0s"; + } callback(); }, duration * 1000 @@ -2068,35 +2312,39 @@ export default class ChessRules { playReceivedMove(moves, callback) { const launchAnimation = () => { - const r = - document.getElementById(this.containerId).getBoundingClientRect(); + 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(); + if (i < moves.length - 1) + setTimeout(() => animateRec(i+1), 300); + else + callback(); }); }; animateRec(0); }; - const checkDisplayThenAnimate = () => { - if (boardContainer.style.display == "none") { + // 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"; - boardContainer.style.display = "block"; + container.style.display = "block"; setTimeout(launchAnimation, 700); } - else launchAnimation(); //focused user! + else + setTimeout(launchAnimation, delay || 0); }; - let boardContainer = document.getElementById("boardContainer"); + let container = document.getElementById(this.containerId); if (document.hidden) { document.onvisibilitychange = () => { document.onvisibilitychange = undefined; - checkDisplayThenAnimate(); + checkDisplayThenAnimate(700); }; } - else checkDisplayThenAnimate(); + else + checkDisplayThenAnimate(); } };