draw types

src/client/App.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { sampleCard1, sampleCard2 } from "../sampleData.ts";
+import { sampleCard1, sampleCard2, sampleCard3 } from "../sampleData.ts";
 import { Card } from "./Card.tsx";
 
 export const App = () => {
@@ -7,6 +7,7 @@ export const App = () => {
 	return <div>
 		<Card key={`1-${count}`} card={sampleCard1}/>
 		<Card key={`2-${count}`} card={sampleCard2}/>
+		<Card key={`3-${count}`} card={sampleCard3}/>
 		<button onClick={() => {setCount(c => c+1)}}>Rerender (for fonts)</button>
 	</div>;
 };

src/dominiontext.ts

@@ -186,7 +186,7 @@ type PieceWithInfo = {
 export const measureDominionText = async (
 	context: CanvasRenderingContext2D,
 	pieces: Piece[],
-	maxWidth: number
+	maxWidth = Infinity
 ) => {
 	const data: PieceWithInfo[] = await Promise.all(
 		pieces.map(async (piece) => ({

src/draw.ts

@@ -1,5 +1,9 @@
-import { parse, renderDominionText } from "./dominiontext.ts";
+import {
-import { TYPE_ACTION } from "./types.ts";
+	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);

src/sampleData.ts

@@ -1,10 +1,16 @@
-import { DominionCard, TYPE_ACTION } from "./types.ts";
+import {
+	DominionCard,
+	TYPE_ACTION,
+	TYPE_ATTACK,
+	TYPE_REACTION,
+	TYPE_TREASURE,
+} from "./types.ts";
 
 export const sampleCard1: DominionCard = {
 	orientation: "card",
 	title: "Title",
 	description: "Hello, world.",
-	types: [TYPE_ACTION],
+	types: [TYPE_ACTION, TYPE_REACTION],
 	image: "",
 	artist: "",
 	author: "",
@@ -25,3 +31,16 @@ export const sampleCard2: DominionCard = {
 	cost: "$4",
 	preview: "",
 };
+
+export const sampleCard3: DominionCard = {
+	orientation: "card",
+	title: "Silver",
+	description: "$2",
+	types: [TYPE_TREASURE],
+	image: "",
+	artist: "",
+	author: "",
+	version: "",
+	cost: "$3",
+	preview: "",
+};