Wait for fonts to load

This commit is contained in:
Dylan Pizzo
2025-01-07 23:07:20 -08:00
parent 03fff8576e
commit 7a752a92cb
6 changed files with 48 additions and 26 deletions

View File

@@ -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,
card: DominionCard & { orientation: "landscape" }
_context: CanvasRenderingContext2D,
_card: DominionCard & { orientation: "landscape" }
): Promise<void> => {
// TODO: everything
};