127 lines
5.2 KiB
HTML
127 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>Klondike Solitaire</title>
|
|
<link rel="stylesheet" href="style.css"/>
|
|
<link rel="stylesheet" href="pyramid.css"/>
|
|
</head>
|
|
<body>
|
|
<header class="topbar">
|
|
<h1>Klondike Solitaire</h1>
|
|
<div class="scores">
|
|
<div class="score-display">Score: <span id="current-score">0</span></div>
|
|
<div class="score-display">High Score: <span id="high-score">0</span></div>
|
|
</div>
|
|
<div class="controls">
|
|
<div class="game-select">
|
|
<label for="game-mode-select">Game:</label>
|
|
<select id="game-mode-select">
|
|
<option value="klondike">Klondike</option>
|
|
<option value="pyramid">Pyramid</option>
|
|
</select>
|
|
</div>
|
|
<div id="klondike-controls" class="game-controls">
|
|
<label class="draw-toggle">
|
|
Draw:
|
|
<select id="draw-select" aria-label="Draw count">
|
|
<option value="1">1</option>
|
|
<option value="3" selected>3</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<div id="pyramid-controls" class="game-controls hidden">
|
|
<!-- Pyramid specific controls if any -->
|
|
</div>
|
|
<button id="change-back-btn" class="btn">Card Back</button>
|
|
<button id="undo-btn" class="btn">Undo</button>
|
|
<button id="check-moves-btn" class="btn">Check Moves</button>
|
|
<button id="restart-btn" class="btn btn-accent">New Game</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="klondike-board" class="game-board" aria-label="Klondike Solitaire board">
|
|
<div class="top-piles">
|
|
<div class="stock-waste">
|
|
<div class="pile stock" id="stock" aria-label="Stock" tabindex="0"></div>
|
|
<div class="pile waste" id="waste" aria-label="Waste" tabindex="0"></div>
|
|
</div>
|
|
<div class="foundations">
|
|
<div class="pile foundation" id="foundation-0" aria-label="Foundation 1" tabindex="0"></div>
|
|
<div class="pile foundation" id="foundation-1" aria-label="Foundation 2" tabindex="0"></div>
|
|
<div class="pile foundation" id="foundation-2" aria-label="Foundation 3" tabindex="0"></div>
|
|
<div class="pile foundation" id="foundation-3" aria-label="Foundation 4" tabindex="0"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tableau">
|
|
<div class="pile tableau-pile" id="tableau-0" aria-label="Tableau 1" tabindex="0"></div>
|
|
<div class="pile tableau-pile" id="tableau-1" aria-label="Tableau 2" tabindex="0"></div>
|
|
<div class="pile tableau-pile" id="tableau-2" aria-label="Tableau 3" tabindex="0"></div>
|
|
<div class="pile tableau-pile" id="tableau-3" aria-label="Tableau 4" tabindex="0"></div>
|
|
<div class="pile tableau-pile" id="tableau-4" aria-label="Tableau 5" tabindex="0"></div>
|
|
<div class="pile tableau-pile" id="tableau-5" aria-label="Tableau 6" tabindex="0"></div>
|
|
<div class="pile tableau-pile" id="tableau-6" aria-label="Tableau 7" tabindex="0"></div>
|
|
</div>
|
|
</main>
|
|
|
|
<main id="pyramid-board" class="game-board hidden" aria-label="Pyramid Solitaire board">
|
|
<div class="pyramid-layout">
|
|
<!-- Pyramid rows will be rendered here by pyramid.js -->
|
|
</div>
|
|
<div class="pyramid-bottom-piles">
|
|
<div class="stock-waste">
|
|
<div class="pile stock" id="pyramid-stock" aria-label="Stock" tabindex="0"></div>
|
|
<div class="pile waste" id="pyramid-waste" aria-label="Waste" tabindex="0"></div>
|
|
</div>
|
|
<div class="discard-pile-container">
|
|
<div class="pile discard" id="pyramid-discard" aria-label="Discard Pile" tabindex="0"></div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<div id="win-message" class="hidden">You Won! 🎉</div>
|
|
|
|
<div id="card-back-modal" class="modal hidden">
|
|
...
|
|
</div>
|
|
</div>
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
<script src="script.js"></script>
|
|
<script src="pyramid.js"></script>
|
|
<script>
|
|
// Global switcher logic
|
|
(function() {
|
|
const switcher = document.getElementById('game-mode-select');
|
|
const klondikeBoard = document.getElementById('klondike-board');
|
|
const pyramidBoard = document.getElementById('pyramid-board');
|
|
const klondikeControls = document.getElementById('klondike-controls');
|
|
const pyramidControls = document.getElementById('pyramid-controls');
|
|
|
|
function switchMode(mode) {
|
|
if (mode === 'pyramid') {
|
|
klondikeBoard.classList.add('hidden');
|
|
klondikeControls.classList.add('hidden');
|
|
pyramidBoard.classList.remove('hidden');
|
|
pyramidControls.classList.remove('hidden');
|
|
} else {
|
|
pyramidBoard.classList.add('hidden');
|
|
pyramidControls.classList.add('hidden');
|
|
klondikeBoard.classList.remove('hidden');
|
|
klondikeControls.classList.remove('hidden');
|
|
}
|
|
localStorage.setItem('solitaire-mode', mode);
|
|
document.dispatchEvent(new CustomEvent('gameModeChanged', { detail: mode }));
|
|
}
|
|
|
|
switcher.addEventListener('change', (e) => switchMode(e.target.value));
|
|
|
|
const savedMode = localStorage.getItem('solitaire-mode') || 'klondike';
|
|
switcher.value = savedMode;
|
|
switchMode(savedMode);
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|