Add deck analysis panel with mana production/consumption bars and oracle text search
Threads a new produced_mana/produces_colorless field through the whole card read path (ingest, library, filters, decks, search) so the deck view can show what colors a deck's manabase actually produces, alongside its existing color identity. Also adds a mana consumption bar (colored casting costs of nonland spells) and stacks the mana curve histogram by color. Adds an oracle-text substring filter to the library search, mirroring the existing location filter. Rearranges the deck sidebar list into two rows (name, then format chip + actions) so long names and action buttons no longer collide, and removes the drop shadows from the commander hero panel/image. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -112,7 +112,7 @@ impl Catalog {
|
||||
let mut stmt = self.conn.prepare(&format!(
|
||||
"SELECT dc.quantity, dc.is_commander, COALESCE(lc.quantity_owned, 0),
|
||||
oc.oracle_id, oc.name, oc.mana_value, oc.colors, oc.color_identity,
|
||||
oc.type_line, {image}, {back}
|
||||
oc.type_line, {image}, {back}, oc.produced_mana, oc.produces_colorless
|
||||
FROM deck_cards dc
|
||||
JOIN {REF_DB}.oracle_cards oc ON oc.oracle_id = dc.oracle_id
|
||||
LEFT JOIN library_cards lc ON lc.oracle_id = dc.oracle_id
|
||||
@@ -136,6 +136,8 @@ impl Catalog {
|
||||
type_line: r.get(8)?,
|
||||
image_uri: r.get::<_, Option<String>>(9)?.unwrap_or_default(),
|
||||
back_image_uri: r.get::<_, Option<String>>(10)?.unwrap_or_default(),
|
||||
produced_mana: ColorSet(r.get::<_, i64>(11)? as u8),
|
||||
produces_colorless: r.get::<_, i64>(12)? != 0,
|
||||
},
|
||||
})
|
||||
})?
|
||||
|
||||
@@ -18,7 +18,8 @@ impl Catalog {
|
||||
pub fn search_library(&self, filter: &LibraryFilter) -> Result<Vec<LibraryCard>> {
|
||||
let mut sql = format!(
|
||||
"SELECT lc.oracle_id, lc.quantity_owned, lc.location,
|
||||
oc.name, oc.mana_value, oc.colors, oc.color_identity, oc.type_line, {image}, {back}
|
||||
oc.name, oc.mana_value, oc.colors, oc.color_identity, oc.type_line, {image}, {back},
|
||||
oc.produced_mana, oc.produces_colorless
|
||||
FROM library_cards lc
|
||||
JOIN {REF_DB}.oracle_cards oc ON oc.oracle_id = lc.oracle_id
|
||||
WHERE lc.quantity_owned > 0",
|
||||
@@ -85,6 +86,10 @@ impl Catalog {
|
||||
sql.push_str(" AND LOWER(lc.location) LIKE ?");
|
||||
vals.push(Value::Text(format!("%{}%", loc.to_lowercase())));
|
||||
}
|
||||
if let Some(txt) = filter.oracle_text.as_ref().map(|t| t.trim()).filter(|t| !t.is_empty()) {
|
||||
sql.push_str(" AND LOWER(oc.oracle_text) LIKE ?");
|
||||
vals.push(Value::Text(format!("%{}%", txt.to_lowercase())));
|
||||
}
|
||||
|
||||
sql.push_str(" ORDER BY oc.name COLLATE NOCASE");
|
||||
|
||||
@@ -265,4 +270,38 @@ mod tests {
|
||||
}).unwrap();
|
||||
assert_eq!(all.len(), 5);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn oracle_text_filter_is_case_insensitive_substring() {
|
||||
let fx = owned_fixture();
|
||||
let cat = &fx.catalog;
|
||||
|
||||
// "Add {G}." (Llanowar Elves) and "Add {C}{C}." (Sol Ring) both mention "add".
|
||||
let add_matches = names(&cat.search_library(&LibraryFilter {
|
||||
oracle_text: Some("add".into()),
|
||||
..Default::default()
|
||||
}).unwrap());
|
||||
assert_eq!(add_matches, vec!["Llanowar Elves", "Sol Ring"]);
|
||||
|
||||
// Case-insensitive.
|
||||
let damage = names(&cat.search_library(&LibraryFilter {
|
||||
oracle_text: Some("DAMAGE".into()),
|
||||
..Default::default()
|
||||
}).unwrap());
|
||||
assert_eq!(damage, vec!["Lightning Bolt"]);
|
||||
|
||||
// Deathrite Shaman has empty oracle_text in the fixture, so it never matches.
|
||||
let none = cat.search_library(&LibraryFilter {
|
||||
oracle_text: Some("nonexistent ability".into()),
|
||||
..Default::default()
|
||||
}).unwrap();
|
||||
assert!(none.is_empty());
|
||||
|
||||
// Empty/whitespace text is treated as "no filter".
|
||||
let all = cat.search_library(&LibraryFilter {
|
||||
oracle_text: Some(" ".into()),
|
||||
..Default::default()
|
||||
}).unwrap();
|
||||
assert_eq!(all.len(), 5);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -430,6 +430,10 @@ struct ScryOracle {
|
||||
keywords: Vec<String>,
|
||||
#[serde(default)]
|
||||
card_faces: Option<Vec<ScryFace>>,
|
||||
/// What colors of mana this card can add (lands, mana rocks, dorks). A
|
||||
/// top-level-only Scryfall field — not per-face, even on DFCs.
|
||||
#[serde(default)]
|
||||
produced_mana: Option<Vec<String>>,
|
||||
}
|
||||
|
||||
#[derive(Deserialize)]
|
||||
@@ -438,6 +442,8 @@ struct ScryFace {
|
||||
type_line: Option<String>,
|
||||
#[serde(default)]
|
||||
colors: Option<Vec<String>>,
|
||||
#[serde(default)]
|
||||
oracle_text: Option<String>,
|
||||
}
|
||||
|
||||
fn load_oracle_cards(conn: &Connection, reader: impl Read, cancel: &CancelToken) -> Result<usize> {
|
||||
@@ -446,8 +452,9 @@ fn load_oracle_cards(conn: &Connection, reader: impl Read, cancel: &CancelToken)
|
||||
{
|
||||
let mut ins_card = conn.prepare(
|
||||
"INSERT OR IGNORE INTO oracle_cards
|
||||
(oracle_id,name,name_lower,mana_value,colors,color_identity,type_line,oracle_text)
|
||||
VALUES (?1,?2,?3,?4,?5,?6,?7,?8)",
|
||||
(oracle_id,name,name_lower,mana_value,colors,color_identity,type_line,oracle_text,
|
||||
produced_mana,produces_colorless)
|
||||
VALUES (?1,?2,?3,?4,?5,?6,?7,?8,?9,?10)",
|
||||
)?;
|
||||
let mut ins_fts =
|
||||
conn.prepare("INSERT INTO oracle_names_fts(name,oracle_id) VALUES (?1,?2)")?;
|
||||
@@ -502,6 +509,30 @@ fn load_oracle_cards(conn: &Connection, reader: impl Read, cancel: &CancelToken)
|
||||
.unwrap_or_default()
|
||||
});
|
||||
|
||||
// Oracle text: top-level, else join faces — double-faced cards (MDFC,
|
||||
// transform, etc.) never carry a top-level oracle_text in Scryfall's
|
||||
// data, only per-face text.
|
||||
let oracle_text = c.oracle_text.clone().unwrap_or_else(|| {
|
||||
c.card_faces
|
||||
.as_ref()
|
||||
.map(|faces| {
|
||||
faces
|
||||
.iter()
|
||||
.filter_map(|f| f.oracle_text.clone())
|
||||
.collect::<Vec<_>>()
|
||||
.join("\n")
|
||||
})
|
||||
.unwrap_or_default()
|
||||
});
|
||||
|
||||
// Mana production: colored letters map to the WUBRG bitmask (same as
|
||||
// colors/identity); "C" (colorless) is tracked separately since it
|
||||
// isn't a WUBRG bit. Top-level only — Scryfall doesn't put this on
|
||||
// individual card_faces.
|
||||
let produced = c.produced_mana.as_deref().unwrap_or(&[]);
|
||||
let produced_mana = ColorSet::from_letters(produced);
|
||||
let produces_colorless = produced.iter().any(|s| s.eq_ignore_ascii_case("C"));
|
||||
|
||||
let changed = ins_card.execute(params![
|
||||
oracle_id,
|
||||
c.name,
|
||||
@@ -510,7 +541,9 @@ fn load_oracle_cards(conn: &Connection, reader: impl Read, cancel: &CancelToken)
|
||||
colors.0 as i64,
|
||||
identity.0 as i64,
|
||||
type_line,
|
||||
c.oracle_text.clone().unwrap_or_default(),
|
||||
oracle_text,
|
||||
produced_mana.0 as i64,
|
||||
produces_colorless as i64,
|
||||
])?;
|
||||
// Only emit satellite rows the first time we see this oracle_id.
|
||||
if changed == 1 {
|
||||
@@ -797,6 +830,83 @@ mod tests {
|
||||
assert_eq!(g as u8, crate::model::G);
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn double_faced_cards_fall_back_to_card_faces_for_type_colors_and_text() {
|
||||
// Modal DFCs (and transform cards) never carry a top-level type_line,
|
||||
// colors, or oracle_text in Scryfall's oracle-cards bulk — only
|
||||
// per-face fields. Regression test for a bug where oracle_text had no
|
||||
// fallback (unlike type_line/colors), silently leaving every
|
||||
// double-faced card's oracle_text empty and unsearchable.
|
||||
let oracle = r#"[
|
||||
{"oracle_id":"oid-dfc","name":"Elesh Norn // The Argent Etchings",
|
||||
"cmc":5.0,"color_identity":["W"],"keywords":[],
|
||||
"card_faces":[
|
||||
{"type_line":"Legendary Creature — Phyrexian Praetor","colors":["W"],
|
||||
"oracle_text":"Whenever a source an opponent controls deals damage to you or a permanent you control, exile that source."},
|
||||
{"type_line":"Battle — Siege","colors":[],
|
||||
"oracle_text":"When you defeated The Argent Etchings, draw a card."}
|
||||
]}
|
||||
]"#;
|
||||
|
||||
let dir = tempfile::tempdir().unwrap();
|
||||
let dest = dir.path().join("reference.db");
|
||||
let conn = open_reference_for_build(&dest).unwrap();
|
||||
|
||||
load_oracle_cards(&conn, oracle.as_bytes(), &CancelToken::new()).unwrap();
|
||||
|
||||
let (type_line, colors, oracle_text): (String, i64, String) = conn
|
||||
.query_row(
|
||||
"SELECT type_line, colors, oracle_text FROM oracle_cards WHERE oracle_id='oid-dfc'",
|
||||
[],
|
||||
|r| Ok((r.get(0)?, r.get(1)?, r.get(2)?)),
|
||||
)
|
||||
.unwrap();
|
||||
|
||||
assert_eq!(type_line, "Legendary Creature — Phyrexian Praetor // Battle — Siege");
|
||||
assert_eq!(colors as u8, crate::model::W);
|
||||
assert!(oracle_text.contains("an opponent controls deals damage"));
|
||||
assert!(oracle_text.contains("draw a card"));
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn captures_produced_mana_including_colorless() {
|
||||
let oracle = r#"[
|
||||
{"oracle_id":"oid-dual","name":"Overgrown Tomb","cmc":0.0,
|
||||
"color_identity":[],"keywords":[],"produced_mana":["B","G"]},
|
||||
{"oracle_id":"oid-wastes","name":"Wastes","cmc":0.0,
|
||||
"color_identity":[],"keywords":[],"produced_mana":["C"]},
|
||||
{"oracle_id":"oid-vanilla","name":"Grizzly Bears","cmc":2.0,
|
||||
"color_identity":["G"],"keywords":[]}
|
||||
]"#;
|
||||
|
||||
let dir = tempfile::tempdir().unwrap();
|
||||
let dest = dir.path().join("reference.db");
|
||||
let conn = open_reference_for_build(&dest).unwrap();
|
||||
|
||||
load_oracle_cards(&conn, oracle.as_bytes(), &CancelToken::new()).unwrap();
|
||||
|
||||
let fetch = |id: &str| -> (i64, i64) {
|
||||
conn.query_row(
|
||||
"SELECT produced_mana, produces_colorless FROM oracle_cards WHERE oracle_id=?1",
|
||||
params![id],
|
||||
|r| Ok((r.get(0)?, r.get(1)?)),
|
||||
)
|
||||
.unwrap()
|
||||
};
|
||||
|
||||
let (dual_mana, dual_colorless) = fetch("oid-dual");
|
||||
assert_eq!(dual_mana as u8, crate::model::B | crate::model::G);
|
||||
assert_eq!(dual_colorless, 0);
|
||||
|
||||
let (wastes_mana, wastes_colorless) = fetch("oid-wastes");
|
||||
assert_eq!(wastes_mana, 0); // "C" isn't a WUBRG bit
|
||||
assert_eq!(wastes_colorless, 1);
|
||||
|
||||
let (vanilla_mana, vanilla_colorless) = fetch("oid-vanilla");
|
||||
assert_eq!(vanilla_mana, 0);
|
||||
assert_eq!(vanilla_colorless, 0); // no produced_mana field at all
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn captures_back_face_image_for_double_faced_cards() {
|
||||
// Transform/MDFC cards: two `card_faces`, each with its own image.
|
||||
|
||||
@@ -19,7 +19,9 @@ use std::path::Path;
|
||||
use rusqlite::Connection;
|
||||
|
||||
pub use error::{CoreError, Result};
|
||||
pub use model::{CardRef, ColorSet, Deck, DeckEntry, LibraryCard, LibraryFilter, LibraryStats};
|
||||
pub use model::{
|
||||
CardRef, ColorSet, Deck, DeckEntry, LibraryCard, LibraryFacets, LibraryFilter, LibraryStats,
|
||||
};
|
||||
pub use search::NameIndex;
|
||||
|
||||
/// A handle to an open catalog: the library db with the reference db attached.
|
||||
@@ -66,7 +68,7 @@ pub(crate) mod test_support {
|
||||
}
|
||||
|
||||
/// (oracle_id, name, mana_value, colors, color_identity, type_line,
|
||||
/// types, subtypes, keywords)
|
||||
/// types, subtypes, keywords, oracle_text)
|
||||
pub struct SeedCard {
|
||||
pub oracle_id: &'static str,
|
||||
pub name: &'static str,
|
||||
@@ -77,6 +79,7 @@ pub(crate) mod test_support {
|
||||
pub types: &'static [&'static str],
|
||||
pub subtypes: &'static [&'static str],
|
||||
pub keywords: &'static [&'static str],
|
||||
pub oracle_text: &'static str,
|
||||
}
|
||||
|
||||
pub fn seed_cards() -> Vec<SeedCard> {
|
||||
@@ -91,6 +94,7 @@ pub(crate) mod test_support {
|
||||
types: &["Creature"],
|
||||
subtypes: &["Elf", "Druid"],
|
||||
keywords: &[],
|
||||
oracle_text: "{T}: Add {G}.",
|
||||
},
|
||||
SeedCard {
|
||||
oracle_id: "deathrite-shaman",
|
||||
@@ -102,6 +106,7 @@ pub(crate) mod test_support {
|
||||
types: &["Creature"],
|
||||
subtypes: &["Elf", "Shaman"],
|
||||
keywords: &[],
|
||||
oracle_text: "",
|
||||
},
|
||||
SeedCard {
|
||||
oracle_id: "serra-angel",
|
||||
@@ -113,6 +118,7 @@ pub(crate) mod test_support {
|
||||
types: &["Creature"],
|
||||
subtypes: &["Angel"],
|
||||
keywords: &["Flying", "Vigilance"],
|
||||
oracle_text: "Flying, vigilance",
|
||||
},
|
||||
SeedCard {
|
||||
oracle_id: "lightning-bolt",
|
||||
@@ -124,6 +130,7 @@ pub(crate) mod test_support {
|
||||
types: &["Instant"],
|
||||
subtypes: &[],
|
||||
keywords: &[],
|
||||
oracle_text: "Lightning Bolt deals 3 damage to any target.",
|
||||
},
|
||||
SeedCard {
|
||||
oracle_id: "sol-ring",
|
||||
@@ -135,6 +142,7 @@ pub(crate) mod test_support {
|
||||
types: &["Artifact"],
|
||||
subtypes: &[],
|
||||
keywords: &[],
|
||||
oracle_text: "{T}: Add {C}{C}.",
|
||||
},
|
||||
]
|
||||
}
|
||||
@@ -153,8 +161,8 @@ pub(crate) mod test_support {
|
||||
rconn
|
||||
.execute(
|
||||
"INSERT INTO oracle_cards
|
||||
(oracle_id,name,name_lower,mana_value,colors,color_identity,type_line)
|
||||
VALUES (?1,?2,?3,?4,?5,?6,?7)",
|
||||
(oracle_id,name,name_lower,mana_value,colors,color_identity,type_line,oracle_text)
|
||||
VALUES (?1,?2,?3,?4,?5,?6,?7,?8)",
|
||||
rusqlite::params![
|
||||
c.oracle_id,
|
||||
c.name,
|
||||
@@ -162,7 +170,8 @@ pub(crate) mod test_support {
|
||||
c.mv,
|
||||
colors,
|
||||
identity,
|
||||
c.type_line
|
||||
c.type_line,
|
||||
c.oracle_text,
|
||||
],
|
||||
)
|
||||
.unwrap();
|
||||
|
||||
@@ -6,12 +6,13 @@ use rusqlite::{params, OptionalExtension};
|
||||
|
||||
use crate::db::REF_DB;
|
||||
use crate::error::Result;
|
||||
use crate::model::{CardRef, ColorSet, LibraryCard, LibraryStats, WUBRG};
|
||||
use crate::model::{CardRef, ColorSet, LibraryCard, LibraryFacets, LibraryStats, WUBRG};
|
||||
use crate::Catalog;
|
||||
|
||||
/// Map a row shaped `(oracle_id, quantity_owned, location, name, mana_value,
|
||||
/// colors, color_identity, type_line, image_uri, back_image_uri)` into its
|
||||
/// library parts. Shared by [`Catalog::list_library`] and the criteria search.
|
||||
/// colors, color_identity, type_line, image_uri, back_image_uri, produced_mana,
|
||||
/// produces_colorless)` into its library parts. Shared by [`Catalog::list_library`]
|
||||
/// and the criteria search.
|
||||
pub(crate) fn row_to_library_parts(
|
||||
r: &rusqlite::Row,
|
||||
) -> rusqlite::Result<(String, i64, String, CardRef)> {
|
||||
@@ -29,6 +30,8 @@ pub(crate) fn row_to_library_parts(
|
||||
type_line: r.get(7)?,
|
||||
image_uri: r.get::<_, Option<String>>(8)?.unwrap_or_default(),
|
||||
back_image_uri: r.get::<_, Option<String>>(9)?.unwrap_or_default(),
|
||||
produced_mana: ColorSet(r.get::<_, i64>(10)? as u8),
|
||||
produces_colorless: r.get::<_, i64>(11)? != 0,
|
||||
},
|
||||
))
|
||||
}
|
||||
@@ -70,7 +73,8 @@ impl Catalog {
|
||||
|
||||
let mut stmt = self.conn.prepare(&format!(
|
||||
"SELECT lc.oracle_id, lc.quantity_owned, lc.location,
|
||||
oc.name, oc.mana_value, oc.colors, oc.color_identity, oc.type_line, {image}, {back}
|
||||
oc.name, oc.mana_value, oc.colors, oc.color_identity, oc.type_line, {image}, {back},
|
||||
oc.produced_mana, oc.produces_colorless
|
||||
FROM library_cards lc
|
||||
JOIN {REF_DB}.oracle_cards oc ON oc.oracle_id = lc.oracle_id
|
||||
WHERE lc.quantity_owned > 0
|
||||
@@ -144,6 +148,29 @@ impl Catalog {
|
||||
})
|
||||
}
|
||||
|
||||
/// Distinct type/subtype/keyword values among owned cards, for filter
|
||||
/// autocomplete.
|
||||
pub fn library_facets(&self) -> Result<LibraryFacets> {
|
||||
Ok(LibraryFacets {
|
||||
types: self.distinct_owned_facet("card_types", "type")?,
|
||||
subtypes: self.distinct_owned_facet("card_subtypes", "subtype")?,
|
||||
keywords: self.distinct_owned_facet("card_keywords", "keyword")?,
|
||||
})
|
||||
}
|
||||
|
||||
/// `table`/`column` are always one of the three hardcoded call sites above
|
||||
/// (never user input), so interpolating them into the query is safe.
|
||||
fn distinct_owned_facet(&self, table: &str, column: &str) -> Result<Vec<String>> {
|
||||
let mut stmt = self.conn.prepare(&format!(
|
||||
"SELECT DISTINCT x.{column}
|
||||
FROM {REF_DB}.{table} x
|
||||
WHERE x.oracle_id IN (SELECT oracle_id FROM library_cards WHERE quantity_owned > 0)
|
||||
ORDER BY x.{column} COLLATE NOCASE"
|
||||
))?;
|
||||
let rows = stmt.query_map([], |r| r.get::<_, String>(0))?;
|
||||
Ok(rows.collect::<std::result::Result<Vec<_>, _>>()?)
|
||||
}
|
||||
|
||||
/// Set the free-text storage location for a card (creates the library row if
|
||||
/// absent). Empty string clears it.
|
||||
pub fn set_location(&self, oracle_id: &str, location: &str) -> Result<()> {
|
||||
@@ -207,6 +234,22 @@ mod tests {
|
||||
assert_eq!(sol.card.image_uri, "http://img/sol-ring");
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn library_facets_only_include_owned_cards() {
|
||||
let fx = test_support::make();
|
||||
let cat = &fx.catalog;
|
||||
// Own llanowar-elves (Creature — Elf Druid) and lightning-bolt
|
||||
// (Instant); leave serra-angel (Creature — Angel, Flying/Vigilance)
|
||||
// unowned.
|
||||
cat.add_owned("llanowar-elves", 1).unwrap();
|
||||
cat.add_owned("lightning-bolt", 1).unwrap();
|
||||
|
||||
let facets = cat.library_facets().unwrap();
|
||||
assert_eq!(facets.types, vec!["Creature", "Instant"]);
|
||||
assert_eq!(facets.subtypes, vec!["Druid", "Elf"]);
|
||||
assert!(facets.keywords.is_empty()); // Flying/Vigilance only on the unowned Serra Angel
|
||||
}
|
||||
|
||||
#[test]
|
||||
fn library_stats_aggregates_counts_and_colors() {
|
||||
let fx = test_support::make();
|
||||
|
||||
@@ -91,6 +91,14 @@ pub struct CardRef {
|
||||
/// URL of the *back face* image for the same printing (transform / modal
|
||||
/// double-faced / reversible cards), or empty for single-faced cards.
|
||||
pub back_image_uri: String,
|
||||
/// WUBRG bitmask of colors this card can *produce* (lands, mana rocks,
|
||||
/// dorks, etc.) — independent of `colors`/`color_identity`, which
|
||||
/// describe what color the card *is*, not what it taps for.
|
||||
pub produced_mana: ColorSet,
|
||||
/// Whether this card can produce colorless mana (Scryfall's
|
||||
/// `produced_mana` including "C"), tracked separately since colorless
|
||||
/// isn't a WUBRG bit.
|
||||
pub produces_colorless: bool,
|
||||
}
|
||||
|
||||
/// A library row: a card the user owns, with quantity and its deck memberships.
|
||||
@@ -155,6 +163,16 @@ pub struct LibraryStats {
|
||||
pub colorless_count: i64,
|
||||
}
|
||||
|
||||
/// Distinct type/subtype/keyword values found among *owned* cards, sorted.
|
||||
/// Powers autocomplete for the library filter panel — e.g. no point
|
||||
/// suggesting "Phyrexian" as a subtype if you don't own any.
|
||||
#[derive(Debug, Clone, Default, Serialize, Deserialize)]
|
||||
pub struct LibraryFacets {
|
||||
pub types: Vec<String>,
|
||||
pub subtypes: Vec<String>,
|
||||
pub keywords: Vec<String>,
|
||||
}
|
||||
|
||||
/// Criteria for searching the owned library. All fields are optional; an empty
|
||||
/// filter matches every owned card.
|
||||
#[derive(Debug, Clone, Default, Serialize, Deserialize)]
|
||||
@@ -184,4 +202,6 @@ pub struct LibraryFilter {
|
||||
/// Case-insensitive substring match against the card's stored location
|
||||
/// (e.g. "Box 1"). Cards with no location set never match a non-empty value.
|
||||
pub location: Option<String>,
|
||||
/// Case-insensitive substring match against the card's oracle rules text.
|
||||
pub oracle_text: Option<String>,
|
||||
}
|
||||
|
||||
@@ -34,7 +34,7 @@ impl NameIndex {
|
||||
pub fn build(conn: &Connection) -> Result<Self> {
|
||||
let mut stmt = conn.prepare(&format!(
|
||||
"SELECT oc.oracle_id, oc.name, oc.mana_value, oc.colors, oc.color_identity,
|
||||
oc.type_line, {image}, {back}
|
||||
oc.type_line, {image}, {back}, oc.produced_mana, oc.produces_colorless
|
||||
FROM {REF_DB}.oracle_cards oc",
|
||||
image = crate::db::image_subquery("image_uri"),
|
||||
back = crate::db::image_subquery("back_image_uri")
|
||||
@@ -51,6 +51,8 @@ impl NameIndex {
|
||||
type_line: r.get(5)?,
|
||||
image_uri: r.get::<_, Option<String>>(6)?.unwrap_or_default(),
|
||||
back_image_uri: r.get::<_, Option<String>>(7)?.unwrap_or_default(),
|
||||
produced_mana: ColorSet(r.get::<_, i64>(8)? as u8),
|
||||
produces_colorless: r.get::<_, i64>(9)? != 0,
|
||||
},
|
||||
})
|
||||
})?
|
||||
|
||||
@@ -10,7 +10,9 @@ CREATE TABLE IF NOT EXISTS oracle_cards (
|
||||
colors INTEGER NOT NULL DEFAULT 0, -- WUBRG bitmask
|
||||
color_identity INTEGER NOT NULL DEFAULT 0, -- WUBRG bitmask
|
||||
type_line TEXT NOT NULL DEFAULT '',
|
||||
oracle_text TEXT NOT NULL DEFAULT ''
|
||||
oracle_text TEXT NOT NULL DEFAULT '',
|
||||
produced_mana INTEGER NOT NULL DEFAULT 0, -- WUBRG bitmask (lands/rocks/dorks)
|
||||
produces_colorless INTEGER NOT NULL DEFAULT 0 -- boolean: can produce {C}
|
||||
);
|
||||
CREATE INDEX IF NOT EXISTS idx_oracle_name_lower ON oracle_cards(name_lower);
|
||||
CREATE INDEX IF NOT EXISTS idx_oracle_ci ON oracle_cards(color_identity);
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
use std::path::PathBuf;
|
||||
use std::sync::Mutex;
|
||||
|
||||
use mtgc_core::{CardRef, Deck, DeckEntry, LibraryCard, LibraryFilter, LibraryStats};
|
||||
use mtgc_core::{CardRef, Deck, DeckEntry, LibraryCard, LibraryFacets, LibraryFilter, LibraryStats};
|
||||
use serde::Serialize;
|
||||
use tauri::{AppHandle, Emitter, State};
|
||||
|
||||
@@ -142,6 +142,12 @@ pub fn get_library_stats(db: Db) -> Res<LibraryStats> {
|
||||
s.catalog()?.library_stats().map_err(|e| e.to_string())
|
||||
}
|
||||
|
||||
#[tauri::command]
|
||||
pub fn get_library_facets(db: Db) -> Res<LibraryFacets> {
|
||||
let s = db.lock().unwrap();
|
||||
s.catalog()?.library_facets().map_err(|e| e.to_string())
|
||||
}
|
||||
|
||||
#[tauri::command]
|
||||
pub fn list_decks(db: Db) -> Res<Vec<Deck>> {
|
||||
let s = db.lock().unwrap();
|
||||
|
||||
@@ -31,6 +31,7 @@ pub fn run() {
|
||||
commands::set_location,
|
||||
commands::search_library,
|
||||
commands::get_library_stats,
|
||||
commands::get_library_facets,
|
||||
commands::list_decks,
|
||||
commands::create_deck,
|
||||
commands::delete_deck,
|
||||
|
||||
59
src/App.tsx
59
src/App.tsx
@@ -2,7 +2,14 @@ import { useEffect, useRef, useState, useCallback, ReactNode } from "react";
|
||||
import { listen } from "@tauri-apps/api/event";
|
||||
import { open, save } from "@tauri-apps/plugin-dialog";
|
||||
import { api, IngestProgress, IngestStageInfo, LibraryStats, Status } from "./api";
|
||||
import { HoverPreviewProvider, IconButton, Icons, usePersistedState } from "./components";
|
||||
import {
|
||||
ColorDistributionBar,
|
||||
HoverPreviewProvider,
|
||||
IconButton,
|
||||
Icons,
|
||||
StatTile,
|
||||
usePersistedState,
|
||||
} from "./components";
|
||||
import { CardEntry } from "./views/CardEntry";
|
||||
import { LibraryBrowser } from "./views/LibraryBrowser";
|
||||
import { DeckView } from "./views/DeckView";
|
||||
@@ -284,49 +291,15 @@ export default function App() {
|
||||
<div className="lib-stats-loading">Loading…</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="lib-stats-numbers">
|
||||
<div className="lib-stat">
|
||||
<span className="lib-stat-value">
|
||||
{libStats.unique_cards.toLocaleString()}
|
||||
</span>
|
||||
<span className="lib-stat-label">unique</span>
|
||||
</div>
|
||||
<div className="lib-stat">
|
||||
<span className="lib-stat-value">
|
||||
{libStats.total_copies.toLocaleString()}
|
||||
</span>
|
||||
<span className="lib-stat-label">copies</span>
|
||||
</div>
|
||||
<div className="lib-stat">
|
||||
<span className="lib-stat-value">
|
||||
{libStats.deck_count.toLocaleString()}
|
||||
</span>
|
||||
<span className="lib-stat-label">decks</span>
|
||||
</div>
|
||||
<div className="stat-tiles-row">
|
||||
<StatTile value={libStats.unique_cards.toLocaleString()} label="unique" />
|
||||
<StatTile value={libStats.total_copies.toLocaleString()} label="copies" />
|
||||
<StatTile value={libStats.deck_count.toLocaleString()} label="decks" />
|
||||
</div>
|
||||
{libStats.total_copies > 0 && (
|
||||
<div className="lib-color-bar">
|
||||
{(
|
||||
[
|
||||
["W", libStats.color_counts[0]],
|
||||
["U", libStats.color_counts[1]],
|
||||
["B", libStats.color_counts[2]],
|
||||
["R", libStats.color_counts[3]],
|
||||
["G", libStats.color_counts[4]],
|
||||
["C", libStats.colorless_count],
|
||||
] as [string, number][]
|
||||
).map(([code, count]) =>
|
||||
count > 0 ? (
|
||||
<span
|
||||
key={code}
|
||||
className={`lib-color-seg ${code}`}
|
||||
style={{ flexGrow: count }}
|
||||
title={`${code === "C" ? "Colorless" : code}: ${count.toLocaleString()} copies`}
|
||||
/>
|
||||
) : null,
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<ColorDistributionBar
|
||||
colorCounts={libStats.color_counts}
|
||||
colorlessCount={libStats.colorless_count}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<div className="lib-stats-sub">
|
||||
|
||||
10
src/api.ts
10
src/api.ts
@@ -12,6 +12,8 @@ export interface CardRef {
|
||||
type_line: string;
|
||||
image_uri: string; // Scryfall "normal" image URL, or "" if unavailable
|
||||
back_image_uri: string; // back face for transform/MDFC/reversible cards, else ""
|
||||
produced_mana: number; // WUBRG bitmask of mana this card can tap for
|
||||
produces_colorless: boolean; // can produce {C}
|
||||
}
|
||||
|
||||
export interface LibraryCard extends CardRef {
|
||||
@@ -47,6 +49,7 @@ export interface LibraryFilter {
|
||||
keywords?: string[];
|
||||
in_deck?: number | null;
|
||||
location?: string | null;
|
||||
oracle_text?: string | null;
|
||||
}
|
||||
|
||||
export interface Status {
|
||||
@@ -65,6 +68,12 @@ export interface LibraryStats {
|
||||
colorless_count: number;
|
||||
}
|
||||
|
||||
export interface LibraryFacets {
|
||||
types: string[];
|
||||
subtypes: string[];
|
||||
keywords: string[];
|
||||
}
|
||||
|
||||
export interface IngestStageInfo {
|
||||
id: string;
|
||||
label: string;
|
||||
@@ -115,6 +124,7 @@ export const api = {
|
||||
searchLibrary: (filter: LibraryFilter) =>
|
||||
invoke<LibraryCard[]>("search_library", { filter }),
|
||||
getLibraryStats: () => invoke<LibraryStats>("get_library_stats"),
|
||||
getLibraryFacets: () => invoke<LibraryFacets>("get_library_facets"),
|
||||
|
||||
listDecks: () => invoke<Deck[]>("list_decks"),
|
||||
createDeck: (name: string, commanderOracleId: string | null) =>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import {
|
||||
createContext,
|
||||
forwardRef,
|
||||
ReactNode,
|
||||
useCallback,
|
||||
useContext,
|
||||
@@ -341,27 +342,27 @@ export function CardThumb({ card }: { card: CardRef }) {
|
||||
* A search input plus a results dropdown with keyboard navigation:
|
||||
* ↑/↓ move the highlight, Enter picks, mouse hover/click also work.
|
||||
* `value`/`onChange` are controlled by the caller (which runs the search).
|
||||
* Forwards a ref to the underlying `<input>` so callers can focus it
|
||||
* imperatively (e.g. redirecting a stray keystroke into the search box).
|
||||
*/
|
||||
export function CardSearchBox({
|
||||
placeholder,
|
||||
value,
|
||||
onChange,
|
||||
results,
|
||||
onPick,
|
||||
autoFocus,
|
||||
big,
|
||||
}: {
|
||||
placeholder: string;
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
results: CardRef[];
|
||||
onPick: (card: CardRef) => void;
|
||||
autoFocus?: boolean;
|
||||
/** Larger, more prominent input (used for the primary Add Cards field). */
|
||||
big?: boolean;
|
||||
}) {
|
||||
export const CardSearchBox = forwardRef<
|
||||
HTMLInputElement,
|
||||
{
|
||||
placeholder: string;
|
||||
value: string;
|
||||
onChange: (v: string) => void;
|
||||
results: CardRef[];
|
||||
onPick: (card: CardRef) => void;
|
||||
autoFocus?: boolean;
|
||||
/** Larger, more prominent input (used for the primary Add Cards field). */
|
||||
big?: boolean;
|
||||
}
|
||||
>(function CardSearchBox(
|
||||
{ placeholder, value, onChange, results, onPick, autoFocus, big },
|
||||
forwardedRef,
|
||||
) {
|
||||
const [sel, setSel] = useState(0);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const inputRef = useRef<HTMLInputElement | null>(null);
|
||||
useEffect(() => setSel(0), [results]);
|
||||
|
||||
// Keep focus in the box after a pick so cards can be added in a rapid streak.
|
||||
@@ -386,7 +387,11 @@ export function CardSearchBox({
|
||||
return (
|
||||
<>
|
||||
<input
|
||||
ref={inputRef}
|
||||
ref={(el) => {
|
||||
inputRef.current = el;
|
||||
if (typeof forwardedRef === "function") forwardedRef(el);
|
||||
else if (forwardedRef) (forwardedRef as React.MutableRefObject<HTMLInputElement | null>).current = el;
|
||||
}}
|
||||
autoFocus={autoFocus}
|
||||
style={{
|
||||
width: "100%",
|
||||
@@ -416,6 +421,110 @@ export function CardSearchBox({
|
||||
)}
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
/**
|
||||
* A chip-based multi-value text filter with autocomplete: selected values
|
||||
* render as removable chips, and typing filters `suggestions` into a
|
||||
* dropdown (↑/↓ to move, Enter to pick — or Enter with no match adds the
|
||||
* typed text verbatim, so it's not limited to only-suggested values).
|
||||
* Backspace on an empty input quick-removes the last chip.
|
||||
*/
|
||||
export function TagInput({
|
||||
values,
|
||||
onChange,
|
||||
suggestions,
|
||||
placeholder,
|
||||
}: {
|
||||
values: string[];
|
||||
onChange: (values: string[]) => void;
|
||||
suggestions: string[];
|
||||
placeholder?: string;
|
||||
}) {
|
||||
const [text, setText] = useState("");
|
||||
const [sel, setSel] = useState(0);
|
||||
|
||||
const query = text.trim().toLowerCase();
|
||||
const filtered = query
|
||||
? suggestions
|
||||
.filter((s) => !values.some((v) => v.toLowerCase() === s.toLowerCase()))
|
||||
.filter((s) => s.toLowerCase().includes(query))
|
||||
.slice(0, 8)
|
||||
: [];
|
||||
|
||||
useEffect(() => setSel(0), [text]);
|
||||
|
||||
function addValue(v: string) {
|
||||
const trimmed = v.trim();
|
||||
if (!trimmed) return;
|
||||
if (!values.some((x) => x.toLowerCase() === trimmed.toLowerCase())) {
|
||||
onChange([...values, trimmed]);
|
||||
}
|
||||
setText("");
|
||||
}
|
||||
|
||||
function removeValue(v: string) {
|
||||
onChange(values.filter((x) => x !== v));
|
||||
}
|
||||
|
||||
function onKeyDown(e: React.KeyboardEvent) {
|
||||
if (e.key === "ArrowDown" && filtered.length > 0) {
|
||||
e.preventDefault();
|
||||
setSel((s) => Math.min(s + 1, filtered.length - 1));
|
||||
} else if (e.key === "ArrowUp" && filtered.length > 0) {
|
||||
e.preventDefault();
|
||||
setSel((s) => Math.max(s - 1, 0));
|
||||
} else if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
if (filtered[sel]) addValue(filtered[sel]);
|
||||
else if (text.trim()) addValue(text);
|
||||
} else if (e.key === "Backspace" && text === "" && values.length > 0) {
|
||||
onChange(values.slice(0, -1));
|
||||
} else if (e.key === "Escape") {
|
||||
setText("");
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="tag-input">
|
||||
<div className="tag-chips">
|
||||
{values.map((v) => (
|
||||
<span key={v} className="tag-chip">
|
||||
{v}
|
||||
<button
|
||||
type="button"
|
||||
className="tag-chip-remove"
|
||||
onClick={() => removeValue(v)}
|
||||
title={`Remove ${v}`}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
<input
|
||||
className="tag-chip-input"
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
onKeyDown={onKeyDown}
|
||||
placeholder={values.length === 0 ? placeholder : ""}
|
||||
/>
|
||||
</div>
|
||||
{filtered.length > 0 && (
|
||||
<ul className="result-list tag-suggestions">
|
||||
{filtered.map((s, i) => (
|
||||
<li
|
||||
key={s}
|
||||
style={i === sel ? { background: "var(--accent-subtle)" } : undefined}
|
||||
onMouseEnter={() => setSel(i)}
|
||||
onClick={() => addValue(s)}
|
||||
>
|
||||
{s}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Hover + click preview -------------------------------------------------
|
||||
@@ -666,6 +775,98 @@ export function GroupBySelect({
|
||||
);
|
||||
}
|
||||
|
||||
// --- Stats widgets (sidebar "Your library" panel, per-deck analysis) ------
|
||||
|
||||
/** A single numeric stat in a small panel tile, e.g. "42 / unique". */
|
||||
export function StatTile({ value, label }: { value: string | number; label: string }) {
|
||||
return (
|
||||
<div className="stat-tile">
|
||||
<span className="stat-tile-value">{value}</span>
|
||||
<span className="stat-tile-label">{label}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** A segmented WUBRG(+colorless) bar sized proportionally to `colorCounts`. */
|
||||
export function ColorDistributionBar({
|
||||
colorCounts,
|
||||
colorlessCount,
|
||||
}: {
|
||||
colorCounts: [number, number, number, number, number]; // W, U, B, R, G
|
||||
colorlessCount: number;
|
||||
}) {
|
||||
const segs: [string, number][] = [
|
||||
["W", colorCounts[0]],
|
||||
["U", colorCounts[1]],
|
||||
["B", colorCounts[2]],
|
||||
["R", colorCounts[3]],
|
||||
["G", colorCounts[4]],
|
||||
["C", colorlessCount],
|
||||
];
|
||||
if (segs.every(([, count]) => count === 0)) return null;
|
||||
return (
|
||||
<div className="color-bar">
|
||||
{segs.map(([code, count]) =>
|
||||
count > 0 ? (
|
||||
<span
|
||||
key={code}
|
||||
className={`color-bar-seg ${code}`}
|
||||
style={{ flexGrow: count }}
|
||||
title={`${code === "C" ? "Colorless" : code}: ${count.toLocaleString()}`}
|
||||
/>
|
||||
) : null,
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/** A mana-value histogram (bar height proportional to the largest bucket),
|
||||
* each bar segmented by color like {@link ColorDistributionBar}. */
|
||||
export function ManaCurve({
|
||||
buckets,
|
||||
}: {
|
||||
buckets: {
|
||||
label: string;
|
||||
count: number;
|
||||
colorCounts: [number, number, number, number, number]; // W, U, B, R, G
|
||||
colorlessCount: number;
|
||||
}[];
|
||||
}) {
|
||||
const max = Math.max(1, ...buckets.map((b) => b.count));
|
||||
return (
|
||||
<div className="mana-curve">
|
||||
{buckets.map((b) => {
|
||||
const segs: [string, number][] = [
|
||||
["W", b.colorCounts[0]],
|
||||
["U", b.colorCounts[1]],
|
||||
["B", b.colorCounts[2]],
|
||||
["R", b.colorCounts[3]],
|
||||
["G", b.colorCounts[4]],
|
||||
["C", b.colorlessCount],
|
||||
];
|
||||
return (
|
||||
<div key={b.label} className="mana-curve-col">
|
||||
<span className="mana-curve-count">{b.count || ""}</span>
|
||||
<div className="mana-curve-bar" style={{ height: `${(b.count / max) * 100}%` }}>
|
||||
{segs.map(([code, count]) =>
|
||||
count > 0 ? (
|
||||
<span
|
||||
key={code}
|
||||
className={`mana-curve-seg ${code}`}
|
||||
style={{ flexGrow: count }}
|
||||
title={`${code === "C" ? "Colorless" : code}: ${count.toLocaleString()}`}
|
||||
/>
|
||||
) : null,
|
||||
)}
|
||||
</div>
|
||||
<span className="mana-curve-label">{b.label}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// --- Persistence ----------------------------------------------------------
|
||||
|
||||
/** useState that mirrors its value to localStorage (JSON), so it survives
|
||||
|
||||
272
src/styles.css
272
src/styles.css
@@ -349,12 +349,14 @@ input[type="checkbox"] {
|
||||
color: var(--faint);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.lib-stats-numbers {
|
||||
/* Generic numeric-stat tile row + segmented color bar — used by both the
|
||||
sidebar "Your library" panel and the per-deck analysis panel. */
|
||||
.stat-tiles-row {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.lib-stat {
|
||||
.stat-tile {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
@@ -367,25 +369,25 @@ input[type="checkbox"] {
|
||||
border-radius: var(--radius);
|
||||
transition: border-color 0.15s, transform 0.15s;
|
||||
}
|
||||
.lib-stat:hover {
|
||||
.stat-tile:hover {
|
||||
border-color: var(--accent-glow);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.lib-stat-value {
|
||||
.stat-tile-value {
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
color: var(--text-strong);
|
||||
font-variant-numeric: tabular-nums;
|
||||
text-shadow: 0 0 14px var(--accent-glow);
|
||||
}
|
||||
.lib-stat-label {
|
||||
.stat-tile-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--faint);
|
||||
}
|
||||
.lib-color-bar {
|
||||
.color-bar {
|
||||
display: flex;
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
@@ -393,16 +395,63 @@ input[type="checkbox"] {
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
.lib-color-seg {
|
||||
.color-bar-seg {
|
||||
min-width: 3px;
|
||||
transition: flex-grow 0.4s ease;
|
||||
}
|
||||
.lib-color-seg.W { background: var(--mtg-w); }
|
||||
.lib-color-seg.U { background: var(--mtg-u); }
|
||||
.lib-color-seg.B { background: var(--mtg-b); }
|
||||
.lib-color-seg.R { background: var(--mtg-r); }
|
||||
.lib-color-seg.G { background: var(--mtg-g); }
|
||||
.lib-color-seg.C { background: var(--mtg-c); }
|
||||
.color-bar-seg.W { background: var(--mtg-w); }
|
||||
.color-bar-seg.U { background: var(--mtg-u); }
|
||||
.color-bar-seg.B { background: var(--mtg-b); }
|
||||
.color-bar-seg.R { background: var(--mtg-r); }
|
||||
.color-bar-seg.G { background: var(--mtg-g); }
|
||||
.color-bar-seg.C { background: var(--mtg-c); }
|
||||
|
||||
/* Mana-value curve histogram (per-deck analysis panel). */
|
||||
.mana-curve {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
min-height: 84px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.mana-curve-col {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
height: 100%;
|
||||
gap: 3px;
|
||||
}
|
||||
.mana-curve-count {
|
||||
font-size: 10px;
|
||||
color: var(--faint);
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.mana-curve-bar {
|
||||
width: 100%;
|
||||
min-height: 2px;
|
||||
border-radius: 3px 3px 0 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: height 0.25s ease;
|
||||
}
|
||||
.mana-curve-seg {
|
||||
width: 100%;
|
||||
min-height: 1px;
|
||||
}
|
||||
.mana-curve-seg.W { background: var(--mtg-w); }
|
||||
.mana-curve-seg.U { background: var(--mtg-u); }
|
||||
.mana-curve-seg.B { background: var(--mtg-b); }
|
||||
.mana-curve-seg.R { background: var(--mtg-r); }
|
||||
.mana-curve-seg.G { background: var(--mtg-g); }
|
||||
.mana-curve-seg.C { background: var(--mtg-c); }
|
||||
.mana-curve-label {
|
||||
font-size: 10px;
|
||||
color: var(--faint);
|
||||
}
|
||||
.lib-stats-sub {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -863,6 +912,26 @@ li:focus-within .row-actions {
|
||||
font-weight: 600;
|
||||
color: var(--text-strong);
|
||||
}
|
||||
|
||||
/* Deck list: name+format on one row, actions on their own row below, so
|
||||
* long names don't push the action icons off the edge of the sidebar. */
|
||||
.result-list.deck-list li {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 4px;
|
||||
}
|
||||
.deck-list-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
.deck-list-row .card-name {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
.deck-list-actions-row {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.card-type {
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
@@ -1022,6 +1091,83 @@ tbody tr:hover {
|
||||
max-width: 160px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
TagInput: chip-based multi-value filter with autocomplete
|
||||
(type/subtype/keyword filters in the Library tab)
|
||||
============================================================ */
|
||||
|
||||
.tag-input {
|
||||
position: relative;
|
||||
}
|
||||
.tag-chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
min-height: 34px;
|
||||
padding: 5px 8px;
|
||||
background: var(--bg-input);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
transition: border-color 0.12s, box-shadow 0.12s;
|
||||
}
|
||||
.tag-chips:focus-within {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-subtle);
|
||||
}
|
||||
.tag-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
background: var(--accent-subtle);
|
||||
color: var(--accent-hover);
|
||||
border-radius: 999px;
|
||||
padding: 2px 4px 2px 10px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tag-chip-remove {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 17px;
|
||||
height: 17px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: none;
|
||||
color: inherit;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tag-chip-remove:hover {
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
.tag-chip-input {
|
||||
flex: 1;
|
||||
min-width: 70px;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 3px 2px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.tag-chip-input:focus {
|
||||
outline: none;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
.tag-suggestions {
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
top: calc(100% + 4px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-height: 220px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
Card images: thumbnails, hover preview, tiles
|
||||
============================================================ */
|
||||
@@ -1301,3 +1447,103 @@ tbody tr:hover {
|
||||
min-width: 280px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Prominent commander card display, above the fold on a Commander/Brawl deck. */
|
||||
.commander-hero {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.commander-hero-img {
|
||||
width: 84px;
|
||||
height: 117px;
|
||||
flex-shrink: 0;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
cursor: zoom-in;
|
||||
}
|
||||
.commander-hero-noimg {
|
||||
width: 84px;
|
||||
height: 117px;
|
||||
flex-shrink: 0;
|
||||
border: 1px dashed var(--border);
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--muted);
|
||||
}
|
||||
.commander-hero-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
.commander-hero-label {
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
.commander-hero-name {
|
||||
font-size: 19px;
|
||||
font-weight: 700;
|
||||
color: var(--text-strong);
|
||||
}
|
||||
.commander-hero-type {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* Per-deck analysis panel. */
|
||||
.deck-stats {
|
||||
background: var(--bg-panel);
|
||||
border: 1px solid var(--border-soft);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.deck-stats-head {
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
color: var(--faint);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.deck-stats-body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24px;
|
||||
}
|
||||
.deck-stats-numbers {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
min-width: 220px;
|
||||
}
|
||||
.deck-stats-curve {
|
||||
flex: 1;
|
||||
min-width: 220px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.deck-stats-curve-label {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--faint);
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { api, CardRef } from "../api";
|
||||
import { CardSearchBox, QtyStepper } from "../components";
|
||||
|
||||
@@ -11,11 +11,38 @@ export function CardEntry() {
|
||||
>([]);
|
||||
// Persisted so a "box" location sticks while entering a stack of cards.
|
||||
const [location, setLocation] = useState(() => localStorage.getItem("add-location") || "");
|
||||
const searchInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem("add-location", location);
|
||||
}, [location]);
|
||||
|
||||
// Typing anywhere on this tab — without having clicked into another field
|
||||
// first — jumps focus to the search box and keeps the keystroke that
|
||||
// triggered it, instead of it going nowhere.
|
||||
useEffect(() => {
|
||||
function onKeyDown(e: KeyboardEvent) {
|
||||
const target = e.target;
|
||||
const alreadyTyping =
|
||||
target instanceof HTMLElement &&
|
||||
(target.tagName === "INPUT" ||
|
||||
target.tagName === "TEXTAREA" ||
|
||||
target.tagName === "SELECT" ||
|
||||
target.isContentEditable);
|
||||
if (alreadyTyping) return;
|
||||
if (e.ctrlKey || e.metaKey || e.altKey) return;
|
||||
if (e.key.length !== 1) return; // printable characters only
|
||||
// Let Space still activate a focused button rather than hijacking it.
|
||||
if (target instanceof HTMLElement && target.tagName === "BUTTON" && e.key === " ") return;
|
||||
|
||||
e.preventDefault();
|
||||
setQuery((q) => q + e.key);
|
||||
searchInputRef.current?.focus();
|
||||
}
|
||||
document.addEventListener("keydown", onKeyDown);
|
||||
return () => document.removeEventListener("keydown", onKeyDown);
|
||||
}, []);
|
||||
|
||||
// Debounced fuzzy search.
|
||||
useEffect(() => {
|
||||
const q = query.trim();
|
||||
@@ -63,6 +90,7 @@ export function CardEntry() {
|
||||
</div>
|
||||
|
||||
<CardSearchBox
|
||||
ref={searchInputRef}
|
||||
big
|
||||
autoFocus
|
||||
placeholder="Type a card name… (typos are fine — ↑/↓ then Enter to add)"
|
||||
|
||||
@@ -1,19 +1,24 @@
|
||||
import { useEffect, useRef, useState, useCallback } from "react";
|
||||
import { api, CardRef, Deck, DeckEntry } from "../api";
|
||||
import { useEffect, useMemo, useRef, useState, useCallback } from "react";
|
||||
import { api, CardRef, COLORS, Deck, DeckEntry } from "../api";
|
||||
import {
|
||||
CardSearchBox,
|
||||
CardThumb,
|
||||
CardTile,
|
||||
ColorDistributionBar,
|
||||
ColorPips,
|
||||
ConfirmDialog,
|
||||
GroupBySelect,
|
||||
GroupMode,
|
||||
IconButton,
|
||||
Icons,
|
||||
ManaCurve,
|
||||
PromptDialog,
|
||||
QtyStepper,
|
||||
StatTile,
|
||||
ViewToggle,
|
||||
groupCards,
|
||||
useClickPreview,
|
||||
useHoverPreview,
|
||||
usePersistedState,
|
||||
useViewMode,
|
||||
} from "../components";
|
||||
@@ -29,6 +34,140 @@ function friendlyDeckError(err: unknown): string {
|
||||
return msg.includes("UNIQUE constraint failed") ? "A deck with that name already exists." : msg;
|
||||
}
|
||||
|
||||
interface DeckStats {
|
||||
totalCards: number;
|
||||
uniqueCards: number;
|
||||
landCount: number;
|
||||
avgManaValue: number;
|
||||
curve: {
|
||||
label: string;
|
||||
count: number;
|
||||
colorCounts: [number, number, number, number, number];
|
||||
colorlessCount: number;
|
||||
}[];
|
||||
colorCounts: [number, number, number, number, number];
|
||||
colorlessCount: number;
|
||||
manaProduction: [number, number, number, number, number];
|
||||
colorlessProduction: number;
|
||||
manaConsumption: [number, number, number, number, number];
|
||||
colorlessConsumption: number;
|
||||
}
|
||||
|
||||
/**
|
||||
* Deck composition stats, excluding the commander (shown separately in its
|
||||
* own hero display) — matches the usual "99 + commander" framing even for
|
||||
* non-Commander decks, where it's just "everything but the flagged card".
|
||||
*/
|
||||
function computeDeckStats(contents: DeckEntry[]): DeckStats {
|
||||
const cards = contents.filter((e) => !e.is_commander);
|
||||
const totalCards = cards.reduce((sum, e) => sum + e.quantity, 0);
|
||||
const lands = cards.filter((e) => e.type_line.includes("Land"));
|
||||
const nonlands = cards.filter((e) => !e.type_line.includes("Land"));
|
||||
const landCount = lands.reduce((sum, e) => sum + e.quantity, 0);
|
||||
const nonlandCount = nonlands.reduce((sum, e) => sum + e.quantity, 0);
|
||||
const avgManaValue = nonlandCount
|
||||
? nonlands.reduce((sum, e) => sum + e.mana_value * e.quantity, 0) / nonlandCount
|
||||
: 0;
|
||||
|
||||
const bucketLabels = ["0", "1", "2", "3", "4", "5", "6+"];
|
||||
const curveBuckets = new Map(
|
||||
bucketLabels.map((l) => [
|
||||
l,
|
||||
{ count: 0, colorCounts: [0, 0, 0, 0, 0] as [number, number, number, number, number], colorlessCount: 0 },
|
||||
]),
|
||||
);
|
||||
for (const e of nonlands) {
|
||||
const label = e.mana_value >= 6 ? "6+" : String(Math.floor(e.mana_value));
|
||||
const bucket = curveBuckets.get(label)!;
|
||||
bucket.count += e.quantity;
|
||||
if (e.color_identity === 0) {
|
||||
bucket.colorlessCount += e.quantity;
|
||||
} else {
|
||||
COLORS.forEach((c, i) => {
|
||||
if (e.color_identity & c.bit) bucket.colorCounts[i] += e.quantity;
|
||||
});
|
||||
}
|
||||
}
|
||||
const curve = bucketLabels.map((label) => ({ label, ...curveBuckets.get(label)! }));
|
||||
|
||||
const colorCounts: [number, number, number, number, number] = [0, 0, 0, 0, 0];
|
||||
let colorlessCount = 0;
|
||||
for (const e of cards) {
|
||||
if (e.color_identity === 0) {
|
||||
colorlessCount += e.quantity;
|
||||
} else {
|
||||
COLORS.forEach((c, i) => {
|
||||
if (e.color_identity & c.bit) colorCounts[i] += e.quantity;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const manaProduction: [number, number, number, number, number] = [0, 0, 0, 0, 0];
|
||||
let colorlessProduction = 0;
|
||||
for (const e of cards) {
|
||||
if (e.produces_colorless) colorlessProduction += e.quantity;
|
||||
COLORS.forEach((c, i) => {
|
||||
if (e.produced_mana & c.bit) manaProduction[i] += e.quantity;
|
||||
});
|
||||
}
|
||||
|
||||
// Consumption: colored cost requirements of the spells actually cast —
|
||||
// lands are excluded since they have no colored casting cost.
|
||||
const manaConsumption: [number, number, number, number, number] = [0, 0, 0, 0, 0];
|
||||
let colorlessConsumption = 0;
|
||||
for (const e of nonlands) {
|
||||
if (e.colors === 0) {
|
||||
colorlessConsumption += e.quantity;
|
||||
} else {
|
||||
COLORS.forEach((c, i) => {
|
||||
if (e.colors & c.bit) manaConsumption[i] += e.quantity;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
totalCards,
|
||||
uniqueCards: cards.length,
|
||||
landCount,
|
||||
avgManaValue,
|
||||
curve,
|
||||
colorCounts,
|
||||
colorlessCount,
|
||||
manaProduction,
|
||||
colorlessProduction,
|
||||
manaConsumption,
|
||||
colorlessConsumption,
|
||||
};
|
||||
}
|
||||
|
||||
/** A prominent, art-forward display for a deck's commander (Commander/Brawl). */
|
||||
function CommanderHero({ card, onClear }: { card: DeckEntry; onClear: () => void }) {
|
||||
const { handlers } = useHoverPreview();
|
||||
const { open } = useClickPreview();
|
||||
return (
|
||||
<div className="commander-hero">
|
||||
{card.image_uri ? (
|
||||
<img
|
||||
className="commander-hero-img"
|
||||
src={card.image_uri}
|
||||
alt={card.name}
|
||||
onClick={() => open(card)}
|
||||
{...handlers(card)}
|
||||
/>
|
||||
) : (
|
||||
<div className="commander-hero-noimg">{card.name}</div>
|
||||
)}
|
||||
<div className="commander-hero-info">
|
||||
<span className="commander-hero-label">Commander</span>
|
||||
<span className="commander-hero-name">{card.name}</span>
|
||||
<span className="commander-hero-type">{card.type_line}</span>
|
||||
<ColorPips mask={card.color_identity} />
|
||||
</div>
|
||||
<IconButton icon={Icons.close} label="Clear commander" onClick={onClear} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// How long a card decremented to 0 copies lingers (dimmed, still adjustable)
|
||||
// before actually dropping out of the deck — same grace-period pattern as
|
||||
// the Library tab, so a mistaken removal can be undone with +.
|
||||
@@ -289,10 +428,8 @@ export function DeckView() {
|
||||
|
||||
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);
|
||||
const commanderEntry = contents.find((e) => e.oracle_id === deck?.commander_oracle_id);
|
||||
const deckStats = useMemo(() => computeDeckStats(contents), [contents]);
|
||||
|
||||
function deckTiles(entries: DeckEntry[]) {
|
||||
return (
|
||||
@@ -409,45 +546,48 @@ export function DeckView() {
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
<ul className="result-list">
|
||||
<ul className="result-list deck-list">
|
||||
{decks.map((d) => (
|
||||
<li
|
||||
key={d.id}
|
||||
style={d.id === selected ? { background: "var(--accent-subtle)" } : undefined}
|
||||
onClick={() => setSelected(d.id)}
|
||||
>
|
||||
<span className="card-name">{d.name}</span>
|
||||
{d.format && <span className="deck-chip">{d.format}</span>}
|
||||
<span className="spacer" />
|
||||
<span className="row-actions">
|
||||
<IconButton
|
||||
icon={Icons.pencil}
|
||||
label="Rename deck"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setDialogError(null);
|
||||
setDialog({ kind: "rename", deck: d });
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
icon={Icons.copy}
|
||||
label="Duplicate deck"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setDialogError(null);
|
||||
setDialog({ kind: "duplicate", deck: d });
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
icon={Icons.trash}
|
||||
label="Delete deck"
|
||||
danger
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setDialog({ kind: "delete", deck: d });
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
<div className="deck-list-row">
|
||||
<span className="card-name">{d.name}</span>
|
||||
</div>
|
||||
<div className="deck-list-row deck-list-actions-row">
|
||||
{d.format ? <span className="deck-chip">{d.format}</span> : <span />}
|
||||
<span className="row-actions">
|
||||
<IconButton
|
||||
icon={Icons.pencil}
|
||||
label="Rename deck"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setDialogError(null);
|
||||
setDialog({ kind: "rename", deck: d });
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
icon={Icons.copy}
|
||||
label="Duplicate deck"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setDialogError(null);
|
||||
setDialog({ kind: "duplicate", deck: d });
|
||||
}}
|
||||
/>
|
||||
<IconButton
|
||||
icon={Icons.trash}
|
||||
label="Delete deck"
|
||||
danger
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setDialog({ kind: "delete", deck: d });
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
{decks.length === 0 && (
|
||||
@@ -500,6 +640,45 @@ export function DeckView() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{COMMANDER_FORMATS.includes(deck.format) && commanderEntry && (
|
||||
<CommanderHero card={commanderEntry} onClear={clearCommander} />
|
||||
)}
|
||||
|
||||
{contents.length > 0 && (
|
||||
<div className="deck-stats">
|
||||
<div className="deck-stats-head">Deck analysis</div>
|
||||
<div className="deck-stats-body">
|
||||
<div className="deck-stats-numbers">
|
||||
<div className="stat-tiles-row">
|
||||
<StatTile value={deckStats.totalCards} label="cards" />
|
||||
<StatTile value={deckStats.uniqueCards} label="unique" />
|
||||
<StatTile value={deckStats.landCount} label="lands" />
|
||||
<StatTile value={deckStats.avgManaValue.toFixed(2)} label="avg MV" />
|
||||
</div>
|
||||
<div className="deck-stats-curve-label">Color identity</div>
|
||||
<ColorDistributionBar
|
||||
colorCounts={deckStats.colorCounts}
|
||||
colorlessCount={deckStats.colorlessCount}
|
||||
/>
|
||||
<div className="deck-stats-curve-label">Mana production</div>
|
||||
<ColorDistributionBar
|
||||
colorCounts={deckStats.manaProduction}
|
||||
colorlessCount={deckStats.colorlessProduction}
|
||||
/>
|
||||
<div className="deck-stats-curve-label">Mana consumption</div>
|
||||
<ColorDistributionBar
|
||||
colorCounts={deckStats.manaConsumption}
|
||||
colorlessCount={deckStats.colorlessConsumption}
|
||||
/>
|
||||
</div>
|
||||
<div className="deck-stats-curve">
|
||||
<div className="deck-stats-curve-label">Mana curve (nonland)</div>
|
||||
<ManaCurve buckets={deckStats.curve} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Deck metadata: format + (for Commander/Brawl) the commander card. */}
|
||||
<div className="deck-meta">
|
||||
<label className="row" style={{ gap: 6 }}>
|
||||
@@ -515,15 +694,13 @@ export function DeckView() {
|
||||
|
||||
{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 && (
|
||||
<IconButton icon={Icons.close} label="Clear commander" onClick={clearCommander} />
|
||||
)}
|
||||
</div>
|
||||
{!commanderEntry && <span className="muted">No commander set yet.</span>}
|
||||
<CardSearchBox
|
||||
placeholder="Search to set the commander…"
|
||||
placeholder={
|
||||
commanderEntry
|
||||
? "Search to change the commander…"
|
||||
: "Search to set the commander…"
|
||||
}
|
||||
value={cmdQuery}
|
||||
onChange={setCmdQuery}
|
||||
results={cmdResults}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { api, Deck, LibraryCard, LibraryFilter } from "../api";
|
||||
import { api, Deck, LibraryCard, LibraryFacets, LibraryFilter } from "../api";
|
||||
import {
|
||||
CardThumb,
|
||||
CardTile,
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
LocationField,
|
||||
PromptDialog,
|
||||
QtyStepper,
|
||||
TagInput,
|
||||
ViewToggle,
|
||||
groupCards,
|
||||
usePersistedState,
|
||||
@@ -21,6 +22,8 @@ import {
|
||||
// user a window to undo an accidental removal by clicking + again.
|
||||
const REMOVAL_GRACE_MS = 5000;
|
||||
|
||||
const NO_FACETS: LibraryFacets = { types: [], subtypes: [], keywords: [] };
|
||||
|
||||
/** Browse & filter the owned library by name and card criteria. */
|
||||
export function LibraryBrowser() {
|
||||
const [text, setText] = useState("");
|
||||
@@ -28,11 +31,13 @@ export function LibraryBrowser() {
|
||||
const [colorsInclude, setColorsInclude] = useState(0);
|
||||
const [cmcMin, setCmcMin] = useState("");
|
||||
const [cmcMax, setCmcMax] = useState("");
|
||||
const [type, setType] = useState("");
|
||||
const [subtype, setSubtype] = useState("");
|
||||
const [keyword, setKeyword] = useState("");
|
||||
const [types, setTypes] = useState<string[]>([]);
|
||||
const [subtypes, setSubtypes] = useState<string[]>([]);
|
||||
const [keywords, setKeywords] = useState<string[]>([]);
|
||||
const [inDeck, setInDeck] = useState<number | "">("");
|
||||
const [location, setLocation] = useState("");
|
||||
const [oracleText, setOracleText] = useState("");
|
||||
const [facets, setFacets] = useState<LibraryFacets>(NO_FACETS);
|
||||
|
||||
const [decks, setDecks] = useState<Deck[]>([]);
|
||||
const [rows, setRows] = useState<LibraryCard[]>([]);
|
||||
@@ -53,6 +58,12 @@ export function LibraryBrowser() {
|
||||
api.listDecks().then(setDecks);
|
||||
}, []);
|
||||
|
||||
// Refetch whenever refreshKey bumps too, so newly-owned cards' types
|
||||
// become suggestible without restarting the app.
|
||||
useEffect(() => {
|
||||
api.getLibraryFacets().then(setFacets).catch(() => setFacets(NO_FACETS));
|
||||
}, [refreshKey]);
|
||||
|
||||
// Cancel any in-flight removal timers on unmount so they don't fire against
|
||||
// an unmounted component.
|
||||
useEffect(() => () => removalTimers.current.forEach(clearTimeout), []);
|
||||
@@ -81,11 +92,12 @@ export function LibraryBrowser() {
|
||||
colors_include: colorsInclude || null,
|
||||
cmc_min: cmcMin === "" ? null : Number(cmcMin),
|
||||
cmc_max: cmcMax === "" ? null : Number(cmcMax),
|
||||
types: splitCsv(type),
|
||||
subtypes: splitCsv(subtype),
|
||||
keywords: splitCsv(keyword),
|
||||
types,
|
||||
subtypes,
|
||||
keywords,
|
||||
in_deck: inDeck === "" ? null : Number(inDeck),
|
||||
location: location.trim() || null,
|
||||
oracle_text: oracleText.trim() || null,
|
||||
};
|
||||
const t = setTimeout(() => {
|
||||
api.searchLibrary(filter).then(setRows).catch(() => setRows([]));
|
||||
@@ -97,11 +109,12 @@ export function LibraryBrowser() {
|
||||
colorsInclude,
|
||||
cmcMin,
|
||||
cmcMax,
|
||||
type,
|
||||
subtype,
|
||||
keyword,
|
||||
types,
|
||||
subtypes,
|
||||
keywords,
|
||||
inDeck,
|
||||
location,
|
||||
oracleText,
|
||||
refreshKey,
|
||||
]);
|
||||
|
||||
@@ -446,15 +459,25 @@ export function LibraryBrowser() {
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Type(s)</label>
|
||||
<input value={type} onChange={(e) => setType(e.target.value)} placeholder="Creature, Legendary" />
|
||||
<TagInput values={types} onChange={setTypes} suggestions={facets.types} placeholder="Creature…" />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Subtype(s)</label>
|
||||
<input value={subtype} onChange={(e) => setSubtype(e.target.value)} placeholder="Elf" />
|
||||
<TagInput
|
||||
values={subtypes}
|
||||
onChange={setSubtypes}
|
||||
suggestions={facets.subtypes}
|
||||
placeholder="Elf…"
|
||||
/>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Keyword(s)</label>
|
||||
<input value={keyword} onChange={(e) => setKeyword(e.target.value)} placeholder="Flying" />
|
||||
<TagInput
|
||||
values={keywords}
|
||||
onChange={setKeywords}
|
||||
suggestions={facets.keywords}
|
||||
placeholder="Flying…"
|
||||
/>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>In deck</label>
|
||||
@@ -475,6 +498,14 @@ export function LibraryBrowser() {
|
||||
placeholder="e.g. Box 1"
|
||||
/>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Oracle text</label>
|
||||
<input
|
||||
value={oracleText}
|
||||
onChange={(e) => setOracleText(e.target.value)}
|
||||
placeholder="e.g. landfall"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{rows.length === 0 ? (
|
||||
@@ -496,10 +527,3 @@ export function LibraryBrowser() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function splitCsv(s: string): string[] {
|
||||
return s
|
||||
.split(",")
|
||||
.map((x) => x.trim())
|
||||
.filter(Boolean);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user