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

24
index.html
View File

@ -84,13 +84,18 @@
<div id="win-message" class="hidden">You Won! 🎉</div> <div id="win-message" class="hidden">You Won! 🎉</div>
<div id="card-back-modal" class="modal hidden"> <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> </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="script.js"></script> <script src="script.js"></script>
<script src="pyramid.js"></script> <script src="pyramid.js"></script>
<script> <script>
// Global switcher logic // Global switcher logic
(function() { (function() {
const switcher = document.getElementById('game-mode-select'); const switcher = document.getElementById('game-mode-select');
@ -112,7 +117,10 @@
klondikeControls.classList.remove('hidden'); klondikeControls.classList.remove('hidden');
} }
localStorage.setItem('solitaire-mode', mode); localStorage.setItem('solitaire-mode', mode);
document.dispatchEvent(new CustomEvent('gameModeChanged', { detail: 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)); switcher.addEventListener('change', (e) => switchMode(e.target.value));
@ -121,6 +129,6 @@
switcher.value = savedMode; switcher.value = savedMode;
switchMode(savedMode); switchMode(savedMode);
})(); })();
</script> </script>
</body> </body>
</html> </html>

15
script.js
View File

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