From 7a752a92cb75c3ced73a980b44a36c90986c35b3 Mon Sep 17 00:00:00 2001 From: Dylan Pizzo Date: Tue, 7 Jan 2025 23:07:20 -0800 Subject: [PATCH] Wait for fonts to load --- src/cards.ts | 9 +-------- src/client/App.tsx | 5 +---- src/client/Card.tsx | 6 +++--- src/dominiontext.ts | 4 ++++ src/draw.ts | 36 ++++++++++++++++++++++++++++++++---- static/fonts.css | 14 +++++++------- 6 files changed, 48 insertions(+), 26 deletions(-) diff --git a/src/cards.ts b/src/cards.ts index f81f0d4..687344c 100644 --- a/src/cards.ts +++ b/src/cards.ts @@ -1,11 +1,4 @@ -import { - DominionCard, - TYPE_ACTION, - TYPE_DURATION, - TYPE_REACTION, - TYPE_TREASURE, - TYPE_VICTORY, -} from "./types.ts"; +import { DominionCard, TYPE_TREASURE, TYPE_VICTORY } from "./types.ts"; const expansionIcon = ""; const author = "Dylan"; diff --git a/src/client/App.tsx b/src/client/App.tsx index d700c3e..91de6a7 100644 --- a/src/client/App.tsx +++ b/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
{cards.map((card) => { - return + return })} -
; }; diff --git a/src/client/Card.tsx b/src/client/Card.tsx index e4eee4a..2b1ab21 100644 --- a/src/client/Card.tsx +++ b/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(); - drawCard(context, card); + await drawCard(context, card); } } }}> diff --git a/src/dominiontext.ts b/src/dominiontext.ts index e5dc571..bc35c5d 100644 --- a/src/dominiontext.ts +++ b/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); }; diff --git a/src/draw.ts b/src/draw.ts index 0033ff6..01bcbd5 100644 --- a/src/draw.ts +++ b/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 => { 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, - card: DominionCard & { orientation: "landscape" } + _context: CanvasRenderingContext2D, + _card: DominionCard & { orientation: "landscape" } ): Promise => { // TODO: everything }; diff --git a/static/fonts.css b/static/fonts.css index 3f828d1..433a4e6 100644 --- a/static/fonts.css +++ b/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'); -} \ No newline at end of file +} */ \ No newline at end of file