Add image drawing

src/dominiontext.ts

@@ -235,13 +235,13 @@ export const measureDominionText = async (
 			}
 			line.width = line.pieces
 				.map((piece) => piece.measure.width)
-				.reduce((a, b) => a + b);
+				.reduce((a, b) => a + b, 0);
 			return line;
 		}),
 		width: Math.max(...lines.map((line) => line.width)),
 		height: lines
 			.map((line) => line.ascent + line.descent)
-			.reduce((a, b) => a + b),
+			.reduce((a, b) => a + b, 0),
 	};
 };
 

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,
-	src: string
+	key?: string
-): Promise<HTMLImageElement> => {
+): 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();
 };
 

src/sampleData.ts

@@ -1,7 +1,6 @@
 import {
 	DominionCard,
 	TYPE_ACTION,
-	TYPE_ATTACK,
 	TYPE_REACTION,
 	TYPE_TREASURE,
 } from "./types.ts";
@@ -11,9 +10,9 @@ export const sampleCard1: DominionCard = {
 	title: "Title",
 	description: "Hello, world.",
 	types: [TYPE_ACTION, TYPE_REACTION],
-	image: "",
+	image: "https://wiki.dominionstrategy.com/images/7/76/AdventurerArt.jpg",
-	artist: "",
+	artist: "Dall-E",
-	author: "",
+	author: "John Doe",
 	version: "",
 	cost: "$",
 	preview: "",
@@ -25,8 +24,8 @@ export const sampleCard2: DominionCard = {
 	description: "+1 Card\n+1 Action\n+1 Buy\n+$1",
 	types: [TYPE_ACTION],
 	image: "",
-	artist: "",
+	artist: "Leonardo DaVinci",
-	author: "",
+	author: "Jane Smith",
 	version: "",
 	cost: "$4",
 	preview: "",