X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=base_rules.js;h=4e2eddd93423e5ab8a3fb94d48484acdf5c92e49;hb=3c61449b830db29c95d82cdacc4dae710cc705a8;hp=715f4e053a03b9b092618b4e6cdbf0e33b30bdf4;hpb=55a15dcb7df5091f46f7dd9c170b2aae5846c6c0;p=xogo.git diff --git a/base_rules.js b/base_rules.js index 715f4e0..4e2eddd 100644 --- a/base_rules.js +++ b/base_rules.js @@ -7,6 +7,10 @@ import Move from "/utils/Move.js"; // NOTE: ChessRules is aliased as window.C, and variants as window.V export default class ChessRules { + static get Aliases() { + return {'C': ChessRules}; + } + ///////////////////////// // VARIANT SPECIFICATIONS @@ -26,11 +30,18 @@ export default class ChessRules { { 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", @@ -373,8 +384,6 @@ export default class ChessRules { // Fen string fully describes the game state constructor(o) { - window.C = ChessRules; //easier alias - this.options = o.options; this.playerColor = o.color; this.afterPlay = o.afterPlay; @@ -478,8 +487,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 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 = C.GetOppCol(this.playerColor); - let container = document.getElementById(this.containerId); - container.innerHTML = ""; - container.insertAdjacentHTML('beforeend', board); - let cb = container.querySelector("#" + this.containerId + "_SVG"); + 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; @@ -599,13 +610,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({ @@ -624,7 +635,7 @@ export default class ChessRules { + class="chessboard_SVG"> `; for (let i=0; i < sizeX; i++) { for (let j=0; j < sizeY; j++) { @@ -665,8 +676,9 @@ 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(); + 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++) { @@ -683,7 +695,7 @@ 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]); } } } @@ -709,11 +721,9 @@ export default class ChessRules { } } 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 + let chessboard = + document.getElementById(this.containerId).querySelector(".chessboard"); + if (!r) r = chessboard.getBoundingClientRect(); for (let c of colors) { if (!this.reserve[c]) continue; const nbR = this.getNbReservePieces(c); @@ -727,16 +737,17 @@ 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); + chessboard.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.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]; @@ -774,25 +785,26 @@ export default class ChessRules { // After resize event: no need to destroy/recreate pieces rescale() { - let container = document.getElementById(this.containerId); + const container = document.getElementById(this.containerId); if (!container) return; //useful at initial loading - const r = container.getBoundingClientRect(); + 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++) { @@ -810,7 +822,6 @@ export default class ChessRules { } rescaleReserve(r) { - const epsilon = 1e-4; for (let c of ['w','b']) { if (!this.reserve[c]) continue; const nbR = this.getNbReservePieces(c); @@ -822,20 +833,20 @@ 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; 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) { @@ -848,10 +859,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 @@ -860,15 +874,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, @@ -876,7 +890,9 @@ 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) { @@ -895,9 +911,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"; } } } @@ -908,10 +924,13 @@ 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; @@ -920,7 +939,7 @@ export default class ChessRules { 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); @@ -943,30 +962,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++) { @@ -1539,21 +1560,37 @@ 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 = ["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 != "p" ? { 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); } } @@ -1765,7 +1802,7 @@ 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; + 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 => { @@ -1835,7 +1872,7 @@ 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 => { @@ -1941,7 +1978,7 @@ export default class ChessRules { } } 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 { if (this.enlightened && !this.enlightened[a.x][a.y]) return; @@ -2063,7 +2101,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]); }); } @@ -2083,7 +2121,7 @@ export default class ChessRules { 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) { @@ -2095,7 +2133,8 @@ 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); + let chessboard = + document.getElementById(this.containerId).querySelector(".chessboard"); const clonePiece = ( !dropMove && this.options["rifle"] || @@ -2111,7 +2150,7 @@ export default class ChessRules { 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; @@ -2122,7 +2161,7 @@ export default class ChessRules { ]; } else startCoords = [i1, j1]; - const r = container.getBoundingClientRect(); + 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); @@ -2131,6 +2170,7 @@ export default class ChessRules { 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"; @@ -2140,6 +2180,10 @@ export default class ChessRules { if (this.options["rifle"]) startArray[i1][j1].style.opacity = "1"; startPiece.remove(); } + else { + startPiece.style.transform = initTransform; + startPiece.style.transitionDuration = "0s"; + } callback(); }, duration * 1000 @@ -2148,8 +2192,7 @@ 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); @@ -2162,15 +2205,15 @@ export default class ChessRules { }; // Delay if user wasn't focused: const checkDisplayThenAnimate = (delay) => { - if (boardContainer.style.display == "none") { + 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 setTimeout(launchAnimation, delay || 0); }; - let boardContainer = document.getElementById("boardContainer"); + let container = document.getElementById(this.containerId); if (document.hidden) { document.onvisibilitychange = () => { document.onvisibilitychange = undefined;