109 lines
4.8 KiB
HTML
109 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Euchre Scoreboard</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="css/style.css">
|
||
</head>
|
||
<body>
|
||
<div class="app">
|
||
<header class="header">
|
||
<div class="header-top">
|
||
<h1>Euchre Scoreboard</h1>
|
||
<button type="button" class="btn btn-ghost" id="settingsBtn" aria-label="Settings">⚙</button>
|
||
</div>
|
||
<p class="subtitle">Track hands, march, euchre, and lone calls</p>
|
||
</header>
|
||
|
||
<section class="settings-panel" id="settingsPanel" hidden>
|
||
<h2>Game Settings</h2>
|
||
<label class="field">
|
||
<span>Play to</span>
|
||
<select id="targetScore">
|
||
<option value="10">10 points</option>
|
||
<option value="11">11 points</option>
|
||
</select>
|
||
</label>
|
||
<label class="field checkbox">
|
||
<input type="checkbox" id="loneEnabled" checked>
|
||
<span>Enable lone hand scoring</span>
|
||
</label>
|
||
<button type="button" class="btn btn-secondary" id="closeSettings">Done</button>
|
||
</section>
|
||
|
||
<main class="scoreboard">
|
||
<article class="team-card team-us" id="teamUsCard">
|
||
<div class="team-header">
|
||
<input type="text" class="team-name" id="teamUsName" value="Us" maxlength="20" aria-label="Our team name">
|
||
<span class="team-badge">Team 1</span>
|
||
</div>
|
||
<div class="score-display" id="teamUsScore">0</div>
|
||
<div class="score-actions">
|
||
<button type="button" class="btn btn-score" data-team="us" data-points="1" data-label="Made it">+1 Made</button>
|
||
<button type="button" class="btn btn-score" data-team="us" data-points="2" data-label="March">+2 March</button>
|
||
<button type="button" class="btn btn-score lone-btn" data-team="us" data-points="4" data-label="Lone made">+4 Lone</button>
|
||
</div>
|
||
</article>
|
||
|
||
<div class="vs-divider">
|
||
<span>VS</span>
|
||
</div>
|
||
|
||
<article class="team-card team-them" id="teamThemCard">
|
||
<div class="team-header">
|
||
<input type="text" class="team-name" id="teamThemName" value="Them" maxlength="20" aria-label="Their team name">
|
||
<span class="team-badge">Team 2</span>
|
||
</div>
|
||
<div class="score-display" id="teamThemScore">0</div>
|
||
<div class="score-actions">
|
||
<button type="button" class="btn btn-score" data-team="them" data-points="1" data-label="Made it">+1 Made</button>
|
||
<button type="button" class="btn btn-score" data-team="them" data-points="2" data-label="March">+2 March</button>
|
||
<button type="button" class="btn btn-score lone-btn" data-team="them" data-points="4" data-label="Lone made">+4 Lone</button>
|
||
</div>
|
||
</article>
|
||
</main>
|
||
|
||
<section class="euchre-panel">
|
||
<h2>Defensive Scoring</h2>
|
||
<p class="hint">When the calling team fails (0–2 tricks), the defenders score 2. Lone stopped awards 4.</p>
|
||
<div class="euchre-actions">
|
||
<button type="button" class="btn btn-euchre" data-team="us" data-points="2" data-label="Euchred them">Us Euchred Them (+2)</button>
|
||
<button type="button" class="btn btn-euchre" data-team="them" data-points="2" data-label="Euchred us">Them Euchred Us (+2)</button>
|
||
<button type="button" class="btn btn-euchre lone-btn" data-team="us" data-points="4" data-label="Lone stopped on them">Us Stopped Lone (+4)</button>
|
||
<button type="button" class="btn btn-euchre lone-btn" data-team="them" data-points="4" data-label="Lone stopped on us">Them Stopped Lone (+4)</button>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="controls">
|
||
<button type="button" class="btn btn-secondary" id="undoBtn" disabled>Undo Last Hand</button>
|
||
<button type="button" class="btn btn-danger" id="resetBtn">New Game</button>
|
||
</section>
|
||
|
||
<section class="history">
|
||
<div class="history-header">
|
||
<h2>Hand History</h2>
|
||
<span class="hand-count" id="handCount">0 hands</span>
|
||
</div>
|
||
<ul class="history-list" id="historyList">
|
||
<li class="history-empty">No hands played yet</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<div class="winner-overlay" id="winnerOverlay" hidden>
|
||
<div class="winner-modal">
|
||
<p class="winner-label">Game Over</p>
|
||
<h2 id="winnerText"></h2>
|
||
<p class="winner-score" id="winnerScore"></p>
|
||
<button type="button" class="btn btn-primary" id="newGameBtn">Start New Game</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="js/app.js"></script>
|
||
</body>
|
||
</html>
|