392 lines
12 KiB
TypeScript
392 lines
12 KiB
TypeScript
|
import { useEffect, useState } from "react";
|
|||
|
|
import { api, Deck, LibraryCard, LibraryFacets, LibraryFilter } from "../api";
|
|||
|
|
import {
|
|||
|
|
CardThumb,
|
|||
|
|
CardTile,
|
|||
|
|
ColorPips,
|
|||
|
|
ColorToggles,
|
|||
|
|
GroupBySelect,
|
|||
|
|
GroupMode,
|
|||
|
|
IconButton,
|
|||
|
|
Icons,
|
|||
|
|
QtyStepper,
|
|||
|
|
SortBySelect,
|
|||
|
|
SortDir,
|
|||
|
|
SortMode,
|
|||
|
|
TagInput,
|
|||
|
|
ViewToggle,
|
|||
|
|
groupCards,
|
|||
|
|
sortCards,
|
|||
|
|
usePersistedState,
|
|||
|
|
useViewMode,
|
|||
|
|
} from "../components";
|
|||
|
|
|
|||
|
|
// Server-side cap on results — this browses the whole ~30k-card reference
|
|||
|
|
// db, not just what's owned, so an unbounded/loose filter needs a limit.
|
|||
|
|
const CAP = 300;
|
|||
|
|
|
|||
|
|
const NO_FACETS: LibraryFacets = { types: [], subtypes: [], keywords: [] };
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Browse the whole downloaded card universe (every card in reference.db,
|
|||
|
|
* owned or not) — the Library tab's sibling, reusing its filter/group/sort/
|
|||
|
|
* list/tiles machinery. Results are annotated with ownership: an "Owned ×N"
|
|||
|
|
* stepper and any decks the card is already in.
|
|||
|
|
*
|
|||
|
|
* `onOfferUndo` is threaded in from `App`, same as `LibraryBrowser`, so the
|
|||
|
|
* "Add to deck" undo is also reachable from the command palette.
|
|||
|
|
*/
|
|||
|
|
export function CardSearch({
|
|||
|
|
onOfferUndo,
|
|||
|
|
}: {
|
|||
|
|
onOfferUndo: (message: string, run: () => void | Promise<void>) => void;
|
|||
|
|
}) {
|
|||
|
|
const [text, setText] = useState("");
|
|||
|
|
const [commander, setCommander] = useState(0);
|
|||
|
|
const [colorsInclude, setColorsInclude] = useState(0);
|
|||
|
|
const [cmcMin, setCmcMin] = useState("");
|
|||
|
|
const [cmcMax, setCmcMax] = useState("");
|
|||
|
|
const [types, setTypes] = useState<string[]>([]);
|
|||
|
|
const [subtypes, setSubtypes] = useState<string[]>([]);
|
|||
|
|
const [keywords, setKeywords] = useState<string[]>([]);
|
|||
|
|
const [oracleText, setOracleText] = useState("");
|
|||
|
|
const [facets, setFacets] = useState<LibraryFacets>(NO_FACETS);
|
|||
|
|
|
|||
|
|
const [decks, setDecks] = useState<Deck[]>([]);
|
|||
|
|
const [deckId, setDeckId] = useState<number | "">("");
|
|||
|
|
const [rows, setRows] = useState<LibraryCard[]>([]);
|
|||
|
|
const [error, setError] = useState<string | null>(null);
|
|||
|
|
const [busy, setBusy] = useState<Set<string>>(new Set());
|
|||
|
|
const [refreshKey, setRefreshKey] = useState(0);
|
|||
|
|
|
|||
|
|
const [view, setView] = useViewMode("cardsearch-view");
|
|||
|
|
const [groupBy, setGroupBy] = usePersistedState<GroupMode>("cardsearch-group", "none");
|
|||
|
|
const [sortBy, setSortBy] = usePersistedState<SortMode>("cardsearch-sort", "name");
|
|||
|
|
const [sortDir, setSortDir] = usePersistedState<SortDir>("cardsearch-sort-dir", "asc");
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
api.listDecks().then(setDecks);
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
api.getReferenceFacets().then(setFacets).catch(() => setFacets(NO_FACETS));
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const hasActiveFilter =
|
|||
|
|
text.trim() !== "" ||
|
|||
|
|
commander !== 0 ||
|
|||
|
|
colorsInclude !== 0 ||
|
|||
|
|
cmcMin !== "" ||
|
|||
|
|
cmcMax !== "" ||
|
|||
|
|
types.length > 0 ||
|
|||
|
|
subtypes.length > 0 ||
|
|||
|
|
keywords.length > 0 ||
|
|||
|
|
oracleText.trim() !== "";
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!hasActiveFilter) {
|
|||
|
|
setRows([]);
|
|||
|
|
setError(null);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
const filter: LibraryFilter = {
|
|||
|
|
text: text.trim() || null,
|
|||
|
|
commander_identity: commander || null,
|
|||
|
|
colors_include: colorsInclude || null,
|
|||
|
|
cmc_min: cmcMin === "" ? null : Number(cmcMin),
|
|||
|
|
cmc_max: cmcMax === "" ? null : Number(cmcMax),
|
|||
|
|
types,
|
|||
|
|
subtypes,
|
|||
|
|
keywords,
|
|||
|
|
oracle_text: oracleText.trim() || null,
|
|||
|
|
};
|
|||
|
|
const t = setTimeout(() => {
|
|||
|
|
api
|
|||
|
|
.searchReference(filter, CAP)
|
|||
|
|
.then((r) => {
|
|||
|
|
setRows(r);
|
|||
|
|
setError(null);
|
|||
|
|
})
|
|||
|
|
.catch((e) => {
|
|||
|
|
setRows([]);
|
|||
|
|
setError(String(e));
|
|||
|
|
});
|
|||
|
|
}, 120);
|
|||
|
|
return () => clearTimeout(t);
|
|||
|
|
}, [
|
|||
|
|
hasActiveFilter,
|
|||
|
|
text,
|
|||
|
|
commander,
|
|||
|
|
colorsInclude,
|
|||
|
|
cmcMin,
|
|||
|
|
cmcMax,
|
|||
|
|
types,
|
|||
|
|
subtypes,
|
|||
|
|
keywords,
|
|||
|
|
oracleText,
|
|||
|
|
refreshKey,
|
|||
|
|
]);
|
|||
|
|
|
|||
|
|
async function adjust(oracleId: string, delta: number) {
|
|||
|
|
const qty = await api.addOwned(oracleId, delta);
|
|||
|
|
setRows((rs) => rs.map((c) => (c.oracle_id === oracleId ? { ...c, quantity_owned: qty } : c)));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Add one copy of `c` to the deck picked in the toolbar. Snapshots the
|
|||
|
|
* card's prior deck_cards row (or absence of one) first and offers an
|
|||
|
|
* "Undo" that restores exactly that prior state — same pattern as
|
|||
|
|
* `LibraryBrowser.bulkAddToDeck`.
|
|||
|
|
*/
|
|||
|
|
async function addToDeck(c: LibraryCard) {
|
|||
|
|
if (deckId === "") return;
|
|||
|
|
const deck = decks.find((d) => d.id === deckId);
|
|||
|
|
if (!deck) return;
|
|||
|
|
setBusy((b) => new Set(b).add(c.oracle_id));
|
|||
|
|
try {
|
|||
|
|
const before = await api.deckContents(deck.id);
|
|||
|
|
const prev = before.find((e) => e.oracle_id === c.oracle_id);
|
|||
|
|
await api.setDeckCard(deck.id, c.oracle_id, 1, false, false);
|
|||
|
|
setRefreshKey((k) => k + 1);
|
|||
|
|
onOfferUndo(`Added ${c.name} to ${deck.name}.`, async () => {
|
|||
|
|
await api.setDeckCard(
|
|||
|
|
deck.id,
|
|||
|
|
c.oracle_id,
|
|||
|
|
prev?.quantity ?? 0,
|
|||
|
|
prev?.is_commander ?? false,
|
|||
|
|
prev?.is_maybeboard ?? false,
|
|||
|
|
);
|
|||
|
|
setRefreshKey((k) => k + 1);
|
|||
|
|
});
|
|||
|
|
} finally {
|
|||
|
|
setBusy((b) => {
|
|||
|
|
const next = new Set(b);
|
|||
|
|
next.delete(c.oracle_id);
|
|||
|
|
return next;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function refTable(cards: LibraryCard[]) {
|
|||
|
|
return (
|
|||
|
|
<table>
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th></th>
|
|||
|
|
<th>Colors</th>
|
|||
|
|
<th>Name</th>
|
|||
|
|
<th>Type</th>
|
|||
|
|
<th>MV</th>
|
|||
|
|
<th>Owned</th>
|
|||
|
|
<th>In decks</th>
|
|||
|
|
<th></th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
{cards.map((c) => (
|
|||
|
|
<tr key={c.oracle_id}>
|
|||
|
|
<td>
|
|||
|
|
<CardThumb card={c} />
|
|||
|
|
</td>
|
|||
|
|
<td>
|
|||
|
|
<ColorPips mask={c.color_identity} />
|
|||
|
|
</td>
|
|||
|
|
<td className="card-name">{c.name}</td>
|
|||
|
|
<td className="card-type">{c.type_line}</td>
|
|||
|
|
<td>{c.mana_value}</td>
|
|||
|
|
<td>
|
|||
|
|
<QtyStepper
|
|||
|
|
value={c.quantity_owned}
|
|||
|
|
onDecrement={() => adjust(c.oracle_id, -1)}
|
|||
|
|
onIncrement={() => adjust(c.oracle_id, 1)}
|
|||
|
|
/>
|
|||
|
|
</td>
|
|||
|
|
<td>
|
|||
|
|
{c.decks.map((d) => (
|
|||
|
|
<span key={d} className="deck-chip">
|
|||
|
|
{d}
|
|||
|
|
</span>
|
|||
|
|
))}
|
|||
|
|
</td>
|
|||
|
|
<td>
|
|||
|
|
<button
|
|||
|
|
onClick={() => addToDeck(c)}
|
|||
|
|
disabled={deckId === "" || busy.has(c.oracle_id)}
|
|||
|
|
title={deckId === "" ? "Choose a deck above first" : "Add 1 copy to the selected deck"}
|
|||
|
|
>
|
|||
|
|
Add to deck
|
|||
|
|
</button>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
))}
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function refTiles(cards: LibraryCard[]) {
|
|||
|
|
return (
|
|||
|
|
<div className="tile-grid">
|
|||
|
|
{cards.map((c) => (
|
|||
|
|
<CardTile
|
|||
|
|
key={c.oracle_id}
|
|||
|
|
card={c}
|
|||
|
|
corner={
|
|||
|
|
<QtyStepper
|
|||
|
|
overlay
|
|||
|
|
value={c.quantity_owned}
|
|||
|
|
onDecrement={() => adjust(c.oracle_id, -1)}
|
|||
|
|
onIncrement={() => adjust(c.oracle_id, 1)}
|
|||
|
|
/>
|
|||
|
|
}
|
|||
|
|
cornerBottomLeft={
|
|||
|
|
<IconButton
|
|||
|
|
icon={Icons.cards}
|
|||
|
|
label="Add to deck"
|
|||
|
|
onClick={() => addToDeck(c)}
|
|||
|
|
disabled={deckId === "" || busy.has(c.oracle_id)}
|
|||
|
|
overlay
|
|||
|
|
/>
|
|||
|
|
}
|
|||
|
|
footer={
|
|||
|
|
c.decks.length > 0
|
|||
|
|
? c.decks.map((d) => (
|
|||
|
|
<span key={d} className="deck-chip">
|
|||
|
|
{d}
|
|||
|
|
</span>
|
|||
|
|
))
|
|||
|
|
: undefined
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const groups = groupCards(sortCards(rows, sortBy, sortDir), groupBy);
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<div className="row" style={{ justifyContent: "space-between", marginBottom: 12 }}>
|
|||
|
|
<h2 style={{ margin: 0 }}>
|
|||
|
|
Card Search {hasActiveFilter && <span className="badge">{rows.length}</span>}
|
|||
|
|
</h2>
|
|||
|
|
<div className="row" style={{ gap: 16 }}>
|
|||
|
|
<select
|
|||
|
|
value={deckId}
|
|||
|
|
onChange={(e) => setDeckId(e.target.value === "" ? "" : Number(e.target.value))}
|
|||
|
|
>
|
|||
|
|
<option value="">Add to deck…</option>
|
|||
|
|
{decks.map((d) => (
|
|||
|
|
<option key={d.id} value={d.id}>
|
|||
|
|
{d.name}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
<GroupBySelect value={groupBy} onChange={setGroupBy} />
|
|||
|
|
<SortBySelect
|
|||
|
|
value={sortBy}
|
|||
|
|
dir={sortDir}
|
|||
|
|
onChangeValue={setSortBy}
|
|||
|
|
onToggleDir={() => setSortDir(sortDir === "asc" ? "desc" : "asc")}
|
|||
|
|
/>
|
|||
|
|
<ViewToggle mode={view} onChange={setView} />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="filters">
|
|||
|
|
<div className="field">
|
|||
|
|
<label>Name contains</label>
|
|||
|
|
<input value={text} onChange={(e) => setText(e.target.value)} placeholder="e.g. bolt" />
|
|||
|
|
</div>
|
|||
|
|
<div className="field">
|
|||
|
|
<label>Playable in commander (color identity ⊆)</label>
|
|||
|
|
<ColorToggles value={commander} onChange={setCommander} />
|
|||
|
|
</div>
|
|||
|
|
<div className="field">
|
|||
|
|
<label>Includes colors</label>
|
|||
|
|
<ColorToggles value={colorsInclude} onChange={setColorsInclude} />
|
|||
|
|
</div>
|
|||
|
|
<div className="field">
|
|||
|
|
<label>Mana value</label>
|
|||
|
|
<div className="row">
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
style={{ width: 70 }}
|
|||
|
|
placeholder="min"
|
|||
|
|
value={cmcMin}
|
|||
|
|
onChange={(e) => setCmcMin(e.target.value)}
|
|||
|
|
/>
|
|||
|
|
<span className="muted">–</span>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
style={{ width: 70 }}
|
|||
|
|
placeholder="max"
|
|||
|
|
value={cmcMax}
|
|||
|
|
onChange={(e) => setCmcMax(e.target.value)}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="field">
|
|||
|
|
<label>Type(s)</label>
|
|||
|
|
<TagInput values={types} onChange={setTypes} suggestions={facets.types} placeholder="Creature…" />
|
|||
|
|
</div>
|
|||
|
|
<div className="field">
|
|||
|
|
<label>Subtype(s)</label>
|
|||
|
|
<TagInput
|
|||
|
|
values={subtypes}
|
|||
|
|
onChange={setSubtypes}
|
|||
|
|
suggestions={facets.subtypes}
|
|||
|
|
placeholder="Elf…"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="field">
|
|||
|
|
<label>Keyword(s)</label>
|
|||
|
|
<TagInput
|
|||
|
|
values={keywords}
|
|||
|
|
onChange={setKeywords}
|
|||
|
|
suggestions={facets.keywords}
|
|||
|
|
placeholder="Flying…"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="field">
|
|||
|
|
<label>Oracle text</label>
|
|||
|
|
<input
|
|||
|
|
value={oracleText}
|
|||
|
|
onChange={(e) => setOracleText(e.target.value)}
|
|||
|
|
placeholder="e.g. landfall"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{!hasActiveFilter ? (
|
|||
|
|
<p className="hint">
|
|||
|
|
Search the full card database — type a name or choose filters below to get started.
|
|||
|
|
</p>
|
|||
|
|
) : error ? (
|
|||
|
|
<p className="hint">{error}</p>
|
|||
|
|
) : rows.length === 0 ? (
|
|||
|
|
<p className="hint">No cards match your filters.</p>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
{rows.length === CAP && (
|
|||
|
|
<p className="hint">
|
|||
|
|
Showing the first {CAP} matches — refine your search to narrow it down.
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
{groups.map((g) => (
|
|||
|
|
<div key={g.label || "all"} style={{ marginBottom: g.label ? 20 : 0 }}>
|
|||
|
|
{g.label && (
|
|||
|
|
<h3 className="group-header">
|
|||
|
|
{g.label} <span className="badge">{g.cards.length}</span>
|
|||
|
|
</h3>
|
|||
|
|
)}
|
|||
|
|
{view === "list" ? refTable(g.cards) : refTiles(g.cards)}
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|