@diffenderfer-games/hub 2.0.0-next.8 → 2.0.0-next.9

package/src/avatar/outputs/canvas.ts

@@ -6,7 +6,7 @@
  */
 import { toLook } from '../look-like';
 import { composeAvatar } from '../render/compose';
-import { FRAMES, frameOf, framed, pixelSize } from '../render/frame';
+import { frameBox, framed, pixelSize } from '../render/frame';
 import type { LookLike, RenderOptions } from '../render/types';
 import type { SceneNode } from '../scene';
 import { paintNodes, type Ctx2D, type LayerFactory } from './canvas-paint';
@@ -36,7 +36,7 @@ export interface CanvasPlacement extends RenderOptions {
 
 /** Paints scene nodes with rig space mapped to the frame box at (x, y). */
 export function paintFramed(ctx: Ctx2D, nodes: readonly SceneNode[], opts: CanvasPlacement): void {
-  const [fx, fy] = FRAMES[frameOf(opts)];
+  const [fx, fy] = frameBox(opts);
   const { scale } = pixelSize(opts);
   ctx.save();
   ctx.translate(opts.x, opts.y);

package/src/avatar/outputs/svg.ts

@@ -8,7 +8,7 @@ import type { AvatarLook } from '@diffenderfer-games/hub-contract/avatar';
 import { n } from '../geom';
 import { toLook } from '../look-like';
 import { composeAvatar, type Composed } from '../render/compose';
-import { FRAMES, frameOf, framed, pixelSize } from '../render/frame';
+import { frameBox, framed, pixelSize } from '../render/frame';
 import type { LookLike, RenderOptions } from '../render/types';
 import { escapeXml, sceneToSvg } from './svg-markup';
 
@@ -25,7 +25,7 @@ export function nextPrefix(opts: RenderOptions): string {
 
 /** The `<svg>` for an already composed avatar. */
 export function svgFromComposed(composed: Composed, look: AvatarLook | null, opts: RenderOptions): string {
-  const [left, top, w, h] = FRAMES[frameOf(opts)];
+  const [left, top, w, h] = frameBox(opts);
   const { width, height } = pixelSize(opts);
   const { body, defs } = sceneToSvg(framed(composed.nodes, look, opts), nextPrefix(opts));
   const a11y = opts.title ? ` role="img" aria-label="${escapeXml(opts.title)}"` : ' aria-hidden="true"';

package/src/avatar/render/body.ts

@@ -109,8 +109,8 @@ export function bodyLayout(c: Colours, pose: BodyPose, phi: number, phase: numbe
 }
 
 /** The soft ground shadow at the feet (shrinks while lifted). */
-export function groundShadow(lift: number): SceneNode {
+export function groundShadow(lift: number, width = 36): SceneNode {
   const k = Math.max(0.5, 1 - lift / 40);
-  return ellipse(0, 0, 36 * k, 8 * k, { fill: '#000000', opacity: 0.3 });
+  return ellipse(0, 0, width * k, (width / 4.5) * k, { fill: '#000000', opacity: 0.3 });
 }
 

package/src/avatar/render/compose.ts

@@ -10,15 +10,17 @@ import { currentArt } from '../art-store';
 import { EXPRESSIONS } from '../face';
 import { n, type Warp } from '../geom';
 import { g, path, rect, rot, sc, tr, type Clip, type SceneNode } from '../scene';
-import { bodyLayout, groundShadow } from './body';
+import { bodyLayout, groundShadow, type BodyLayout } from './body';
 import { accessoryColour, lookColours, tones, type Colours } from './colours';
 import { HEAD_PATH, LINE, paintShapes, SKULL_R, turnWarp, type Ctx } from './context';
 import { FRAME_BLACK, glasses, goggles, gogglesStrapBack, type LensGlass } from './eyewear';
 import { brow, eye } from './eyes';
 import { cheeks, ears, head, type EarExtra } from './head';
 import { extras, mouth, nose } from './mouth';
+import { isWalker } from './frame';
 import { crown, handProp, headset } from './props';
-import type { Anchor, Facing, Point, Pose, RenderOptions } from './types';
+import type { Anchor, BodyPose, Facing, Point, Pose, RenderOptions } from './types';
+import { walkerLayout, walkerSilhouette } from './walker';
 
 /** The lens tint drawn with a mirror finish. */
 const MIRROR_TINT = 'p:lens-mirror';
@@ -249,6 +251,16 @@ function anchorsFor(headX: number, headY: number, top: number, prop: Point, mirr
   };
 }
 
+/** The body for a figure: its layout, where the head centre goes, and the head's scale. */
+function figureLayout(c: Colours, opts: RenderOptions, pose: BodyPose, phi: number, angle: number, phase: number): { readonly b: BodyLayout; readonly headY: number; readonly headScale: number } {
+  if (isWalker(opts)) {
+    const walker = walkerLayout(c, pose, angle, phase);
+    return { b: walker, headY: walker.headY, headScale: walker.headScale };
+  }
+  const b = bodyLayout(c, pose, phi, phase, opts.stool === true);
+  return { b, headY: HEAD_Y + b.headDy, headScale: 1 };
+}
+
 /** Composes a look (or `null` for the silhouette) with a pose. */
 export function composeAvatar(look: AvatarLook | null, opts: RenderOptions = {}): Composed {
   const art = currentArt();
@@ -257,6 +269,10 @@ export function composeAvatar(look: AvatarLook | null, opts: RenderOptions = {})
   const facing: Drawn = MIRROR[facingIn] ?? (facingIn === 'S' || facingIn === 'SE' || facingIn === 'E' || facingIn === 'NE' ? facingIn : 'N');
   const hasShadow = opts.shadow ?? opts.frame === 'full';
   if (!look || !art) {
+    if (isWalker(opts)) {
+      const shape = walkerSilhouette();
+      return { nodes: [...(hasShadow ? [groundShadow(0, 18)] : []), ...shape.nodes], anchors: anchorsFor(0, shape.headY, shape.top, { x: 0, y: -40 }, 1) };
+    }
     return { nodes: silhouette(hasShadow), anchors: anchorsFor(0, HEAD_Y, HEAD_Y - 60, { x: 0, y: -30 }, 1) };
   }
   const pose = opts.pose ?? {};
@@ -272,19 +288,20 @@ export function composeAvatar(look: AvatarLook | null, opts: RenderOptions = {})
     c: parts.c, face, gaze, phi: (angle + gaze.x * 11) * DEG, dy: gaze.y * 3,
     blink: pose.blink ?? 0, talk: pose.talk ?? 0,
   };
-  const b = bodyLayout(parts.c, bodyPose, ctx.phi, pose.phase ?? 0.25, opts.stool === true);
+  const { b, headY: bodyHeadY, headScale } = figureLayout(parts.c, opts, bodyPose, ctx.phi, angle, pose.phase ?? 0.25);
   const headX = b.headDx + (pose.bob?.x ?? 0);
-  const headY = HEAD_Y + b.headDy + (pose.bob?.y ?? 0);
+  const headY = bodyHeadY + (pose.bob?.y ?? 0);
   const tilt = face.headTilt + b.tilt + (pose.tilt ?? 0);
   const sq = face.squash + (pose.squash ?? 0);
   const drawn = isBack ? backHead(ctx, parts, isPlaying, status, angle) : frontHead(ctx, parts, isPlaying, status, angle, gaze.x);
   const headNodes = drawn.head;
-  const top = headY - 50 - Math.max(parts.hair?.top ?? 0, parts.hat?.top ?? 0);
+  const top = headY - (50 + Math.max(parts.hair?.top ?? 0, parts.hat?.top ?? 0)) * headScale;
   if (status === 'crown') {
     headNodes.push(...crown(Math.max(parts.hair?.top ?? 0, parts.hat?.top ?? 0)));
   }
-  const handProps = status && !isBack ? handProp(status, b.prop.x, b.prop.y, parts.c.body, parts.c.bodyInk) : [];
-  const headTf = [tr(headX, headY), rot(tilt), sc(1 + sq, 1 - sq)];
+  const props = status && !isBack ? handProp(status, b.prop.x, b.prop.y, parts.c.body, parts.c.bodyInk) : [];
+  const handProps = headScale === 1 || props.length === 0 ? props : [g(props, { tf: [tr(b.prop.x, b.prop.y), sc(headScale * 1.1), tr(-b.prop.x, -b.prop.y)] })];
+  const headTf = [tr(headX, headY), rot(tilt), sc((1 + sq) * headScale, (1 - sq) * headScale)];
   const character: SceneNode[] = [
     ...b.behind,
     ...(drawn.behindBody.length > 0 ? [g(drawn.behindBody, { tf: headTf })] : []),
@@ -294,7 +311,7 @@ export function composeAvatar(look: AvatarLook | null, opts: RenderOptions = {})
   ];
   const lifted = b.lift > 0 ? [g(character, { tf: [tr(0, -b.lift)] })] : character;
   const rimmed = opts.rim ? [g(lifted, { rim: true })] : lifted;
-  const all: SceneNode[] = [...(hasShadow ? [groundShadow(b.lift)] : []), ...rimmed];
+  const all: SceneNode[] = [...(hasShadow ? [groundShadow(b.lift, headScale === 1 ? 36 : 18)] : []), ...rimmed];
   const mirror = isMirrored ? -1 : 1;
   return {
     nodes: isMirrored ? [g(all, { tf: [sc(-1, 1)] })] : all,

package/src/avatar/render/frame.ts

@@ -18,6 +18,19 @@ export const FRAMES: Readonly<Record<Frame, Box>> = {
   full: [-86, -196, 172, 206],
 };
 
+/** The walker's full frame: a smaller head, and room for feet hanging below a seat. */
+export const WALKER_FULL: Box = [-60, -176, 120, 214];
+
+/** True when options draw the walker figure (full frames only). */
+export function isWalker(opts: RenderOptions): boolean {
+  return opts.figure === 'walker' && frameOf(opts) === 'full';
+}
+
+/** The box options draw, in rig units. */
+export function frameBox(opts: RenderOptions): Box {
+  return isWalker(opts) ? WALKER_FULL : FRAMES[frameOf(opts)];
+}
+
 /** The site panel colour behind badges. */
 export const PANEL = '#11141c';
 
@@ -28,7 +41,7 @@ export function frameOf(opts: RenderOptions): Frame {
 
 /** Output pixel size for a frame (the longer edge is `size`). */
 export function pixelSize(opts: RenderOptions): { readonly width: number; readonly height: number; readonly scale: number } {
-  const [, , w, h] = FRAMES[frameOf(opts)];
+  const [, , w, h] = frameBox(opts);
   const size = opts.size ?? 48;
   const scale = size / Math.max(w, h);
   return { width: w * scale, height: h * scale, scale };
@@ -41,7 +54,7 @@ export function ringColour(look: AvatarLook | null): string {
 
 /** Wraps the avatar's nodes in the frame's background (a badge clips to the rounded panel). */
 export function framed(nodes: readonly SceneNode[], look: AvatarLook | null, opts: RenderOptions): SceneNode[] {
-  const [left, top, w, h] = FRAMES[frameOf(opts)];
+  const [left, top, w, h] = frameBox(opts);
   const background = opts.background ?? (frameOf(opts) === 'head' ? 'badge' : 'none');
   if (background === 'badge') {
     const r = w * 0.24;

package/src/avatar/render/types.ts

@@ -17,6 +17,13 @@ export type StatusProp = 'goggles' | 'headset' | 'cards' | 'controller' | 'troph
 /** How much of the character a frame shows. */
 export type Frame = 'head' | 'bust' | 'full';
 
+/**
+ * The full-body figure: `blob` (the default, a big head on a gumdrop) or
+ * `walker` (a small full-body character with legs and arms, for worlds and
+ * crowds). Head and bust frames always draw the blob.
+ */
+export type Figure = 'blob' | 'walker';
+
 /** A point in rig units. */
 export interface Point {
   readonly x: number;
@@ -73,6 +80,8 @@ export interface RenderOptions {
   readonly shadow?: boolean;
   /** Draws a stool under `sit` and `play` (pose sheets and previews). */
   readonly stool?: boolean;
+  /** The full frame's figure (default `blob`). */
+  readonly figure?: Figure;
 }
 
 /** Anything a render accepts: a look, an `AV1…` code, or an object carrying a code. */

package/src/avatar/render/walker-parts.ts

@@ -0,0 +1,121 @@
+/**
+ * The walker's drawing parts (`figure: 'walker'`): limbs as outlined round
+ * strokes, the shirt, trousers and shoes. Colours come from the look: the
+ * shirt is the body colour, the trousers and shoes are picked from the body
+ * colour so they always stand apart from the shirt.
+ */
+import { lightness, outline, shade } from '../colour';
+import { Path } from '../geom';
+import { ellipse, g, path, sc, tr, type SceneNode } from '../scene';
+import type { Colours } from './colours';
+import { LINE } from './context';
+
+/** A point in rig units. */
+export type Vec = readonly [number, number];
+
+/** The walker's clothes, derived from a look's colours. */
+export interface Outfit {
+  readonly trousers: string;
+  readonly trousersInk: string;
+  readonly shoes: string;
+  readonly shoesInk: string;
+}
+
+const TROUSERS = ['#34466e', '#2e323f', '#6a5642', '#4a3a60', '#3c5a4c', '#5a3a3a'] as const;
+const SHOES = ['#2c2430', '#f1ece2', '#5a3a2a', '#2c2430'] as const;
+
+/** A small stable hash of a colour string. */
+function hashOf(text: string): number {
+  let hash = 7;
+  for (let i = 0; i < text.length; i++) {
+    hash = (hash * 31 + text.charCodeAt(i)) >>> 0;
+  }
+  return hash;
+}
+
+/** Trousers and shoes for a shirt colour: a trouser tone at least a little lighter or darker than the shirt. */
+export function outfitFor(c: Colours): Outfit {
+  const hash = hashOf(c.body);
+  const shirt = lightness(c.body);
+  let trousers: string = TROUSERS[hash % TROUSERS.length] ?? TROUSERS[0];
+  for (let i = 1; i < TROUSERS.length && Math.abs(lightness(trousers) - shirt) < 0.12; i++) {
+    trousers = TROUSERS[(hash + i) % TROUSERS.length] ?? trousers;
+  }
+  const shoes: string = SHOES[(hash >>> 4) % SHOES.length] ?? SHOES[0];
+  return { trousers, trousersInk: outline(trousers), shoes, shoesInk: outline(shoes) };
+}
+
+/** A polyline as a path `d`. */
+function polyline(points: readonly Vec[]): string {
+  const line = new Path();
+  points.forEach(([px, py], i) => (i === 0 ? line.m(px, py) : line.l(px, py)));
+  return line.d();
+}
+
+/** A limb: a round stroke with a tonal outline under it. */
+export function limb(points: readonly Vec[], width: number, fill: string, ink: string): SceneNode[] {
+  const d = polyline(points);
+  return [
+    path(d, { fill: 'none', stroke: ink, sw: width + LINE * 1.3, cap: 'round' }),
+    path(d, { fill: 'none', stroke: fill, sw: width, cap: 'round' }),
+  ];
+}
+
+/** A shoe at a foot point, nudged along the facing. */
+export function shoe(at: Vec, forward: Vec, o: Outfit): SceneNode {
+  return ellipse(at[0] + forward[0] * 2.4, at[1] + forward[1] * 1.6 - 1.5, 6.2 + Math.abs(forward[0]) * 1.4, 3.8, { fill: o.shoes, stroke: o.shoesInk, sw: LINE * 0.8 });
+}
+
+/** A hand. */
+export function hand(c: Colours, at: Vec): SceneNode {
+  return ellipse(at[0], at[1], 4.3, 4.3, { fill: c.skin, stroke: c.skinInk, sw: LINE * 0.8 });
+}
+
+/** The torso's outline: shoulders at `top`, the hem at `hem`, `w` its width factor (narrower when turned). */
+export function torsoPath(w: number, top: number, hem: number): string {
+  const shoulder = 17.5 * w;
+  const waist = 14.5 * w;
+  const hip = 15.5 * w;
+  const mid = (top + hem) / 2 + 4;
+  return new Path()
+    .m(-shoulder, top + 6)
+    .c(-shoulder, top - 1, -shoulder + 5, top - 3, -shoulder * 0.35, top - 3)
+    .l(shoulder * 0.35, top - 3)
+    .c(shoulder - 5, top - 3, shoulder, top - 1, shoulder, top + 6)
+    .l(waist, mid)
+    .l(hip, hem)
+    .q(0, hem + 3, -hip, hem)
+    .l(-waist, mid)
+    .z()
+    .d();
+}
+
+/** The shirt: a shade base, the lit front, the outline, and the neckline (front) or collar (back). */
+export function shirt(c: Colours, w: number, top: number, hem: number, lean: number, isBack: boolean): SceneNode[] {
+  const d = torsoPath(w, top, hem);
+  const cy = (top + hem) / 2;
+  const nodes: SceneNode[] = [
+    path(d, { fill: c.bodyShade }),
+    g([path(d, { fill: c.body })], { tf: [tr(-1.5 - lean * 2, cy - 1.5), sc(0.9, 0.94), tr(0, -cy)] }),
+    path(`M${String(-15 * w)} ${String(hem - 2.5)}Q0 ${String(hem + 0.5)} ${String(15 * w)} ${String(hem - 2.5)}`, { fill: 'none', stroke: shade(c.bodyShade), sw: 2.2, opacity: 0.7 }),
+    path(d, { fill: 'none', stroke: c.bodyInk, sw: LINE }),
+  ];
+  const neckX = lean * 7;
+  if (isBack) {
+    nodes.push(path(`M${String(neckX - 6)} ${String(top - 2)}Q${String(neckX)} ${String(top + 1.5)} ${String(neckX + 6)} ${String(top - 2)}`, { fill: 'none', stroke: c.bodyShade, sw: 3 }));
+  } else {
+    nodes.push(path(`M${String(neckX - 6 * w)} ${String(top - 2.6)}Q${String(neckX)} ${String(top + 6)} ${String(neckX + 6 * w)} ${String(top - 2.6)}Z`, { fill: c.skin, stroke: c.bodyInk, sw: LINE * 0.8 }));
+  }
+  return nodes;
+}
+
+/** The seat of the trousers joining the legs under the hem. */
+export function hips(o: Outfit, w: number, hipY: number): SceneNode {
+  const half = 12 * w;
+  return path(new Path().m(-half, hipY - 4).l(half, hipY - 4).l(half, hipY + 4).q(0, hipY + 9, -half, hipY + 4).z().d(), { fill: o.trousers, stroke: o.trousersInk, sw: LINE * 0.8 });
+}
+
+/** The neck under the head. */
+export function neck(c: Colours, top: number, dx: number): SceneNode {
+  return path(new Path().m(dx - 4.5, top - 10).l(dx + 4.5, top - 10).l(dx + 4.5, top).l(dx - 4.5, top).z().d(), { fill: c.skinShade, stroke: c.skinInk, sw: LINE * 0.6 });
+}

package/src/avatar/render/walker.ts

@@ -0,0 +1,199 @@
+/**
+ * The world walker (`figure: 'walker'`): a small full-body character for
+ * maps and crowds, with legs, arms, a shirt, trousers and shoes, and the
+ * head drawn smaller on top ({@link WALKER_HEAD_SCALE}). It takes the blob's
+ * pose names: `walk` and `run` swing the legs and arms along the facing,
+ * `sit` folds the legs over a seat, `idle` breathes, `wave` and `cheer` lift
+ * the arms.
+ *
+ * Standing, the origin is the feet. Sitting (`sit`, `play`), the origin is
+ * the seat: the hips rest on it and the feet hang {@link WALKER_SEAT_DROP}
+ * units below, on the floor in front of it.
+ */
+import { ellipse, type SceneNode } from '../scene';
+import type { BodyLayout } from './body';
+import type { Colours } from './colours';
+import type { BodyPose } from './types';
+import { hand, hips, limb, neck, outfitFor, shirt, shoe, type Outfit, type Vec } from './walker-parts';
+
+/** The head's scale on a walker (the blob draws it at 1). */
+export const WALKER_HEAD_SCALE = 0.58;
+
+/** How far below the seat a sitter's feet reach (rig units). */
+export const WALKER_SEAT_DROP = 26;
+
+/** Heights of the hips, shoulders and head centre above the origin. */
+interface Heights {
+  readonly hip: number;
+  readonly shoulder: number;
+  readonly head: number;
+}
+
+const STANDING: Heights = { hip: -35, shoulder: -72, head: -103 };
+const SEATED: Heights = { hip: -3, shoulder: -40, head: -71 };
+const LEG = 32;
+const UPPER_ARM = 13;
+const FOREARM = 12;
+const LEG_W = 10.5;
+const SLEEVE_W = 10;
+const ARM_W = 7.5;
+const DEG = Math.PI / 180;
+
+/** A walker's layout: the blob's fields plus where the head goes and its scale. */
+export interface WalkerLayout extends BodyLayout {
+  readonly headY: number;
+  readonly headScale: number;
+}
+
+/** One side of the body: −1 is the character's right, +1 its left. */
+type Side = -1 | 1;
+
+/** The view of a facing: how far it is turned, which way is forward on screen. */
+interface View {
+  /** sin of the turn: 0 front or back, ~1 side on. */
+  readonly side: number;
+  /** cos of the turn: 1 front, −1 back. */
+  readonly front: number;
+  /** Forward on the floor, in screen units per unit (y is foreshortened). */
+  readonly forward: Vec;
+  readonly isBack: boolean;
+  /** The torso's width factor. */
+  readonly width: number;
+}
+
+function viewOf(angleDeg: number): View {
+  const side = Math.sin(angleDeg * DEG);
+  const front = Math.cos(angleDeg * DEG);
+  return { side, front, forward: [side, front * 0.45], isBack: angleDeg > 90, width: 1 - 0.36 * Math.abs(side) };
+}
+
+/** A body side's screen x for a lateral distance (sides overlap when turned). */
+const lateralX = (v: View, sideOf: Side, distance: number): number => sideOf * distance * v.front;
+
+/** How near the viewer a side is (> 0: drawn in front when turned). */
+const nearness = (v: View, sideOf: Side): number => -sideOf * v.side;
+
+const add = (a: Vec, b: Vec, k = 1): Vec => [a[0] + b[0] * k, a[1] + b[1] * k];
+
+/** What each limb does in a pose. */
+interface Limbs {
+  /** Foot (standing) or knee-then-foot (sitting) per side. */
+  readonly leg: (sideOf: Side) => readonly [Vec, Vec, Vec];
+  readonly arm: (sideOf: Side) => readonly [Vec, Vec, Vec];
+}
+
+function standingLimbs(v: View, h: Heights, pose: BodyPose, phase: number, bob: number): Limbs {
+  const isRun = pose === 'run';
+  const isWalking = pose === 'walk' || isRun || pose === 'dance';
+  const stride = isRun ? 38 : 27;
+  const swingOf = (sideOf: Side): number => (isWalking ? Math.sin((phase + (sideOf === 1 ? 0 : 0.5)) * Math.PI * 2) : 0);
+  return {
+    leg: (sideOf) => {
+      const hip: Vec = [lateralX(v, sideOf, 6), h.hip + bob];
+      const swing = swingOf(sideOf);
+      const lift = isWalking ? Math.max(0, Math.cos((phase + (sideOf === 1 ? 0 : 0.5)) * Math.PI * 2)) * (isRun ? 7 : 4.5) : 0;
+      const reach = Math.sin(stride * DEG) * LEG * swing;
+      const foot: Vec = [hip[0] + v.forward[0] * reach, -bob * 0.2 + v.forward[1] * reach - lift];
+      const knee: Vec = [(hip[0] + foot[0]) / 2 + v.forward[0] * lift * 0.9, (hip[1] + foot[1]) / 2 + v.forward[1] * lift * 0.9];
+      return [hip, knee, foot];
+    },
+    arm: (sideOf) => {
+      const shoulder: Vec = [lateralX(v, sideOf, 15.5 * v.width) + v.forward[0] * 1.5, h.shoulder + 4 + bob];
+      const out = sideOf * v.front * 2.2;
+      if (pose === 'cheer' || (pose === 'wave' && sideOf === -1)) {
+        const wave = pose === 'wave' ? Math.sin(phase * Math.PI * 2) * 4 : 0;
+        const elbow: Vec = [shoulder[0] + out * 3, shoulder[1] - 10];
+        return [shoulder, elbow, [elbow[0] + out * 1.5 + wave, elbow[1] - 12]];
+      }
+      const swing = isWalking ? -swingOf(sideOf) * (isRun ? 1.3 : 1) : Math.sin(phase * Math.PI * 2) * 0.06;
+      const reach = Math.sin(24 * DEG) * swing;
+      const elbow: Vec = [shoulder[0] + out + v.forward[0] * UPPER_ARM * reach * 0.6, shoulder[1] + UPPER_ARM + v.forward[1] * UPPER_ARM * reach];
+      const wrist: Vec = [elbow[0] + out * 0.4 + v.forward[0] * FOREARM * reach * 1.6, elbow[1] + FOREARM - Math.abs(reach) * 3 + v.forward[1] * FOREARM * reach];
+      return [shoulder, elbow, wrist];
+    },
+  };
+}
+
+function seatedLimbs(v: View, h: Heights, pose: BodyPose): Limbs {
+  const thigh: Vec = [v.forward[0] * 15, v.forward[1] * 16];
+  return {
+    leg: (sideOf) => {
+      const hip: Vec = [lateralX(v, sideOf, 6), h.hip];
+      const knee = add(hip, thigh);
+      return [hip, knee, [knee[0] + v.forward[0] * 3, WALKER_SEAT_DROP - 2]];
+    },
+    arm: (sideOf) => {
+      const shoulder: Vec = [lateralX(v, sideOf, 15.5 * v.width) + v.forward[0] * 1.5, h.shoulder + 4];
+      const elbow: Vec = [shoulder[0] + sideOf * v.front * 2 + v.forward[0] * 3, shoulder[1] + UPPER_ARM];
+      const lap = add([lateralX(v, sideOf, pose === 'play' ? 4 : 7), h.hip - 4], thigh, pose === 'play' ? 0.9 : 0.6);
+      return [shoulder, elbow, lap];
+    },
+  };
+}
+
+/** The walker's drawing for a pose, at a facing angle (0 = S, 180 = N; west facings are mirrored by the caller). */
+export function walkerLayout(c: Colours, pose: BodyPose, angleDeg: number, phase: number, outfit: Outfit = outfitFor(c)): WalkerLayout {
+  const v = viewOf(angleDeg);
+  const isSitting = pose === 'sit' || pose === 'play';
+  const h = isSitting ? SEATED : STANDING;
+  const cycle = Math.sin(phase * Math.PI * 2);
+  const isWalking = pose === 'walk' || pose === 'run' || pose === 'dance';
+  const hop = pose === 'jump' || pose === 'cheer' ? Math.abs(Math.sin(phase * Math.PI)) * (pose === 'jump' ? 16 : 8) : 0;
+  const bob = isWalking ? -2.2 * (1 - Math.abs(cycle)) : pose === 'idle' ? cycle * 0.6 : 0;
+  const limbs = isSitting ? seatedLimbs(v, h, pose) : standingLimbs(v, h, pose, phase, bob);
+  const o = outfit;
+  const [farSide, nearSide]: readonly [Side, Side] = nearness(v, 1) > nearness(v, -1) ? [-1, 1] : [1, -1];
+  const isTurned = Math.abs(v.side) > 0.3;
+  const lean = v.side * (isSitting ? 0.6 : 1);
+  const armNodes = (sideOf: Side): SceneNode[] => {
+    const [shoulder, elbow, wrist] = limbs.arm(sideOf);
+    return [...limb([shoulder, elbow, wrist], ARM_W, c.skin, c.skinInk), ...limb([shoulder, add(shoulder, [elbow[0] - shoulder[0], elbow[1] - shoulder[1]], 0.62)], SLEEVE_W, c.body, c.bodyInk), hand(c, wrist)];
+  };
+  const legNodes = (sideOf: Side): SceneNode[] => {
+    const points = limbs.leg(sideOf);
+    const foot = points[2];
+    return [...limb(points, LEG_W, o.trousers, o.trousersInk), shoe(foot, v.forward, o)];
+  };
+  const torso = shirt(c, v.width, h.shoulder + (isWalking ? bob : 0), h.hip + 3 + (isWalking ? bob : 0), lean, v.isBack);
+  // Seated with our back to us, the arms reach forward and the legs are under the seat: both hide behind the back.
+  const isTucked = isSitting && v.isBack;
+  const behind: SceneNode[] = isTucked ? [...armNodes(farSide), ...armNodes(nearSide)] : isTurned ? armNodes(farSide) : [];
+  // Sitting facing us, the thighs come toward the viewer over the shirt's hem.
+  const isLegsFirst = v.isBack || !isSitting;
+  const legs = isTucked ? [] : [...legNodes(farSide), ...legNodes(nearSide)];
+  const body: SceneNode[] = [
+    ...(isLegsFirst ? legs : []),
+    hips(o, v.width, h.hip + (isWalking ? bob : 0)),
+    neck(c, h.shoulder + bob, v.forward[0] * 2),
+    ...torso,
+    ...(isLegsFirst ? [] : legs),
+    ...(isTucked ? [] : isTurned ? armNodes(nearSide) : [...armNodes(-1), ...armNodes(1)]),
+  ];
+  const prop = add([0, h.hip - 12], v.forward, 8);
+  return {
+    behind, body, front: [],
+    headDx: v.forward[0] * 1.5, headDy: 0, headY: h.head + bob * 1.1, headScale: WALKER_HEAD_SCALE,
+    tilt: isWalking ? v.side * 2 : 0, lift: hop, prop: { x: prop[0], y: prop[1] },
+  };
+}
+
+const GREY = '#6f7787';
+const GREY_INK = '#5c6474';
+
+/** Every colour slot in the silhouette grey. */
+const GREY_COLOURS: Colours = {
+  skin: GREY, skinShade: GREY, skinLight: GREY, skinInk: GREY_INK, eyeRim: GREY, hair: GREY, hairShade: GREY, hairLight: GREY,
+  hairInk: GREY_INK, hairBuzz: GREY, brow: GREY, beard: GREY, beardShade: GREY, beardInk: GREY_INK, stubble: GREY, eye: GREY,
+  eyeDark: GREY, body: GREY, bodyShade: GREY, bodyLight: GREY, bodyInk: GREY_INK,
+};
+
+/** The grey walker shown before the art loads (or for a hidden player): its nodes, head centre and top. */
+export function walkerSilhouette(): { readonly nodes: readonly SceneNode[]; readonly headY: number; readonly top: number } {
+  const b = walkerLayout(GREY_COLOURS, 'idle', 0, 0, { trousers: GREY, trousersInk: GREY_INK, shoes: GREY, shoesInk: GREY_INK });
+  const r = 46 * WALKER_HEAD_SCALE;
+  return {
+    nodes: [...b.behind, ...b.body, ellipse(0, b.headY, r, r * 1.05, { fill: GREY })],
+    headY: b.headY,
+    top: b.headY - r - 4,
+  };
+}

package/src/avatar.ts

@@ -43,12 +43,13 @@ export { overlays, type ActivityIcon, type Overlay, type ReactionGlyph } from '.
 export { overlaySvg, paintOverlay } from './avatar/outputs/overlay-svg';
 export { catalog } from './avatar/catalog-view';
 export { composeAvatar, HEAD_Y, type Composed } from './avatar/render/compose';
+export { WALKER_HEAD_SCALE, WALKER_SEAT_DROP } from './avatar/render/walker';
 export { paintNodes, type Ctx2D } from './avatar/outputs/canvas-paint';
 export { sceneToSvg } from './avatar/outputs/svg-markup';
 export { toCode, toLook } from './avatar/look-like';
 export { contrast, deltaE, lightness } from './avatar/colour';
 export type { SceneNode } from './avatar/scene';
-export type { Anchor, BodyPose, Facing, Frame, LookDir, LookLike, Point, Pose, RenderOptions, StatusProp, View } from './avatar/render/types';
+export type { Anchor, BodyPose, Facing, Figure, Frame, LookDir, LookLike, Point, Pose, RenderOptions, StatusProp, View } from './avatar/render/types';
 export { AvatarAtlas, createAtlas, type AtlasFrame, type AtlasOptions } from './avatar/atlas';
 
 /** Every output: SVG markup, a live element, Canvas 2D, a bitmap or a data URL. */

package/src/core/rest/routes.gen.ts

@@ -139,6 +139,7 @@ export const ROUTES = {
   getTurnGameHistory: { method: 'GET', path: '/turns/:id/history', query: ['since'], offline: null },
   listOpenTurnGames: { method: 'GET', path: '/open-turns', query: ['game'], offline: null },
   listMyTurnGames: { method: 'GET', path: '/turns', query: ['game'], offline: null },
+  getWorldMap: { method: 'GET', path: '/world/maps/:key', query: ['rev'], offline: null },
 } as const;
 
 /** The request header that carries an offline operation key (the contract's `OFFLINE_OP_HEADER`). */