dylan/dominionator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Wait for fonts to load

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/cards.ts
View File

@ -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";

5
src/client/App.tsx
View File

@ -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>;
};

6
src/client/Card.tsx
View File

@ -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);
}
}
}}></canvas>

4
src/dominiontext.ts
View File

@ -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);
};

36
src/draw.ts
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
};

14
static/fonts.css
View File

@ -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');
}
} */