From 8f7beb5ef34924e538ec20c9e07e58bff08d79e6 Mon Sep 17 00:00:00 2001
From: Eric Wagoner <ewagoner@gmail.com>
Date: Sun, 16 Aug 2026 11:04:14 -0400
Subject: [PATCH] The card-naming field suggests as you type
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Illusionary Attack, Deja-Vu, Card Erasure, and the other name-a-card
spells asked for exact spell names from memory. The field is now a
native datalist: type a few letters and matching card names appear,
tuned per card — Illusionary Attack offers only attack spells (it can
only pretend to be one), Drop Object offers only the movable objects
plus Treasure, and the rest offer the whole playable pool.

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

diff --git a/packages/web/src/App.svelte b/packages/web/src/App.svelte
index e6cf446..36cf080 100644
--- a/packages/web/src/App.svelte
+++ b/packages/web/src/App.svelte
@@ -140,6 +140,22 @@
   }
 
   /** Map a typed card name to its id (case-insensitive). */
+  /** Suggest-as-you-type pool for the card-naming field, tuned per card. */
+  const nameSuggestions = $derived.by(() => {
+    if (!selectedCard) return [];
+    const pool = allCardDefs().filter(
+      (d) => (d.set === "basic" || d.set === "expansion1") && (d.quantity ?? 0) > 0,
+    );
+    let picks = pool;
+    if (selectedCard.cardId === "illusionary-attack") {
+      picks = pool.filter((d) => d.cardType === "attack");
+    } else if (selectedCard.cardId === "drop-object") {
+      picks = pool.filter((d) => isMovableObject(d.id));
+    }
+    const names = picks.map((d) => d.name).sort();
+    return selectedCard.cardId === "drop-object" ? ["Treasure", ...names] : names;
+  });
+
   function nameToCardId(name: string): string | null {
     const wanted = name.trim().toLowerCase();
     if (!wanted) return null;
@@ -1095,7 +1111,10 @@
               <span>{pendingSectorFrom ? "— now the destination area" : "— click the sector to move"}</span>
             {/if}
             {#if selectedCard && NAMED_CARDS.has(selectedCard.cardId)}
-              <label class="inline">name <input class="text-input" bind:value={nameInput} placeholder="e.g. Fireball" /></label>
+              <label class="inline">name <input class="text-input" list="card-name-options" bind:value={nameInput} placeholder="e.g. Fireball" /></label>
+              <datalist id="card-name-options">
+                {#each nameSuggestions as n (n)}<option value={n}></option>{/each}
+              </datalist>
               {#if selectedCard.cardId === "deja-vu"}
                 <button class="stamp tiny" onclick={() => {
                   const id = nameToCardId(nameInput);