@diffenderfer-games/hub 2.0.0-next.6 → 2.0.0-next.7

package/src/avatar/adapters/pixi-types.ts

@@ -1,84 +1,84 @@
-/**
- * The slice of PixiJS the adapters use, typed structurally so the hub has no
- * dependency on pixi. Pixi 8 is the target; Pixi 7 works through the same
- * calls where they exist (`Texture.from(canvas)`, `texture.update()`).
- */
-
-/** A canvas-like source Pixi can upload. */
-export type PixiSource = HTMLCanvasElement | OffscreenCanvas;
-
-/** A texture's uploadable source (Pixi 8). */
-export interface PixiTextureSource {
-  update(): void;
-}
-
-/** A texture (Pixi 8: `source.update()`; Pixi 7: `update()`). */
-export interface PixiTexture {
-  readonly source?: PixiTextureSource;
-  update?(): void;
-  destroy(destroySource?: boolean): void;
-}
-
-/** A display object's shared fields. */
-export interface PixiDisplay {
-  x: number;
-  y: number;
-  visible: boolean;
-  alpha: number;
-  zIndex: number;
-  readonly scale: { x: number; y: number; set(x: number, y?: number): void };
-  destroy(options?: { children?: boolean }): void;
-}
-
-/** A sprite showing a `TTexture`. */
-export interface PixiSprite<TTexture extends PixiTexture = PixiTexture> extends PixiDisplay {
-  texture: TTexture;
-  readonly anchor: { set(x: number, y?: number): void };
-}
-
-/** A container that takes `TChild` sprites. */
-export interface PixiContainer<TChild extends PixiDisplay = PixiSprite> extends PixiDisplay {
-  sortableChildren: boolean;
-  addChild(child: TChild): void;
-  removeChild(child: TChild): void;
-}
-
-/** A frame rectangle. */
-export interface PixiRectangle {
-  readonly x: number;
-  readonly y: number;
-  readonly width: number;
-  readonly height: number;
-}
-
-/**
- * The PIXI namespace, as passed in by the game (`import * as PIXI from
- * 'pixi.js'`, or an object of the named imports). It is generic over the
- * game's own classes, inferred from what is passed, so the sprites and
- * textures that come back are pixi's own types and go straight into a
- * `Container` with no cast.
- */
-export interface PixiNs<
-  TTexture extends PixiTexture = PixiTexture,
-  TSprite extends PixiSprite<TTexture> = PixiSprite<TTexture>,
-  TRectangle extends PixiRectangle = PixiRectangle,
-> {
-  readonly Texture: {
-    from(source: PixiSource): TTexture;
-    new (options: { source: NonNullable<TTexture['source']>; frame: TRectangle }): TTexture;
-  };
-  readonly Sprite: new (texture?: TTexture) => TSprite;
-  /** Not used by the adapters; accepted so an object of the named imports can include it. */
-  readonly Container?: new () => PixiDisplay;
-  readonly Rectangle: new (x: number, y: number, width: number, height: number) => TRectangle;
-}
-
-/** Re-uploads a texture after its canvas changed (Pixi 8 and 7). */
-export function refresh(texture: PixiTexture): void {
-  if (texture.source) {
-    texture.source.update();
-  } else {
-    texture.update?.();
-  }
-}
-
+/**
+ * The slice of PixiJS the adapters use, typed structurally so the hub has no
+ * dependency on pixi. Pixi 8 is the target; Pixi 7 works through the same
+ * calls where they exist (`Texture.from(canvas)`, `texture.update()`).
+ */
+
+/** A canvas-like source Pixi can upload. */
+export type PixiSource = HTMLCanvasElement | OffscreenCanvas;
+
+/** A texture's uploadable source (Pixi 8). */
+export interface PixiTextureSource {
+  update(): void;
+}
+
+/** A texture (Pixi 8: `source.update()`; Pixi 7: `update()`). */
+export interface PixiTexture {
+  readonly source?: PixiTextureSource;
+  update?(): void;
+  destroy(destroySource?: boolean): void;
+}
+
+/** A display object's shared fields. */
+export interface PixiDisplay {
+  x: number;
+  y: number;
+  visible: boolean;
+  alpha: number;
+  zIndex: number;
+  readonly scale: { x: number; y: number; set(x: number, y?: number): void };
+  destroy(options?: { children?: boolean }): void;
+}
+
+/** A sprite showing a `TTexture`. */
+export interface PixiSprite<TTexture extends PixiTexture = PixiTexture> extends PixiDisplay {
+  texture: TTexture;
+  readonly anchor: { set(x: number, y?: number): void };
+}
+
+/** A container that takes `TChild` sprites. */
+export interface PixiContainer<TChild extends PixiDisplay = PixiSprite> extends PixiDisplay {
+  sortableChildren: boolean;
+  addChild(child: TChild): void;
+  removeChild(child: TChild): void;
+}
+
+/** A frame rectangle. */
+export interface PixiRectangle {
+  readonly x: number;
+  readonly y: number;
+  readonly width: number;
+  readonly height: number;
+}
+
+/**
+ * The PIXI namespace, as passed in by the game (`import * as PIXI from
+ * 'pixi.js'`, or an object of the named imports). It is generic over the
+ * game's own classes, inferred from what is passed, so the sprites and
+ * textures that come back are pixi's own types and go straight into a
+ * `Container` with no cast.
+ */
+export interface PixiNs<
+  TTexture extends PixiTexture = PixiTexture,
+  TSprite extends PixiSprite<TTexture> = PixiSprite<TTexture>,
+  TRectangle extends PixiRectangle = PixiRectangle,
+> {
+  readonly Texture: {
+    from(source: PixiSource): TTexture;
+    new (options: { source: NonNullable<TTexture['source']>; frame: TRectangle }): TTexture;
+  };
+  readonly Sprite: new (texture?: TTexture) => TSprite;
+  /** Not used by the adapters; accepted so an object of the named imports can include it. */
+  readonly Container?: new () => PixiDisplay;
+  readonly Rectangle: new (x: number, y: number, width: number, height: number) => TRectangle;
+}
+
+/** Re-uploads a texture after its canvas changed (Pixi 8 and 7). */
+export function refresh(texture: PixiTexture): void {
+  if (texture.source) {
+    texture.source.update();
+  } else {
+    texture.update?.();
+  }
+}
+

