Skip to content

Commit 6c3f216

Browse files
github-actions[bot]github-actions[bot]
committed
Sync packages from monorepo (79da672)
1 parent 4362c01 commit 6c3f216

4 files changed

Lines changed: 135 additions & 0 deletions

File tree

‎packages/sdk/package.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,11 @@
2727
"import": "./dist/simulator/standalone.js",
2828
"require": "./dist/simulator/standalone.cjs"
2929
},
30+
"./fonts": {
31+
"types": "./dist/fonts.d.ts",
32+
"import": "./dist/fonts.js",
33+
"require": "./dist/fonts.cjs"
34+
},
3035
"./vite": {
3136
"types": "./dist/vite.d.ts",
3237
"import": "./dist/vite.js",

‎packages/sdk/src/fonts.ts‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
const fontSubsetBase = "https://www.puzzmo.com/assets/fonts-subset"
2+
const fontFullBase = "https://www.puzzmo.com/assets/fonts"
3+
4+
/**
5+
* Maps PostScript-style font names used in thumbnail SVGs to their font URLs.
6+
* Uses subset fonts where available for smaller payloads.
7+
*/
8+
const fontURLMap = {
9+
"Poppins-Regular": `${fontSubsetBase}/Poppins-Regular-subset.ttf`,
10+
"Poppins-Bold": `${fontSubsetBase}/Poppins-Bold-subset.ttf`,
11+
"Poppins-BoldItalic": `${fontSubsetBase}/Poppins-BoldItalic-subset.ttf`,
12+
"Poppins-Medium": `${fontSubsetBase}/Poppins-Medium-subset.ttf`,
13+
"Poppins-SemiBold": `${fontSubsetBase}/Poppins-SemiBold-subset.ttf`,
14+
"Poppins-ExtraLight": `${fontSubsetBase}/Poppins-ExtraLight-subset.ttf`,
15+
"Poppins-Light": `${fontSubsetBase}/Poppins-Light-subset.ttf`,
16+
"RedHatMono-Bold": `${fontSubsetBase}/RedHatMono-Bold-subset.ttf`,
17+
"RedHatMono-Regular": `${fontSubsetBase}/RedHatMono-Regular-subset.ttf`,
18+
"Dongle-Regular": `${fontSubsetBase}/Dongle-Regular-subset.ttf`,
19+
"Rubik-Light": `${fontSubsetBase}/Rubik-Light-subset.ttf`,
20+
"Rubik-Regular": `${fontSubsetBase}/Rubik-Regular-subset.ttf`,
21+
"NotoSansSymbols2-Regular": `${fontFullBase}/NotoSansSymbols2-Regular.ttf`,
22+
} as const satisfies Record<string, string>
23+
24+
export type ThumbnailFontName = keyof typeof fontURLMap
25+
26+
function fontFaceRules(fontNames: ThumbnailFontName[]): string {
27+
return fontNames
28+
.map((name) => {
29+
const url = fontURLMap[name]
30+
return `@font-face { font-family: "${name}"; src: url("${url}"); }`
31+
})
32+
.filter(Boolean)
33+
.join("\n")
34+
}
35+
36+
/** Generates an SVG `<style>` block with `@font-face` declarations for the given font names. */
37+
export function svgFontFaceCSS(fontNames: ThumbnailFontName[]): string {
38+
return `<style>${fontFaceRules(fontNames)}</style>`
39+
}
40+
41+
/** Returns raw `@font-face` CSS for use inside a JSX `<style>` element. */
42+
export function svgFontFaceCSSRaw(fontNames: ThumbnailFontName[]): string {
43+
return fontFaceRules(fontNames)
44+
}

‎packages/sdk/vite.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ export default defineConfig({
99
"inputs/index": resolve(__dirname, "src/inputs/index.ts"),
1010
"simulator/index": resolve(__dirname, "src/simulator/index.ts"),
1111
"simulator/standalone": resolve(__dirname, "src/simulator/standalone.ts"),
12+
fonts: resolve(__dirname, "src/fonts.ts"),
1213
vite: resolve(__dirname, "src/vite.ts"),
1314
},
1415
formats: ["es", "cjs"],

‎skills/puzzmo-fonts/SKILL.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
---
2+
name: puzzmo-fonts
3+
description: Set up Puzzmo platform fonts in a game using the SDK font utilities
4+
---
5+
6+
# Use Puzzmo Fonts
7+
8+
Configure the game to use Puzzmo's font stack. These are ASCII-subset fonts optimized for small payloads -- they may not contain all characters, so always provide fallbacks.
9+
10+
## Available Font Families
11+
12+
| Family | Weights | Use Case |
13+
| ------------------ | -------------------------------------------------------------- | -------------------------------------------------------- |
14+
| **Poppins** | ExtraLight, Light, Regular, Medium, SemiBold, Bold, BoldItalic | Primary UI text -- labels, buttons, modals, tile letters |
15+
| **Red Hat Mono** | Regular, Bold | Monospace -- timers, scores, coordinate labels |
16+
| **Zodiak** | Light, Regular, Bold, Extrabold, Black (+ italics) | Display/heading text -- titles, large decorative type |
17+
| **Dongle** | Light, Regular, Bold | Playful/casual display text |
18+
| **Rubik** | Light, Regular | Geometric sans-serif alternative |
19+
| **League Spartan** | Variable (200-800), Bold | Compact headings and UI labels |
20+
| **Cody Star** | Regular | Decorative/star-outline display |
21+
22+
## Steps
23+
24+
1. **Choose fonts for the game.** Most games use Poppins as the base and pick one or two others for variety. Common combos:
25+
- Word/tile games: `Poppins-SemiBold` for tiles, `RedHatMono-Bold` for scores
26+
- Display-heavy games: `Zodiak-Bold` for headings, `Poppins-Regular` for body
27+
28+
2. **Load fonts via CSS.** Create or update a fonts stylesheet that declares `@font-face` rules pointing at the Puzzmo CDN subset URLs:
29+
30+
```css
31+
@font-face {
32+
font-family: "Poppins-SemiBold";
33+
src: url("https://www.puzzmo.com/assets/fonts-subset/Poppins-SemiBold-subset.ttf");
34+
font-display: swap;
35+
}
36+
37+
@font-face {
38+
font-family: "RedHatMono-Bold";
39+
src: url("https://www.puzzmo.com/assets/fonts-subset/RedHatMono-Bold-subset.ttf");
40+
font-display: swap;
41+
}
42+
```
43+
44+
Include this stylesheet in your `index.html` or import it from your entry point.
45+
46+
3. **Apply fonts in game styles.** Always include system fallbacks since the subset fonts only cover ASCII:
47+
48+
```css
49+
.game-root {
50+
font-family: "Poppins-SemiBold", system-ui, sans-serif;
51+
}
52+
53+
.score {
54+
font-family: "RedHatMono-Bold", ui-monospace, monospace;
55+
}
56+
```
57+
58+
4. **For SVG thumbnails**, use the SDK's font utilities in your `appBundle.ts` to embed fonts directly in the SVG:
59+
60+
```ts
61+
import { svgFontFaceCSSRaw } from "@puzzmo/sdk/fonts"
62+
63+
export function renderThumbnail(puzzle: string): string {
64+
return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
65+
<style>${svgFontFaceCSSRaw(["Poppins-SemiBold", "RedHatMono-Bold"])}</style>
66+
<!-- thumbnail content -->
67+
</svg>`
68+
}
69+
```
70+
71+
Available font names for `svgFontFaceCSSRaw`: `Poppins-Regular`, `Poppins-Bold`, `Poppins-BoldItalic`, `Poppins-Medium`, `Poppins-SemiBold`, `Poppins-ExtraLight`, `Poppins-Light`, `RedHatMono-Bold`, `RedHatMono-Regular`, `Dongle-Regular`, `Rubik-Light`, `Rubik-Regular`, `NotoSansSymbols2-Regular`.
72+
73+
## Important Notes
74+
75+
- These are **ASCII subset** fonts. Characters outside the basic Latin range will fall through to the fallback font. Do not rely on them for extended Unicode, accented characters, or symbols.
76+
- `NotoSansSymbols2-Regular` is the only full (non-subset) font -- use it when you need symbol glyphs.
77+
- Use `font-display: swap` so the game remains interactive while fonts load.
78+
- Per-game font choice is a style decision. Pick fonts that match the game's personality and keep the set small for fast loading.
79+
80+
## Success Criteria
81+
82+
- Font `@font-face` declarations load without network errors
83+
- Game text renders with the chosen Puzzmo fonts
84+
- SVG thumbnails embed fonts correctly via `svgFontFaceCSSRaw`
85+
- System fallbacks are specified for all `font-family` declarations

0 commit comments

Comments
 (0)