@nayan-ui/games 1.19.0 → 1.20.0

package/src/games/shared/EngineGameLoader.tsx

@@ -0,0 +1,88 @@
+import { type ComponentType, createElement, memo, useEffect, useRef, useState } from 'react';
+import { AppState } from 'react-native';
+import { GameThemeProvider } from '../../helpers/GameTheme';
+import { GameAssetLoader } from '../../services/GameAssetLoader';
+import { areGameAssetsReady, gameAssetStages } from '../../services/GameAssets';
+import { DEFAULT_GAME_SETTINGS, type GAME_IDS, type GameProps } from '../../services/UtilsService';
+import { EngineReadyContext } from './EngineReadyContext';
+import { GameLoading } from './GameLoading';
+import { GameLoadingTransition } from './GameLoadingTransition';
+
+/** The game module and its world are evaluated after the native loading animation is visible. */
+export function withGameLoading(id: GAME_IDS, load: () => ComponentType<GameProps>): ComponentType<GameProps> {
+  let loaded: ComponentType<GameProps> | undefined;
+  const GameWithLoading = memo(function GameWithLoading(props: GameProps) {
+    const settings = { ...DEFAULT_GAME_SETTINGS, ...props.settings };
+    const [Game, setGame] = useState<ComponentType<GameProps> | undefined>(() => (areGameAssetsReady(id, settings.theme) ? loaded : undefined));
+    const [label, setLabel] = useState('Getting ready');
+    const [error, setError] = useState(false);
+    const loading = useRef<GameAssetLoader | null>(null);
+    const failed = useRef(false);
+    // Informational panels pause gameplay, but assets keep preparing behind them.
+    useEffect(() => {
+      if (Game) return;
+      failed.current = false;
+      setError(false);
+      const session = new GameAssetLoader(
+        [
+          ...gameAssetStages(id, settings.theme),
+          {
+            label: 'Ready for playtime',
+            *tasks() {
+              yield () => {
+                loaded = load();
+              };
+            }
+          }
+        ],
+        setLabel,
+        () => setGame(() => loaded),
+        (failure) => {
+          console.warn(`Unable to load ${id}:`, failure);
+          failed.current = true;
+          setError(true);
+        }
+      );
+      loading.current = session;
+      const sync = () => {
+        if (AppState.currentState === 'active' && !failed.current) session.start();
+        else session.pause();
+      };
+      const app = AppState.addEventListener('change', sync);
+      sync();
+      return () => {
+        session.dispose();
+        loading.current = null;
+        app.remove();
+      };
+    }, [Game, settings.theme]);
+    // Settings remain available while loading. The modal is evaluated only when actually opened.
+    const Settings = !Game && settings.isVisible ? require('../../helpers/GameSettingsModal').GameSettingsModal : null;
+    return (
+      <GameThemeProvider theme={settings.theme}>
+        <GameLoadingTransition
+          ready={!!Game}
+          loader={
+            <GameLoading
+              gameId={id}
+              theme={settings.theme}
+              offset={settings.offset}
+              visible={!settings.isVisible}
+              label={label}
+              error={error}
+              onRetry={() => {
+                failed.current = false;
+                setError(false);
+                if (AppState.currentState === 'active') loading.current?.start();
+              }}
+            />
+          }>
+          {Game && <EngineReadyContext.Provider value={true}>{createElement(Game, props)}</EngineReadyContext.Provider>}
+        </GameLoadingTransition>
+        {Settings && <Settings gameId={id} settings={settings} onSettingsChange={props.onSettingsChange} />}
+      </GameThemeProvider>
+    );
+  });
+  GameWithLoading.displayName = `Loading(${id})`;
+  return GameWithLoading;
+}

package/src/games/shared/EngineGameScreen.tsx

