dominionator/src/draw.ts

70 lines
1.4 KiB
TypeScript
Raw Normal View History

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
};