From 3f3e6d98539afc7386a6161bd696b962b92db678 Mon Sep 17 00:00:00 2001
From: Eric Wagoner <ewagoner@gmail.com>
Date: Sun, 16 Aug 2026 13:11:06 -0400
Subject: [PATCH] =?UTF-8?q?The=20table=20survives=20synthetic=20spell=20id?=
 =?UTF-8?q?s=20=E2=80=94=20fixes=20the=20blank=20screen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Sticky Wand attaches its webs as a sustained effect with the
engine-internal id "sticky-web", which is not a printed card — and
cardDef throws on unknown ids. The scoresheet's new spell chips and
the chronicle's settles-over/wears-off lines both called it on
sustained ids, so the first webbing killed every render: mid-game the
actions bar died, and after a reload the whole table came up blank.
A spellName lookup now names synthetic effects properly ("Sticky
Wand webs") and falls back to the raw id rather than ever throwing,
and the chip peek only opens ids the card library can actually show.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 packages/web/src/App.svelte    | 10 ++++++++--
 packages/web/src/net.svelte.ts | 18 ++++++++++++++++--
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/App.svelte b/packages/web/src/App.svelte
index 975798f..3dbb377 100644
--- a/packages/web/src/App.svelte
+++ b/packages/web/src/App.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { attentionLabel, net } from "./net.svelte";
+  import { attentionLabel, net, spellName } from "./net.svelte";
   import Board from "./Board.svelte";
   import { PLAYER_COLORS, wizardColor } from "./colors";
   import Card from "./Card.svelte";
@@ -432,6 +432,11 @@
     tacks: "handful-of-tacks", pit: "create-pit", safe: "safe",
   };
 
+  /** Sustained ids include engine constructs the card library cannot show. */
+  function realCard(cardId: string): boolean {
+    try { cardDef(cardId); return true; } catch { return false; }
+  }
+
   function creatureStats(c: NonNullable<GameView["creatures"]>[number]): string {
     const hp = Number.isFinite(c.maxDamage)
       ? `${c.maxDamage - c.damage} of ${c.maxDamage} hits left`
@@ -1073,10 +1078,11 @@
                 {/each}
                 {#each spellsOn as e (e.id)}
                   <button class="table-card spell-chip" onclick={() => {
+                    if (!realCard(e.cardId)) return;
                     peekCard = { instanceId: `peek-${e.id}`, cardId: e.cardId };
                     peekCreatureId = null;
                   }}>
-                    ✦ {cardDef(e.cardId).name} · {e.remainingTurns}
+                    ✦ {spellName(e.cardId)} · {e.remainingTurns}
                   </button>
                 {/each}
               </div>
diff --git a/packages/web/src/net.svelte.ts b/packages/web/src/net.svelte.ts
index f76ecd0..fb29c96 100644
--- a/packages/web/src/net.svelte.ts
+++ b/packages/web/src/net.svelte.ts
@@ -9,6 +9,20 @@ const SERVER_URL =
     ? "ws://localhost:8787"
     : `${location.protocol === "https:" ? "wss" : "ws"}://${location.host}/ws`);
 
+/** Sustained-effect ids that are engine constructs, not printed cards. */
+const SYNTHETIC_SPELL_NAMES: Record<string, string> = { "sticky-web": "Sticky Wand webs" };
+
+/** Card name lookup that survives synthetic ids — render code must never throw. */
+export function spellName(cardId: string): string {
+  const synthetic = SYNTHETIC_SPELL_NAMES[cardId];
+  if (synthetic) return synthetic;
+  try {
+    return cardDef(cardId).name;
+  } catch {
+    return cardId;
+  }
+}
+
 export function humanize(e: GameEvent): string | null {
   switch (e.type) {
     case "gameStarted": return `Game started — ${e.players.join(", ")}. ${e.firstPlayer} goes first.`;
@@ -43,8 +57,8 @@ export function humanize(e: GameEvent): string | null {
       : `${e.defender} is too small to hit — the attack misses!`;
     case "damageImmune": return `${e.player} is stone — the damage has no effect.`;
     case "lifeGained": return `${e.player} gains ${e.amount} life (${e.source}) — now ${e.lifeAfter}.`;
-    case "spellSustained": return `${cardDef(e.cardId).name} settles over ${e.target} (${e.turns} turn${e.turns === 1 ? "" : "s"}).`;
-    case "spellExpired": return `${cardDef(e.cardId).name} wears off ${e.target}.`;
+    case "spellSustained": return `${spellName(e.cardId)} settles over ${e.target} (${e.turns} turn${e.turns === 1 ? "" : "s"}).`;
+    case "spellExpired": return `${spellName(e.cardId)} wears off ${e.target}.`;
     case "teleported": return e.by === e.player
       ? `${e.player} teleports across the maze!`
       : `${e.player} is teleported away by ${e.by}!`;