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

package/src/avatar/render/compose.ts

@@ -3,9 +3,9 @@
  * y down, the head centre near (0, −96) (§14.2). Layers go back to front as
  * in §3.2, with facial hair split into beard and moustache layers.
  */
-import { partName, type AvatarLook } from '@diffenderfer-games/hub-contract/avatar';
+import { partName, resolveColour, type AvatarLook } from '@diffenderfer-games/hub-contract/avatar';
 import type { ArtSet } from '../art';
-import type { HeadwearPart } from '../art/shape';
+import type { HeadwearPart, Shape } from '../art/shape';
 import { currentArt } from '../art-store';
 import { EXPRESSIONS } from '../face';
 import { n, type Warp } from '../geom';
@@ -13,13 +13,16 @@ import { g, path, rect, rot, sc, tr, type Clip, type SceneNode } from '../scene'
 import { bodyLayout, groundShadow } from './body';
 import { accessoryColour, lookColours, tones, type Colours } from './colours';
 import { HEAD_PATH, LINE, paintShapes, SKULL_R, turnWarp, type Ctx } from './context';
-import { glasses, goggles, gogglesStrapBack } from './eyewear';
+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 { crown, handProp, headset } from './props';
 import type { Anchor, Facing, Point, Pose, RenderOptions } from './types';
 
+/** The lens tint drawn with a mirror finish. */
+const MIRROR_TINT = 'p:lens-mirror';
+
 /** The head centre's height above the feet. */
 export const HEAD_Y = -96;
 
