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>
This commit is contained in:
funman300
2026-05-13 10:27:05 -07:00
parent 1e6d153cd0
commit 0ebe87a411
5 changed files with 225 additions and 218 deletions
+28
View File
@@ -83,6 +83,7 @@ main {
justify-content: center;
align-items: flex-start;
padding: 20px;
overflow-x: auto;
}
#board {
@@ -237,3 +238,30 @@ main {
padding: 12px 32px;
font-size: 16px;
}
/* ── Illegal-move shake ──────────────────────────────────────────────────── */
@keyframes illegal-shake {
0% { transform: var(--card-tx) translateX(0); }
20% { transform: var(--card-tx) translateX(-6px); }
40% { transform: var(--card-tx) translateX(6px); }
60% { transform: var(--card-tx) translateX(-4px); }
80% { transform: var(--card-tx) translateX(4px); }
100% { transform: var(--card-tx) translateX(0); }
}
.card.illegal {
animation: illegal-shake 320ms ease;
}
/* ── Foundation slot suit hints ──────────────────────────────────────────── */
.slot-hint {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 26px;
color: rgba(255,255,255,0.18);
pointer-events: none;
}