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:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user