43 lines
829 B
TypeScript
43 lines
829 B
TypeScript
|
import React from "react";
|
||
|
|
|
||
|
|
type CardType =
|
||
|
|
| "Action"
|
||
|
|
| "Treasure"
|
||
|
|
| "Victory"
|
||
|
|
| "Curse"
|
||
|
|
| "Reaction"
|
||
|
|
| "Duration"
|
||
|
|
| "Reserve"
|
||
|
|
| "Night"
|
||
|
|
|
||
|
|
type CardData = {
|
||
|
|
name: string,
|
||
|
|
text: string,
|
||
|
|
cost: string,
|
||
|
|
preview: string,
|
||
|
|
types: Array<CardType>,
|
||
|
|
art: string,
|
||
|
|
artCredit: string,
|
||
|
|
v: number,
|
||
|
|
}
|
||
|
|
|
||
|
|
const drawCard = (canvas: HTMLCanvasElement, card: CardData) => {
|
||
|
|
const context = canvas.getContext("2d");
|
||
|
|
if (!context) {
|
||
|
|
throw new Error("Could not get the context of the canvas");
|
||
|
|
}
|
||
|
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
||
|
|
context.font = "88px myTitle"
|
||
|
|
context.fillText(card.name, 100, 100);
|
||
|
|
}
|
||
|
|
|
||
|
|
export const Card = (props: {card: CardData}) => {
|
||
|
|
const {
|
||
|
|
card
|
||
|
|
} = props;
|
||
|
|
return <canvas className="card" width={1403} height={2151} ref={(el) => {
|
||
|
|
if (el) {
|
||
|
|
drawCard(el, card);
|
||
|
|
}
|
||
|
|
}}></canvas>
|
||
|
|
}
|