378 lines
11 KiB
TypeScript
378 lines
11 KiB
TypeScript
|
import { useEffect, useState, useCallback } from "react";
|
|||
|
|
import { api, CardRef, Deck, DeckEntry } from "../api";
|
|||
|
|
import {
|
|||
|
|
CardSearchBox,
|
|||
|
|
CardThumb,
|
|||
|
|
CardTile,
|
|||
|
|
ColorPips,
|
|||
|
|
GroupBySelect,
|
|||
|
|
GroupMode,
|
|||
|
|
ViewToggle,
|
|||
|
|
groupCards,
|
|||
|
|
usePersistedState,
|
|||
|
|
useViewMode,
|
|||
|
|
} from "../components";
|
|||
|
|
|
|||
|
|
const FORMATS = [
|
|||
|
|
"",
|
|||
|
|
"Commander",
|
|||
|
|
"Brawl",
|
|||
|
|
"Standard",
|
|||
|
|
"Pioneer",
|
|||
|
|
"Modern",
|
|||
|
|
"Legacy",
|
|||
|
|
"Vintage",
|
|||
|
|
"Pauper",
|
|||
|
|
"Other",
|
|||
|
|
];
|
|||
|
|
const COMMANDER_FORMATS = ["Commander", "Brawl"];
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* Deck editor. A deck's cards are split into two groups — "In your library"
|
|||
|
|
* (owned) and "Not owned" — each with its own search box, and each groupable by
|
|||
|
|
* card attribute. Deck-level format + commander metadata sit at the top.
|
|||
|
|
*/
|
|||
|
|
export function DeckView() {
|
|||
|
|
const [decks, setDecks] = useState<Deck[]>([]);
|
|||
|
|
const [selected, setSelected] = usePersistedState<number | null>("deck-selected", null);
|
|||
|
|
const [newName, setNewName] = useState("");
|
|||
|
|
const [contents, setContents] = useState<DeckEntry[]>([]);
|
|||
|
|
const [view, setView] = useViewMode("deck-view");
|
|||
|
|
const [groupBy, setGroupBy] = usePersistedState<GroupMode>("deck-group", "none");
|
|||
|
|
|
|||
|
|
const [libQuery, setLibQuery] = useState("");
|
|||
|
|
const [libResults, setLibResults] = useState<CardRef[]>([]);
|
|||
|
|
const [anyQuery, setAnyQuery] = useState("");
|
|||
|
|
const [anyResults, setAnyResults] = useState<CardRef[]>([]);
|
|||
|
|
const [cmdQuery, setCmdQuery] = useState("");
|
|||
|
|
const [cmdResults, setCmdResults] = useState<CardRef[]>([]);
|
|||
|
|
|
|||
|
|
const deck = decks.find((d) => d.id === selected) ?? null;
|
|||
|
|
|
|||
|
|
const loadDecks = useCallback(async () => {
|
|||
|
|
const d = await api.listDecks();
|
|||
|
|
setDecks(d);
|
|||
|
|
// Keep the persisted selection if it still exists, else fall back to the first.
|
|||
|
|
if (d.length && (selected === null || !d.some((x) => x.id === selected))) {
|
|||
|
|
setSelected(d[0].id);
|
|||
|
|
}
|
|||
|
|
}, [selected, setSelected]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
loadDecks();
|
|||
|
|
}, [loadDecks]);
|
|||
|
|
|
|||
|
|
const loadContents = useCallback(async () => {
|
|||
|
|
if (selected === null) {
|
|||
|
|
setContents([]);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setContents(await api.deckContents(selected));
|
|||
|
|
}, [selected]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
loadContents();
|
|||
|
|
}, [loadContents]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
const q = libQuery.trim();
|
|||
|
|
if (!q) return setLibResults([]);
|
|||
|
|
const t = setTimeout(() => api.searchLibrary({ text: q }).then(setLibResults), 100);
|
|||
|
|
return () => clearTimeout(t);
|
|||
|
|
}, [libQuery]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
const q = anyQuery.trim();
|
|||
|
|
if (!q) return setAnyResults([]);
|
|||
|
|
const t = setTimeout(() => api.searchCards(q, 12).then(setAnyResults), 80);
|
|||
|
|
return () => clearTimeout(t);
|
|||
|
|
}, [anyQuery]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
const q = cmdQuery.trim();
|
|||
|
|
if (!q) return setCmdResults([]);
|
|||
|
|
const t = setTimeout(() => api.searchCards(q, 12).then(setCmdResults), 80);
|
|||
|
|
return () => clearTimeout(t);
|
|||
|
|
}, [cmdQuery]);
|
|||
|
|
|
|||
|
|
async function createDeck() {
|
|||
|
|
if (!newName.trim()) return;
|
|||
|
|
const d = await api.createDeck(newName.trim(), null);
|
|||
|
|
setNewName("");
|
|||
|
|
await loadDecks();
|
|||
|
|
setSelected(d.id);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function addToDeck(card: CardRef) {
|
|||
|
|
if (selected === null) return;
|
|||
|
|
const existing = contents.find((e) => e.oracle_id === card.oracle_id);
|
|||
|
|
const qty = existing ? existing.quantity + 1 : 1;
|
|||
|
|
await api.setDeckCard(selected, card.oracle_id, qty, false);
|
|||
|
|
setLibQuery("");
|
|||
|
|
setLibResults([]);
|
|||
|
|
setAnyQuery("");
|
|||
|
|
setAnyResults([]);
|
|||
|
|
await loadContents();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function setQty(oracleId: string, qty: number) {
|
|||
|
|
if (selected === null) return;
|
|||
|
|
await api.setDeckCard(selected, oracleId, qty, false);
|
|||
|
|
await loadContents();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function removeDeck(id: number) {
|
|||
|
|
await api.deleteDeck(id);
|
|||
|
|
if (selected === id) setSelected(null);
|
|||
|
|
await loadDecks();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function changeFormat(format: string) {
|
|||
|
|
if (selected === null) return;
|
|||
|
|
await api.setDeckFormat(selected, format);
|
|||
|
|
await loadDecks();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function setCommander(card: CardRef) {
|
|||
|
|
if (selected === null) return;
|
|||
|
|
// Ensure the commander is in the deck, then flag it.
|
|||
|
|
if (!contents.find((e) => e.oracle_id === card.oracle_id)) {
|
|||
|
|
await api.setDeckCard(selected, card.oracle_id, 1, true);
|
|||
|
|
}
|
|||
|
|
await api.setDeckCommander(selected, card.oracle_id);
|
|||
|
|
setCmdQuery("");
|
|||
|
|
setCmdResults([]);
|
|||
|
|
await loadContents();
|
|||
|
|
await loadDecks();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function clearCommander() {
|
|||
|
|
if (selected === null) return;
|
|||
|
|
await api.setDeckCommander(selected, null);
|
|||
|
|
await loadContents();
|
|||
|
|
await loadDecks();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const owned = contents.filter((e) => e.quantity_owned > 0);
|
|||
|
|
const unowned = contents.filter((e) => e.quantity_owned === 0);
|
|||
|
|
const commanderName =
|
|||
|
|
deck?.commander_oracle_id &&
|
|||
|
|
(contents.find((e) => e.oracle_id === deck.commander_oracle_id)?.name ??
|
|||
|
|
deck.commander_oracle_id);
|
|||
|
|
|
|||
|
|
function deckTiles(entries: DeckEntry[]) {
|
|||
|
|
return (
|
|||
|
|
<div className="tile-grid">
|
|||
|
|
{entries.map((e) => (
|
|||
|
|
<CardTile
|
|||
|
|
key={e.oracle_id}
|
|||
|
|
card={e}
|
|||
|
|
corner={
|
|||
|
|
<button
|
|||
|
|
className="tile-remove"
|
|||
|
|
title="Remove from deck"
|
|||
|
|
onClick={() => setQty(e.oracle_id, 0)}
|
|||
|
|
>
|
|||
|
|
✕
|
|||
|
|
</button>
|
|||
|
|
}
|
|||
|
|
footer={
|
|||
|
|
<span className="tile-badge">
|
|||
|
|
{e.is_commander ? "★ " : ""}in deck ×{e.quantity}
|
|||
|
|
</span>
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function deckTable(entries: DeckEntry[]) {
|
|||
|
|
return (
|
|||
|
|
<table>
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th></th>
|
|||
|
|
<th>Colors</th>
|
|||
|
|
<th>Name</th>
|
|||
|
|
<th>Type</th>
|
|||
|
|
<th>In deck</th>
|
|||
|
|
<th>Owned</th>
|
|||
|
|
<th></th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
{entries.map((e) => (
|
|||
|
|
<tr key={e.oracle_id}>
|
|||
|
|
<td>
|
|||
|
|
<CardThumb card={e} />
|
|||
|
|
</td>
|
|||
|
|
<td>
|
|||
|
|
<ColorPips mask={e.color_identity} />
|
|||
|
|
</td>
|
|||
|
|
<td className="card-name">
|
|||
|
|
{e.is_commander && <span title="Commander">★ </span>}
|
|||
|
|
{e.name}
|
|||
|
|
</td>
|
|||
|
|
<td className="card-type">{e.type_line}</td>
|
|||
|
|
<td>
|
|||
|
|
<input
|
|||
|
|
type="number"
|
|||
|
|
min={0}
|
|||
|
|
style={{ width: 60 }}
|
|||
|
|
key={e.quantity}
|
|||
|
|
defaultValue={e.quantity}
|
|||
|
|
onBlur={(ev) => setQty(e.oracle_id, Number(ev.target.value))}
|
|||
|
|
/>
|
|||
|
|
</td>
|
|||
|
|
<td>{e.quantity_owned}</td>
|
|||
|
|
<td>
|
|||
|
|
<button onClick={() => setQty(e.oracle_id, 0)}>Remove</button>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
))}
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function cardsGroup(entries: DeckEntry[]) {
|
|||
|
|
if (entries.length === 0) return <p className="hint">None yet.</p>;
|
|||
|
|
return groupCards(entries, groupBy).map((g) => (
|
|||
|
|
<div key={g.label || "all"} style={{ marginBottom: g.label ? 14 : 0 }}>
|
|||
|
|
{g.label && (
|
|||
|
|
<h4>
|
|||
|
|
{g.label} <span className="badge">{g.cards.length}</span>
|
|||
|
|
</h4>
|
|||
|
|
)}
|
|||
|
|
{view === "tiles" ? deckTiles(g.cards) : deckTable(g.cards)}
|
|||
|
|
</div>
|
|||
|
|
));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div style={{ display: "flex", gap: 20 }}>
|
|||
|
|
<div style={{ width: 240, flexShrink: 0 }}>
|
|||
|
|
<h2>Decks</h2>
|
|||
|
|
<div className="row" style={{ marginBottom: 10 }}>
|
|||
|
|
<input
|
|||
|
|
value={newName}
|
|||
|
|
placeholder="New deck name"
|
|||
|
|
onChange={(e) => setNewName(e.target.value)}
|
|||
|
|
onKeyDown={(e) => e.key === "Enter" && createDeck()}
|
|||
|
|
/>
|
|||
|
|
<button className="primary" onClick={createDeck}>
|
|||
|
|
+
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<ul className="result-list">
|
|||
|
|
{decks.map((d) => (
|
|||
|
|
<li
|
|||
|
|
key={d.id}
|
|||
|
|
style={d.id === selected ? { background: "var(--panel-2)" } : undefined}
|
|||
|
|
onClick={() => setSelected(d.id)}
|
|||
|
|
>
|
|||
|
|
<span className="card-name">{d.name}</span>
|
|||
|
|
{d.format && <span className="deck-chip">{d.format}</span>}
|
|||
|
|
<span className="spacer" />
|
|||
|
|
<button
|
|||
|
|
onClick={(e) => {
|
|||
|
|
e.stopPropagation();
|
|||
|
|
removeDeck(d.id);
|
|||
|
|
}}
|
|||
|
|
title="Delete deck"
|
|||
|
|
>
|
|||
|
|
✕
|
|||
|
|
</button>
|
|||
|
|
</li>
|
|||
|
|
))}
|
|||
|
|
{decks.length === 0 && (
|
|||
|
|
<li style={{ cursor: "default" }} className="hint">
|
|||
|
|
No decks yet.
|
|||
|
|
</li>
|
|||
|
|
)}
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style={{ flex: 1 }}>
|
|||
|
|
{selected === null || !deck ? (
|
|||
|
|
<p className="hint">Select or create a deck.</p>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
<div className="row" style={{ justifyContent: "space-between" }}>
|
|||
|
|
<h2>{deck.name}</h2>
|
|||
|
|
<div className="row" style={{ gap: 16 }}>
|
|||
|
|
<GroupBySelect value={groupBy} onChange={setGroupBy} />
|
|||
|
|
<ViewToggle mode={view} onChange={setView} />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Deck metadata: format + (for Commander/Brawl) the commander card. */}
|
|||
|
|
<div className="deck-meta">
|
|||
|
|
<label className="row" style={{ gap: 6 }}>
|
|||
|
|
<span className="muted">Format</span>
|
|||
|
|
<select value={deck.format} onChange={(e) => changeFormat(e.target.value)}>
|
|||
|
|
{FORMATS.map((f) => (
|
|||
|
|
<option key={f} value={f}>
|
|||
|
|
{f || "—"}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
</label>
|
|||
|
|
|
|||
|
|
{COMMANDER_FORMATS.includes(deck.format) && (
|
|||
|
|
<div className="commander-box">
|
|||
|
|
<div className="row" style={{ gap: 8 }}>
|
|||
|
|
<span className="muted">Commander:</span>
|
|||
|
|
<strong>{commanderName || "none"}</strong>
|
|||
|
|
{commanderName && (
|
|||
|
|
<button onClick={clearCommander} title="Clear commander">
|
|||
|
|
✕
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<CardSearchBox
|
|||
|
|
placeholder="Search to set the commander…"
|
|||
|
|
value={cmdQuery}
|
|||
|
|
onChange={setCmdQuery}
|
|||
|
|
results={cmdResults}
|
|||
|
|
onPick={setCommander}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<section style={{ marginTop: 18 }}>
|
|||
|
|
<h3>
|
|||
|
|
In your library <span className="badge">{owned.length}</span>
|
|||
|
|
</h3>
|
|||
|
|
<CardSearchBox
|
|||
|
|
placeholder="Search your library to add owned cards…"
|
|||
|
|
value={libQuery}
|
|||
|
|
onChange={setLibQuery}
|
|||
|
|
results={libResults}
|
|||
|
|
onPick={addToDeck}
|
|||
|
|
/>
|
|||
|
|
{cardsGroup(owned)}
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section style={{ marginTop: 26 }}>
|
|||
|
|
<h3>
|
|||
|
|
Not owned <span className="badge">{unowned.length}</span>
|
|||
|
|
</h3>
|
|||
|
|
<CardSearchBox
|
|||
|
|
placeholder="Search all cards to add ones you don't own…"
|
|||
|
|
value={anyQuery}
|
|||
|
|
onChange={setAnyQuery}
|
|||
|
|
results={anyResults}
|
|||
|
|
onPick={addToDeck}
|
|||
|
|
/>
|
|||
|
|
{cardsGroup(unowned)}
|
|||
|
|
</section>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|