wip

src/draw.ts

@@ -1,5 +1,43 @@
 import { DominionCard } from "./types.ts";
 
+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;
+};
+
 export const drawCard = (
 	context: CanvasRenderingContext2D,
 	card: DominionCard
@@ -19,7 +57,7 @@ const drawStandardCard = async (
 	const h = context.canvas.height;
 	context.save();
 	context.fillStyle = "brown";
-	context.fillRect(0, 0, w, h);
+	context.drawImage(getImage("card"), 0, 0);
 	context.restore();
 };