Add image drawing

src/draw.ts

@@ -3,25 +3,28 @@ import {
 	parse,
 	renderDominionText,
 } from "./dominiontext.ts";
-import { DominionCardType, DominionColor, TYPE_ACTION } from "./types.ts";
+import { DominionCardType, TYPE_ACTION } from "./types.ts";
 import { DominionCard } from "./types.ts";
 
 const imageCache: Record<string, HTMLImageElement> = {};
 export const loadImage = (
-	key: string,
-	src: string
-): Promise<HTMLImageElement> => {
+	src: string,
+	key?: string
+): Promise<HTMLImageElement | null> => {
 	return new Promise((resolve) => {
-		if (key in imageCache && imageCache[key]) {
+		if (key && key in imageCache && imageCache[key]) {
 			resolve(imageCache[key]);
 		}
 		const img = new Image();
 		img.onload = () => {
-			imageCache[key] = img;
+			if (key) {
+				imageCache[key] = img;
+			}
 			resolve(img);
 		};
 		img.onerror = (e) => {
 			console.log("err", e);
+			resolve(null);
 		};
 		img.src = src;
 	});
@@ -53,7 +56,7 @@ const imageList = [
 export const loadImages = async () => {
 	for (const imageInfo of imageList) {
 		const { key, src } = imageInfo;
-		await loadImage(key, src);
+		await loadImage(src, key);
 	}
 };
 
@@ -123,6 +126,24 @@ const drawStandardCard = async (
 	const h = context.canvas.height;
 	context.save();
 	// Draw the image
+	const image = await loadImage(card.image);
+	if (image) {
+		const cx = w / 2;
+		const cy = 704;
+		const windowHeight = 830;
+		const windowWidth = 1194;
+		const scale = Math.max(
+			windowHeight / image.height,
+			windowWidth / image.width
+		);
+		context.drawImage(
+			image,
+			cx - (scale * image.width) / 2,
+			cy - (scale * image.height) / 2,
+			scale * image.width,
+			scale * image.height
+		);
+	}
 	// Draw the card base
 	const color = getColors(card.types).primary; // "#ffbc55";
 	context.drawImage(colorImage(getImage("card-color-1"), color), 0, 0);
@@ -178,7 +199,33 @@ const drawStandardCard = async (
 		);
 	}
 	// Draw the icon
-	// Draw the credit
+	// Draw the author credit
+	context.fillStyle = "white";
+	context.font = "31pt DominionText";
+	const authorMeasure = await measureDominionText(
+		context,
+		parse(card.author)
+	);
+	await renderDominionText(
+		context,
+		parse(card.author),
+		w - 150 - authorMeasure.width / 2,
+		2035,
+		w / 2 - 150
+	);
+	// Draw the artist credit
+	const artistMeasure = await measureDominionText(
+		context,
+		parse(card.artist)
+	);
+	await renderDominionText(
+		context,
+		parse(card.artist),
+		155 + artistMeasure.width / 2,
+		2035,
+		w / 2 - 150
+	);
+	// Restore the context
 	context.restore();
 };