diff --git a/src/client/App.tsx b/src/client/App.tsx
index 37d1244..ee0bc08 100644
--- a/src/client/App.tsx
+++ b/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
+
;
};
diff --git a/src/dominiontext.ts b/src/dominiontext.ts
index 386fd6c..9aa5396 100644
--- a/src/dominiontext.ts
+++ b/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) => ({
diff --git a/src/draw.ts b/src/draw.ts
index 9c1fe85..2a169f5 100644
--- a/src/draw.ts
+++ b/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 = {};
@@ -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);
diff --git a/src/sampleData.ts b/src/sampleData.ts
index 873e95e..be4f6ca 100644
--- a/src/sampleData.ts
+++ b/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: "",
+};