solitaire: detect a won board and finish it in one press

A drained, all-face-up board is a guaranteed clear that auto() sweeps home
in a single cascade, but the only way to trigger it was double-clicking
thirty cards home by hand. Add State.Won(), surface it in the view, and
swap the ordinary controls for one pulsing finish button when it's true.
This commit is contained in:
prosolis
2026-07-15 18:50:43 -07:00
parent 8504c4f47a
commit b814f936a8
7 changed files with 115 additions and 3 deletions

View File

@@ -86,7 +86,9 @@
<!-- Playing: shown while a board is live. -->
<section data-playing class="hidden rounded-3xl bg-[color:var(--card)] p-5 sm:p-6 shadow-pete border-2 border-[color:var(--ink)]/10">
<div class="flex flex-wrap items-center gap-3">
<!-- The ordinary controls, while there's still a game to play. -->
<div data-play-controls class="flex flex-wrap items-center gap-3">
<button type="button" data-auto
class="rounded-full bg-[color:var(--ink)]/5 px-5 py-2.5 font-display font-bold border-2 border-[color:var(--ink)]/10
hover:bg-[color:var(--ink)]/10 active:translate-y-px disabled:opacity-40 disabled:pointer-events-none transition">
@@ -103,6 +105,22 @@
Cash the board · <span data-cash-amount class="tabular-nums">0</span>
</button>
</div>
<!-- The board's won: every card's face up and the piles are drained, so
there's nothing left to decide. One press sends the lot home. -->
<div data-won-controls class="hidden">
<div class="flex flex-wrap items-center gap-3">
<button type="button" data-finish
class="pete-finish rounded-full bg-[color:var(--accent)] px-8 py-3 font-display text-lg font-bold text-white shadow-pete
hover:brightness-105 active:translate-y-px disabled:pointer-events-none transition">
You've cracked it. Send them all home 🎉
</button>
<p class="text-xs text-[color:var(--ink)]/45">
The whole board's face up now, so the rest plays itself.
</p>
</div>
</div>
<p data-game-msg class="hidden mt-3 rounded-2xl bg-[color:var(--ink)]/5 px-4 py-2 text-sm font-semibold"></p>
</section>