Wait for fonts to load

src/cards.ts

@@ -1,11 +1,4 @@
-import {
+import { DominionCard, TYPE_TREASURE, TYPE_VICTORY } from "./types.ts";
-	DominionCard,
-	TYPE_ACTION,
-	TYPE_DURATION,
-	TYPE_REACTION,
-	TYPE_TREASURE,
-	TYPE_VICTORY,
-} from "./types.ts";
 
 const expansionIcon = "";
 const author = "Dylan";

src/client/App.tsx

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

src/client/Card.tsx

@@ -1,4 +1,4 @@
-import { drawCard, loadImages } from "../draw.ts";
+import { drawCard, loadImages, loadFonts } from "../draw.ts";
 import { DominionCard } from "../types.ts";
 
 const sizeMap = {
@@ -19,9 +19,9 @@ export const Card = (props: {card: DominionCard}) => {
 		if (canvasElement) {
 			const context = canvasElement.getContext("2d");
 			if (context) {
+				await loadFonts();
 				await loadImages();
-				// await loadFonts();
+				await drawCard(context, card);
-				drawCard(context, card);
 			}
 		}
 	}}></canvas>

src/dominiontext.ts

@@ -217,10 +217,12 @@ const symbolPiece = pieceDef({
 
 const pieceDefs = [textPiece, spacePiece, breakPiece, symbolPiece, hrPiece];
 
+// deno-lint-ignore no-explicit-any
 const tools: PieceTools = {} as any;
 
 const measurePiece = (context: CanvasRenderingContext2D, piece: Piece) => {
 	const def = pieceDefs.find((def) => def.type === piece.type)!;
+	// deno-lint-ignore no-explicit-any
 	return def.measure(context, piece as any, tools);
 };
 
@@ -231,7 +233,9 @@ const renderPiece = (
 	y: number
 ) => {
 	const def = pieceDefs.find((def) => def.type === piece.type)!;
+	// deno-lint-ignore no-explicit-any
 	const measure = def.measure(context, piece as any, tools);
+	// deno-lint-ignore no-explicit-any
 	return def.render(context, piece as any, x, y, measure as any, tools);
 };
 

src/draw.ts

@@ -92,6 +92,35 @@ export const getImage = (key: string) => {
 	return image;
 };
 
+export const loadFonts = async () => {
+	const titleFont = new FontFace(
+		"DominionTitle",
+		`local("Trajan Pro Bold"), local("TrajanPro-Bold"), local('Trajan Pro'),
+			url('https://fonts.cdnfonts.com/s/14928/TrajanPro-Bold.woff') format('woff'),
+			url('https://shemitz.net/static/dominion3/Trajan%20Pro%20Bold.ttf') format('truetype'),
+			url('https://dominion.games/fonts/TrajanPro-Bold.otf') format('opentype'),
+			local("Trajan"),
+			local("Optimus Princeps"),
+			url(https://fonts.gstatic.com/s/cinzel/v8/8vIJ7ww63mVu7gt79mT7PkRXMw.woff2) format('woff2')`
+	);
+
+	const specialFont = new FontFace(
+		"DominionSpecial",
+		`local("Minion Std Black"), local("MinionStd-Black"), local("Minion Std"), local('Minion Pro'),
+			url('https://fonts.cdnfonts.com/s/13260/MinionPro-Regular.woff') format('woff'),
+			url('https://shemitz.net/static/dominion3/MinionStd-Black.otf') format('opentype'),
+			local("Optimus Princeps"),
+			url(https://fonts.gstatic.com/s/cinzel/v8/8vIJ7ww63mVu7gt79mT7PkRXMw.woff2) format('woff2')`
+	);
+
+	// deno-lint-ignore no-explicit-any
+	(document.fonts as any).add(titleFont);
+	// deno-lint-ignore no-explicit-any
+	(document.fonts as any).add(specialFont);
+
+	await Promise.all([titleFont.load(), specialFont.load()]);
+};
+
 export const colorImage = (
 	image: HTMLImageElement,
 	color?: string
@@ -148,7 +177,7 @@ const drawStandardCard = async (
 	card: DominionCard & { orientation: "card" }
 ): Promise<void> => {
 	const w = context.canvas.width;
-	const h = context.canvas.height;
+	// const h = context.canvas.height;
 	let size;
 	context.save();
 	// Draw the image
@@ -213,7 +242,6 @@ const drawStandardCard = async (
 		1490,
 		1000
 	);
-	console.log(card.title, parse(card.description));
 	// Draw the types
 	size = 65;
 	context.font = `${size}pt DominionTitle`;
@@ -280,8 +308,8 @@ const drawStandardCard = async (
 };
 
 const drawLandscapeCard = async (
-	context: CanvasRenderingContext2D,
+	_context: CanvasRenderingContext2D,
-	card: DominionCard & { orientation: "landscape" }
+	_card: DominionCard & { orientation: "landscape" }
 ): Promise<void> => {
 	// TODO: everything
 };

static/fonts.css

@@ -1,6 +1,6 @@
-@font-face {
+/* @font-face {
     font-family: 'DominionTitle';
-    font-display: auto;
+    font-display: block;
     src: local("Trajan Pro Bold"), local("TrajanPro-Bold"), local('Trajan Pro'),
         url('https://fonts.cdnfonts.com/s/14928/TrajanPro-Bold.woff') format('woff'),
         url('https://shemitz.net/static/dominion3/Trajan%20Pro%20Bold.ttf') format('truetype'),
@@ -8,20 +8,20 @@
         local("Trajan"),
         local("Optimus Princeps"),
         url(https://fonts.gstatic.com/s/cinzel/v8/8vIJ7ww63mVu7gt79mT7PkRXMw.woff2) format('woff2');
-}
+} */
 
 @font-face {
     font-family: 'DominionText';
-    font-display: auto;
+    font-display: block;
     src: local("Times New Roman"), serif;
 }
 
-@font-face {
+/* @font-face {
     font-family: 'DominionSpecial';
-    font-display: auto;
+    font-display: block;
     src: local("Minion Std Black"), local("MinionStd-Black"), local("Minion Std"), local('Minion Pro'),
         url('https://fonts.cdnfonts.com/s/13260/MinionPro-Regular.woff') format('woff'),
         url('https://shemitz.net/static/dominion3/MinionStd-Black.otf') format('opentype'),
         local("Optimus Princeps"),
         url(https://fonts.gstatic.com/s/cinzel/v8/8vIJ7ww63mVu7gt79mT7PkRXMw.woff2) format('woff2');
-}
+} */