);
}
// Color identity pips on the meta row.
function Pips({ letters }) {
const list = String(letters || "").toUpperCase().split("").filter((l) => PIP_COLORS[l]);
if (!list.length) return null;
return (
{list.map((l, i) => (
))}
);
}
// Overlapping thumbnails, up to four, "+N" chip beyond. Tapping one only
// opens the popup (selection never fires actions).
function CardThumbs({ cards, onOpen }) {
const shown = cards.slice(0, 4);
const extra = cards.length - shown.length;
return (
);
}
// Signed-in ownership strip: the verdict Spellstash adds on top of the combo
// data. Owned pieces show where they live; missing pieces get a price and a
// buy path. Never rendered when the ownership check is degraded.
function OwnershipStrip({ cards }) {
const owned = cards.filter((c) => c.owned);
const missing = cards.filter((c) => !c.owned);
const allPriced = missing.length > 0 && missing.every((c) => typeof c.ck_price === "number");
const finishSum = allPriced ? missing.reduce((s, c) => s + c.ck_price, 0) : null;
return (
);
}
// Anon demo: SHOW the ownership overlay with a real combo (Basalt Monolith +
// Forsaken Monument) instead of describing it. Static by design; hidden the
// moment a session exists.
function DemoPanel() {
return (
Example
You own 1 of 2
✓ Basalt Monolith is in Trade Binder.
Forsaken Monument is missing, $4.99 at Card Kingdom.
Sign in and combos check against your whole collection. Owned pieces
show the exact box they live in.
);
}
// Visible FAQ. Must mirror the FAQPage JSON-LD in combos.html word for word.
const FAQS = [
{
q: "How do I find the combos in my Commander deck?",
a: "Switch to Check a deck, add your commander, paste your list, and hit Find combos in this deck. You get the combos your deck can run now, plus the ones that are one or two cards away.",
},
{
q: "Where does the combo data come from?",
a: "Commander Spellbook, the community combo database. Each combo here links back to their site for full steps. If a combo is missing there, it will be missing here too.",
},
{
q: "Can Spellstash show which combo pieces I already own?",
a: "Yes. Sign in with a free account and combos check against your whole collection. Owned pieces show the exact deck, binder, or box they live in.",
},
{
q: "What do the bracket labels mean?",
a: "They are Commander Spellbook's bracket tags for how hard a combo pushes a deck under the Commander Brackets system. Ruthless means bracket 4 territory. Treat them as a guide, not a ruling.",
},
];
function FaqSection() {
return (
FAQ
{FAQS.map((f) => (
{f.q}
{f.a}
))}
);
}
function CombosApp() {
const [session, sessionLoading] = window.ssAuth.useSession();
const [mode, setMode] = useState("search");
// Search state.
const [card, setCard] = useState("");
const [ci, setCi] = useState([]); // uppercase letters; C is exclusive
const [resultFilter, setResultFilter] = useState("");
const [budget, setBudget] = useState("");
const [res, setRes] = useState(null);
const [ran, setRan] = useState(null); // params the loaded pages ran under
const [page, setPage] = useState(1);
const [searching, setSearching] = useState(false);
const [error, setError] = useState(null);
const [moreError, setMoreError] = useState(null);
// Deck state.
const [commander, setCommander] = useState("");
const [deckText, setDeckText] = useState("");
const [deckRes, setDeckRes] = useState(null);
const [checking, setChecking] = useState(false);
const [deckError, setDeckError] = useState(null);
// Popup state.
const [modal, setModal] = useState(null); // { cards, idx }
const [wishlisted, setWishlisted] = useState(() => new Set());
const [wishlistModal, setWishlistModal] = useState(null);
const [ownModal, setOwnModal] = useState(null);
// Latest search wins: a pick made while the mount-time feed is still loading
// must run, and its response must not be clobbered by the stale request.
const seqRef = useRef(0);
const runSearch = useCallback(async (params, pageNum) => {
const seq = ++seqRef.current;
setSearching(true);
if (pageNum === 1) { setError(null); setMoreError(null); setRes(null); }
else setMoreError(null);
try {
const qs = [];
if (params.card) qs.push("card=" + encodeURIComponent(params.card));
if (params.ci) qs.push("ci=" + encodeURIComponent(params.ci));
if (params.result) qs.push("result=" + encodeURIComponent(params.result));
if (params.budget) qs.push("budget=" + encodeURIComponent(params.budget));
qs.push("page=" + pageNum);
const r = await window.ssAuth.authedFetch("/api/combos/search?" + qs.join("&"));
const body = await r.json().catch(() => ({}));
if (seq !== seqRef.current) return;
if (!r.ok) {
throw new Error(r.status === 503
? "Combo data is catching its breath. Try again in a minute."
: (body.error || "Combo search hiccuped. Try again in a moment."));
}
setRan(params);
setPage(pageNum);
setRes((prev) => pageNum > 1 && prev
? { ...body, combos: [...prev.combos, ...body.combos] }
: body);
track("ComboFinderSearch", {
has_card: params.card ? "yes" : "no",
ci: params.ci || "",
result: params.result || "",
budget: params.budget || "",
page: pageNum,
});
} catch (e) {
if (seq !== seqRef.current) return;
if (pageNum === 1) { setError(e.message || "Combo search hiccuped. Try again in a moment."); setRes(null); }
else setMoreError(e.message || "Couldn't load more. Try again.");
}
if (seq === seqRef.current) setSearching(false);
}, []);
const buildParams = useCallback((cardOverride) => ({
card: String(cardOverride != null ? cardOverride : card).trim().slice(0, 120),
ci: ci.length ? ci.join("").toLowerCase() : "",
result: resultFilter,
budget: budget,
}), [card, ci, resultFilter, budget]);
const commit = useCallback((cardOverride) => {
runSearch(buildParams(cardOverride), 1);
}, [buildParams, runSearch]);
// Land on the popular feed instantly; wait for the session so a signed-in
// visitor's very first page carries the ownership overlay.
const didInit = useRef(false);
useEffect(() => {
if (sessionLoading || didInit.current) return;
didInit.current = true;
track("ComboFinderView", { signed: session ? "yes" : "no" });
runSearch({ card: "", ci: "", result: "", budget: "" }, 1);
}, [sessionLoading, session, runSearch]);
// C means colorless and cannot mix with colors: tapping C clears the color
// chips, tapping any color clears C.
const toggleCi = (letter) => {
setCi((prev) => {
if (letter === "C") return prev.includes("C") ? [] : ["C"];
const colors = prev.filter((x) => x !== "C");
return colors.includes(letter) ? colors.filter((x) => x !== letter) : [...colors, letter];
});
};
const runDeck = useCallback(async () => {
if (checking) return;
const cmd = commander.trim().slice(0, 120);
if (!cmd) { setDeckError("Add a commander first."); setDeckRes(null); return; }
if (!deckText.trim()) { setDeckError("Paste your list first."); setDeckRes(null); return; }
setChecking(true); setDeckError(null); setDeckRes(null);
const lines = deckText.split("\n").filter((l) => l.trim()).length;
try {
const r = await window.ssAuth.authedFetch("/api/combos/deck", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ commander: cmd, deck_text: deckText }),
});
const body = await r.json().catch(() => ({}));
if (!r.ok) {
throw new Error(r.status === 503
? "Combo data is catching its breath. Try again in a minute."
: (body.error || "Combo search hiccuped. Try again in a moment."));
}
setDeckRes(body);
track("ComboFinderDeckCheck", { lines });
} catch (e) {
setDeckError(e.message || "Combo search hiccuped. Try again in a moment.");
}
setChecking(false);
}, [checking, commander, deckText]);
// Own-this filing marks the card owned everywhere it appears, including the
// open popup, without refetching.
const markOwned = useCallback((name) => {
const stamp = (c) => (c.name === name ? { ...c, owned: true } : c);
setRes((prev) => prev
? { ...prev, combos: (prev.combos || []).map((cb) => ({ ...cb, cards: (cb.cards || []).map(stamp) })) }
: prev);
setDeckRes((prev) => prev
? {
...prev,
included: (prev.included || []).map((cb) => ({ ...cb, cards: (cb.cards || []).map(stamp) })),
almost_included: (prev.almost_included || []).map((cb) => ({ ...cb, cards: (cb.cards || []).map(stamp) })),
}
: prev);
setModal((prev) => (prev ? { ...prev, cards: prev.cards.map(stamp) } : prev));
}, []);
const openCard = useCallback((cards, idx, degraded) => setModal({ cards, idx, degraded: !!degraded }), []);
// Popup order IS the combo's card order (lookup.jsx pattern). When the
// ownership check was degraded, a missing owned flag means "unknown", not
// "not owned": keep buy paths but never offer Want/Own off a degraded read.
const popupCards = modal
? modal.cards.map((c) => ({
name: c.name,
image_normal: c.image_normal || c.image_small || null,
oracle_id: c.oracle_id || null,
type_line: c.type_line || null,
owned: !modal.degraded && c.owned === true,
locations: [],
ck_price: typeof c.ck_price === "number" ? c.ck_price : null,
buy_url: c.buy_url || null,
wantable: !!session && !modal.degraded && !c.owned && !!c.oracle_id,
clippable: false,
}))
: [];
const combos = res && Array.isArray(res.combos) ? res.combos : [];
const isPopular = !ran || (!ran.card && !ran.ci && !ran.result && !ran.budget);
const included = deckRes && Array.isArray(deckRes.included) ? deckRes.included : [];
const almostIncluded = deckRes && Array.isArray(deckRes.almost_included) ? deckRes.almost_included : [];
const sectionHead = {
font: "700 13px " + T.mono, color: T.ink2, margin: "1rem 0 0.2rem",
textTransform: "uppercase", letterSpacing: "0.05em",
};
const searchRows = [];
combos.forEach((cb, i) => {
searchRows.push(
);
});
if (!session && !sessionLoading && searchRows.length > 0) {
searchRows.splice(Math.min(3, searchRows.length), 0, );
}
const searchView = (
<>