Something went wrong. Try again.
An atproto AppView for tracking a Magic: The Gathering collection github.com/eth0net/manaweb
appview atproto mtg rust typescript
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788import { appLanguage, type Card, type Catalog, cardName, image, type Print, words,} from "./catalog";import { Add } from "./collection/Add";import { Mana } from "./Mana";import { describe, hasArt, Language } from "./Printing";import { Printings } from "./Printings";
// Card names are read in the app's language, not the printing's. A setting of// its own once there is somewhere to put it — see `docs/search.md`.const APP = appLanguage();
// One card and the printing on show for it. The printing is given rather than// chosen here, because a search picks it by language and a set is the printing.export function CardRow({ card, print, catalog,}: { card: Card; print: Print | undefined; catalog: Catalog;}) { const tags = card.kind === "card" ? card.flags : [card.kind, ...card.flags]; const name = cardName(card.name, print, APP);
return ( <li> <div className="card"> {print && hasArt(print) && ( <Printings card={card} catalog={catalog} name={name.text} start={print} trigger="art" label={ <img src={image(print.id, "small")} alt="" loading="lazy" /> } /> )} <div> <h2> {name.text} {/* Only when the printing isn't in the language it is read in, so an English name over an English printing says nothing. */} {print && print.lang !== name.lang && ( <Language code={print.lang} /> )} {tags.map((tag) => ( <span className="tag" key={tag}> {words(tag)} </span> ))} </h2> <p> {card.typeLine} {card.stats && <span className="stats">{card.stats}</span>} {card.manaCost && <Mana cost={card.manaCost} />} </p> {print && <p className="print">{describe(print)}</p>} <div className="meta"> {print && <Add print={print} />} <Printings card={card} catalog={catalog} name={name.text} trigger="link" label={`${card.printings} printing${ card.printings === 1 ? "" : "s" }`} /> {card.edhrecRank && ( <span>EDHREC #{card.edhrecRank.toLocaleString()}</span> )} </div> </div> </div> </li> );}