use dominiontext framework

src/draw.ts

@@ -1,3 +1,4 @@
+import { parse, renderDominionText } from "./dominiontext.ts";
 import { TYPE_ACTION } from "./types.ts";
 import { DominionCard } from "./types.ts";
 
@@ -39,6 +40,10 @@ const imageList = [
 		key: "card-description-focus",
 		src: "/static/assets/DescriptionFocus.png",
 	},
+	{
+		key: "coin",
+		src: "/static/assets/Coin.png",
+	},
 ];
 
 export const loadImages = async () => {
@@ -86,132 +91,6 @@ export const drawCard = (
 	}
 };
 
-const wrapText = (
-	context: CanvasRenderingContext2D,
-	text: string,
-	w: number
-) => {
-	return text.split("\n").flatMap((paragraph) => {
-		const lines: string[] = [];
-		let words = 0;
-		let remainingText = paragraph.trim().replace(/ +/g, " ");
-		let oldLine = "";
-		let countdown = 100;
-		while (remainingText.length > 0) {
-			countdown--;
-			if (countdown <= 0) {
-				console.log("CUT SHORT");
-				return [];
-			}
-			words++;
-			const newLine = remainingText.split(" ").slice(0, words).join(" ");
-			const metrics = context.measureText(newLine);
-			if (metrics.width > w) {
-				words = 0;
-				lines.push(oldLine);
-				remainingText = remainingText.slice(oldLine.length).trim();
-			} else if (newLine.length >= remainingText.length) {
-				words = 0;
-				lines.push(newLine);
-				remainingText = "";
-			}
-			oldLine = newLine;
-		}
-		if (!lines.length) {
-			return [""];
-		}
-		return lines;
-	});
-};
-
-const measureText = (
-	context: CanvasRenderingContext2D,
-	text: string,
-	maxWidth: number | undefined,
-	allowWrap: boolean | undefined
-) => {
-	const measure = context.measureText(text);
-	const lineHeight = 1.2 * (measure.emHeightAscent + measure.emHeightDescent);
-	if (!allowWrap || !maxWidth) {
-		return {
-			width: measure.width,
-			height: lineHeight,
-		};
-	}
-	const lines = wrapText(context, text, maxWidth);
-	const width = Math.max(
-		...lines.map((line) => context.measureText(line).width)
-	);
-	const height = lines.length * lineHeight;
-	return { width, height };
-};
-
-const drawTextCentered = (
-	context: CanvasRenderingContext2D,
-	text: string,
-	x: number,
-	y: number,
-	options?: {
-		defaultSize?: number;
-		maxWidth?: number;
-		maxHeight?: number;
-		allowWrap?: boolean;
-		font?: string;
-		fontWeight?: "normal" | "bold";
-		color?: string;
-	}
-) => {
-	const {
-		defaultSize = 75,
-		maxWidth,
-		maxHeight,
-		font = "DominionText",
-		fontWeight = "normal",
-		color,
-		allowWrap = false,
-	} = options ?? {};
-	context.save();
-	if (color) {
-		context.fillStyle = color;
-	}
-	let size = defaultSize;
-	context.font = `${fontWeight} ${size}pt ${font}`;
-	if (maxWidth) {
-		while (
-			measureText(context, text, maxWidth, allowWrap).width > maxWidth
-		) {
-			size -= 2;
-			context.font = `${fontWeight} ${size}pt ${font}`;
-		}
-	}
-	if (maxHeight) {
-		while (
-			measureText(context, text, maxWidth, allowWrap).height > maxHeight
-		) {
-			size -= 1;
-			context.font = `${fontWeight} ${size}pt ${font}`;
-		}
-	}
-	const measure = context.measureText(text);
-	const lineHeight = 1.2 * (measure.emHeightAscent + measure.emHeightDescent);
-	context.textAlign = "center";
-	context.textBaseline = "middle";
-	if (allowWrap && maxWidth) {
-		const lines = wrapText(context, text, maxWidth);
-		lines.forEach((line, i) => {
-			context.fillText(
-				line,
-				x,
-				y - (lineHeight * lines.length) / 2 + lineHeight * i,
-				maxWidth
-			);
-		});
-	} else {
-		context.fillText(text, x, y, maxWidth);
-	}
-	context.restore();
-};
-
 const drawStandardCard = async (
 	context: CanvasRenderingContext2D,
 	card: DominionCard
@@ -227,23 +106,22 @@ const drawStandardCard = async (
 	context.drawImage(colorImage(getImage("card-brown"), "#ff9911"), 0, 0);
 	context.drawImage(getImage("card-description-focus"), 44, 1094);
 	// Draw the name
-	drawTextCentered(context, "Moonlit Scheme", w / 2, 220, {
-		maxWidth: 1100,
-		font: "DominionTitle",
-		fontWeight: "bold",
-	});
-	// Draw the description
-	drawTextCentered(
+	context.font = "75pt DominionTitle";
+	await renderDominionText(
 		context,
-		"You may play an Action card from your hand costing up to \u202f◯\u202f.",
+		parse("Moonlit Scheme"),
+		w / 2,
+		220,
+		1100
+	);
+	// Draw the description
+	context.font = "60pt DominionText";
+	await renderDominionText(
+		context,
+		parse("You may play an Action card from your hand costing up to $4."),
 		w / 2,
 		1520,
-		{
-			maxWidth: 1100,
-			font: "DominionText",
-			allowWrap: true,
-			defaultSize: 60,
-		}
+		1100
 	);
 	// Draw the types
 	// Draw the cost