2024-12-29 23:00:38 -05:00
|
|
|
import { DominionCard } from "./types.ts";
|
2023-12-27 11:37:37 -08:00
|
|
|
|
2024-12-31 11:53:45 -05:00
|
|
|
const imageCache: Record<string, HTMLImageElement> = {};
|
|
|
|
export const loadImage = (
|
|
|
|
key: string,
|
|
|
|
src: string
|
|
|
|
): Promise<HTMLImageElement> => {
|
|
|
|
return new Promise((resolve) => {
|
|
|
|
if (key in imageCache && imageCache[key]) {
|
|
|
|
resolve(imageCache[key]);
|
|
|
|
}
|
|
|
|
const img = new Image();
|
|
|
|
img.onload = () => {
|
|
|
|
imageCache[key] = img;
|
|
|
|
resolve(img);
|
|
|
|
};
|
|
|
|
img.src = src;
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
const imageList = [
|
|
|
|
{
|
|
|
|
key: "card",
|
|
|
|
src: "/assets/CardColorOne.png",
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
for (const imageInfo of imageList) {
|
|
|
|
const { key, src } = imageInfo;
|
|
|
|
await loadImage(key, src);
|
|
|
|
}
|
|
|
|
|
|
|
|
export const getImage = (key: string) => {
|
|
|
|
const image = imageCache[key];
|
|
|
|
if (!image) {
|
|
|
|
throw Error(`Tried to get an invalid image ${key}`);
|
|
|
|
}
|
|
|
|
return image;
|
|
|
|
};
|
|
|
|
|
2024-12-29 23:00:38 -05:00
|
|
|
export const drawCard = (
|
|
|
|
context: CanvasRenderingContext2D,
|
|
|
|
card: DominionCard
|
|
|
|
): Promise<void> => {
|
2023-12-27 11:37:37 -08:00
|
|
|
if (card.orientation === "card") {
|
2024-12-29 23:00:38 -05:00
|
|
|
return drawStandardCard(context, card);
|
2023-12-27 11:37:37 -08:00
|
|
|
} else {
|
2024-12-29 23:00:38 -05:00
|
|
|
return drawLandscapeCard(context, card);
|
2023-12-27 11:37:37 -08:00
|
|
|
}
|
2024-12-29 23:00:38 -05:00
|
|
|
};
|
2023-12-27 11:37:37 -08:00
|
|
|
|
2024-12-29 23:00:38 -05:00
|
|
|
const drawStandardCard = async (
|
|
|
|
context: CanvasRenderingContext2D,
|
|
|
|
card: DominionCard
|
|
|
|
): Promise<void> => {
|
|
|
|
const w = context.canvas.width;
|
|
|
|
const h = context.canvas.height;
|
|
|
|
context.save();
|
|
|
|
context.fillStyle = "brown";
|
2024-12-31 11:53:45 -05:00
|
|
|
context.drawImage(getImage("card"), 0, 0);
|
2024-12-29 23:00:38 -05:00
|
|
|
context.restore();
|
|
|
|
};
|
2023-12-27 11:37:37 -08:00
|
|
|
|
2024-12-29 23:00:38 -05:00
|
|
|
const drawLandscapeCard = async (
|
|
|
|
context: CanvasRenderingContext2D,
|
|
|
|
card: DominionCard
|
|
|
|
): Promise<void> => {
|
2023-12-27 11:37:37 -08:00
|
|
|
// TODO: everything
|
2024-12-29 23:00:38 -05:00
|
|
|
};
|