118 lines
2.9 KiB
TypeScript
118 lines
2.9 KiB
TypeScript
import * as React from "react";
|
|
import { CardProps } from "./types";
|
|
|
|
export const fullcardStyles = {
|
|
content: {
|
|
backgroundColor: "#0c0c0c",
|
|
color: "#f8f8f8"
|
|
}
|
|
};
|
|
|
|
export const FullCard = ({ card }: { card: CardProps | null }) => {
|
|
if (card === null) {
|
|
return <></>;
|
|
}
|
|
|
|
return (
|
|
<div className="fullcard">
|
|
<div className="content">
|
|
<div>
|
|
<img src={card.imageUrl} alt={card.name} />
|
|
<h4>{card.name}</h4>
|
|
<p className="card-text">{card.text}</p>
|
|
</div>
|
|
<div>
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<strong>Type</strong>
|
|
</td>
|
|
<td>{card.type}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<strong>Subtypes</strong>
|
|
</td>
|
|
<td>{card.subtypes ? card.subtypes.join(", ") : ""}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<strong>Set Name:</strong>
|
|
</td>
|
|
<td>{card.set.name}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<strong>Rarity</strong>
|
|
</td>
|
|
<td>{card.rarity}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<strong>Set</strong>
|
|
</td>
|
|
<td>{card.set.name}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<strong>Attributes</strong>
|
|
</td>
|
|
<td>{card.attributes.join(", ")}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<strong>Keywords</strong>
|
|
</td>
|
|
<td>{card.keywords}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div>
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<strong>Cost</strong>
|
|
</td>
|
|
<td>{card.cost}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<strong>Power</strong>
|
|
</td>
|
|
<td>{card.power}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<strong>Health</strong>
|
|
</td>
|
|
<td>{card.health}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<strong>Soul Summon</strong>
|
|
</td>
|
|
<td>{card.soulSummon}</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<strong>Soul Trap</strong>
|
|
</td>
|
|
<td>{card.soulTrap}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
{card.collectible ? <p>This card is considered collectible.</p> : ""}
|
|
{card.unique ? (
|
|
<p>This card is unique. Unique cards may only be used once per deck.</p>
|
|
) : (
|
|
""
|
|
)}
|
|
</div>
|
|
);
|
|
};
|