Add split card coloring

src/draw.ts

@@ -35,6 +35,10 @@ const imageList = [
 		key: "card-color-1",
 		src: "/static/assets/CardColorOne.png",
 	},
+	{
+		key: "card-color-2",
+		src: "/static/assets/CardColorTwo.png",
+	},
 	{
 		key: "card-brown",
 		src: "/static/assets/CardBrown.png",
@@ -114,24 +118,25 @@ export const drawCard = (
 	}
 };
 
-const getColors = (types: DominionCardType[]): { primary: string } => {
+const getColors = (
+	types: DominionCardType[]
+): { primary: string; secondary: string | null } => {
 	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 priority1 = byPriority[0]!;
+	let primary = priority1.color?.value ?? "white";
+	let secondary = byPriority[1]?.color?.value ?? null;
+	if (priority1 === TYPE_ACTION) {
 		const overriders = byPriority.filter((t) => t.color!.overridesAction);
 		if (overriders.length) {
-			return { primary: overriders[0]!.color!.value };
-		} else {
-			return { primary: priority.color!.value };
+			primary = overriders[0]!.color!.value;
+		}
+		if (primary === secondary) {
+			secondary = byPriority[2]?.color?.value ?? null;
 		}
 	}
+	return { primary, secondary };
 };
 
 const drawStandardCard = async (
@@ -162,11 +167,29 @@ const drawStandardCard = async (
 		);
 	}
 	// Draw the card base
-	const color = getColors(card.types).primary; // "#ffbc55";
-	context.drawImage(colorImage(getImage("card-color-1"), color), 0, 0);
+	const colors = getColors(card.types); // "#ffbc55";
+
+	if (colors.secondary) {
+		context.drawImage(
+			colorImage(getImage("card-color-1"), colors.secondary),
+			0,
+			0
+		);
+		context.drawImage(
+			colorImage(getImage("card-color-2"), colors.primary),
+			0,
+			0
+		);
+	} else {
+		context.drawImage(
+			colorImage(getImage("card-color-1"), colors.primary),
+			0,
+			0
+		);
+		context.drawImage(getImage("card-description-focus"), 44, 1094);
+	}
 	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
 	size = 78;
 	context.font = `${size}pt DominionTitle`;

src/sampleData.ts

@@ -57,4 +57,16 @@ export const sampleCards: DominionCard[] = [
 		cost: "$6",
 		preview: "",
 	},
+	{
+		orientation: "card",
+		title: "Nobles",
+		description: "Choose one: +3 Cards, or +2 Actions.\n\n\n-\n\n\n2%",
+		types: [TYPE_ACTION, TYPE_VICTORY],
+		image: "",
+		artist: "",
+		author: "",
+		version: "",
+		cost: "$6",
+		preview: "",
+	},
 ];