package/src/avatar/adapters/three.ts

@@ -1,126 +1,126 @@
-/**
- * three.js helpers (§3.8): an avatar on a `CanvasTexture` (redrawn only when
- * the pose changes, at most 30 times a second) and a ready-made `Sprite`.
- * Pass the game's three namespace; the hub never imports three. A 3D head is
- * out of scope (§14.4, Q11).
- */
-import type { Animator } from '../animator/animator';
-import { liveCanvas } from '../outputs/live-canvas';
-import type { LookLike, Pose, RenderOptions } from '../render/types';
-
-/**
- * The slice of three.js {@link avatarCanvasTexture} uses: `import * as THREE
- * from 'three'`, or an object of the named imports. Generic over the game's
- * own `CanvasTexture`, inferred from what is passed, so the texture that comes
- * back is three's own type.
- */
-export interface ThreeTextureNs<TTexture extends ThreeTexture = ThreeTexture> {
-  readonly CanvasTexture: new (canvas: HTMLCanvasElement | OffscreenCanvas) => TTexture;
-  readonly SRGBColorSpace?: string;
-}
-
-/**
- * The slice of three.js {@link avatarSprite} uses (the namespace, or the named
- * imports). The sprite that comes back is three's own `Sprite`, so
- * `scene.add(sprite)` needs no cast. `TMap` is what the game's
- * `SpriteMaterial` takes as its `map` (three's `Texture`); it is inferred on
- * its own so an inline object of the named imports infers too.
- */
-export interface ThreeNs<
-  TTexture extends ThreeTexture = ThreeTexture,
-  TMaterial extends ThreeMaterial = ThreeMaterial,
-  TSprite extends ThreeSprite = ThreeSprite,
-  TMap = TTexture,
-> extends ThreeTextureNs<TTexture> {
-  readonly SpriteMaterial: new (params: { map: TMap; transparent: boolean }) => TMaterial;
-  readonly Sprite: new (material: TMaterial) => TSprite;
-}
-
-/** A texture. */
-export interface ThreeTexture {
-  needsUpdate: boolean;
-  colorSpace?: string;
-  dispose(): void;
-}
-
-/** A material. */
-export interface ThreeMaterial {
-  dispose(): void;
-}
-
-/** A sprite. */
-export interface ThreeSprite {
-  readonly scale: { set(x: number, y: number, z: number): void };
-}
-
-/** Options for the three.js helpers. */
-export interface ThreeAvatarOptions extends RenderOptions {
-  readonly animator?: Animator;
-  /** Texture pixels per `size` pixel (default 2). */
-  readonly resolution?: number;
-}
-
-/** A live avatar texture; `texture` is the game's own `CanvasTexture`. */
-export interface ThreeAvatarTexture<TTexture extends ThreeTexture = ThreeTexture> {
-  readonly texture: TTexture;
-  /** Redraws for the animator's pose at `t` (or a given pose), at most 30 times a second. */
-  update(t: number | Pose): void;
-  setLook(like: LookLike): void;
-  dispose(): void;
-}
-
-const MIN_FRAME_MS = 1000 / 30;
-
-/** A `CanvasTexture` showing the avatar. */
-export function avatarCanvasTexture<TTexture extends ThreeTexture>(
-  three: ThreeTextureNs<TTexture>,
-  like: LookLike,
-  opts: ThreeAvatarOptions = {},
-): ThreeAvatarTexture<TTexture> {
-  const live = liveCanvas(like, opts, opts.resolution ?? 2);
-  live.draw(opts.pose);
-  const texture = new three.CanvasTexture(live.canvas);
-  if (three.SRGBColorSpace) {
-    texture.colorSpace = three.SRGBColorSpace;
-  }
-  let last = -Infinity;
-  return {
-    texture,
-    update(t) {
-      if (typeof t === 'number') {
-        if (t - last < MIN_FRAME_MS) {
-          return;
-        }
-        last = t;
-      }
-      const pose = typeof t === 'number' ? opts.animator?.pose(t) : t;
-      if (live.draw(pose ?? opts.pose)) {
-        texture.needsUpdate = true;
-      }
-    },
-    setLook(next) {
-      live.setLook(next);
-      opts.animator?.setLook(next);
-      if (live.draw(opts.pose)) {
-        texture.needsUpdate = true;
-      }
-    },
-    dispose() {
-      texture.dispose();
-    },
-  };
-}
-
-/** A billboard `Sprite` of the avatar, `height` world units tall (default 1). */
-export function avatarSprite<TTexture extends ThreeTexture & TMap, TMaterial extends ThreeMaterial, TSprite extends ThreeSprite, TMap>(
-  three: ThreeNs<TTexture, TMaterial, TSprite, TMap>,
-  like: LookLike,
-  opts: ThreeAvatarOptions & { readonly height?: number } = {},
-): { readonly sprite: TSprite; readonly avatar: ThreeAvatarTexture<TTexture> } {
-  const avatar = avatarCanvasTexture(three, like, opts);
-  const sprite = new three.Sprite(new three.SpriteMaterial({ map: avatar.texture, transparent: true }));
-  const h = opts.height ?? 1;
-  const aspect = opts.frame === 'full' ? 172 / 206 : 1;
-  sprite.scale.set(h * aspect, h, 1);
-  return { sprite, avatar };
-}
+/**
+ * three.js helpers (§3.8): an avatar on a `CanvasTexture` (redrawn only when
+ * the pose changes, at most 30 times a second) and a ready-made `Sprite`.
+ * Pass the game's three namespace; the hub never imports three. A 3D head is
+ * out of scope (§14.4, Q11).
+ */
+import type { Animator } from '../animator/animator';
+import { liveCanvas } from '../outputs/live-canvas';
+import type { LookLike, Pose, RenderOptions } from '../render/types';
+
+/**
+ * The slice of three.js {@link avatarCanvasTexture} uses: `import * as THREE
+ * from 'three'`, or an object of the named imports. Generic over the game's
+ * own `CanvasTexture`, inferred from what is passed, so the texture that comes
+ * back is three's own type.
+ */
+export interface ThreeTextureNs<TTexture extends ThreeTexture = ThreeTexture> {
+  readonly CanvasTexture: new (canvas: HTMLCanvasElement | OffscreenCanvas) => TTexture;
+  readonly SRGBColorSpace?: string;
+}
+
+/**
+ * The slice of three.js {@link avatarSprite} uses (the namespace, or the named
+ * imports). The sprite that comes back is three's own `Sprite`, so
+ * `scene.add(sprite)` needs no cast. `TMap` is what the game's
+ * `SpriteMaterial` takes as its `map` (three's `Texture`); it is inferred on
+ * its own so an inline object of the named imports infers too.
+ */
+export interface ThreeNs<
+  TTexture extends ThreeTexture = ThreeTexture,
+  TMaterial extends ThreeMaterial = ThreeMaterial,
+  TSprite extends ThreeSprite = ThreeSprite,
+  TMap = TTexture,
+> extends ThreeTextureNs<TTexture> {
+  readonly SpriteMaterial: new (params: { map: TMap; transparent: boolean }) => TMaterial;
+  readonly Sprite: new (material: TMaterial) => TSprite;
+}
+
+/** A texture. */
+export interface ThreeTexture {
+  needsUpdate: boolean;
+  colorSpace?: string;
+  dispose(): void;
+}
+
+/** A material. */
+export interface ThreeMaterial {
+  dispose(): void;
+}
+
+/** A sprite. */
+export interface ThreeSprite {
+  readonly scale: { set(x: number, y: number, z: number): void };
+}
+
+/** Options for the three.js helpers. */
+export interface ThreeAvatarOptions extends RenderOptions {
+  readonly animator?: Animator;
+  /** Texture pixels per `size` pixel (default 2). */
+  readonly resolution?: number;
+}
+
+/** A live avatar texture; `texture` is the game's own `CanvasTexture`. */
+export interface ThreeAvatarTexture<TTexture extends ThreeTexture = ThreeTexture> {
+  readonly texture: TTexture;
+  /** Redraws for the animator's pose at `t` (or a given pose), at most 30 times a second. */
+  update(t: number | Pose): void;
+  setLook(like: LookLike): void;
+  dispose(): void;
+}
+
+const MIN_FRAME_MS = 1000 / 30;
+
+/** A `CanvasTexture` showing the avatar. */
+export function avatarCanvasTexture<TTexture extends ThreeTexture>(
+  three: ThreeTextureNs<TTexture>,
+  like: LookLike,
+  opts: ThreeAvatarOptions = {},
+): ThreeAvatarTexture<TTexture> {
+  const live = liveCanvas(like, opts, opts.resolution ?? 2);
+  live.draw(opts.pose);
+  const texture = new three.CanvasTexture(live.canvas);
+  if (three.SRGBColorSpace) {
+    texture.colorSpace = three.SRGBColorSpace;
+  }
+  let last = -Infinity;
+  return {
+    texture,
+    update(t) {
+      if (typeof t === 'number') {
+        if (t - last < MIN_FRAME_MS) {
+          return;
+        }
+        last = t;
+      }
+      const pose = typeof t === 'number' ? opts.animator?.pose(t) : t;
+      if (live.draw(pose ?? opts.pose)) {
+        texture.needsUpdate = true;
+      }
+    },
+    setLook(next) {
+      live.setLook(next);
+      opts.animator?.setLook(next);
+      if (live.draw(opts.pose)) {
+        texture.needsUpdate = true;
+      }
+    },
+    dispose() {
+      texture.dispose();
+    },
+  };
+}
+
+/** A billboard `Sprite` of the avatar, `height` world units tall (default 1). */
+export function avatarSprite<TTexture extends ThreeTexture & TMap, TMaterial extends ThreeMaterial, TSprite extends ThreeSprite, TMap>(
+  three: ThreeNs<TTexture, TMaterial, TSprite, TMap>,
+  like: LookLike,
+  opts: ThreeAvatarOptions & { readonly height?: number } = {},
+): { readonly sprite: TSprite; readonly avatar: ThreeAvatarTexture<TTexture> } {
+  const avatar = avatarCanvasTexture(three, like, opts);
+  const sprite = new three.Sprite(new three.SpriteMaterial({ map: avatar.texture, transparent: true }));
+  const h = opts.height ?? 1;
+  const aspect = opts.frame === 'full' ? 172 / 206 : 1;
+  sprite.scale.set(h * aspect, h, 1);
+  return { sprite, avatar };
+}

