diff --git a/packages/web/src/App.svelte b/packages/web/src/App.svelte index 2ec0334..c3aa866 100644 --- a/packages/web/src/App.svelte +++ b/packages/web/src/App.svelte @@ -273,6 +273,9 @@ }); /** Tap-to-inspect: hide the enlarged card for the current selection. */ let inspectorHidden = $state(false); + /** The face-up hands at game's end fold away on request; a new game unfolds them. */ + let revealFolded = $state(false); + $effect(() => { if (view?.phase !== "finished") revealFolded = false; }); $effect(() => { void selectedCard?.instanceId; inspectorHidden = false; @@ -3140,14 +3143,19 @@ {/if} {#if view.phase === "finished" && view.revealedHands} -
+
The hands, face-up - + + + +
- {#each view.players as p (p.id)} + {#each revealFolded ? [] : view.players as p (p.id)}
{p.id === view.winner ? "🏆 " : ""}{p.id} @@ -4332,17 +4340,24 @@ max-width: 11rem; } + /* The reveal scrolls inside its own frame: the table's bottom row grows + * to fit it, and four hands of cards would otherwise take the board's row. */ .final-reveal { background: #efe8d4; border: 1px solid #b3a687; border-radius: 6px; padding: 0.7rem 0.9rem; margin-bottom: 0.6rem; + max-height: 38dvh; + overflow-y: auto; } + .final-reveal.folded { max-height: none; overflow: visible; } + .final-reveal.folded .reveal-head { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .reveal-head { display: flex; align-items: center; justify-content: space-between; + flex-wrap: wrap; gap: 0.5rem; font-family: "Oswald", sans-serif; font-size: 0.8rem; @@ -4353,6 +4368,7 @@ padding-bottom: 0.2rem; margin-bottom: 0.5rem; } + .reveal-tools { display: flex; flex-wrap: wrap; gap: 0.3rem; } .reveal-row { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.5rem; } .reveal-name { font-family: "Courier Prime", monospace;