From a9d40d73acbd576191a14d5e4ba10f7fe9fa8647 Mon Sep 17 00:00:00 2001
From: Eric Wagoner <ewagoner@gmail.com>
Date: Sun, 16 Aug 2026 10:34:28 -0400
Subject: [PATCH] Face-up cards show under each name on the scoresheet
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

At the table, a displayed card sits in front of its wizard for all to
see — Master Key, Wizardblade, the stones, wands. The view always
carried every player's displayed cards, but only your own hand marked
them. Now each scoresheet row lists that player's face-up cards as
parchment chips, wands with their remaining charges as pips, and
tapping a chip enlarges the card in the inspector corner, view-only.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 packages/web/src/App.svelte | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/packages/web/src/App.svelte b/packages/web/src/App.svelte
index f121778..04d984f 100644
--- a/packages/web/src/App.svelte
+++ b/packages/web/src/App.svelte
@@ -17,6 +17,8 @@
   let showHelp = $state(false);
   /** Which pending attack the player has already acknowledged (modal dismissed). */
   let attackNoticeSeen = $state<string | null>(null);
+  /** A face-up card being peeked at from the scoresheet (view-only). */
+  let peekCard = $state<CardInstance | null>(null);
   let helpTab = $state<"play" | "rules" | "cards" | "about">("play");
   let hotseatCount = $state(2);
   let setupName = $state("");
@@ -148,6 +150,7 @@
 
   function selectCard(card: CardInstance) {
     if (!view) return;
+    peekCard = null;
     if (youMustRespond) {
       dispatch({ type: "counteract", instanceId: card.instanceId });
       return;
@@ -589,6 +592,13 @@
     </span>
   </header>
 
+  {#if peekCard}
+    <div class="inspector" role="img" aria-label="displayed card, enlarged">
+      <button class="inspector-close" onclick={() => (peekCard = null)} aria-label="hide card">×</button>
+      <div class="inspector-card"><Card card={peekCard} /></div>
+    </div>
+  {/if}
+
   {#if showHelp}
     <Help initialTab={helpTab} onclose={() => (showHelp = false)} />
   {/if}
@@ -893,6 +903,15 @@
                 {p.handCount} cards{#if p.lostTurns > 0}&nbsp;· dazed {p.lostTurns}{/if}{#if p.carriedTreasureId}&nbsp;· 💰{/if}
               </span>
             </div>
+            {#if p.displayed.length > 0}
+              <div class="table-cards">
+                {#each p.displayed as c (c.instanceId)}
+                  <button class="table-card" onclick={() => (peekCard = peekCard?.instanceId === c.instanceId ? null : c)}>
+                    {cardDef(c.cardId).name}{#if view.wandCharges[c.instanceId] != null}&nbsp;·&nbsp;{"●".repeat(view.wandCharges[c.instanceId]!)}{/if}
+                  </button>
+                {/each}
+              </div>
+            {/if}
           {/each}
           <div class="deck-line">draw pile {view.deckCount} · discards {view.discardCount}</div>
         </div>
@@ -1469,6 +1488,23 @@
     height: 1.55rem;
   }
   .score-row.active .score-name { font-weight: 700; }
+  .table-cards {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    margin: -0.15rem 0 0.25rem 1.1rem;
+  }
+  .table-card {
+    font-family: "Courier Prime", monospace;
+    font-size: 0.68rem;
+    color: #43331f;
+    background: #f6f0df;
+    border: 1px solid #b3a687;
+    border-radius: 3px;
+    padding: 0.05rem 0.35rem;
+    cursor: pointer;
+  }
+  .table-card:hover { background: #efe6cc; }
   .score-row.dead { opacity: 0.5; text-decoration: line-through; }
   .score-name { font-family: "Caveat", cursive; font-size: 1.25rem; line-height: 1; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   .score-life { font-family: "Caveat", cursive; font-size: 1.4rem; font-weight: 700; min-width: 1.6rem; text-align: right; }