41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import type { Card } from "./cards";
|
|
|
|
function Symbol({ s }: { s: string }) {
|
|
return <span className={`mana mana-${s === "€" ? "E" : s}`}>{s}</span>;
|
|
}
|
|
|
|
function renderText(line: string) {
|
|
return line.split(/(\{[^}]+\})/g).map((part, i) =>
|
|
part.startsWith("{") ? <Symbol key={i} s={part.slice(1, -1)} /> : part,
|
|
);
|
|
}
|
|
|
|
export function CardView({ card, big = false }: { card: Card; big?: boolean }) {
|
|
return (
|
|
<div className={`card c-${card.color} ${big ? "big" : ""}`}>
|
|
<div className="card-inner">
|
|
<div className="bar title">
|
|
<span>{card.name}</span>
|
|
<span className="cost">
|
|
{card.cost.map((c, i) => (
|
|
<Symbol key={i} s={c} />
|
|
))}
|
|
</span>
|
|
</div>
|
|
<div className="art">{card.art}</div>
|
|
<div className="bar type">
|
|
<span>{card.type}</span>
|
|
<span className={`rarity r-${card.rarity}`}>◆</span>
|
|
</div>
|
|
<div className="textbox">
|
|
{card.text.map((t, i) => (
|
|
<p key={i}>{renderText(t)}</p>
|
|
))}
|
|
{card.flavor && <p className="flavor">{card.flavor}</p>}
|
|
</div>
|
|
{card.pt && <div className="pt">{card.pt}</div>}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|