add vp symbols

src/client/App.tsx

@@ -1,13 +1,13 @@
 import { useState } from "react";
-import { sampleCard1, sampleCard2, sampleCard3 } from "../sampleData.ts";
+import { sampleCards } from "../sampleData.ts";
 import { Card } from "./Card.tsx";
 
 export const App = () => {
 	const [count, setCount] = useState(0);
 	return <div>
-		<Card key={`1-${count}`} card={sampleCard1}/>
-		<Card key={`2-${count}`} card={sampleCard2}/>
-		<Card key={`3-${count}`} card={sampleCard3}/>
+		{sampleCards.map((sampleCard) => {
+			return <Card key={`${sampleCard.title}-${count}`} card={sampleCard}/>
+		})}
 		<button onClick={() => {setCount(c => c+1)}}>Rerender (for fonts)</button>
 	</div>;
 };

src/dominiontext.ts

@@ -5,9 +5,12 @@ export type Piece =
 	| { type: "text"; text: string; isBold?: boolean; isItalic?: boolean }
 	| { type: "space" }
 	| { type: "break" }
-	| { type: "coin"; text: string }
-	| { type: "debt"; text: string }
-	| { type: "potion"; text: string };
+	| {
+			type: "symbol";
+			symbol: "coin" | "debt" | "potion" | "vp" | "vp-token";
+			text: string;
+			textColor: string;
+	  };
 
 type PromiseOr<T> = T | Promise<T>;
 
@@ -124,14 +127,14 @@ const breakPiece = pieceDef({
 	render() {},
 });
 
