chris/solitare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix DOM structure and Klondike mode regressions

Browse Source
This commit is contained in:
chris 2026-05-25 00:51:53 -04:00
parent cd408efc0e
commit d66c1dfc02
2 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
index.html
View File

@ -84,9 +84,14 @@
<div id="win-message" class="hidden">You Won! 🎉</div>
<div id="card-back-modal" class="modal hidden">
...
<div class="modal-overlay"></div>
<div class="modal-content">
<h2>Choose Card Back</h2>
<div class="card-back-options" id="card-back-options"></div>
<button id="modal-close-btn" class="btn">Close</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="script.js"></script>
<script src="pyramid.js"></script>
@ -112,7 +117,10 @@
klondikeControls.classList.remove('hidden');
}
localStorage.setItem('solitaire-mode', mode);
// Dispatch event after a tiny delay to ensure DOM classes are applied
setTimeout(() => {
document.dispatchEvent(new CustomEvent('gameModeChanged', { detail: mode }));
}, 0);
}
switcher.addEventListener('change', (e) => switchMode(e.target.value));

15
script.js
View File

@ -33,7 +33,7 @@ document.addEventListener('DOMContentLoaded', () => {
];
// ====== DOM ======
const gameBoard = document.querySelector('.game-board');
const klondikeBoard = document.getElementById('klondike-board');
const restartBtn = document.getElementById('restart-btn');
const winMessage = document.getElementById('win-message');
const undoBtn = document.getElementById('undo-btn');
@ -76,7 +76,7 @@ document.addEventListener('DOMContentLoaded', () => {
if (!cardElements[cardData.id]) {
const el = createCardElement(cardData);
cardElements[cardData.id] = el;
gameBoard.appendChild(el);
klondikeBoard.appendChild(el);
}
});
winMessage.classList.add('hidden');
@ -126,12 +126,12 @@ document.addEventListener('DOMContentLoaded', () => {
deck.forEach(cardData => {
const el = createCardElement(cardData);
cardElements[cardData.id] = el;
gameBoard.appendChild(el);
klondikeBoard.appendChild(el);
// Initially position cards at the stock location to animate out from there
const stockEl = document.getElementById('stock');
if (stockEl) {
const rect = stockEl.getBoundingClientRect();
const boardRect = gameBoard.getBoundingClientRect();
const boardRect = klondikeBoard.getBoundingClientRect();
el.style.top = `${rect.top - boardRect.top + PILE_BORDER_WIDTH}px`;
el.style.left = `${rect.left - boardRect.left + PILE_BORDER_WIDTH}px`;
}
@ -159,7 +159,7 @@ document.addEventListener('DOMContentLoaded', () => {
async function dealTableauSequentially(cardsToDeal) {
isDealing = true;
// Turn off interactivity during deal
gameBoard.style.pointerEvents = 'none';
klondikeBoard.style.pointerEvents = 'none';
for (let i = 0; i < cardsToDeal.length; i++) {
const { card, pileIndex } = cardsToDeal[i];
@ -173,15 +173,16 @@ document.addEventListener('DOMContentLoaded', () => {
}
isDealing = false;
gameBoard.style.pointerEvents = 'auto';
klondikeBoard.style.pointerEvents = 'auto';
updateBoard();
saveGame();
}
// ====== RENDER ======
function updateBoard(initial=false) {
if (!isActive) return;
updateScoreDisplay();
const gameBoardRect = gameBoard.getBoundingClientRect();
const gameBoardRect = klondikeBoard.getBoundingClientRect();
const updatePile = (pileData, pileEl, type) => {
if (!pileEl) return;
const { top, left } = pileEl.getBoundingClientRect();