components/trading-card

Type Aliases

TradingCardFinish

TradingCardFinish = "standard" | "holo"

Print finish: holo adds a foil sheen on hover that stills for reduced motion.

---

TradingCardFact

TradingCardFact = Readonly<{ label: string; value: ReactNode; }>

One footer fact, printed like a trading card’s weakness or retreat line.

---

TradingCardMove

TradingCardMove = Readonly<{ cost?: ReactNode; name: string; value?: ReactNode; children?: ReactNode; }>

The card’s one move: a cost of symbols, a name, and caller-owned text or controls.

---

TradingCardProps

TradingCardProps = Omit<HTMLAttributes<HTMLElement>>, "title" | "children"> > & object

Props accepted by TradingCard.

Type Declaration

name

name: string

stage?

optional stage?: string

A small stage label printed before the name, such as “Spore”.

stat?

optional stat?: ReactNode

The stat printed at the right of the name bar, such as “60 SP”.

typeLine?

optional typeLine?: string

The type line under the art window.

art

art: ReactNode

move

move: TradingCardMove

flavor?

optional flavor?: ReactNode

facts?

optional facts?: readonly TradingCardFact[]

setNumber?

optional setNumber?: string

Collector number, such as “001/001”.

rarity?

optional rarity?: ReactNode

A small rarity mark printed by the set number.

finish?

optional finish?: TradingCardFinish

Variables

TradingCard

const TradingCard: ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>>, "title" | "children"> > & object & RefAttributes<HTMLElement>>>>

A 63:88 trading card: a bright rim, a name bar with a stage and stat, an art window, one move row that can hold a real form, a flavor line and a footer of facts with a set number and rarity mark. The move body is caller-owned, so a form inside it keeps its own labels, focus and errors.