@nayan-ui/games 1.20.0 → 1.21.0

package/src/games/shared/EngineGameLoader.tsx

@@ -1,88 +0,0 @@
-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

@@ -1,325 +0,0 @@
-// 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

@@ -1,3 +0,0 @@
-/** 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

@@ -1,3 +0,0 @@
-/** 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

@@ -1,178 +0,0 @@
-// 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;
-}