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.

internal/web/games_solitaire.go

@@ -60,6 +60,7 @@ type solitaireView struct {
 	Passes  int  `json:"passes"` // through the stock, counting this one; -1 unlimited
 	Moves   int  `json:"moves"`
 	CanAuto bool `json:"can_auto"`
+	Won     bool `json:"won"` // every card face up, stock and waste empty: one press finishes it
 
 	Home      int     `json:"home"`       // cards on the foundations
 	PerCard   float64 `json:"per_card"`   // what one more is worth
@@ -86,6 +87,7 @@ func viewSolitaire(g klondike.State) solitaireView {
 		Passes:    g.PassesLeft(),
 		Moves:     g.Moves,
 		CanAuto:   g.CanAuto(),
+		Won:       g.Won(),
 		Home:      g.Home(),
 		PerCard:   g.PerCard(),
 		BreakEven: g.Tier.BreakEven(),

internal/web/static/css/input.css

@@ -1456,6 +1456,14 @@ html[data-phase="night"] {
     100% { box-shadow: 0 0 0 1.4rem rgba(242, 181, 61, 0); }
   }
 
+  /* The finish button on a won board breathes, so the one press left to make is
+     the one the eye lands on. */
+  .pete-finish { animation: pete-finish-pulse 1.6s ease-in-out infinite; }
+  @keyframes pete-finish-pulse {
+    0%, 100% { box-shadow: 0 0 0 0 rgba(242, 181, 61, 0.55); }
+    50%      { box-shadow: 0 0 0 0.9rem rgba(242, 181, 61, 0); }
+  }
+
   /* The rail: the house's rack, what you've banked, the meter. On a wide screen
      it's a column down the right of the felt; on a narrow one it lies down and
      sits under the board. */
@@ -2130,7 +2138,8 @@ html[data-phase="night"] {
     .pete-tile-hit,
     .pete-meter[data-hit="1"] { animation: none; }
     .pete-nope,
-    .pete-home-flash { animation: none; }
+    .pete-home-flash,
+    .pete-finish { animation: none; }
     .pete-card[data-held="1"] { transition: none; }
     /* The clock still drains — it is information, not decoration — but it stops
        pulsing at you, and a wrong answer stops shaking. */

internal/web/static/js/solitaire.js

@@ -44,7 +44,10 @@
 
   var playing      = root.querySelector("[data-playing]");
   var betting      = root.querySelector("[data-betting]");
+  var playControls = root.querySelector("[data-play-controls]");
+  var wonControls  = root.querySelector("[data-won-controls]");
   var autoBtn      = root.querySelector("[data-auto]");
+  var finishBtn    = root.querySelector("[data-finish]");
   var cashBtn      = root.querySelector("[data-cash]");
   var cashAmountEl = root.querySelector("[data-cash-amount]");
   var startBtn     = root.querySelector("[data-start]");
@@ -258,6 +261,11 @@
     playing.classList.toggle("hidden", !live);
     betting.classList.toggle("hidden", live);
     if (!live) return;
+    // A won board has nothing left to decide, so the ordinary controls step aside
+    // for the one button that finishes it.
+    var won = !!v.won;
+    wonControls.classList.toggle("hidden", !won);
+    playControls.classList.toggle("hidden", won);
     autoBtn.disabled = !v.can_auto;
     cashAmountEl.textContent = (v.stands || 0).toLocaleString();
   }
@@ -545,6 +553,10 @@
 
   autoBtn.addEventListener("click", function () { drop(); send({ kind: "auto" }); });
 
+  // The finish button. On a won board a single auto drains every card home in one
+  // cascade, and the board settles cleared on the far end of it.
+  finishBtn.addEventListener("click", function () { drop(); send({ kind: "auto" }); });
+
   cashBtn.addEventListener("click", function () {
     drop();
     send({ kind: "concede" });

internal/web/templates/solitaire.html

@@ -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>