@@ -49,6 +52,7 @@ interface Parts {
   readonly beard: ArtSet['beard'][string] | undefined;
   readonly glasses: ArtSet['glasses'][string] | undefined;
   readonly glassesColour: string;
+  readonly lensGlass: LensGlass;
   readonly freckles: boolean;
   readonly rosy: boolean;
   readonly earExtra: EarExtra | undefined;
@@ -68,7 +72,8 @@ function resolveParts(look: AvatarLook, art: ArtSet): Parts {
     hatColour: accessoryColour(look, hatAcc),
     beard: art.beard[partName(look.facialHair.style)],
     glasses: glassAcc ? art.glasses[partName(glassAcc.id)] : undefined,
-    glassesColour: glassAcc?.colour === undefined ? '#1d1a1e' : accessoryColour(look, glassAcc),
+    glassesColour: glassAcc?.colour === undefined ? FRAME_BLACK : accessoryColour(look, glassAcc),
+    lensGlass: glassAcc?.tint === undefined ? {} : { tint: resolveColour(glassAcc.tint), ...(glassAcc.tint === MIRROR_TINT ? { isMirror: true } : {}) },
     freckles: face?.id === 'face.freckles',
     rosy: face?.id === 'face.rosy',
     earExtra: earAcc ? { kind: earAcc.id === 'ears.hoops' ? 'hoops' : 'studs', colour: earAcc.colour === undefined ? '#f5c542' : accessoryColour(look, earAcc) } : undefined,
@@ -89,8 +94,41 @@ function backOfHead(phi: number): { readonly crescent: Clip; readonly half: Clip
   };
 }
 
+/**
+ * The shoulder line in head space: hair below it hangs behind the body and
+ * shoulders, hair above it (or over the face) stays over the head (§14.6
+ * "Long hair"). The two halves overlap by a unit so the seam never shows.
+ */
+export const SHOULDER_Y = 36;
+const ABOVE_SHOULDERS: Clip = { shapes: [rect(-200, -200, 400, 200 + SHOULDER_Y + 1, {}), path(HEAD_PATH.d(), {})] };
+const BELOW_SHOULDERS: Clip = { shapes: [rect(-200, SHOULDER_Y - 1, 400, 300, {})] };
+
+/** True when a layer reaches below the shoulder line. */
+function hangs(shapes: readonly Shape[] | undefined): boolean {
+  return shapes?.some((s) => s.d.bottom() > SHOULDER_Y) === true;
+}
+
+/** A head's drawing: what goes behind the body (hanging hair) and the head itself. */
+interface HeadNodes {
+  readonly behindBody: SceneNode[];
+  readonly head: SceneNode[];
+}
+
+/** Splits a hair layer at the shoulders: the part above stays in `over`, the part below goes in `behind`. */
+function splitAtShoulders(nodes: readonly SceneNode[], doesHang: boolean, over: SceneNode[], behind: SceneNode[]): void {
+  if (nodes.length === 0) {
+    return;
+  }
+  if (!doesHang) {
+    over.push(...nodes);
+    return;
+  }
+  over.push(g(nodes, { clip: ABOVE_SHOULDERS }));
+  behind.push(g(nodes, { clip: BELOW_SHOULDERS }));
+}
+
 /** The front and side views of the head. */
-function frontHead(ctx: Ctx, p: Parts, isPlaying: boolean, status: Pose['status'], angle: number, gazeX: number): SceneNode[] {
+function frontHead(ctx: Ctx, p: Parts, isPlaying: boolean, status: Pose['status'], angle: number, gazeX: number): HeadNodes {
   const hatCut: Clip | undefined = p.hat && typeof p.hat.hides === 'number' ? { shapes: [rect(-120, p.hat.hides, 240, 260, {})] } : undefined;
   const isHairShown = !(p.hat && p.hat.hides === 'all');
   const cut = (nodes: SceneNode[]): SceneNode[] => (hatCut && nodes.length > 0 ? [g(nodes, { clip: hatCut })] : nodes);
@@ -98,13 +136,15 @@ function frontHead(ctx: Ctx, p: Parts, isPlaying: boolean, status: Pose['status'
   const hatTones = tones(p.hatColour);
   const warpFront = turnWarp((angle + gazeX * 6) * DEG);
   const warpBack: Warp | undefined = ctx.phi === 0 ? undefined : (px, py) => [px - Math.sin(ctx.phi) * 8, py];
+  const behindBody: SceneNode[] = [];
   const out: SceneNode[] = [];
+  if (isHairShown) {
+    // The hair behind the head is behind the body too: it hangs down the back.
+    behindBody.push(...cut(paintShapes(ctx.c, hairTie, p.hair?.back, warpBack)));
+  }
   if (p.hat?.back) {
     out.push(...paintShapes(ctx.c, hatTones, p.hat.back, warpBack));
   }
-  if (isHairShown) {
-    out.push(...cut(paintShapes(ctx.c, hairTie, p.hair?.back, warpBack)));
-  }
   if (!p.hat?.hidesEars) {
     out.push(...ears(ctx, 'behind', p.earExtra));
   }
@@ -114,13 +154,13 @@ function frontHead(ctx: Ctx, p: Parts, isPlaying: boolean, status: Pose['status'
     // A turned head shows the back of the hair (the rear art) on the far side (§14.2).
     const co = Math.cos(ctx.phi);
     const shift: Warp = (px, py) => [px * (0.92 + 0.08 * co) - turnS * 5, py];
-    const rear = [
-      ...(isHairShown ? cut(paintShapes(ctx.c, hairTie, p.hair?.rear, shift)) : []),
-      ...(p.hat ? paintShapes(ctx.c, hatTones, p.hat.rear, shift) : []),
-    ];
     const clips = backOfHead(ctx.phi);
-    if (rear.length > 0) {
-      out.push(g([g(rear, { clip: clips.crescent })], { clip: clips.half }));
+    const onFarSide = (nodes: SceneNode[]): SceneNode[] => (nodes.length > 0 ? [g([g(nodes, { clip: clips.crescent })], { clip: clips.half })] : []);
+    if (isHairShown) {
+      splitAtShoulders(onFarSide(cut(paintShapes(ctx.c, hairTie, p.hair?.rear, shift))), hangs(p.hair?.rear), out, behindBody);
+    }
+    if (p.hat) {
+      out.push(...onFarSide(paintShapes(ctx.c, hatTones, p.hat.rear, shift)));
     }
   }
   if (!p.hat?.hidesEars) {
@@ -139,7 +179,7 @@ function frontHead(ctx: Ctx, p: Parts, isPlaying: boolean, status: Pose['status'
   out.push(...nose(ctx), ...mouth(ctx));
   out.push(...paintShapes(ctx.c, hairTie, p.beard?.moustache, faceWarp));
   if (isHairShown) {
-    out.push(...cut(paintShapes(ctx.c, hairTie, p.hair?.front, warpFront)));
+    splitAtShoulders(cut(paintShapes(ctx.c, hairTie, p.hair?.front, warpFront)), hangs(p.hair?.front), out, behindBody);
     if (p.hair?.front?.some((s) => s.clip === 'head')) {
       out.push(path(HEAD_PATH.d(), { fill: 'none', stroke: ctx.c.skinInk, sw: LINE }));
     }
@@ -147,7 +187,7 @@ function frontHead(ctx: Ctx, p: Parts, isPlaying: boolean, status: Pose['status'
   if (isPlaying) {
     out.push(...goggles(ctx));
   } else if (p.glasses) {
-    out.push(...glasses(ctx, p.glasses, p.glassesColour));
+    out.push(...glasses(ctx, p.glasses, p.glassesColour, p.lensGlass));
   }
   if (p.hat) {
     out.push(...paintShapes(ctx.c, hatTones, p.hat.front, warpFront));
@@ -156,11 +196,11 @@ function frontHead(ctx: Ctx, p: Parts, isPlaying: boolean, status: Pose['status'
     out.push(...headset(ctx, false));
   }
   out.push(...extras(ctx));
-  return out;
+  return { behindBody, head: out };
 }
 
 /** The back views (N, NE): the rear art wrapped past 180°. */
-function backHead(ctx: Ctx, p: Parts, isPlaying: boolean, status: Pose['status'], angle: number): SceneNode[] {
+function backHead(ctx: Ctx, p: Parts, isPlaying: boolean, status: Pose['status'], angle: number): HeadNodes {
   const phi = (angle - 180) * DEG;
   const warp = turnWarp(phi);
   const isHairShown = !(p.hat && p.hat.hides === 'all');
@@ -186,7 +226,8 @@ function backHead(ctx: Ctx, p: Parts, isPlaying: boolean, status: Pose['status']
   if (status === 'headset') {
     out.push(...headset(ctx, true));
   }
-  return out;
+  // From behind, long hair falls down the back, over the body.
+  return { behindBody: [], head: out };
 }
 
 /** The grey silhouette: a malformed code, a hidden player, or before the art loads. */
@@ -236,15 +277,19 @@ export function composeAvatar(look: AvatarLook | null, opts: RenderOptions = {})
   const headY = HEAD_Y + b.headDy + (pose.bob?.y ?? 0);
   const tilt = face.headTilt + b.tilt + (pose.tilt ?? 0);
   const sq = face.squash + (pose.squash ?? 0);
-  const headNodes = isBack ? backHead(ctx, parts, isPlaying, status, angle) : frontHead(ctx, parts, isPlaying, status, angle, gaze.x);
+  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);
   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 character: SceneNode[] = [
-    ...b.behind, ...b.body,
-    g(headNodes, { tf: [tr(headX, headY), rot(tilt), sc(1 + sq, 1 - sq)] }),
+    ...b.behind,
+    ...(drawn.behindBody.length > 0 ? [g(drawn.behindBody, { tf: headTf })] : []),
+    ...b.body,
+    g(headNodes, { tf: headTf }),
     ...b.front, ...handProps,
   ];
   const lifted = b.lift > 0 ? [g(character, { tf: [tr(0, -b.lift)] })] : character;

package/src/avatar/render/eyewear.ts

@@ -1,31 +1,93 @@
 /** Glasses and the `goggles` status prop, both following the head turn. */
 import type { GlassesPart } from '../art/shape';
-import { ink } from '../colour';
+import { deltaE, ink, lightness, outline } from '../colour';
 import { blob, Path } from '../geom';
-import { g, line, path, sc, tr, type SceneNode } from '../scene';
+import { g, line, path, rect, sc, tr, type SceneNode } from '../scene';
 import { feat, LINE, turnWarp, type Ctx } from './context';
 
-/** Glasses: arms toward the ears, a lens at each eye, and the bridge. */
-export function glasses(ctx: Ctx, part: GlassesPart, frame: string): SceneNode[] {
+/** What fills a lens: clear glass, a tint, or a mirror finish. */
+export interface LensGlass {
+  /** The tint colour; absent for clear glass. */
+  readonly tint?: string;
+  readonly isMirror?: boolean;
+}
+
+/** The default frame colour. */
+export const FRAME_BLACK = '#1d1a1e';
+
+const SHINE = 'M-6 -4L-2 -7';
+const MIRROR_STREAKS = 'M-9 7L3 -11M-1 10L9 -4';
+
+/** The frame's colour and line width, and the dark edge a frame gets when it is light or close to the skin. */
+interface FrameInk {
+  readonly colour: string;
+  readonly sw: number;
+  readonly edge: string | undefined;
+}
+
+/** A frame stroke along a path, over its edge when it has one. */
+function frameLine(d: string, frame: FrameInk, sw = frame.sw): SceneNode[] {
+  return [...(frame.edge === undefined ? [] : [path(d, line(frame.edge, sw + 1.6))]), path(d, line(frame.colour, sw))];
+}
+
+/** One lens (or visor) in its own coordinates: the glass, then the frame. */
+function lensNodes(d: string, glass: LensGlass, frame: FrameInk, shines: readonly (readonly [number, number])[]): SceneNode[] {
+  const out: SceneNode[] = [];
+  const clip = { shapes: [path(d, {})] };
+  if (glass.tint === undefined) {
+    out.push(path(d, { fill: '#ffffff', fillOpacity: 0.16 }));
+  } else if (glass.isMirror === true) {
+    out.push(path(d, { fill: glass.tint }), g([
+      rect(-60, 2, 120, 40, { fill: outline(glass.tint), opacity: 0.75 }),
+      ...shines.map(([px, py]) => path(MIRROR_STREAKS, line('#ffffff', 2.6, 'round', 0.85), [tr(px, py)])),
+    ], { clip }));
+  } else {
+    // Dark enough to read as sunglasses, light enough that winks show through.
+    out.push(path(d, { fill: glass.tint, fillOpacity: 0.86 }), g([rect(-60, 3, 120, 40, { fill: '#ffffff', opacity: 0.12 })], { clip }));
+  }
+  out.push(...frameLine(d, frame));
+  out.push(...shines.map(([px, py]) => path(SHINE, line('#ffffff', 1.8, 'round', glass.tint === undefined ? 0.7 : 0.9), [tr(px, py)])));
+  return out;
+}
+
+/** Glasses: arms toward the ears, a lens at each eye (or one visor), and the bridge. */
+export function glasses(ctx: Ctx, part: GlassesPart, colour: string, glass: LensGlass): SceneNode[] {
   const out: SceneNode[] = [];
   const warp = turnWarp(ctx.phi, ctx.dy);
-  for (const side of [-1, 1] as const) {
-    if (feat(ctx, 30 * side).vis) {
-      out.push(path(new Path().m(30 * side, 2).l(45 * side, 0).d(warp), line(frame, 2.6)));
+  const isEdged = lightness(colour) > 0.7 || deltaE(colour, ctx.c.skin) < 24;
+  const frame: FrameInk = { colour, sw: part.frame ?? 3.2, edge: isEdged ? ink(colour) : undefined };
+  const tinted: LensGlass = part.tint === undefined ? {} : { tint: glass.tint ?? part.tint, ...(glass.isMirror === true ? { isMirror: true } : {}) };
+  if (part.isSingle !== true) {
+    for (const side of [-1, 1] as const) {
+      if (feat(ctx, 30 * side).vis) {
+        out.push(...frameLine(new Path().m(30 * side, 2).l(45 * side, 0).d(warp), frame, 2.6));
+      }
     }
   }
+  if (part.visor) {
+    const shines = [feat(ctx, -17), feat(ctx, 17)].filter((f) => f.vis).map((f) => [f.x, 4 + ctx.dy] as const);
+    out.push(...lensNodes(part.visor.d(warp), tinted, frame, shines));
+    return out;
+  }
+  const lens = part.lens;
   for (const side of [-1, 1] as const) {
     const f = feat(ctx, 17 * side);
-    if (!f.vis) {
+    if (!lens || !f.vis || (part.isSingle === true && side < 0)) {
       continue;
     }
+    const flip = part.isMirrored === true && side < 0 ? -1 : 1;
     out.push(g([
-      path(part.lens.d(), { fill: '#ffffff', fillOpacity: 0.16, stroke: frame, sw: 3.2 }),
-      path('M-6 -4L-2 -7', line('#ffffff', 1.8, 'round', 0.7)),
-    ], { tf: [tr(f.x, 4 + ctx.dy), sc(f.sx, 1)] }));
+      ...lensNodes(lens.d(), tinted, frame, [[0, 0]]),
+      ...(part.bar ? frameLine(part.bar.d(), frame, 4.4) : []),
+    ], { tf: [tr(f.x, 4 + ctx.dy), sc(f.sx * flip, 1)] }));
+  }
+  if (part.chain && feat(ctx, 30).vis) {
+    out.push(path(part.chain.d(warp), line(colour, 1.6, 'round', 0.9)));
+  }
+  if (part.bridge) {
+    const fb = feat(ctx, 0);
+    out.push(g(frameLine(part.bridge.d(), frame, 2.8), { tf: [tr(fb.x, 4 + ctx.dy), sc(fb.sx, 1)] }));
   }
-  const fb = feat(ctx, 0);
-  out.push(g([path(part.bridge.d(), line(frame, 2.8))], { tf: [tr(fb.x, 4 + ctx.dy), sc(fb.sx, 1)] }));
   return out;
 }
 

package/src/avatar-three.ts

@@ -1,18 +1,18 @@
-/**
- * `@diffenderfer-games/hub/avatar/three`: avatars in three.js, as a
- * `CanvasTexture` or a billboard `Sprite`. Pass your THREE namespace (the hub
- * has no three dependency):
- *
- * ```ts
- * import * as THREE from 'three';
- * import { ready } from '@diffenderfer-games/hub/avatar';
- * import { avatarSprite } from '@diffenderfer-games/hub/avatar/three';
- *
- * await ready();
- * const { sprite } = avatarSprite(THREE, me.look, { frame: 'head', size: 128, height: 0.4 });
- * helmet.add(sprite);
- * ```
- *
- * @packageDocumentation
- */
-export { avatarCanvasTexture, avatarSprite, type ThreeAvatarOptions, type ThreeAvatarTexture, type ThreeNs, type ThreeTextureNs } from './avatar/adapters/three';
+/**
+ * `@diffenderfer-games/hub/avatar/three`: avatars in three.js, as a
+ * `CanvasTexture` or a billboard `Sprite`. Pass your THREE namespace (the hub
+ * has no three dependency):
+ *
+ * ```ts
+ * import * as THREE from 'three';
+ * import { ready } from '@diffenderfer-games/hub/avatar';
+ * import { avatarSprite } from '@diffenderfer-games/hub/avatar/three';
+ *
+ * await ready();
+ * const { sprite } = avatarSprite(THREE, me.look, { frame: 'head', size: 128, height: 0.4 });
+ * helmet.add(sprite);
+ * ```
+ *
+ * @packageDocumentation
+ */
+export { avatarCanvasTexture, avatarSprite, type ThreeAvatarOptions, type ThreeAvatarTexture, type ThreeNs, type ThreeTextureNs } from './avatar/adapters/three';

package/src/avatar.ts

@@ -24,8 +24,8 @@ import { renderElement } from './avatar/outputs/element';
 import { renderSvg } from './avatar/outputs/svg';
 
 export {
-  ACCESSORY_SLOTS, CATALOG, CATALOG_REVISION, DEFAULT_GEN, LOOK_CODE_PREFIX, PALETTES,
-  canonicalLook, decodeLook, defaultLook, distinctLooks, encodeLook, isLookCode, isValidLook, lookProblem,
+  ACCESSORY_SLOTS, CATALOG, CATALOG_REVISION, DEFAULT_GEN, FRAME_PRESETS, LOOK_CODE_PREFIX, PALETTES, SECOND_COLOUR_CODE,
+  canonicalLook, decodeLook, defaultLook, distinctLooks, encodeLook, isLookCode, isTinted, isValidLook, lookProblem,
   normaliseHex, partById, partName, partsOf, randomLook, resolveColour, sameLook, seededRng,
   type AccessorySlot, type AvatarLook, type CatalogEntry, type DecodedLook, type LookAccessory, type LookColour,
   type LookPart, type LookProblem, type PaletteName, type PartCategory, type Preset, type RandomLookOptions, type Rng,