@@ -0,0 +1,325 @@
+// The Playtura game screen for Nayan engine games: the game's scene in a GameView, with Playtura's
+// scoreboard, start/stop controls and game-over card drawn by the engine (EngineHud) as its overlay,
+// the game-over banner ad and the settings modal. A game supplies its scene and what the HUD shows:
+//
+//   export const MyGame = engineGame(GAME_IDS.MY_GAME, (props) => {
+//     ...
+//     return <EngineGameScreen gameId={...} settings={props.settings} source={game.world} camera={game.camera}
+//       columns={[{ label: 'SCORE', value: '120' }]} playing={isPlaying} onStart={...} onStop={...}
+//       gameOver={isOver ? { title: 'YOU WON!', ... } : null} />;
+//   });
+import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { AppState, BackHandler, type LayoutChangeEvent, StyleSheet, Text, View } from 'react-native';
+import { audio, GameView, isEngineAvailable, warmUpEngine, World } from '@nayan-ui/engine';
+import { GameSettingsModal, GameThemeProvider } from '../../helpers';
+import { GAMES_METADATA } from '../../services/GamesMetadata';
+import { GAME_SOUNDS, playSound, preloadSounds, stopAllSounds } from '../../services/SoundsService';
+import { resolveGameTheme } from '../../services/ThemeService';
+import { DEFAULT_GAME_SETTINGS, type GAME_IDS, type GameProps } from '../../services/UtilsService';
+import { EngineHud, type GameOverCard, type HudChoice, type HudColumn, type HudFeedback } from './EngineHud';
+import { EngineReadyContext } from './EngineReadyContext';
+import { toRgb } from './EngineUtils';
+import { GamePlayingContext, useGamePlaying } from './GameActivity';
+import { GameLoading } from './GameLoading';
+import { GameLoadingTransition } from './GameLoadingTransition';
+import { useGameResource } from './useGameResource';
+
+let soundOwner: object | undefined;
+
+/** Dev builds: once a second, where the frame time goes (JS update vs native render). */
+const logStats = (s: { fps: number; updateMs: number; renderMs: number; quality: string; backend: string }) =>
+  console.log(`[engine] ${s.fps.toFixed(0)} fps, update ${s.updateMs.toFixed(2)} ms, render ${s.renderMs.toFixed(2)} ms, ${s.quality}, ${s.backend}`);
+
+/** Everything GameView takes, but the HUD's overlay and the frame hooks this screen owns. */
+type SceneProps = Omit<React.ComponentProps<typeof GameView>, 'overlay' | 'onOverlayTouch' | 'onUpdate' | 'onStats' | 'background' | 'source'> & {
+  /** What to draw; null until the game has made its world (the view waits for it). */
+  source: React.ComponentProps<typeof GameView>['source'] | null;
+  /** The clear color; the theme's background by default. */
+  background?: React.ComponentProps<typeof GameView>['background'];
+};
+
+export type EngineGameScreenProps = SceneProps &
+  Pick<GameProps, 'settings' | 'onSettingsChange' | 'onShare' | 'onShowLeaderboard' | 'bannerAd'> & {
+    gameId: string;
+    /** Reserve overlay entities for dense engine-drawn interfaces. */
+    hudCapacity?: number;
+    /** Host fallback when the rendering surface reports an error. */
+    errorMessage?: string;
+    /** Transient game feedback rendered and animated by the engine HUD. */
+    feedback?: HudFeedback;
+    choices?: HudChoice[];
+    /** Suspend/resume a game-owned audio loop with app activity, pause and sound settings. */
+    onAudioChange?: (audible: boolean) => void;
+    onActiveChange?: (active: boolean) => void;
+    /** Called every frame before the HUD animates (the game's tick). */
+    onUpdate?: (dt: number, hud: EngineHud) => void;
+    /** The view's size and the header offset, whenever they change: lay the scene out for them. */
+    onResize?: (width: number, height: number, offset: number) => number | void;
+    /** The scoreboard's columns. */
+    columns: HudColumn[];
+    playing: boolean;
+    /** The line under the controls while playing. */
+    subtext?: string;
+    onStart: () => void;
+    onStop: () => void;
+    /** The game-over card, or null while there's none. Android back plays again on it. */
+    gameOver: GameOverCard | null;
+    /** React Native views over the scene (under the settings modal). */
+    children?: React.ReactNode;
+  };
+
+export const EngineGameScreen: React.FC<EngineGameScreenProps> = ({
+  gameId,
+  hudCapacity,
+  errorMessage,
+  feedback,
+  choices,
+  onAudioChange,
+  onActiveChange,
+  settings = DEFAULT_GAME_SETTINGS,
+  onSettingsChange,
+  onShare,
+  onShowLeaderboard,
+  bannerAd,
+  background: backgroundProp,
+  onUpdate,
+  onResize,
+  columns,
+  playing,
+  subtext,
+  onStart,
+  onStop,
+  gameOver,
+  children,
+  source,
+  ...scene
+}) => {
+  useGamePlaying(playing);
+  const theme = resolveGameTheme(settings.theme);
+  const offset = settings.offset ?? 0;
+  useEffect(() => preloadSounds([GAME_SOUNDS.STOP, GAME_SOUNDS.RESET]), []);
+  const soundKey = useRef({}).current;
+  const [active, setActive] = useState(() => AppState.currentState !== 'background' && AppState.currentState !== 'inactive');
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', (state) => setActive(state === 'active'));
+    return () => subscription.remove();
+  }, []);
+  const running = active && !settings.isVisible && !settings.paused && !scene.paused && !errorMessage;
+  useEffect(() => {
+    onActiveChange?.(running);
+  }, [running, onActiveChange]);
+  const audible = running && settings.enableSounds;
+  useEffect(() => {
+    soundOwner = soundKey;
+    audio.muted = !audible;
+    if (!audible) stopAllSounds();
+    onAudioChange?.(audible);
+    return () => {
+      onAudioChange?.(false);
+      if (soundOwner === soundKey) {
+        stopAllSounds();
+        audio.muted = false;
+        soundOwner = undefined;
+      }
+    };
+  }, [audible, onAudioChange, soundKey]);
+  const hud = useGameResource(
+    () => new EngineHud(theme, hudCapacity),
+    (value) => () => value.dispose()
+  );
+  const [size, setSize] = useState<{ width: number; height: number } | null>(null);
+
+  const onLayout = useCallback((e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    setSize((prev) => (prev && prev.width === width && prev.height === height ? prev : { width, height }));
+  }, []);
+
+  const onResizeRef = useRef(onResize);
+  onResizeRef.current = onResize;
+  useEffect(() => {
+    if (!size) return;
+    onResizeRef.current?.(size.width, size.height, offset);
+    hud.layout(size.width, size.height, offset);
+  }, [hud, size, offset]);
+
+  useLayoutEffect(() => hud.setTheme(theme), [hud, theme]);
+  useEffect(() => hud.setChoices(choices ?? []), [hud, choices]);
+
+  const feedbackRef = useRef(feedback);
+  feedbackRef.current = feedback;
+  const onUpdateRef = useRef(onUpdate);
+  onUpdateRef.current = onUpdate;
+  const update = useCallback(
+    (dt: number) => {
+      if (settings.isVisible) {
+        // Settings repaint immediately, including theme changes, without advancing gameplay or the HUD clock.
+        if (source instanceof World) source.update(0);
+        hud.update(0);
+        return;
+      }
+      onUpdateRef.current?.(dt, hud);
+      hud.update(dt, feedbackRef.current);
+    },
+    [hud, source, settings.isVisible]
+  );
+
+  // The scoreboard and controls; only changed values are redrawn.
+  hud.setActions({
+    onStart: () => {
+      stopAllSounds();
+      onStart();
+    },
+    onStop: () => {
+      stopAllSounds();
+      onStop();
+      playSound(GAME_SOUNDS.STOP, settings.enableSounds);
+    },
+    onShare,
+    onShowLeaderboard
+  });
+  const columnsKey = columns.map((c) => [c.label, c.value, c.color, c.valueColor, c.lives?.count, c.lives?.max].join('\u0000')).join('\u0001');
+  useEffect(() => hud.setColumns(columns), [hud, columnsKey]); // eslint-disable-line react-hooks/exhaustive-deps
+  // Update native hit targets and labels in the same commit as the run's phase.
+  useLayoutEffect(() => hud.setPlaying(playing, subtext), [hud, playing, subtext]);
+
+  // The game-over card: redrawn when what it shows changes (its callbacks are read when pressed). Only
+  // its banner ad is a React Native view, placed in the room the card leaves for it.
+  const soundEnabled = useRef(settings.enableSounds);
+  soundEnabled.current = settings.enableSounds;
+  const cardRef = useRef(gameOver);
+  cardRef.current = gameOver;
+  const cardKey = gameOver
+    ? [gameOver.title, gameOver.message, gameOver.scoreLabel, gameOver.score, gameOver.buttonText, !!gameOver.onShare].join('\u0000')
+    : null;
+  const [banner, setBanner] = useState<{ top: number; width: number } | null>(null);
+  useEffect(() => {
+    const card = cardRef.current;
+    if (!card) {
+      hud.hideGameOver();
+      setBanner(null);
+      return;
+    }
+    hud.showGameOver({
+      ...card,
+      onPlayAgain: () => {
+        stopAllSounds();
+        cardRef.current?.onPlayAgain();
+        playSound(GAME_SOUNDS.RESET, soundEnabled.current);
+      },
+      onShare: card.onShare ? () => cardRef.current?.onShare?.() : undefined
+    });
+    setBanner(hud.gameOverBanner);
+  }, [hud, cardKey, size, theme]);
+  const onBannerLayout = useCallback(
+    (e: LayoutChangeEvent) => {
+      hud.setGameOverReserve(e.nativeEvent.layout.height);
+      setBanner(hud.gameOverBanner);
+    },
+    [hud]
+  );
+  // Android back on the card plays again, as the modal's onRequestClose did.
+  const isOver = gameOver !== null;
+  useEffect(() => {
+    if (!isOver) return;
+    const sub = BackHandler.addEventListener('hardwareBackPress', () => {
+      cardRef.current?.onPlayAgain();
+      return true;
+    });
+    return () => sub.remove();
+  }, [isOver]);
+
+  const themeBackground = useMemo(() => toRgb(theme.BACKGROUND), [theme.BACKGROUND]);
+
+  return (
+    <View pointerEvents={settings.paused ? 'none' : 'auto'} style={[styles.root, { backgroundColor: theme.BACKGROUND }]} onLayout={onLayout}>
+      {source ? (
+        <GameView
+          {...scene}
+          // Settings keep drawing a frozen world so its theme can update while the panel stays open.
+          paused={scene.paused || !!errorMessage || (settings.paused && playing) || !active}
+          source={source}
+          background={backgroundProp ?? themeBackground}
+          onUpdate={update}
+          overlay={hud.world}
+          onOverlayTouch={hud.touch}
+          onPrimaryAction={() => hud.activatePrimary()}
+          onStats={__DEV__ ? logStats : undefined}
+        />
+      ) : null}
+      {isOver ? null : children}
+      {errorMessage && (
+        <View pointerEvents="none" style={styles.error}>
+          <Text accessibilityRole="alert" style={{ color: theme.TEXT }}>
+            {errorMessage}
+          </Text>
+        </View>
+      )}
+      {isOver && bannerAd && banner ? (
+        <View
+          pointerEvents="box-none"
+          style={[styles.banner, { top: banner.top, width: banner.width, left: ((size?.width ?? 0) - banner.width) / 2 }]}>
+          <View onLayout={onBannerLayout}>{bannerAd}</View>
+        </View>
+      ) : null}
+      <GameSettingsModal gameId={gameId} settings={settings} onSettingsChange={onSettingsChange} />
+    </View>
+  );
+};
+
+/**
+ * Makes an engine game's component: memoised, with default settings, inside the game theme and a
+ * container and the selected game's loader while the engine warms up.
+ */
+export function engineGame(id: GAME_IDS, Game: React.FC<GameProps & { settings: NonNullable<GameProps['settings']> }>): React.FC<GameProps> {
+  const Component: React.FC<GameProps> = React.memo((props) => {
+    const assetsReady = useContext(EngineReadyContext);
+    const [ready, setReady] = useState(assetsReady);
+    const [failure, setFailure] = useState<string | null>(null);
+    useEffect(() => {
+      if (!isEngineAvailable || assetsReady) return;
+      let mounted = true;
+      warmUpEngine().then(
+        () => {
+          if (mounted) setReady(true);
+        },
+        (error: unknown) => {
+          if (mounted) setFailure(error instanceof Error ? error.message : String(error));
+        }
+      );
+      return () => {
+        mounted = false;
+      };
+    }, [assetsReady]);
+    const settings = props.settings ?? DEFAULT_GAME_SETTINGS;
+    return (
+      <GameThemeProvider theme={settings.theme}>
+        <View style={styles.root}>
+          <GameLoadingTransition
+            ready={isEngineAvailable && ready}
+            loader={
+              <GameLoading
+                gameId={id}
+                theme={settings.theme}
+                offset={settings.offset}
+                visible={!settings.isVisible}
+                error={!!failure || !isEngineAvailable}
+                message={failure ?? (!isEngineAvailable ? 'This game needs the Nayan engine, which is not available in this build.' : undefined)}
+              />
+            }>
+            <GamePlayingContext.Provider value={props.onPlayingChange}>
+              <Game {...props} settings={settings} />
+            </GamePlayingContext.Provider>
+          </GameLoadingTransition>
+        </View>
+      </GameThemeProvider>
+    );
+  });
+  Component.displayName = GAMES_METADATA[id].title;
+  return Component;
+}
+
+const styles = StyleSheet.create({
+  root: { flex: 1 },
+  error: { position: 'absolute', top: '45%', alignSelf: 'center', padding: 24 },
+  banner: { position: 'absolute', alignItems: 'center', overflow: 'hidden', borderRadius: 10 }
+});