package/src/avatar/art/glasses.ts

@@ -1,9 +1,67 @@
-/** Glasses (catalog `glasses.*`), one lens shape drawn at each eye. */
-import { arc, blob, roundedRect } from '../geom';
+/**
+ * Glasses (catalog `glasses.*`). A lens is drawn at each eye (centred on it,
+ * authored for the viewer's right eye); `sport` is one visor across both
+ * eyes and the monocle is one lens. Lenses are big enough to cover the eye
+ * whites (about 21 × 25), so winks and sleepy eyes show through.
+ */
+import { arc, blob, Path, roundedRect } from '../geom';
 import type { GlassesPart } from './shape';
 
+const ring = (r: number): Path => blob(arc(0, 0, r, r, 0, 330, 11));
+
 /** Every glasses part by name. */
 export const GLASSES_ART: Readonly<Record<string, GlassesPart>> = {
-  round: { lens: blob(arc(0, 0, 13, 13, 0, 330, 11)), bridge: blob([[-4, 0], [0, -3], [4, 0]], false) },
+  round: { lens: ring(13), bridge: blob([[-4, 0], [0, -3], [4, 0]], false) },
   square: { lens: roundedRect(-13.5, -10.5, 27, 21, 5), bridge: blob([[-3.5, -2], [0, -4], [3.5, -2]], false) },
+
+  owl: { lens: ring(16.5), bridge: blob([[-1.5, -1], [0, -2.5], [1.5, -1]], false), frame: 4.4 },
+
+  'cat-eye': {
+    lens: blob([[-13, -8], [-4, -12], [9, -12.5], [18, -17, 'c'], [15.5, 1], [9, 11], [-3, 13], [-11.5, 8]]),
+    bridge: blob([[-4, -3], [0, -5], [4, -3]], false),
+    isMirrored: true,
+    frame: 3.6,
+  },
+
+  'half-rim': {
+    lens: roundedRect(-14, -11, 28, 22, 6),
+    bar: blob([[-14.6, -4], [-13.4, -11.2], [13.4, -11.2], [14.6, -4]], false),
+    bridge: new Path().m(-4, -6).l(4, -6),
+    frame: 1.5,
+  },
+
+  aviator: {
+    lens: blob([[-12, -11], [13, -11.5], [15.5, -3], [11.5, 9], [3, 14], [-6, 12.5], [-12.5, 3]]),
+    bridge: new Path().m(-5, -9.5).l(5, -9.5).m(-4.5, -2).q(0, -5, 4.5, -2),
+    isMirrored: true,
+    frame: 2.6,
+  },
+
+  sunglasses: {
+    lens: blob([[-14.5, -12.5, 'c'], [15.5, -13.5, 'c'], [15, 1], [10.5, 11.5], [-8.5, 11.5], [-14, 3]]),
+    bridge: blob([[-3.5, -6], [0, -8], [3.5, -6]], false),
+    isMirrored: true,
+    frame: 4.2,
+    tint: '#262a33',
+  },
+
+  sport: {
+    visor: blob([[-40, -8], [-20, -12], [0, -10], [20, -12], [40, -8], [38, 6], [26, 15], [9, 14], [0, 9], [-9, 14], [-26, 15], [-38, 6]]),
+    frame: 3,
+    tint: '#2d6fd6',
+  },
+
+  hearts: {
+    lens: blob([[0, -6, 'c'], [6, -13], [13, -12.5], [16.5, -4], [11.5, 6], [0, 15.5, 'c'], [-11.5, 6], [-16.5, -4], [-13, -12.5], [-6, -13]]),
+    bridge: blob([[-1.5, -4], [0, -6], [1.5, -4]], false),
+    frame: 3,
+    tint: '#e0708f',
+  },
+
+  monocle: {
+    lens: ring(13.5),
+    isSingle: true,
+    chain: new Path().m(26, 16).c(32, 30, 38, 38, 46, 44),
+    frame: 2.8,
+  },
 };

