add some cards and fix some coloring

src/draw.ts

@@ -1,3 +1,4 @@
+import { parseColor } from "./colorhelper.ts";
 import {
 	measureDominionText,
 	parse,
@@ -39,6 +40,10 @@ const imageList = [
 		key: "card-color-2",
 		src: "/static/assets/CardColorTwo.png",
 	},
+	{
+		key: "card-color-2-night",
+		src: "/static/assets/CardColorTwoNight.png",
+	},
 	{
 		key: "card-brown",
 		src: "/static/assets/CardBrown.png",
@@ -151,25 +156,74 @@ export const drawCard = (
 	}
 };
 
+const _rgbCache: Record<string, { r: number; g: number; b: number }> = {};
+const getColorRgb = (c: string): { r: number; g: number; b: number } => {
+	const { rgb } = parseColor(c);
+	const [r, g, b] = rgb;
+	return { r, g, b };
+	// if (c in _rgbCache) {
+	// 	return _rgbCache[c]!;
+	// }
+	// const canvas = document.createElement("canvas");
+	// canvas.width = 10;
+	// canvas.height = 10;
+	// const context = canvas.getContext("2d")!;
+	// context.fillRect(0, 0, 10, 10);
+	// const data = context.getImageData(5, 5, 1, 1).data;
+	// console.log(data);
+	// const [r, g, b] = data;
+	// const rgb = { r: r!, g: g!, b: b! };
+	// _rgbCache[c] = rgb;
+	// return rgb;
+};
+
+const getTextColorForBackground = (c: string): string => {
+	// return "black";
+	const { r, g, b } = getColorRgb(c);
+	const avg = (r + g + b) / 3 / 255;
+	console.log([r, g, b], avg);
+	return avg > 0.5 ? "black" : "white";
+};
+
 const getColors = (
 	types: DominionCardType[]
-): { primary: string; secondary: string | null } => {
+): {
+	primary: string;
+	secondary: string | null;
+	description: string | null;
+	descriptionText: string;
+	titleText: string;
+} => {
+	const descriptionType =
+		types.find((t) => t.color?.onConflictDescriptionOnly) ?? null;
 	const byPriority = [...types]
-		.filter((type) => type.color)
+		.filter((type) => type.color && type !== descriptionType)
 		.sort((a, b) => b.color!.priority - a.color!.priority);
 	const priority1 = byPriority[0]!;
-	let primary = priority1.color?.value ?? "white";
-	let secondary = byPriority[1]?.color?.value ?? null;
+	let primaryType: DominionCardType | null = priority1 ?? null;
+	let secondaryType = byPriority[1] ?? null;
 	if (priority1 === TYPE_ACTION) {
 		const overriders = byPriority.filter((t) => t.color!.overridesAction);
 		if (overriders.length) {
-			primary = overriders[0]!.color!.value;
+			primaryType = overriders[0] ?? null;
 		}
-		if (primary === secondary) {
-			secondary = byPriority[2]?.color?.value ?? null;
+		if (primaryType === secondaryType) {
+			secondaryType = byPriority[2] ?? null;
 		}
 	}
-	return { primary, secondary };
+	primaryType = primaryType ?? descriptionType;
+	const primary = primaryType?.color?.value ?? "white";
+	const secondary = secondaryType?.color?.value ?? null;
+	const description = descriptionType?.color?.value ?? null;
+	const descriptionText = getTextColorForBackground(description ?? primary);
+	const titleText = getTextColorForBackground(primary);
+	return {
+		primary,
+		secondary,
+		description,
+		descriptionText,
+		titleText,
+	};
 };
 
 const drawStandardCard = async (
@@ -213,6 +267,17 @@ const drawStandardCard = async (
 			0,
 			0
 		);
+	} else if (colors.description) {
+		context.drawImage(
+			colorImage(getImage("card-color-1"), colors.description),
+			0,
+			0
+		);
+		context.drawImage(
+			colorImage(getImage("card-color-2-night"), colors.primary),
+			0,
+			0
+		);
 	} else {
 		context.drawImage(
 			colorImage(getImage("card-color-1"), colors.primary),
@@ -224,6 +289,7 @@ const drawStandardCard = async (
 	context.drawImage(getImage("card-gray"), 0, 0);
 	context.drawImage(colorImage(getImage("card-brown"), "#ff9911"), 0, 0);
 	// Draw the name
+	context.fillStyle = colors.titleText;
 	size = 78;
 	context.font = `${size}pt DominionTitle`;
 	while (
@@ -234,7 +300,16 @@ const drawStandardCard = async (
 	}
 	await renderDominionText(context, parse(card.title), w / 2, 220);
 	// Draw the description
-	context.font = "60pt DominionText";
+	context.fillStyle = colors.descriptionText;
+	size = 60;
+	context.font = `${size}pt DominionText`;
+	while (
+		(await measureDominionText(context, parse(card.description), 1000))
+			.height > 650
+	) {
+		size -= 1;
+		context.font = `${size}pt DominionText`;
+	}
 	await renderDominionText(
 		context,
 		parse(card.description, { isDescription: true }),
@@ -243,6 +318,7 @@ const drawStandardCard = async (
 		1000
 	);
 	// Draw the types
+	context.fillStyle = colors.titleText;
 	size = 65;
 	context.font = `${size}pt DominionTitle`;
 	while (
@@ -264,6 +340,7 @@ const drawStandardCard = async (
 		800
 	);
 	// Draw the cost
+	context.fillStyle = colors.titleText;
 	context.font = "90pt DominionText";
 	const costMeasure = await measureDominionText(context, parse(card.cost));
 	await renderDominionText(
@@ -273,6 +350,7 @@ const drawStandardCard = async (
 		1940
 	);
 	// Draw the preview
+	context.fillStyle = colors.titleText;
 	if (card.preview) {
 		context.font = "90pt DominionText";
 		await renderDominionText(context, parse(card.preview), 200, 210);
@@ -293,6 +371,7 @@ const drawStandardCard = async (
 		2035
 	);
 	// Draw the artist credit
+	context.fillStyle = "white";
 	const artistMeasure = await measureDominionText(
 		context,
 		parse(card.artist)