draw types

src/draw.ts

@@ -1,5 +1,9 @@
-import { parse, renderDominionText } from "./dominiontext.ts";
-import { TYPE_ACTION } from "./types.ts";
+import {
+	measureDominionText,
+	parse,
+	renderDominionText,
+} from "./dominiontext.ts";
+import { DominionCardType, DominionColor, TYPE_ACTION } from "./types.ts";
 import { DominionCard } from "./types.ts";
 
 const imageCache: Record<string, HTMLImageElement> = {};
@@ -91,6 +95,26 @@ export const drawCard = (
 	}
 };
 
+const getColors = (types: DominionCardType[]): { primary: string } => {
+	const byPriority = [...types]
+		.filter((type) => type.color)
+		.sort((a, b) => b.color!.priority - a.color!.priority);
+	if (byPriority.length === 0) {
+		return { primary: "white" };
+	}
+	const priority = byPriority[0]!;
+	if (priority !== TYPE_ACTION) {
+		return { primary: priority.color!.value };
+	} else {
+		const overriders = byPriority.filter((t) => t.color!.overridesAction);
+		if (overriders.length) {
+			return { primary: overriders[0]!.color!.value };
+		} else {
+			return { primary: priority.color!.value };
+		}
+	}
+};
+
 const drawStandardCard = async (
 	context: CanvasRenderingContext2D,
 	card: DominionCard & { orientation: "card" }
@@ -100,13 +124,13 @@ const drawStandardCard = async (
 	context.save();
 	// Draw the image
 	// Draw the card base
-	const color = TYPE_ACTION.color?.value; // "#ffbc55";
+	const color = getColors(card.types).primary; // "#ffbc55";
 	context.drawImage(colorImage(getImage("card-color-1"), color), 0, 0);
 	context.drawImage(getImage("card-gray"), 0, 0);
 	context.drawImage(colorImage(getImage("card-brown"), "#ff9911"), 0, 0);
 	context.drawImage(getImage("card-description-focus"), 44, 1094);
 	// Draw the name
-	context.font = "75pt DominionTitle";
+	context.font = "78pt DominionTitle";
 	await renderDominionText(context, parse(card.title), w / 2, 220, 1100);
 	// Draw the description
 	context.font = "60pt DominionText";
@@ -118,6 +142,26 @@ const drawStandardCard = async (
 		1100
 	);
 	// Draw the types
+	let size = 65;
+	context.font = `${size}pt DominionTitle`;
+	while (
+		(
+			await measureDominionText(
+				context,
+				parse(card.types.map((t) => t.name).join(" - "))
+			)
+		).width > 800
+	) {
+		size -= 1;
+		context.font = `${size}pt DominionTitle`;
+	}
+	await renderDominionText(
+		context,
+		parse(card.types.map((t) => t.name).join(" - ")),
+		w / 2,
+		1930,
+		800
+	);
 	// Draw the cost
 	context.font = "90pt DominionText";
 	await renderDominionText(context, parse(card.cost), 210, 1940, 200);