72 lines
3.0 KiB
HTML
72 lines
3.0 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"/>
|
|
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
|
|
</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">
|
|
<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>
|
|
<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 class="game-board" aria-label="Solitaire game 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>
|
|
|
|
<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>
|
|
</body>
|
|
</html>
|