// Spellstash Card Search — tell it what you're looking for, in your own
// words. The AI reads Scryfall's actual syntax rulebook
// (data/scryfall-syntax-reference.txt, captured verbatim) and writes the
// query; results land as a fast image grid with a quiet mark on the cards
// you already own. Prices and actions live in the popup, where intent
// shifts from scanning to deciding. Contract: docs/CARD_SEARCH_PLAN.md
// plus the 8-04 redesign ruling. Raw Scryfall syntax runs untouched.
//
// NO in-page mic and NO auto-search (Dwayne 8-04): the iPhone keyboard's
// own dictation covers voice, and every search fires only from an explicit
// Search tap (or Enter / a tapped example) so translate credits are never
// burned by a page acting on its own.
const { useState, useEffect, useRef, useCallback } = React;
const { CardPopup, OwnThisModal, WishlistModal, ClipIcon } = window.ssCardPopup;
const T = {
accent: "var(--cm-accent)",
accentFg: "var(--cm-accent-fg)",
accentSoft: "var(--cm-accent-soft)",
bg: "var(--bg)", bg2: "var(--bg-2)", bg3: "var(--bg-3)",
line: "var(--line)",
ink: "var(--ink)", ink2: "var(--ink-2)", ink3: "var(--ink-3)", ink4: "var(--ink-4)",
good: "var(--good)",
serif: "var(--cm-serif)", sans: "var(--cm-sans)", mono: "var(--cm-mono)",
};
// Permanent event names (surface prefix convention). Never rename.
function track(name, props) {
try { window.plausible && window.plausible(name, { props: props || {} }); } catch (e) { /* best effort */ }
}
// ── Recent searches (last 5 Scryfall SYNTAX strings, not the raw ask) ────
// Persisted so leaving the page and coming back keeps your last searches one
// tap away. Syntax only by design (Dwayne 8-09): the natural-language text is
// personal and disposable, the compiled query is the reusable thing.
const RECENTS_KEY = "ss-lookup-recents";
const RECENTS_MAX = 5;
function loadRecents() {
try {
const raw = JSON.parse(localStorage.getItem(RECENTS_KEY) || "[]");
return Array.isArray(raw) ? raw.filter((s) => typeof s === "string" && s.trim()).slice(0, RECENTS_MAX) : [];
} catch (e) { return []; }
}
function pushRecent(list, syntax) {
const s = (syntax || "").trim();
if (!s) return list;
// De-dupe (move-to-front), cap at 5.
const next = [s, ...list.filter((x) => x !== s)].slice(0, RECENTS_MAX);
try { localStorage.setItem(RECENTS_KEY, JSON.stringify(next)); } catch (e) { /* best effort */ }
return next;
}
// ── Page-scoped buy list (same anatomy as the Brewer/Synergy pair) ───────
const PICKS_KEY = "ss-lookup-picks";
function loadPicks() {
try {
const raw = JSON.parse(localStorage.getItem(PICKS_KEY) || "[]");
return Array.isArray(raw) ? raw.filter((p) => p && p.name) : [];
} catch (e) { return []; }
}
function picksToPlainList(picks) {
return picks.map((p) => "1 " + p.name).join("\n");
}
function ckBulkBuy(picks) {
const plain = picksToPlainList(picks);
try { navigator.clipboard && navigator.clipboard.writeText(plain); } catch (e) { /* best effort */ }
const form = document.createElement("form");
form.method = "POST";
form.action = "https://www.cardkingdom.com/builder?partner=spellstash&utm_source=spellstash&utm_medium=affiliate&utm_campaign=card-search";
form.target = "_blank";
const input = document.createElement("input");
input.type = "hidden";
input.name = "c";
input.value = plain;
form.appendChild(input);
document.body.appendChild(form);
form.submit();
form.remove();
}
function PickBar({ picks, copied, onBuyAll, onCopy, onClear }) {
if (!picks.length) return null;
return (
);
}
// Raw syntax runs untouched; anything else goes through the translator.
function looksLikeSyntax(q) {
return /[:{}<>=]|^!/.test(q);
}
// Natural-language examples: each one runs through the real translator, so
// the blank page teaches the whole trick.
const STARTERS = [
"Elves for a Sultai commander deck with tap abilities",
"Cheap board wipes for commander",
"Dragons under five mana that fly",
"Artifacts that make treasure tokens",
];
// Did-you-mean for zero-result nameish queries, off the cheap autocomplete.
function DidYouMean({ query, onPick }) {
const [names, setNames] = useState([]);
useEffect(() => {
let aborted = false;
setNames([]);
const q = String(query || "").trim();
if (q.length < 3 || /[:<>=]/.test(q)) return;
(async () => {
try {
const r = await window.ssAuth.authedFetch("/api/cards/autocomplete?q=" + encodeURIComponent(q.slice(0, 30)));
if (!r.ok || aborted) return;
const arr = await r.json();
if (!aborted) setNames((Array.isArray(arr) ? arr : []).slice(0, 3));
} catch (e) { /* garnish */ }
})();
return () => { aborted = true; };
}, [query]);
if (!names.length) return null;
return (
Did you mean
{names.map((n) => (
))}
);
}
function LookupApp() {
const [session, sessionLoading] = window.ssAuth.useSession();
const [text, setText] = useState("");
const [result, setResult] = useState(null);
const [searching, setSearching] = useState(false);
const [translating, setTranslating] = useState(false);
const [error, setError] = useState(null);
const [moreError, setMoreError] = useState(null);
const [page, setPage] = useState(1);
const [modal, setModal] = useState(null); // { idx }
const [showTips, setShowTips] = useState(false);
// The syntax the loaded pages actually ran under, shown to the user and
// editable in place (the AI's work stays transparent and correctable).
const [ranSyntax, setRanSyntax] = useState("");
const [editingSyntax, setEditingSyntax] = useState(false);
const [syntaxDraft, setSyntaxDraft] = useState("");
const [picks, setPicks] = useState(loadPicks);
const [recents, setRecents] = useState(loadRecents);
const [copied, setCopied] = useState(false);
useEffect(() => {
try { localStorage.setItem(PICKS_KEY, JSON.stringify(picks)); } catch (e) { /* best effort */ }
}, [picks]);
const isClipped = useCallback((name) => picks.some((p) => p.name === name), [picks]);
const toggleClip = useCallback((card) => {
if (!card || !card.name) return;
track("CardSearchClip", { card: card.name });
setPicks((prev) => prev.some((p) => p.name === card.name)
? prev.filter((p) => p.name !== card.name)
: [...prev, { name: card.name, oracle_id: card.oracle_id || null, buy_url: card.buy_url || null }]);
}, []);
const copyPicks = useCallback(() => {
try {
if (navigator.clipboard) navigator.clipboard.writeText(picksToPlainList(picks));
setCopied(true);
setTimeout(() => setCopied(false), 1600);
} catch (e) { /* best effort */ }
}, [picks]);
const [wishlisted, setWishlisted] = useState(() => new Set());
const [wishlistModal, setWishlistModal] = useState(null);
const [ownModal, setOwnModal] = useState(null);
// Public page: signed-out visitors search everything; the ownership layer
// (owned marks, Own this, Want it) is the reason to sign up, not a wall.
useEffect(() => {
if (sessionLoading) return;
track("CardSearchView", { signed: session ? "yes" : "no" });
}, [session, sessionLoading]);
// Run a KNOWN syntax string (from the translator, raw input, or the edit
// box). All pages of one list run under one syntax.
const runSyntax = useCallback(async (syntax, p) => {
const pageNum = p || 1;
setSearching(true);
if (pageNum === 1) { setError(null); setResult(null); setMoreError(null); }
else setMoreError(null);
try {
const r = await window.ssAuth.authedFetch(
"/api/lookup/search?q=" + encodeURIComponent(syntax) + "&page=" + pageNum + "&order=name");
const body = await r.json().catch(() => ({}));
if (!r.ok) throw new Error(body.error || "HTTP " + r.status);
setRanSyntax(syntax);
setPage(pageNum);
setResult((prev) => pageNum > 1 && prev
? { ...body, cards: [...prev.cards, ...body.cards] }
: body);
// Remember the syntax on a fresh search that actually found cards, so an
// empty/typo query never clutters the recents.
if (pageNum === 1 && body.total_cards > 0) setRecents((r) => pushRecent(r, syntax));
track("CardSearchQuery", { page: pageNum, results: body.total_cards });
} catch (e) {
if (pageNum === 1) { setError(e.message || "Search failed. Try again."); setResult(null); }
else setMoreError(e.message || "Couldn't load more. Try again.");
}
setSearching(false);
}, []);
// The one entry point: raw syntax runs as-is, plain words go through the
// translator first.
const commit = useCallback(async (askOverride) => {
const ask = String(typeof askOverride === "string" ? askOverride : text).trim();
if (!ask || searching || translating) return;
setEditingSyntax(false);
if (looksLikeSyntax(ask)) {
runSyntax(ask, 1);
return;
}
setTranslating(true);
setError(null);
setResult(null);
try {
const r = await window.ssAuth.authedFetch("/api/lookup/translate", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ ask }),
});
const body = await r.json().catch(() => ({}));
if (!r.ok) throw new Error(body.error || "HTTP " + r.status);
track("CardSearchTranslate", { ask_len: ask.length });
setTranslating(false);
runSyntax(body.syntax, 1);
} catch (e) {
setTranslating(false);
setError(e.message || "Could not translate that. Add more detail, or type Scryfall syntax directly.");
}
}, [text, searching, translating, runSyntax]);
const allCards = result && Array.isArray(result.cards) ? result.cards : [];
// Grid order IS popup order: one flat array, no re-sorting.
const popupCards = allCards.map((c) => ({
name: c.name, image_normal: c.image_normal || c.image_small,
oracle_id: c.oracle_id, type_line: c.type_line,
owned: c.owned, locations: [],
ck_price: c.ck_price, buy_url: c.buy_url,
wantable: !!session && !c.owned && !!c.oracle_id,
clippable: true,
}));
const body = () => {
if (sessionLoading) return
Loading…
;
return (
<>
Card Search BETA
CARD SEARCH
Tell it what you are looking for, in your own words. It writes the
search, checks every result against your stash, and marks what you
already own.
{!session && (
Searching is free, no account needed. Sign up free and
every result gets checked against your own collection: green marks on
cards you already own, so you never buy a card twice.