-const coinPiece = pieceDef({
-	type: "coin",
-	measure(context, _piece) {
+const symbolPiece = pieceDef({
+	type: "symbol",
+	measure(context, piece) {
 		context.save();
 		const metrics = context.measureText(" ");
 		const height =
 			metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
-		const coinImage = getImage("coin");
+		const coinImage = getImage(piece.symbol);
 		context.restore();
 		return {
 			type: "content",
@@ -146,7 +149,7 @@ const coinPiece = pieceDef({
 		const height = measure.ascent + measure.descent;
 		// context.fillRect(x, y - measure.ascent, measure.width, height);
 		context.drawImage(
-			getImage("coin"),
+			getImage(piece.symbol),
 			x,
 			y - measure.ascent,
 			measure.width,
@@ -158,103 +161,14 @@ const coinPiece = pieceDef({
 		fontInfo.size = parseInt(fontInfo.size.toString()) * 1.2;
 		const font = stringifyFont(fontInfo);
 		context.font = font;
-		context.fillStyle = "black";
+		context.fillStyle = piece.textColor;
 		context.textAlign = "center";
 		context.fillText(piece.text, x + measure.width / 2, y);
 		context.restore();
 	},
 });
 
-const debtPiece = pieceDef({
-	type: "debt",
-	measure(context, _piece) {
-		context.save();
-		const metrics = context.measureText(" ");
-		const height =
-			metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
-		const coinImage = getImage("debt");
-		context.restore();
-		return {
-			type: "content",
-			width: coinImage.width * (height / coinImage.height),
-			ascent: metrics.fontBoundingBoxAscent,
-			descent: metrics.fontBoundingBoxDescent,
-		};
-	},
-	render(context, piece, x, y, measure) {
-		context.save();
-		// context.fillStyle = "yellow";
-		const height = measure.ascent + measure.descent;
-		// context.fillRect(x, y - measure.ascent, measure.width, height);
-		context.drawImage(
-			getImage("debt"),
-			x,
-			y - measure.ascent,
-			measure.width,
-			height
-		);
-		const fontInfo = parseFont(context.font);
-		fontInfo.family = ["DominionSpecial"];
-		fontInfo.weight = "bold";
-		fontInfo.size = parseInt(fontInfo.size.toString()) * 1.2;
-		const font = stringifyFont(fontInfo);
-		context.font = font;
-		context.fillStyle = "white";
-		context.textAlign = "center";
-		context.fillText(piece.text, x + measure.width / 2, y);
-		context.restore();
-	},
-});
-
-const potionPiece = pieceDef({
-	type: "potion",
-	measure(context, _piece) {
-		context.save();
-		const metrics = context.measureText(" ");
-		const height =
-			metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
-		const coinImage = getImage("potion");
-		context.restore();
-		return {
-			type: "content",
-			width: coinImage.width * (height / coinImage.height),
-			ascent: metrics.fontBoundingBoxAscent,
-			descent: metrics.fontBoundingBoxDescent,
-		};
-	},
-	render(context, piece, x, y, measure) {
-		context.save();
-		// context.fillStyle = "yellow";
-		const height = measure.ascent + measure.descent;
-		// context.fillRect(x, y - measure.ascent, measure.width, height);
-		context.drawImage(
-			getImage("potion"),
-			x,
-			y - measure.ascent,
-			measure.width,
-			height
-		);
-		const fontInfo = parseFont(context.font);
-		fontInfo.family = ["DominionSpecial"];
-		fontInfo.weight = "bold";
-		fontInfo.size = parseInt(fontInfo.size.toString()) * 1.2;
-		const font = stringifyFont(fontInfo);
-		context.font = font;
-		context.fillStyle = "white";
-		context.textAlign = "center";
-		context.fillText(piece.text, x + measure.width / 2, y);
-		context.restore();
-	},
-});
-
-const pieceDefs = [
-	textPiece,
-	spacePiece,
-	breakPiece,
-	coinPiece,
-	debtPiece,
-	potionPiece,
-];
+const pieceDefs = [textPiece, spacePiece, breakPiece, symbolPiece];
 
 const tools: PieceTools = {} as any;
 
@@ -406,23 +320,28 @@ export const renderDominionText = async (
 
 export const parse = (text: string): Piece[] => {
 	const pieces: Piece[] = [];
+	const symbolMap = {
+		"$": { symbol: "coin", textColor: "black" },
+		"@": { symbol: "debt", textColor: "white" },
+		"^": { symbol: "potion", textColor: "white" },
+		"%": { symbol: "vp", textColor: "white" },
+		"#": { symbol: "vp-token", textColor: "black" },
+	} as const;
 	for (let i = 0; i < text.length; i++) {
 		const char = text[i];
 		if (char === " ") {
 			pieces.push({ type: "space" });
 		} else if (char === "\n") {
 			pieces.push({ type: "break" });
-		} else if (char === "$") {
-			const end = text.slice(i).match(/\$\d*/)![0].length;
-			pieces.push({ type: "coin", text: text.slice(i + 1, i + end) });
-			i += end - 1;
-		} else if (char === "@") {
-			const end = text.slice(i).match(/@\d*/)![0].length;
-			pieces.push({ type: "debt", text: text.slice(i + 1, i + end) });
-			i += end - 1;
-		} else if (char === "^") {
-			const end = text.slice(i).match(/\^\d*/)![0].length;
-			pieces.push({ type: "potion", text: text.slice(i + 1, i + end) });
+		} else if (char && char in symbolMap) {
+			const c = char as keyof typeof symbolMap;
+			const end = text.slice(i).match(new RegExp(`\\${c}\\w*`))![0]
+				.length;
+			pieces.push({
+				type: "symbol",
+				...symbolMap[c],
+				text: text.slice(i + 1, i + end),
+			});
 			i += end - 1;
 		} else if (char === "+") {
 			const match = text.slice(i).match(/\+\d* \w+/);

src/draw.ts

@@ -59,6 +59,14 @@ const imageList = [
 		key: "potion",
 		src: "/static/assets/Potion.png",
 	},
+	{
+		key: "vp",
+		src: "/static/assets/VP.png",
+	},
+	{
+		key: "vp-token",
+		src: "/static/assets/VP-Token.png",
+	},
 ];
 
 export const loadImages = async () => {

src/sampleData.ts

@@ -3,45 +3,58 @@ import {
 	TYPE_ACTION,
 	TYPE_REACTION,
 	TYPE_TREASURE,
+	TYPE_VICTORY,
 } from "./types.ts";
 
-export const sampleCard1: DominionCard = {
-	orientation: "card",
-	title: "Title",
-	description:
-		"+1 Action\n\nReveal the top card of your deck. If it's an Action card, +1 Action.",
-	types: [TYPE_ACTION, TYPE_REACTION],
-	image: "https://wiki.dominionstrategy.com/images/7/76/AdventurerArt.jpg",
-	artist: "Dall-E",
-	author: "John Doe",
-	version: "",
-	cost: "@8",
-	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: "Leonardo DaVinci",
-	author: "Jane Smith",
-	version: "",
-	cost: "$4",
-	preview: "",
-};
-
-export const sampleCard3: DominionCard = {
-	orientation: "card",
-	title: "Flask",
-	description:
-		"+2 Cards\n\nAt the start of your Clean-up phase, you may put a card from your hand onto your deck.",
-	types: [TYPE_TREASURE],
-	image: "",
-	artist: "",
-	author: "",
-	version: "",
-	cost: "$6",
-	preview: "",
-};
+export const sampleCards: DominionCard[] = [
+	{
+		orientation: "card",
+		title: "Title",
+		description:
+			"+1 Action\n\nReveal the top card of your deck. If it's an Action card, +1 Action. If it has ^ in its cost, +1 Card.",
+		types: [TYPE_ACTION, TYPE_REACTION],
+		image: "https://wiki.dominionstrategy.com/images/7/76/AdventurerArt.jpg",
+		artist: "Dall-E",
+		author: "John Doe",
+		version: "",
+		cost: "@8",
+		preview: "",
+	},
+	{
+		orientation: "card",
+		title: "Market",
+		description: "+1 Card\n+1 Action\n+1 Buy\n+$1",
+		types: [TYPE_ACTION],
+		image: "",
+		artist: "Leonardo DaVinci",
+		author: "Jane Smith",
+		version: "",
+		cost: "$4",
+		preview: "",
+	},
+	{
+		orientation: "card",
+		title: "Flask",
+		description:
+			"+2 Cards\n\nAt the start of your Clean-up phase, you may put a card from your hand onto your deck.",
+		types: [TYPE_TREASURE],
+		image: "",
+		artist: "",
+		author: "",
+		version: "",
+		cost: "$6",
+		preview: "",
+	},
+	{
+		orientation: "card",
+		title: "Flask",
+		description: "+1 #\n\n-\n\n2 %",
+		types: [TYPE_VICTORY],
+		image: "",
+		artist: "",
+		author: "",
+		version: "",
+		cost: "$6",
+		preview: "",
+	},
+];