small tweaks

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 <div><Card key={count} card={sampleCard}/><button onClick={() => {setCount(c => c+1)}}>Rerender (for fonts)</button></div>;
+	return <div>
+		<Card key={`1-${count}`} card={sampleCard1}/>
+		<Card key={`2-${count}`} card={sampleCard2}/>
+		<button onClick={() => {setCount(c => c+1)}}>Rerender (for fonts)</button>
+	</div>;
 };

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;
 		}

src/draw.ts

@@ -93,7 +93,7 @@ export const drawCard = (
 
 const drawStandardCard = async (
 	context: CanvasRenderingContext2D,
-	card: DominionCard
+	card: DominionCard & { orientation: "card" }
 ): Promise<void> => {
 	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<void> => {
 	// TODO: everything
 };

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: "",
+};