{/* New wishlist leads the list. At the bottom of a long list
on a phone, the create option and its name box sat under
the keyboard, which read as "can't create a container". */}
{target === "new" && (
setNewName(e.target.value)}
placeholder="Wishlist" aria-label="New wishlist name" autoComplete="off"
style={{
minHeight: 44, boxSizing: "border-box", width: "100%",
border: "2px solid " + T.ink, borderRadius: 8, background: T.bg,
padding: "0 12px", font: "600 15px " + T.sans, color: T.ink,
}} />
)}
{wishlists.map((w) => (
))}
)}
{error && (
{error}
)}
)}
);
}
// ── Start this deck (PRO): the average becomes a real brew container ──────
// Opens from the export bar. On open it runs a brew PREVIEW (POST /api/brew,
// Pro-gated) against the bracket's full_list, then shows an explicit pull
// plan: cards with a copy in a box/binder default to MOVE from that pile;
// copies living only in other decks default to "leave it where it is" so
// starting a deck never silently disassembles another one. Missing cards ride
// along in the saved decklist so the brew's status tracker keeps hunting
// them. Confirm POSTs /api/brew/start with MOVE items only — never the
// oracle-only COPY path (phantom rows).
function StartDeckModal({ sel, cardsMap, commander, onClose }) {
const primaryName = commander
? (commander.partner ? commander.name.replace(" + " + commander.partner.name, "") : commander.name)
: "";
const defaultName = primaryName
? primaryName + (sel && sel.bracket != null ? " Bracket " + sel.bracket + " average" : " average")
: "Average deck";
const [name, setName] = useState(defaultName);
const [preview, setPreview] = useState(null); // null=loading | { rows, missing } | { upgrade } | { error }
const [checked, setChecked] = useState(() => new Set());
const [starting, setStarting] = useState(false);
const [started, setStarted] = useState(null); // { moved } after success
const [error, setError] = useState(null);
// The average as brew items: full_list names resolved to oracle_ids through
// the result's cards map (basics and unhydrated names have no entry there
// and are skipped — they stay in the saved decklist below). Falls back to
// the on-screen list if a stale cache has no full_list. Brew caps at 200.
// Frozen at mount (useState initializer) so the plan the user confirms is
// exactly the plan that was previewed, whatever re-renders around it.
const [plan] = useState(() => {
const lines = (sel && Array.isArray(sel.full_list) && sel.full_list.length > 0)
? sel.full_list
: (sel ? [...(sel.have || []), ...(sel.gap || [])].map((nm) => ({ name: nm, count: 1 })) : []);
const items = [];
for (const l of lines) {
const c = cardsMap[l.name];
if (!c || !c.oracle_id) continue;
items.push({ oracle_id: c.oracle_id, qty: l.count || 1, name: l.name });
if (items.length >= 200) break;
}
const out = [];
if (commander) {
out.push("1 " + primaryName);
if (commander.partner) out.push("1 " + commander.partner.name);
}
for (const l of lines) out.push((l.count || 1) + " " + l.name);
return { items, decklistText: out.join("\n") };
});
const items = plan.items;
const decklistText = plan.decklistText;
// Close is blocked while the start POST is in flight: the server is
// creating a container and moving physical cards, and an invisible success
// invites a retry that starts a duplicate deck.
const startingRef = useRef(false);
const safeClose = () => { if (!startingRef.current) onClose(); };
useEffect(() => {
const onKey = (e) => { if (e.key === "Escape") safeClose(); };
window.addEventListener("keydown", onKey);
lockScroll();
return () => {
window.removeEventListener("keydown", onKey);
unlockScroll();
};
}, []); // eslint-disable-line
// Preview on open. 403 = free tier → the upgrade view, not an error.
useEffect(() => {
let cancelled = false;
(async () => {
try {
if (items.length === 0) {
setPreview({ error: "Nothing in this average resolved to real cards. Run the check again." });
return;
}
const r = await window.ssAuth.authedFetch("/api/brew", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ items: items.map((i) => ({ oracle_id: i.oracle_id, qty: i.qty })) }),
});
const body = await r.json().catch(() => ({}));
if (cancelled) return;
if (r.status === 403) {
setPreview({ upgrade: body.upgrade_url || "/upgrade" });
return;
}
if (!r.ok) throw new Error(body.error || "HTTP " + r.status);
const rows = [];
const missing = [];
const defaults = new Set();
for (const d of body.card_diffs || []) {
const locs = Array.isArray(d.locations) ? d.locations : [];
if (locs.length === 0) { missing.push(d); continue; }
const nonDeck = locs.find((l) => l.kind !== "deck");
const source = nonDeck || locs[0];
const row = {
oracle_id: d.oracle_id,
name: d.name,
qty: Math.max(1, Math.min(d.qty_in_deck || 1, source.qty || 1)),
source,
fromDeck: !nonDeck,
};
rows.push(row);
// Box/binder copies pull in by default; deck-only copies stay put
// unless the user opts in.
if (nonDeck) defaults.add(d.oracle_id);
}
setPreview({ rows, missing });
setChecked(defaults);
} catch (e) {
if (!cancelled) setPreview({ error: e.message || "Couldn't price out the pull plan. Try again." });
}
})();
return () => { cancelled = true; };
}, []); // eslint-disable-line
const toggle = (oid) => setChecked((prev) => {
const next = new Set(prev);
if (next.has(oid)) next.delete(oid); else next.add(oid);
return next;
});
const start = async () => {
if (starting || started || !preview || !preview.rows) return;
setStarting(true);
startingRef.current = true;
setError(null);
try {
const moveItems = preview.rows
.filter((r) => checked.has(r.oracle_id))
.map((r) => ({ oracle_id: r.oracle_id, qty: r.qty, instance_id: r.source.instance_id }));
const r = await window.ssAuth.authedFetch("/api/brew/start", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ items: moveItems, name: name.trim() || defaultName, decklist_text: decklistText }),
});
const body = await r.json().catch(() => ({}));
if (r.status === 403) { setPreview({ upgrade: body.upgrade_url || "/upgrade" }); setStarting(false); return; }
if (!r.ok && r.status !== 207) throw new Error(body.error || "HTTP " + r.status);
setStarted({ moved: body.moved_count != null ? body.moved_count : moveItems.length });
track("BracketizerStartDeck", { bracket: sel && sel.bracket != null ? sel.bracket : "all" });
} catch (e) {
setError(e.message || "Couldn't start the deck. Try again.");
}
setStarting(false);
startingRef.current = false;
};
// Copies, not rows, so the button agrees with the server's moved_count.
const pullCount = preview && preview.rows
? preview.rows.filter((r) => checked.has(r.oracle_id)).reduce((sum, r) => sum + r.qty, 0)
: 0;
const rowStyle = {
display: "flex", alignItems: "center", gap: "0.5rem", minHeight: 44,
padding: "0.1rem 0.2rem", color: T.ink, fontSize: "0.9rem",
};
const groupHead = (label) => (
{sel && sel.bracket != null ? "The bracket " + sel.bracket + " average" : "The average deck"} becomes a real deck in your stash.
{started ? (
Deck started. {started.moved.toLocaleString()} card{started.moved === 1 ? "" : "s"} pulled in.
The rest stay on the deck's build tracker until you find or buy them.
);
}
// ── Floating clip drawer (Dwayne 8-03): a paperclip badge pinned to the top
// corner showing how many cards are clipped, opening the list in place so
// selected-state is always one glance away. ──
function ClipDrawer({ picks, copied, onCopy, onBuyAll, onRemove, onClear, onOpenCard }) {
const [open, setOpen] = useState(false);
if (!picks.length) return null;
return (
{open && (
Your buy list
{picks.map((p) => (
))}
)}
);
}
// ── Card popup (plain mode) ───────────────────────────────────────────
// Same lightbox chrome as synergy.jsx's SynergyCardModal in its plain
// commander mode: just the card, readable, with prev/next arrows walking the
// list it was opened from. Gap and spice rows and the commander hero all
// open here.
function BracketizerCardModal({ cards, startIndex, onClose, onWant, onOwnThis, isWishlisted, isClipped, onToggleClip, suspendKeys }) {
const list = Array.isArray(cards) && cards.length ? cards : [];
const [idx, setIdx] = useState(() => Math.min(Math.max(startIndex || 0, 0), Math.max(list.length - 1, 0)));
const card = list[idx] || {};
const hasPrev = idx > 0;
const hasNext = idx < list.length - 1;
const goPrev = useCallback(() => setIdx((i) => Math.max(0, i - 1)), []);
const goNext = useCallback(() => setIdx((i) => Math.min(list.length - 1, i + 1)), [list.length]);
// Swipe forward/back (Dwayne 8-06, same pattern as the collection
// lightbox): horizontal drag pages, taps and vertical scrolls pass through.
const swipeStart = useRef(null);
const onSwipeTouchStart = (e) => {
if (e.touches && e.touches.length === 1) {
swipeStart.current = { x: e.touches[0].clientX, y: e.touches[0].clientY };
}
};
const onSwipeTouchEnd = (e) => {
const s = swipeStart.current;
swipeStart.current = null;
if (!s || list.length < 2 || !e.changedTouches || !e.changedTouches.length) return;
const dx = e.changedTouches[0].clientX - s.x;
const dy = e.changedTouches[0].clientY - s.y;
if (Math.abs(dx) < 48 || Math.abs(dx) < Math.abs(dy) * 1.5) return;
if (dx < 0) goNext(); else goPrev();
};
useEffect(() => {
const onKey = (e) => {
// The wishlist modal stacks above this popup; its keys win while open.
if (suspendKeys) return;
if (e.key === "Escape") onClose();
else if (e.key === "ArrowLeft") goPrev();
else if (e.key === "ArrowRight") goNext();
};
window.addEventListener("keydown", onKey);
lockScroll();
return () => { window.removeEventListener("keydown", onKey); unlockScroll(); };
}, [onClose, goPrev, goNext, suspendKeys]);
const img = card.image_normal || card.image_small;
// Double-faced cards: Scryfall serves the back face at the same URL with
// /back/ in place of /front/. Probe on card change; single-faced cards 404
// the probe and no flip button appears. Same pattern as the collection
// lightbox.
const [showBack, setShowBack] = useState(false);
const [hasBack, setHasBack] = useState(false);
const backSrc = img && img.indexOf("/front/") >= 0 ? img.replace("/front/", "/back/") : null;
useEffect(() => {
setShowBack(false);
setHasBack(false);
if (!backSrc) return;
let live = true;
const probe = new Image();
probe.onload = () => { if (live) setHasBack(true); };
probe.src = backSrc;
return () => { live = false; };
}, [backSrc]);
return (
);
}
// ── Verdict banner (DISPLAY LAW: renders BEFORE the lists) ────────────
// Headline: the bracket this deck reads as. Sub-line: the overlap ranking.
// Then the money line for the SELECTED bracket, honest about partial pricing
// the same way Synergy Check's banner is.
function VerdictBanner({ result, sel, selLabel }) {
const numbered = (result.brackets || []).filter((b) => b.bracket != null);
const best = numbered.find((b) => b.bracket === result.best_bracket);
const ranked = numbered.slice().sort((a, b) => (b.overlap_pct || 0) - (a.overlap_pct || 0));
const rankLine = ranked.length
? ranked.map((b, i) => i === 0
? (b.overlap_pct || 0) + "% of the " + b.label + " average"
: (b.overlap_pct || 0) + "% of " + b.label).join(", ") + "."
: null;
// Money line for the selected bracket's gap.
const cardsMap = result.cards || {};
const gapNames = (sel && Array.isArray(sel.gap)) ? sel.gap : [];
const gapCount = gapNames.length;
const unowned = gapNames.map((n) => cardsMap[n] || {}).filter((c) => !c.owned);
const priced = unowned.filter((c) => typeof c.ck_price === "number");
const gapCost = Math.round(priced.reduce((sum, c) => sum + c.ck_price, 0));
const isCollection = result.mode === "collection";
let gapLine = null;
let costLine = null;
// Cost to complete: a stat, not a sentence (display law). Rendered big
// below; these lines carry the words around it.
let costStat = null;
if (gapCount === 0) {
gapLine = isCollection
? "You own every card in the " + selLabel + " average. You could sleeve it tonight."
: "The " + selLabel + " average runs nothing this deck does not already have.";
} else {
gapLine = isCollection
? "The " + selLabel + " average runs " + gapCount.toLocaleString() + (gapCount === 1 ? " card" : " cards") + " you do not own."
: "The " + selLabel + " average runs " + gapCount.toLocaleString() + (gapCount === 1 ? " card" : " cards") + " this deck does not.";
if (unowned.length === 0) {
costLine = "You already own every one of them somewhere in your stash.";
} else if (priced.length === 0) {
costLine = "The " + unowned.length.toLocaleString() + " you do not own anywhere have no Card Kingdom price right now.";
}
}
// Two different numbers, two different wants (Dwayne 8-03): the WHOLE deck
// at Card Kingdom (rebuy everything, owned or not) and YOUR gap (only what
// you own nowhere). Owning a card kills the accident, not the option.
const avgAllNames = sel
? [...(Array.isArray(sel.have) ? sel.have : []), ...gapNames]
: [];
const wholePricedCards = avgAllNames.map((n) => cardsMap[n] || {}).filter((c) => typeof c.ck_price === "number");
const wholeCost = Math.round(wholePricedCards.reduce((sum, c) => sum + c.ck_price, 0));
if (wholePricedCards.length > 0) {
costStat = {
whole: wholeCost,
wholeSub: wholePricedCards.length.toLocaleString() + " of " + avgAllNames.length.toLocaleString() + " priced · commander not counted",
gap: gapCost,
gapSub: unowned.length === 0
? "you own every card somewhere"
: unowned.length.toLocaleString() + " unowned"
+ (priced.length < unowned.length ? " · " + priced.length.toLocaleString() + " priced" : ""),
};
}
return (
{best && (
{isCollection
? "Your collection covers the Bracket " + best.bracket + " (" + best.label + ") average best."
: "This deck reads like a Bracket " + best.bracket + " (" + best.label + ") deck."}
)}
{rankLine && (
{rankLine}
)}
{gapLine && (
{gapLine}{costLine ? " " + costLine : ""}
)}
{costStat && (
The whole deck · {selLabel}
${costStat.whole.toLocaleString()}
{costStat.wholeSub}
Your gap
${costStat.gap.toLocaleString()}
{costStat.gapSub}
)}
);
}
// ── Bracket chips row ─────────────────────────────────────────────────
// One chip per entry in the payload's brackets array, "All decks" first.
// Selecting a chip is a DISPLAY SWITCH only: it changes which bracket's
// detail renders below, from data already returned. No network.
function BracketChipsRow({ brackets, selected, onSelect }) {
return (
);
}
// ── Gap row ───────────────────────────────────────────────────────────
// A card the bracket average runs that this deck does not. Owned copies read
// as move-it-in candidates (first location shown); unowned get the CK price,
// Buy link, and paperclip. Tap anywhere on the card to read it big.
function GapRow({ card, onOpen, clipped, onToggleClip }) {
const loc = Array.isArray(card.locations) && card.locations.length ? card.locations[0] : null;
return (
);
}
// ── Spice row ─────────────────────────────────────────────────────────
// A card this deck runs that the bracket average does not. No buy UI: it is
// owned and already in the deck. Tap to read it big.
function SpiceRow({ card, subLine, onOpen }) {
return (
);
}
// ── The floating buy-list bar ─────────────────────────────────────────
function PickBar({ picks, copied, onBuyAll, onCopy, onClear }) {
if (!picks.length) return null;
return (
{picks.length} clipped
);
}
// ── Cut / Add: the two actionable diffs for the selected bracket ──────────
// ADD = cards in the bracket average your deck is missing (the gap).
// CUT = cards in your deck the average does not run (the spice). One tap,
// both lists, each copyable, so you can edit a decklist off it.
function CutAddModal({ label, addCards, cutCards, onClose, onOpenCard, suspendKeys, isClipped, onToggleClip }) {
const [addCopied, setAddCopied] = useState(false);
const [cutCopied, setCutCopied] = useState(false);
useEffect(() => {
// Escape defers to the card popup when it is open on top.
const onKey = (e) => { if (e.key === "Escape" && !suspendKeys) onClose(); };
window.addEventListener("keydown", onKey);
lockScroll();
return () => { window.removeEventListener("keydown", onKey); unlockScroll(); };
}, [onClose, suspendKeys]);
const copyList = (cards, setFlag) => {
try {
if (navigator.clipboard) navigator.clipboard.writeText(cards.map((c) => "1 " + c.name).join("\n"));
setFlag(true);
setTimeout(() => setFlag(false), 1600);
} catch (e) { /* best effort */ }
};
// Rows open the same signature card popup as the rest of the app (tap the
// name/thumb) and show the stash connection (owned = a green check).
const Row = ({ list, i, showClip }) => {
const c = list[i];
return (
Compare a deck you own against the average deck at every bracket, or
brew something new straight from your collection. Every check shows
what you already own, what is missing, and what the gap costs.
);
}
// ── Type sections (same bucketing as synergy.jsx) ─────────────────────
const TYPE_SECTIONS = [
{ key: "creature", label: "Creatures" },
{ key: "instant", label: "Instants" },
{ key: "sorcery", label: "Sorceries" },
{ key: "artifact", label: "Artifacts" },
{ key: "enchantment", label: "Enchantments" },
{ key: "planeswalker", label: "Planeswalkers" },
{ key: "battle", label: "Battles" },
{ key: "land", label: "Lands" },
{ key: "other", label: "Other" },
];
function typeBucket(typeLine) {
const t = String(typeLine || "").split(" // ")[0].toLowerCase();
if (!t) return "other";
if (t.includes("creature")) return "creature";
if (t.includes("land")) return "land";
if (t.includes("instant")) return "instant";
if (t.includes("sorcery")) return "sorcery";
if (t.includes("artifact")) return "artifact";
if (t.includes("enchantment")) return "enchantment";
if (t.includes("planeswalker")) return "planeswalker";
if (t.includes("battle")) return "battle";
return "other";
}
// Group a FLAT list; entries keep their flat index so the popup arrows walk
// the whole section-ordered list straight through the dividers.
function groupByType(cards) {
const buckets = {};
cards.forEach((card, flatIdx) => {
const k = typeBucket(card.type_line);
(buckets[k] = buckets[k] || []).push({ card, flatIdx });
});
return buckets;
}
function BracketizerApp() {
const [session, sessionLoading] = window.ssAuth.useSession();
const [decks, setDecks] = useState(null); // null = loading
const [containerId, setContainerId] = useState("");
// "deck" = grade a saved deck / collection; "paste" = grade a pasted list.
const [mode, setMode] = useState("deck");
const [pasteText, setPasteText] = useState("");
const [commander, setCommander] = useState("");
const [isPartner, setIsPartner] = useState(false);
const [commander2, setCommander2] = useState("");
const [result, setResult] = useState(null);
const [checking, setChecking] = useState(false);
const [error, setError] = useState(null);
// The chip selection: null = All decks, 1-5 = that bracket. Display only.
const [selBracket, setSelBracket] = useState(null);
// The names the current result was checked with (drives the not_found copy).
const checkedRef = useRef(null);
// Card popup: { cards, idx } or null.
const [modal, setModal] = useState(null);
// Guards the prefill against a stale resolve after another deck pick.
const prefillSeq = useRef(0);
// Paperclip buy list (persisted; survives new checks and reloads).
const [picks, setPicks] = useState(loadPicks);
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;
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]);
// Full-average-list copy (rank 5 export bar). Copied-state flip cloned from
// copyPicks; the actual list builds at click time from sel + result below.
const [listCopied, setListCopied] = useState(false);
// Wishlist flow. wishlisted = session-local oracle_ids already added (drives
// the "On your wishlist" state on the popup's Want it button). wishlistModal
// holds the cards the open modal would add. Opening never adds anything;
// only the modal's Add button acts.
const [wishlisted, setWishlisted] = useState(() => new Set());
const [wishlistModal, setWishlistModal] = useState(null); // { cards: [{ oracle_id, name }] } | null
const [ownModal, setOwnModal] = useState(null); // { name, oracle_id } | null
const [startModal, setStartModal] = useState(false); // Start this deck (PRO)
const [cutAddModal, setCutAddModal] = useState(false); // Cut / Add lists
const [collapsedTypes, setCollapsedTypes] = useState(() => new Set());
// "Own this" success: flip the card to owned in place — cards map, the
// gap→have move in every bracket, and the overlap ladder — no 30s re-run.
const markOwnedLocal = (card, containerId, containerName, kind) => {
setResult((prev) => {
if (!prev || prev.status !== "ok") return prev;
const cards = { ...prev.cards };
const c = cards[card.name];
if (c) {
cards[card.name] = {
...c, owned: true,
locations: [{ container_id: containerId, container_name: containerName, kind, quantity: 1 }, ...(c.locations || [])],
};
}
const brackets = (prev.brackets || []).map((b) => {
if (!Array.isArray(b.gap) || !b.gap.includes(card.name)) return b;
const have = [...(b.have || []), card.name];
return {
...b,
gap: b.gap.filter((n) => n !== card.name),
have,
overlap_pct: b.avg_size > 0 ? Math.round((100 * have.length) / b.avg_size) : b.overlap_pct,
};
});
return { ...prev, cards, brackets };
});
};
const toggleType = (key) => setCollapsedTypes((prev) => {
const next = new Set(prev);
if (next.has(key)) next.delete(key); else next.add(key);
return next;
});
const markWishlisted = useCallback((ids) => {
setWishlisted((prev) => {
const next = new Set(prev);
ids.forEach((id) => next.add(id));
return next;
});
}, []);
const isWishlisted = useCallback((oid) => wishlisted.has(oid), [wishlisted]);
const wantCard = useCallback((card) => {
if (!card || !card.oracle_id) return;
setWishlistModal({ cards: [{ oracle_id: card.oracle_id, name: card.name }] });
}, []);
// Auth guard: signed-out visitors go to login with a return path.
useEffect(() => {
if (sessionLoading) return;
if (!session) window.location.href = "/login?next=/bracketizer";
}, [session, sessionLoading]);
// Deep links + last-run restore. ?deck=&commander=(&commander2=)(&bracket=)
// auto-runs the check (arriving with a commander in the URL is an explicit
// ask); ?deck= alone prefills like a picker tap; a bare open prefills the
// form from the last run. Only an explicit commander in the URL ever runs
// a check without a Bracketize tap.
const pendingBracketRef = useRef(null);
const deepLinkedRef = useRef(false);
useEffect(() => {
if (!session || decks === null || deepLinkedRef.current) return;
deepLinkedRef.current = true;
let q = null;
try { q = new URLSearchParams(window.location.search); } catch (e) { return; }
const deck = (q.get("deck") || "").trim();
const cmdr = (q.get("commander") || "").trim();
const cmdr2 = (q.get("commander2") || "").trim();
const br = parseInt(q.get("bracket") || "", 10);
if (Number.isInteger(br) && br >= 1 && br <= 5) pendingBracketRef.current = br;
if (deck) {
if (cmdr) {
setContainerId(deck);
setCommander(cmdr);
if (cmdr2) { setIsPartner(true); setCommander2(cmdr2); }
runCheck(deck, cmdr, cmdr2);
} else {
pickDeck(deck);
}
return;
}
try {
const last = JSON.parse(localStorage.getItem(LAST_RUN_KEY) || "null");
if (last && last.deck && last.commander) {
setContainerId(String(last.deck));
setCommander(last.commander);
if (last.commander2) { setIsPartner(true); setCommander2(last.commander2); }
}
} catch (e) { /* best effort */ }
}, [session, decks, runCheck]);
// Deck picker data: the user's deck-kind containers. Same list endpoint the
// rest of the app uses; wishlists and archived containers never show
// (the list default already excludes archived).
useEffect(() => {
if (!session) return;
let cancelled = false;
(async () => {
try {
const r = await window.ssAuth.authedFetch("/api/containers");
const rows = r.ok ? await r.json() : [];
if (cancelled) return;
const list = (Array.isArray(rows) ? rows : []).filter((c) =>
c && c.kind === "deck" && !c.archived_at && !c.is_wishlist);
setDecks(list);
} catch (e) {
if (!cancelled) setDecks([]);
}
})();
return () => { cancelled = true; };
}, [session]);
// Picking a deck fills the picker and, when Deck Tech has a stored
// commander pick for that container, prefills the commander input(s).
// Prefill only. The check never runs until Bracketize is clicked.
const pickDeck = (id) => {
setContainerId(id);
if (id === "collection") return; // whole-collection mode has no stored commander
const seq = ++prefillSeq.current;
const oid = readDeckTechCommander(id);
const oid2 = readDeckTechPartner(id);
if (!oid && !oid2) return;
(async () => {
try {
if (oid) {
const r = await window.ssAuth.authedFetch("/api/cards/" + encodeURIComponent(oid));
if (r.ok) {
const card = await r.json();
if (prefillSeq.current === seq && card && card.name) setCommander(card.name);
}
}
if (oid2) {
const r2 = await window.ssAuth.authedFetch("/api/cards/" + encodeURIComponent(oid2));
if (r2.ok) {
const card2 = await r2.json();
if (prefillSeq.current === seq && card2 && card2.name) {
setIsPartner(true);
setCommander2(card2.name);
}
}
}
} catch (e) { /* prefill is best effort */ }
})();
};
// The one and only trigger: the Bracketize button.
const runCheck = useCallback(async (cid, name, name2) => {
const q = (name || "").trim();
const q2 = (name2 || "").trim();
if (!cid || !q) return;
setChecking(true);
setError(null);
try {
let url = "/api/bracketizer/check?container_id=" + encodeURIComponent(cid) +
"&commander=" + encodeURIComponent(q);
if (q2) url += "&commander2=" + encodeURIComponent(q2);
const r = await window.ssAuth.authedFetch(url);
if (!r.ok) {
const b = await r.json().catch(() => ({}));
setError(b.error || "Could not run the check. Try again.");
setResult(null);
} else {
const data = await r.json();
setResult(data);
setCollapsedTypes(new Set());
checkedRef.current = { name: q, name2: q2 || null };
if (data.status === "ok") {
const numbered = (data.brackets || []).filter((b) => b.bracket != null);
const best = numbered.find((b) => b.bracket === data.best_bracket);
const pb = pendingBracketRef.current;
pendingBracketRef.current = null;
const chosen = pb != null && numbered.some((b) => b.bracket === pb)
? pb
: (best ? best.bracket : null);
setSelBracket(chosen);
// Remember the run (bare-open prefill) and make the URL shareable.
try { localStorage.setItem(LAST_RUN_KEY, JSON.stringify({ deck: cid, commander: q, commander2: q2 || null })); } catch (e) { /* best effort */ }
try {
const u = new URLSearchParams();
u.set("deck", String(cid));
u.set("commander", q);
if (q2) u.set("commander2", q2);
if (chosen != null) u.set("bracket", String(chosen));
history.replaceState(null, "", window.location.pathname + "?" + u.toString());
} catch (e) { /* cosmetic */ }
// Once per run, with the verdict riding along.
track("BracketizerCheck", {
bracket_best: data.best_bracket,
overlap: best ? (best.overlap_pct || 0) : 0,
});
}
}
} catch (e) {
setError("Could not run the check. Try again.");
setResult(null);
} finally {
setChecking(false);
}
}, []);
// Paste path: same result shape as runCheck, different source. Kept separate
// so the saved-deck path stays untouched; a pasted list has no saved deck, so
// it skips the shareable-URL and last-run remember that only make sense for a
// real container.
const runPasteCheck = useCallback(async (text, name, name2) => {
const q = (name || "").trim();
const q2 = (name2 || "").trim();
if (!text.trim() || !q) return;
setChecking(true);
setError(null);
try {
const r = await window.ssAuth.authedFetch("/api/bracketizer/check-list", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ decklist_text: text, commander: q, commander2: q2 || undefined }),
});
if (!r.ok) {
const b = await r.json().catch(() => ({}));
setError(b.error || "Could not run the check. Try again.");
setResult(null);
} else {
const data = await r.json();
setResult(data);
setCollapsedTypes(new Set());
checkedRef.current = { name: q, name2: q2 || null };
if (data.status === "ok") {
const numbered = (data.brackets || []).filter((b) => b.bracket != null);
const best = numbered.find((b) => b.bracket === data.best_bracket);
const pb = pendingBracketRef.current;
pendingBracketRef.current = null;
const chosen = pb != null && numbered.some((b) => b.bracket === pb) ? pb : (best ? best.bracket : null);
setSelBracket(chosen);
track("BracketizerCheck", {
source: "paste",
bracket_best: data.best_bracket,
overlap: best ? (best.overlap_pct || 0) : 0,
});
}
}
} catch (e) {
setError("Could not run the check. Try again.");
setResult(null);
} finally {
setChecking(false);
}
}, []);
const submit = (e) => {
e.preventDefault();
if (mode === "paste") runPasteCheck(pasteText, commander, isPartner ? commander2 : "");
else runCheck(containerId, commander, isPartner ? commander2 : "");
};
// Chip taps keep the shareable URL current (only once a result is up).
useEffect(() => {
if (!result || result.status !== "ok") return;
try {
const u = new URLSearchParams(window.location.search);
if (!u.get("deck")) return; // URL not stamped by a run yet
if (selBracket == null) u.delete("bracket"); else u.set("bracket", String(selBracket));
history.replaceState(null, "", window.location.pathname + "?" + u.toString());
} catch (e) { /* cosmetic */ }
}, [selBracket, result]);
// The full average as a copyable decklist: commander line(s) from the
// result, then the server's full_list (counts + basics included). Stale
// cached JS or a legacy response shape falls back to the on-screen average
// at count 1 so the button never goes dead.
const copyFullList = () => {
if (!sel) return;
const lines = [];
if (result && result.commander) {
const c = result.commander;
const primaryName = c.partner ? c.name.replace(" + " + c.partner.name, "") : c.name;
lines.push("1 " + primaryName);
if (c.partner) lines.push("1 " + c.partner.name);
}
if (Array.isArray(sel.full_list) && sel.full_list.length > 0) {
for (const l of sel.full_list) lines.push((l.count || 1) + " " + l.name);
} else {
for (const c of avgCards) lines.push("1 " + c.name);
}
try {
if (navigator.clipboard) navigator.clipboard.writeText(lines.join("\n"));
setListCopied(true);
setTimeout(() => setListCopied(false), 1600);
track("BracketizerCopyList", { bracket: sel.bracket == null ? "all" : sel.bracket });
} catch (e) { /* best effort */ }
};
const status = result && result.status;
const brackets = (status === "ok" && Array.isArray(result.brackets)) ? result.brackets : [];
const cardsMap = (status === "ok" && result.cards) ? result.cards : {};
const sel = brackets.find((b) => (b.bracket == null ? null : b.bracket) === selBracket) || brackets[0] || null;
const selLabel = sel ? (sel.bracket == null ? "All decks" : sel.label) : "";
const spiceSub = sel && sel.bracket != null
? "not in the bracket " + sel.bracket + " average"
: "not in the average deck";
// Sorted into type-section order so the popup arrows walk the list exactly
// as it reads on screen, straight through the dividers.
const sectionRank = (c) => {
const i = TYPE_SECTIONS.findIndex((s) => s.key === typeBucket(c.type_line));
return i < 0 ? TYPE_SECTIONS.length : i;
};
const gapCards = sel
? sel.gap.map((n) => Object.assign({ name: n }, cardsMap[n] || {})).sort((a, b) => sectionRank(a) - sectionRank(b))
: [];
const spiceCards = sel
? sel.spice.map((n) => Object.assign({ name: n }, cardsMap[n] || {})).sort((a, b) => sectionRank(a) - sectionRank(b))
: [];
// The COMPLETE average list: owned cards (checked off, with locations)
// alongside the missing ones. Owned-first within each type section.
const haveCards = sel && Array.isArray(sel.have)
? sel.have.map((n) => Object.assign({ name: n }, cardsMap[n] || {}))
: [];
const avgCards = [...haveCards, ...gapCards].sort((a, b) =>
(sectionRank(a) - sectionRank(b)) || ((b.owned ? 1 : 0) - (a.owned ? 1 : 0)));
// The selected bracket's gap cards the user does not own anywhere. Cards
// without an oracle_id can't become wishlist rows and are skipped silently.
const gapWishlistCards = gapCards
.filter((c) => c.owned === false && c.oracle_id)
.map((c) => ({ oracle_id: c.oracle_id, name: c.name }));
const allGapWished = gapWishlistCards.length > 0 && gapWishlistCards.every((c) => wishlisted.has(c.oracle_id));
// Popup lists: plain-mode cards, arrows walk the section the tap came from.
// Gap cards carry the wishlist bits so the popup can offer Want it on
// unowned ones.
// The full popup shape (image, ownership, locations, price, buy, want) so
// every card surface opens the same signature popup and shows the stash
// connection. Shared by the average-deck rows and the Cut/Add lists.
const toPopupCard = (c) => ({
name: c.name, image_normal: c.image_normal,
oracle_id: c.oracle_id || null,
type_line: c.type_line || null,
synergy_pct: typeof c.synergy_pct === "number" ? c.synergy_pct : null,
inclusion_rate: typeof c.inclusion_rate === "number" ? c.inclusion_rate : null,
clippable: true,
owned: c.owned === true,
locations: Array.isArray(c.locations) ? c.locations : [],
ck_price: typeof c.ck_price === "number" ? c.ck_price : null,
buy_url: c.buy_url || null,
wantable: c.owned === false && !!c.oracle_id,
});
const openGap = (idx) => setModal({ cards: avgCards.map(toPopupCard), idx });
const openCutAddCard = (cards, idx) => setModal({ cards: cards.map(toPopupCard), idx });
// Buy-list row tap: open the popup, hydrated from the current result's card
// map when the card is still on screen, else a minimal name+buy card.
const openPickCard = (pick) => {
const c = cardsMap[pick.name];
const card = c
? toPopupCard({ name: pick.name, ...c })
: { name: pick.name, oracle_id: pick.oracle_id || null, buy_url: pick.buy_url || null, image_normal: null, clippable: true, owned: false, locations: [] };
setModal({ cards: [card], idx: 0 });
};
const openSpice = (idx) => setModal({
cards: spiceCards.map((c) => ({
name: c.name, image_normal: c.image_normal,
type_line: c.type_line || null, sub: spiceSub,
clippable: true,
})), idx,
});
// The commander (and partner) as popup-openable cards, same as synergy.jsx:
// the route names a pair "A + B", so the primary's own name is the pair
// minus the partner.
const cmdCards = (() => {
if (status !== "ok" || !result.commander) return [];
const c = result.commander;
const primaryName = c.partner ? c.name.replace(" + " + c.partner.name, "") : c.name;
return [
{ name: primaryName, image_normal: c.image_normal },
c.partner ? { name: c.partner.name, image_normal: c.partner.image_normal } : null,
].filter((x) => x && x.image_normal);
})();
const body = () => {
if (sessionLoading) return