package/src/games/shared/EngineGameWidth.ts

@@ -0,0 +1,3 @@
+/** Native boards retain the established game width. */
+export const MAX_GAME_WIDTH = 500;
+export const gameWidthFor = (viewWidth: number) => Math.min(viewWidth - 30, MAX_GAME_WIDTH);

package/src/games/shared/EngineGameWidth.web.ts

@@ -0,0 +1,3 @@
+/** Keep browser boards compact, with room around raised pieces and the shared HUD. */
+export const MAX_GAME_WIDTH = 420;
+export const gameWidthFor = (viewWidth: number) => Math.min(viewWidth - 48, MAX_GAME_WIDTH);

package/src/games/shared/EngineGlyphs.ts

@@ -0,0 +1,178 @@
+// Digits and capital letters as 3D meshes, for the engine games that write on their boards (no font
+// file is bundled, and a font's letters would each be an extruded mesh anyway). Every character is a
+// handful of rounded strokes, tubes along its skeleton with round ends, in a 0.6 x 1 box (y up),
+// centred on the origin and lying in the XY plane: the strokes stand a little proud of z = 0. One mesh
+// per character, built the first time it's needed and shared by every game: mesh ids are app-wide
+// and limited, and each "7" on any board is an instance of the same one.
+import { type GeometryPart, merge, type Model, shapeGeometry, tube, type Vec3 } from '@nayan-ui/engine';
+import { cacheGameAsset, createGameMesh as createShape } from './EngineMeshes';
+
+type V2 = [number, number];
+type Stroke = { points: V2[]; closed?: boolean };
+
+/** A stroke's tube radius, and the space a character takes in a run of text (both in glyph heights). */
+export const GLYPH_RADIUS = 0.1;
+export const GLYPH_ADVANCE = 0.72;
+export const GLYPH_WIDTH = 0.6;
+
+const line = (x1: number, y1: number, x2: number, y2: number): Stroke => ({
+  points: [
+    [x1, y1],
+    [x2, y2]
+  ]
+});
+const curve = (...points: V2[]): Stroke => ({ points });
+/** A closed loop through `n` points of an ellipse (repeated at the ends, so the curve closes smoothly). */
+const loop = (cx: number, cy: number, rx: number, ry: number, n = 16): Stroke => ({
+  closed: true,
+  points: Array.from({ length: n + 3 }, (_, i) => {
+    const a = Math.PI / 2 + ((i - 1) / n) * Math.PI * 2;
+    return [cx + Math.cos(a) * rx, cy + Math.sin(a) * ry] as V2;
+  })
+});
+/** Part of an ellipse, from angle `from` to `to` (degrees, counterclockwise from +x). */
+const arc = (cx: number, cy: number, rx: number, ry: number, from: number, to: number, n = 12): Stroke => ({
+  points: Array.from({ length: n + 1 }, (_, i) => {
+    const a = ((from + ((to - from) * i) / n) * Math.PI) / 180;
+    return [cx + Math.cos(a) * rx, cy + Math.sin(a) * ry] as V2;
+  })
+});
+
+const SIX: V2[] = [
+  [0.5, 0.9],
+  [0.32, 0.98],
+  [0.13, 0.86],
+  [0.05, 0.52],
+  [0.08, 0.2],
+  [0.28, 0.02],
+  [0.5, 0.11],
+  [0.56, 0.32],
+  [0.42, 0.54],
+  [0.2, 0.55],
+  [0.06, 0.38]
+];
+const P_BOWL = curve([0.06, 1], [0.38, 1], [0.54, 0.88], [0.54, 0.62], [0.38, 0.48], [0.06, 0.48]);
+
+const STROKES: Record<string, Stroke[]> = {
+  '0': [loop(0.3, 0.5, 0.26, 0.47)],
+  '1': [line(0.1, 0.76, 0.34, 0.97), line(0.34, 0.97, 0.34, 0.03)],
+  '2': [curve([0.05, 0.76], [0.16, 0.93], [0.33, 0.98], [0.5, 0.89], [0.55, 0.7], [0.44, 0.5], [0.05, 0.03]), line(0.05, 0.03, 0.57, 0.03)],
+  '3': [
+    curve([0.06, 0.86], [0.26, 0.98], [0.48, 0.91], [0.52, 0.72], [0.28, 0.54]),
+    curve([0.28, 0.54], [0.53, 0.4], [0.55, 0.18], [0.34, 0.02], [0.05, 0.12])
+  ],
+  '4': [line(0.42, 0.03, 0.42, 0.97), line(0.42, 0.97, 0.03, 0.32), line(0.03, 0.32, 0.6, 0.32)],
+  '5': [
+    line(0.54, 0.97, 0.13, 0.97),
+    line(0.13, 0.97, 0.08, 0.55),
+    curve([0.08, 0.55], [0.3, 0.62], [0.52, 0.5], [0.56, 0.26], [0.4, 0.04], [0.18, 0.03], [0.04, 0.14])
+  ],
+  '6': [{ points: SIX }],
+  '7': [line(0.03, 0.97, 0.58, 0.97), curve([0.58, 0.97], [0.38, 0.55], [0.24, 0.03])],
+  '8': [loop(0.3, 0.75, 0.21, 0.22), loop(0.3, 0.27, 0.26, 0.26)],
+  '9': [{ points: SIX.map(([x, y]): V2 => [0.6 - x, 1 - y]) }],
+  'A': [line(0.02, 0, 0.3, 1), line(0.3, 1, 0.58, 0), line(0.13, 0.36, 0.47, 0.36)],
+  'B': [
+    line(0.06, 0, 0.06, 1),
+    curve([0.06, 1], [0.36, 1], [0.5, 0.91], [0.5, 0.68], [0.36, 0.54], [0.06, 0.54]),
+    curve([0.06, 0.54], [0.4, 0.54], [0.56, 0.42], [0.56, 0.13], [0.4, 0], [0.06, 0])
+  ],
+  'C': [arc(0.33, 0.5, 0.29, 0.49, 48, 312)],
+  'D': [line(0.06, 0, 0.06, 1), curve([0.06, 1], [0.3, 1], [0.5, 0.86], [0.56, 0.5], [0.5, 0.14], [0.3, 0], [0.06, 0])],
+  'E': [line(0.06, 0, 0.06, 1), line(0.06, 1, 0.54, 1), line(0.06, 0.52, 0.44, 0.52), line(0.06, 0, 0.54, 0)],
+  'F': [line(0.06, 0, 0.06, 1), line(0.06, 1, 0.54, 1), line(0.06, 0.52, 0.44, 0.52)],
+  'G': [arc(0.32, 0.5, 0.28, 0.49, 48, 352), line(0.6, 0.43, 0.36, 0.43)],
+  'H': [line(0.06, 0, 0.06, 1), line(0.54, 0, 0.54, 1), line(0.06, 0.52, 0.54, 0.52)],
+  'I': [line(0.3, 0, 0.3, 1), line(0.12, 1, 0.48, 1), line(0.12, 0, 0.48, 0)],
+  'J': [line(0.2, 1, 0.54, 1), curve([0.44, 1], [0.44, 0.26], [0.37, 0.06], [0.22, 0], [0.08, 0.07], [0.04, 0.22])],
+  'K': [line(0.06, 0, 0.06, 1), line(0.54, 1, 0.06, 0.38), line(0.25, 0.58, 0.56, 0)],
+  'L': [line(0.06, 1, 0.06, 0), line(0.06, 0, 0.54, 0)],
+  'M': [line(0.02, 0, 0.06, 1), line(0.06, 1, 0.3, 0.36), line(0.3, 0.36, 0.54, 1), line(0.54, 1, 0.58, 0)],
+  'N': [line(0.06, 0, 0.06, 1), line(0.06, 1, 0.54, 0), line(0.54, 0, 0.54, 1)],
+  'O': [loop(0.3, 0.5, 0.28, 0.48)],
+  'P': [line(0.06, 0, 0.06, 1), P_BOWL],
+  'Q': [loop(0.3, 0.5, 0.28, 0.48), line(0.36, 0.24, 0.6, -0.02)],
+  'R': [line(0.06, 0, 0.06, 1), P_BOWL, line(0.28, 0.48, 0.56, 0)],
+  'S': [
+    curve(
+      [0.54, 0.86],
+      [0.42, 0.98],
+      [0.24, 0.99],
+      [0.08, 0.88],
+      [0.08, 0.68],
+      [0.3, 0.53],
+      [0.52, 0.38],
+      [0.54, 0.14],
+      [0.38, 0.01],
+      [0.18, 0.01],
+      [0.04, 0.14]
+    )
+  ],
+  'T': [line(0.02, 1, 0.58, 1), line(0.3, 1, 0.3, 0)],
+  'U': [curve([0.06, 1], [0.06, 0.3], [0.14, 0.07], [0.3, 0], [0.46, 0.07], [0.54, 0.3], [0.54, 1])],
+  'V': [line(0.02, 1, 0.3, 0), line(0.3, 0, 0.58, 1)],
+  'W': [line(0, 1, 0.14, 0), line(0.14, 0, 0.3, 0.64), line(0.3, 0.64, 0.46, 0), line(0.46, 0, 0.6, 1)],
+  'X': [line(0.04, 0, 0.56, 1), line(0.04, 1, 0.56, 0)],
+  'Y': [line(0.02, 1, 0.3, 0.5), line(0.58, 1, 0.3, 0.5), line(0.3, 0.5, 0.3, 0)],
+  'Z': [line(0.04, 1, 0.56, 1), line(0.56, 1, 0.04, 0), line(0.04, 0, 0.56, 0)]
+};
+
+/** Whether a character has a glyph. */
+export const hasGlyph = (char: string) => char in STROKES;
+
+const meshes = new Map<string, Model>();
+
+/** A character's mesh, one glyph height tall at scale 1 (spawn it with `scale` = the height you want). */
+export function glyphMesh(char: string): Model {
+  return cacheGameAsset('shared/EngineGlyphs:glyphMesh' + JSON.stringify([char]), () => glyphMeshUncached(char));
+}
+
+function glyphMeshUncached(char: string): Model {
+  let mesh = meshes.get(char);
+  if (!mesh) {
+    const strokes = STROKES[char];
+    if (!strokes) throw new Error(`glyphMesh: no glyph for "${char}"`);
+    const parts: GeometryPart[] = [];
+    for (const { points, closed } of strokes) {
+      const at = points.map(([x, y]): Vec3 => [x - GLYPH_WIDTH / 2, y - 0.5, 0]);
+      parts.push({ geometry: tube(at, { radius: GLYPH_RADIUS, sides: 8, smoothness: 5 }) });
+      // Round ends on open strokes, which also fill the corners where two strokes meet
+      if (!closed)
+        for (const p of [at[0]!, at[at.length - 1]!]) parts.push({ geometry: shapeGeometry('sphere'), position: p, scale: GLYPH_RADIUS * 2 });
+    }
+    mesh = createShape(merge(parts), { center: false, shine: 0.2 });
+    meshes.set(char, mesh);
+  }
+  return mesh;
+}
+
+const flatMeshes = new Map<string, Model>();
+
+/**
+ * A character printed flat and matte (numbers on a board, not standing up): the glyph pressed to a
+ * twentieth of its depth, with no highlight, so it reads evenly everywhere on a flat surface. `weight`
+ * thickens its strokes (1 is the usual; bolder reads better small).
+ */
+export function flatGlyphMesh(char: string, weight = 1): Model {
+  return cacheGameAsset('shared/EngineGlyphs:flatGlyphMesh' + JSON.stringify([char, weight]), () => flatGlyphMeshUncached(char, weight));
+}
+
+function flatGlyphMeshUncached(char: string, weight = 1): Model {
+  const key = weight === 1 ? char : `${char}@${weight}`;
+  let mesh = flatMeshes.get(key);
+  if (!mesh) {
+    const strokes = STROKES[char];
+    if (!strokes) throw new Error(`flatGlyphMesh: no glyph for "${char}"`);
+    const parts: GeometryPart[] = [];
+    for (const { points, closed } of strokes) {
+      const at = points.map(([x, y]): Vec3 => [x - GLYPH_WIDTH / 2, y - 0.5, 0]);
+      parts.push({ geometry: tube(at, { radius: GLYPH_RADIUS * weight, sides: 8, smoothness: 5 }) });
+      if (!closed)
+        for (const p of [at[0]!, at[at.length - 1]!])
+          parts.push({ geometry: shapeGeometry('sphere'), position: p, scale: GLYPH_RADIUS * 2 * weight });
+    }
+    mesh = createShape(merge([{ geometry: merge(parts), scale: [1, 1, 0.05] }]), { center: false, shine: 0 });
+    flatMeshes.set(key, mesh);
+  }
+  return mesh;
+}