Files
Ferrous-Solitaire/solitaire_server/web/game.html
T
funman300 0ebe87a411 fix(web): browser game UX pass — shake feedback, timer, stock count, HUD
- game.js fully rewritten: correct coordinate system (PAD baked into
  PILE_ORIGIN), undo driven by undo_stack_len, flashIllegal shake with
  --card-tx CSS variable, game timer, stock count HUD, URL seed persist,
  foundation suit hints, auto-complete step loop
- game.html: adds hud-timer, hud-stock, win-time elements
- game.css: @keyframes illegal-shake, .slot-hint, overflow-x on main
- solitaire_wasm: adds undo_stack_len to GameSnapshot

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-13 10:27:05 -07:00

47 lines
1.5 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Solitaire Quest — Play</title>
<link rel="stylesheet" href="/web/game.css">
</head>
<body>
<header>
<div class="hud-left">
<span class="logo">Solitaire Quest</span>
<span id="hud-seed" class="muted"></span>
</div>
<div class="hud-center">
<span id="hud-score">Score: 0</span>
<span id="hud-moves">Moves: 0</span>
<span id="hud-timer">0:00</span>
<span id="hud-stock">Stock: 24</span>
</div>
<div class="hud-right">
<button id="btn-undo" title="Undo (Z)">↩ Undo</button>
<button id="btn-new" title="New game">↺ New</button>
<label class="toggle-label" title="Draw one or three cards">
<input type="checkbox" id="chk-draw3"> Draw 3
</label>
</div>
</header>
<main>
<section id="board"></section>
</main>
<div id="win-overlay" class="hidden">
<div class="win-card">
<div class="win-title">You Won!</div>
<div id="win-score" class="win-score"></div>
<div id="win-moves" class="win-detail"></div>
<div id="win-time" class="win-detail"></div>
<button id="btn-win-new">Play Again ↺</button>
</div>
</div>
<script type="module" src="/web/game.js"></script>
</body>
</html>