X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=base_rules.js;h=4b387b6b1dc2ec198960c56c7e9f3b20d025faee;hb=2159c2391f765c55ad79d5e05a62ecc6586b8522;hp=080b02a199cbbaeb5cdf2aeea30f906a828a25ca;hpb=24872b22ca84fc01cc1d47247580e4e8280fff1e;p=xogo.git diff --git a/base_rules.js b/base_rules.js index 080b02a..4b387b6 100644 --- a/base_rules.js +++ b/base_rules.js @@ -534,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(); @@ -553,15 +569,16 @@ 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.hasReserve) { const sqSize = cbWidth / this.size.y; @@ -569,7 +586,7 @@ export default class ChessRules { // 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"; @@ -594,7 +611,7 @@ export default class ChessRules { const flipped = (this.playerColor == 'b'); let board = ` `; for (let i=0; i < this.size.x; i++) { for (let j=0; j < this.size.y; j++) { @@ -649,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"; @@ -717,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%"; @@ -783,13 +800,14 @@ export default class ChessRules { 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 / this.size.ratio; + newHeight = newWidth / vRatio; } if (newHeight > window.innerHeight) { newHeight = window.innerHeight; - newWidth = newHeight * this.size.ratio; + newWidth = newHeight * vRatio; } chessboard.style.width = newWidth + "px"; chessboard.style.height = newHeight + "px"; @@ -992,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"; @@ -1017,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%"; @@ -1034,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) }; } @@ -1485,6 +1506,11 @@ export default class ChessRules { return false; } + canStepOver(i, j) { + // 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); @@ -1513,7 +1539,7 @@ export default class ChessRules { let stepCounter = 0; while ( this.onBoard(i, j) && - (this.board[i][j] == "" || (i == x && j == y)) + (this.canStepOver(i, j) || (i == x && j == y)) ) { if ( type != "attack" && @@ -1886,10 +1912,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: @@ -2164,7 +2192,8 @@ 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"]); + 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"; @@ -2186,9 +2215,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) { @@ -2213,13 +2242,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));