package/src/avatar/art/shape.ts

@@ -48,10 +48,29 @@ export interface FacialHairPart {
   readonly moustache?: readonly Shape[];
 }
 
-/** Glasses, drawn per lens so they follow the eyes through a head turn. */
+/**
+ * Glasses, drawn per lens so they follow the eyes through a head turn. Lens
+ * paths are centred on the eye and drawn for the viewer's right eye.
+ */
 export interface GlassesPart {
-  readonly lens: Path;
-  readonly bridge: Path;
+  /** One lens (absent for a visor). */
+  readonly lens?: Path;
+  /** The bridge over the nose, centred between the eyes. */
+  readonly bridge?: Path;
+  /** The frame's line width (default 3.2). */
+  readonly frame?: number;
+  /** A heavier bar along each lens's top (half-rims). */
+  readonly bar?: Path;
+  /** Mirror the lens for the other eye (shapes with an outer and inner side). */
+  readonly isMirrored?: true;
+  /** One visor across both eyes in head space instead of lenses (sport). */
+  readonly visor?: Path;
+  /** Only the right-hand lens, with no arms or bridge (the monocle). */
+  readonly isSingle?: true;
+  /** The monocle's chain, in head space. */
+  readonly chain?: Path;
+  /** The lens tint when the look has none (tinted glasses only). */
+  readonly tint?: string;
 }
 
 /**

package/src/avatar/describe.ts

@@ -19,7 +19,10 @@ const BEARD_WORDS: Readonly<Record<string, string>> = {
   chinstrap: 'a chinstrap beard', short: 'a short beard', full: 'a beard', long: 'a long beard',
 };
 const EXTRA_WORDS: Readonly<Record<string, string>> = {
-  'glasses.round': 'round glasses', 'glasses.square': 'square glasses', 'headwear.hijab': 'a hijab',
+  'glasses.round': 'round glasses', 'glasses.square': 'square glasses', 'glasses.owl': 'big round glasses',
+  'glasses.cat-eye': 'cat-eye glasses', 'glasses.half-rim': 'half-rim glasses', 'glasses.aviator': 'aviator glasses',
+  'glasses.sunglasses': 'sunglasses', 'glasses.sport': 'sport sunglasses', 'glasses.hearts': 'heart glasses', 'glasses.monocle': 'a monocle',
+  'headwear.hijab': 'a hijab',
   'headwear.headwrap': 'a headwrap', 'headwear.beanie': 'a beanie', 'headwear.cap': 'a cap',
   'face.freckles': 'freckles', 'face.rosy': 'rosy cheeks', 'ears.studs': 'earrings', 'ears.hoops': 'hoop earrings',
 };

package/src/avatar/geom.ts

@@ -56,6 +56,11 @@ export class Path {
     return this;
   }
 
+  /** The lowest y of any point (control points included, so it never under-reports). */
+  bottom(): number {
+    return this.cmds.reduce((low, { p }) => p.reduce((lo, v, i) => (i % 2 === 1 ? Math.max(lo, v) : lo), low), -Infinity);
+  }
+
   /** The SVG `d` string, optionally warping every point. */
   d(warp?: Warp): string {
     return this.cmds.map(({ c, p }) => {