From 1e90062f6dfb8a65a224dc876a46262410f7be9a Mon Sep 17 00:00:00 2001 From: Dylan Pizzo Date: Tue, 7 Jan 2025 20:18:42 -0800 Subject: [PATCH] Add split card coloring --- src/draw.ts | 51 ++++++++++++++++++++++++++++++++++------------- src/sampleData.ts | 12 +++++++++++ 2 files changed, 49 insertions(+), 14 deletions(-) diff --git a/src/draw.ts b/src/draw.ts index e231829..fb3107c 100644 --- a/src/draw.ts +++ b/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`; diff --git a/src/sampleData.ts b/src/sampleData.ts index 8c455b2..250400e 100644 --- a/src/sampleData.ts +++ b/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: "", + }, ];