diff --git a/src/client/App.tsx b/src/client/App.tsx
index 70a0aac..37d1244 100644
--- a/src/client/App.tsx
+++ b/src/client/App.tsx
@@ -1,8 +1,12 @@
import { useState } from "react";
-import { sampleCard } from "../sampleData.ts";
+import { sampleCard1, sampleCard2 } from "../sampleData.ts";
import { Card } from "./Card.tsx";
export const App = () => {
const [count, setCount] = useState(0);
- return
;
+ return
+
+
+
+
;
};
diff --git a/src/dominiontext.ts b/src/dominiontext.ts
index 5a98f9a..386fd6c 100644
--- a/src/dominiontext.ts
+++ b/src/dominiontext.ts
@@ -233,6 +233,9 @@ export const measureDominionText = async (
) {
line.pieces = line.pieces.slice(0, -1);
}
+ line.width = line.pieces
+ .map((piece) => piece.measure.width)
+ .reduce((a, b) => a + b);
return line;
}),
width: Math.max(...lines.map((line) => line.width)),
@@ -308,7 +311,7 @@ export const parse = (text: string): Piece[] => {
pieces.push({ type: "coin", text: text.slice(i + 1, i + end) });
i += end - 1;
} else {
- const end = text.slice(i).match(/\S+/)![0].length;
+ const end = text.slice(i).match(/[^$ \n]+/)![0].length;
pieces.push({ type: "text", text: text.slice(i, i + end) });
i += end - 1;
}
diff --git a/src/draw.ts b/src/draw.ts
index 6547024..9c1fe85 100644
--- a/src/draw.ts
+++ b/src/draw.ts
@@ -93,7 +93,7 @@ export const drawCard = (
const drawStandardCard = async (
context: CanvasRenderingContext2D,
- card: DominionCard
+ card: DominionCard & { orientation: "card" }
): Promise => {
const w = context.canvas.width;
const h = context.canvas.height;
@@ -122,6 +122,17 @@ const drawStandardCard = async (
context.font = "90pt DominionText";
await renderDominionText(context, parse(card.cost), 210, 1940, 200);
// Draw the preview
+ if (card.preview) {
+ context.font = "90pt DominionText";
+ await renderDominionText(context, parse(card.preview), 200, 210, 200);
+ await renderDominionText(
+ context,
+ parse(card.preview),
+ w - 200,
+ 210,
+ 200
+ );
+ }
// Draw the icon
// Draw the credit
context.restore();
@@ -129,7 +140,7 @@ const drawStandardCard = async (
const drawLandscapeCard = async (
context: CanvasRenderingContext2D,
- card: DominionCard
+ card: DominionCard & { orientation: "landscape" }
): Promise => {
// TODO: everything
};
diff --git a/src/sampleData.ts b/src/sampleData.ts
index 5461502..873e95e 100644
--- a/src/sampleData.ts
+++ b/src/sampleData.ts
@@ -1,6 +1,6 @@
import { DominionCard, TYPE_ACTION } from "./types.ts";
-export const sampleCard: DominionCard = {
+export const sampleCard1: DominionCard = {
orientation: "card",
title: "Title",
description: "Hello, world.",
@@ -12,3 +12,16 @@ export const sampleCard: DominionCard = {
cost: "$",
preview: "",
};
+
+export const sampleCard2: DominionCard = {
+ orientation: "card",
+ title: "Market",
+ description: "+1 Card\n+1 Action\n+1 Buy\n+$1",
+ types: [TYPE_ACTION],
+ image: "",
+ artist: "",
+ author: "",
+ version: "",
+ cost: "$4",
+ preview: "",
+};