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

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

@@ -1,302 +1,302 @@
-/**
- * `createCrowd` (§3.11): the world's whole avatar layer in Pixi 8. One
- * y-sorted container; most avatars are atlas frames (shared page textures,
- * so Pixi batches them), and up to `liveMax` flagged ones (nearest, hovered,
- * talking, friends; the world decides) are live vector avatars with full
- * expressions. Name tags and bubbles are cached textures, re-rendered only
- * when their text changes. Baking is time-sliced; an avatar without a baked
- * frame yet shows the silhouette.
- */
-import { animator, type Animator } from '../animator/animator';
-import type { AvatarAtlas } from '../atlas';
-import { expressionFromEmote } from '../face';
-import { layout } from '../layout';
-import { toCode } from '../look-like';
-import { defaultLayer } from '../outputs/canvas';
-import { paintNodes } from '../outputs/canvas-paint';
-import { overlays, type Overlay, type ReactionGlyph } from '../overlays';
-import type { BodyPose, Facing, LookLike, StatusProp } from '../render/types';
-import { pixiAvatar, type PixiAvatar } from './pixi-avatar';
-import { refresh, type PixiContainer, type PixiNs, type PixiRectangle, type PixiSprite, type PixiTexture } from './pixi-types';
-
-/** One avatar's state in the crowd (the world's own protocol fills it). */
-export interface CrowdMember {
-  readonly look: LookLike;
-  readonly x: number;
-  readonly y: number;
-  readonly facing?: Facing;
-  readonly body?: BodyPose;
-  readonly status?: StatusProp | null;
-  /** The username for the name tag (omit for no tag). */
-  readonly name?: string;
-  readonly friend?: boolean;
-  readonly you?: boolean;
-  /** "Playing Uno": the game's catalog title. */
-  readonly activity?: string;
-  /** A quick-chat emote to pop (shown for 2.5 s from when it's set). */
-  readonly emote?: string;
-  readonly reaction?: ReactionGlyph;
-  /** Ask for live vector rendering (granted to at most `liveMax`). */
-  readonly live?: boolean;
-  /** Hide the tag (the world fades tags by distance and hides them when crowded). */
-  readonly tagHidden?: boolean;
-}
-
-/** Crowd options; `container` is the game's own pixi `Container`. */
-export interface CrowdOptions<TSprite extends PixiSprite = PixiSprite> {
-  readonly atlas: AvatarAtlas;
-  /** The container avatars go into (it is made y-sortable). */
-  readonly container: PixiContainer<TSprite>;
-  /** Live vector avatars at most (default 6; 2 on low-end devices). */
-  readonly liveMax?: number;
-  /** Atlas baking budget per update, ms (default 4). */
-  readonly bakeMs?: number;
-}
-
-/** The crowd. */
-export interface AvatarCrowd {
-  set(id: string | number, member: CrowdMember): void;
-  remove(id: string | number): void;
-  /** Advances animation to `t` (ms), bakes, and lays everyone out. Call once per frame. */
-  update(t: number): void;
-  destroy(): void;
-}
-
-/** A cached overlay sprite and the key it shows. */
-interface OverlaySlot<TSprite extends PixiSprite> {
-  sprite: TSprite | null;
-  key: string;
-}
-
-interface Entry<TSprite extends PixiSprite> {
-  member: CrowdMember;
-  readonly sprite: TSprite;
-  readonly tag: OverlaySlot<TSprite>;
-  readonly bubble: OverlaySlot<TSprite>;
-  emoteAt: number;
-  live: PixiAvatar<TSprite> | null;
-  body: BodyPose | null;
-  readonly anim: Animator;
-}
-
-const EMOTE_MS = 2500;
-const CYCLE: Readonly<Partial<Record<BodyPose, number>>> = { walk: 520, run: 320, dance: 900, jump: 700, cheer: 600, idle: 2400 };
-
-/** A crowd over an atlas: `createCrowd(pixi, { atlas, container })`. */
-export function createCrowd<TTexture extends PixiTexture, TSprite extends PixiSprite<TTexture>, TRectangle extends PixiRectangle>(
-  pixi: PixiNs<TTexture, TSprite, TRectangle>,
-  opts: CrowdOptions<NoInfer<TSprite>>,
-): AvatarCrowd {
-  const { atlas, container } = opts;
-  container.sortableChildren = true;
-  const liveMax = opts.liveMax ?? 6;
-  const entries = new Map<string, Entry<TSprite>>();
-  const pageTextures: TTexture[] = [];
-  const frameTextures = new Map<string, TTexture>();
-  const overlayTextures = new Map<string, { texture: TTexture; ax: number; ay: number }>();
-
-  /** Where the name plate sits above the feet (rig units), cached per look, pose and prop. */
-  const nameplates = new Map<string, number>();
-  const nameplateY = (look: LookLike, body: BodyPose, status: StatusProp | null): number => {
-    const key = `${toCode(look)}|${body}|${status ?? ''}`;
-    let plateY = nameplates.get(key);
-    if (plateY === undefined) {
-      plateY = layout(look, { pose: { body, status } }).nameplate.y;
-      nameplates.set(key, plateY);
-    }
-    return plateY;
-  };
-  const overlayTexture = (key: string, overlay: Overlay): { texture: TTexture; ax: number; ay: number } | null => {
-    const hit = overlayTextures.get(key);
-    if (hit) {
-      return hit;
-    }
-    const [left, top, w, h] = overlay.box;
-    const resolution = 2;
-    const made = defaultLayer(Math.ceil(w * resolution), Math.ceil(h * resolution));
-    if (!made || !('getContext' in made.canvas)) {
-      return null;
-    }
-    made.ctx.scale(resolution, resolution);
-    made.ctx.translate(-left, -top);
-    paintNodes(made.ctx, overlay.nodes);
-    const texture = pixi.Texture.from(made.canvas);
-    const out = { texture, ax: -left / w, ay: -top / h };
-    overlayTextures.set(key, out);
-    return out;
-  };
-
-  const silhouette = (): TTexture | null => {
-    const frame = atlas.frame({ look: null });
-    return frame ? textureFor(frame.page, frame.x, frame.y, frame.w, frame.h) : null;
-  };
-
-  const textureFor = (page: number, left: number, top: number, w: number, h: number): TTexture | null => {
-    const sources = atlas.sources;
-    while (pageTextures.length < sources.length) {
-      const source = sources[pageTextures.length];
-      if (!source || !('getContext' in source)) {
-        return null;
-      }
-      pageTextures.push(pixi.Texture.from(source));
-    }
-    const base = pageTextures[page]?.source;
-    if (!base) {
-      return null;
-    }
-    const key = `${String(page)}:${String(left)}:${String(top)}`;
-    let tex = frameTextures.get(key);
-    if (!tex) {
-      tex = new pixi.Texture({ source: base, frame: new pixi.Rectangle(left, top, w, h) });
-      frameTextures.set(key, tex);
-    }
-    return tex;
-  };
-
-  const placeOverlay = (slot: OverlaySlot<TSprite>, key: string, make: () => Overlay | null, atX: number, atY: number): void => {
-    if (key === '') {
-      if (slot.sprite) {
-        slot.sprite.visible = false;
-      }
-      return;
-    }
-    let sprite = slot.sprite;
-    if (slot.key !== key || !sprite) {
-      const overlay = make();
-      const made = overlay ? overlayTexture(key, overlay) : null;
-      if (!made) {
-        return;
-      }
-      if (!sprite) {
-        sprite = new pixi.Sprite(made.texture);
-        container.addChild(sprite);
-      }
-      slot.sprite = sprite;
-      sprite.texture = made.texture;
-      sprite.anchor.set(made.ax, made.ay);
-      sprite.scale.set(0.5);
-      slot.key = key;
-    }
-    sprite.visible = true;
-    sprite.x = atX;
-    sprite.y = atY;
-    sprite.zIndex = 1e6 + atY;
-  };
-
-  return {
-    set(id, member) {
-      const key = String(id);
-      const entry = entries.get(key);
-      if (entry) {
-        if (member.emote && member.emote !== entry.member.emote) {
-          entry.emoteAt = -1;
-          const face = expressionFromEmote(member.emote);
-          if (face) {
-            entry.anim.express(face);
-          }
-        }
-        if (member.look !== entry.member.look) {
-          entry.live?.setLook(member.look);
-        }
-        entry.member = member;
-        return;
-      }
-      const sprite = new pixi.Sprite();
-      container.addChild(sprite);
-      entries.set(key, {
-        member, sprite, tag: { sprite: null, key: '' }, bubble: { sprite: null, key: '' }, emoteAt: member.emote ? -1 : 0, live: null, body: null,
-        anim: animator(member.look, { seed: key }),
-      });
-    },
-    remove(id) {
-      const entry = entries.get(String(id));
-      if (!entry) {
-        return;
-      }
-      entry.sprite.destroy();
-      entry.tag.sprite?.destroy();
-      entry.bubble.sprite?.destroy();
-      entry.live?.destroy();
-      entries.delete(String(id));
-    },
-    update(t) {
-      if (atlas.bake(opts.bakeMs ?? 4) > 0) {
-        pageTextures.forEach(refresh);
-      }
-      const wantsLive = [...entries.values()].filter((e) => e.member.live === true).slice(0, liveMax);
-      const liveSet = new Set(wantsLive);
-      for (const entry of entries.values()) {
-        const m = entry.member;
-        const body = m.body ?? 'idle';
-        if (entry.emoteAt === -1) {
-          entry.emoteAt = t;
-        }
-        const isEmoting = m.emote !== undefined && t - entry.emoteAt < EMOTE_MS;
-        if (liveSet.has(entry)) {
-          if (!entry.live) {
-            entry.live = pixiAvatar(pixi, m.look, { frame: 'full', size: 64, rim: true, shadow: false, animator: entry.anim });
-            container.addChild(entry.live.view);
-          }
-          entry.sprite.visible = false;
-          const view = entry.live.view;
-          if (entry.body !== body) {
-            entry.body = body;
-            entry.anim.setBody(body, { at: t });
-          }
-          entry.live.update({ ...entry.anim.pose(t), body, status: m.status ?? null, phase: (t / (CYCLE[body] ?? 600)) % 1 });
-          view.x = m.x;
-          view.y = m.y - 32;
-          view.zIndex = m.y;
-          view.visible = true;
-        } else {
-          if (entry.live) {
-            entry.live.view.visible = false;
-          }
-          const frame = atlas.frame({
-            look: m.look, facing: m.facing ?? 'S', body, status: m.status ?? null,
-            phase: (t / (CYCLE[body] ?? 600)) % 1, face: isEmoting ? 'happy' : 'neutral',
-          });
-          const tex = frame ? textureFor(frame.page, frame.x, frame.y, frame.w, frame.h) : silhouette();
-          if (tex) {
-            entry.sprite.texture = tex;
-            entry.sprite.visible = true;
-          }
-          if (frame) {
-            entry.sprite.anchor.set(frame.footX / frame.w, frame.footY / frame.h);
-            entry.sprite.scale.x = frame.mirror ? -1 : 1;
-          }
-          entry.sprite.x = m.x;
-          entry.sprite.y = m.y;
-          entry.sprite.zIndex = m.y;
-        }
-        const top = m.y + nameplateY(m.look, body, m.status ?? null) * (entry.live?.view.visible === true ? 64 / 206 : atlas.scale);
-        const tagKey = m.name && !m.tagHidden ? `tag:${m.name}:${m.friend ? 1 : 0}:${m.you ? 1 : 0}` : '';
-        placeOverlay(entry.tag, tagKey, () => (m.name ? overlays.nameTag({ name: m.name, friend: m.friend === true, you: m.you === true }) : null), m.x, top);
-        const bubbleKey = isEmoting && m.emote ? `emote:${m.emote}` : m.reaction ? `react:${m.reaction}` : m.activity ? `act:${m.activity}` : '';
-        placeOverlay(entry.bubble, bubbleKey, () => {
-          if (isEmoting && m.emote) {
-            return overlays.emoteBubble(m.emote);
-          }
-          if (m.reaction) {
-            return overlays.reactionBubble(m.reaction);
-          }
-          return m.activity ? overlays.activityBubble({ game: m.activity }) : null;
-        }, m.x, top - 12);
-      }
-    },
-    destroy() {
-      for (const id of [...entries.keys()]) {
-        this.remove(id);
-      }
-      for (const tex of frameTextures.values()) {
-        tex.destroy(false);
-      }
-      for (const tex of pageTextures) {
-        tex.destroy(true);
-      }
-      for (const o of overlayTextures.values()) {
-        o.texture.destroy(true);
-      }
-    },
-  };
-}
+/**
+ * `createCrowd` (§3.11): the world's whole avatar layer in Pixi 8. One
+ * y-sorted container; most avatars are atlas frames (shared page textures,
+ * so Pixi batches them), and up to `liveMax` flagged ones (nearest, hovered,
+ * talking, friends; the world decides) are live vector avatars with full
+ * expressions. Name tags and bubbles are cached textures, re-rendered only
+ * when their text changes. Baking is time-sliced; an avatar without a baked
+ * frame yet shows the silhouette.
+ */
+import { animator, type Animator } from '../animator/animator';
+import type { AvatarAtlas } from '../atlas';
+import { expressionFromEmote } from '../face';
+import { layout } from '../layout';
+import { toCode } from '../look-like';
+import { defaultLayer } from '../outputs/canvas';
+import { paintNodes } from '../outputs/canvas-paint';
+import { overlays, type Overlay, type ReactionGlyph } from '../overlays';
+import type { BodyPose, Facing, LookLike, StatusProp } from '../render/types';
+import { pixiAvatar, type PixiAvatar } from './pixi-avatar';
+import { refresh, type PixiContainer, type PixiNs, type PixiRectangle, type PixiSprite, type PixiTexture } from './pixi-types';
+
+/** One avatar's state in the crowd (the world's own protocol fills it). */
+export interface CrowdMember {
+  readonly look: LookLike;
+  readonly x: number;
+  readonly y: number;
+  readonly facing?: Facing;
+  readonly body?: BodyPose;
+  readonly status?: StatusProp | null;
+  /** The username for the name tag (omit for no tag). */
+  readonly name?: string;
+  readonly friend?: boolean;
+  readonly you?: boolean;
+  /** "Playing Uno": the game's catalog title. */
+  readonly activity?: string;
+  /** A quick-chat emote to pop (shown for 2.5 s from when it's set). */
+  readonly emote?: string;
+  readonly reaction?: ReactionGlyph;
+  /** Ask for live vector rendering (granted to at most `liveMax`). */
+  readonly live?: boolean;
+  /** Hide the tag (the world fades tags by distance and hides them when crowded). */
+  readonly tagHidden?: boolean;
+}
+
+/** Crowd options; `container` is the game's own pixi `Container`. */
+export interface CrowdOptions<TSprite extends PixiSprite = PixiSprite> {
+  readonly atlas: AvatarAtlas;
+  /** The container avatars go into (it is made y-sortable). */
+  readonly container: PixiContainer<TSprite>;
+  /** Live vector avatars at most (default 6; 2 on low-end devices). */
+  readonly liveMax?: number;
+  /** Atlas baking budget per update, ms (default 4). */
+  readonly bakeMs?: number;
+}
+
+/** The crowd. */
+export interface AvatarCrowd {
+  set(id: string | number, member: CrowdMember): void;
+  remove(id: string | number): void;
+  /** Advances animation to `t` (ms), bakes, and lays everyone out. Call once per frame. */
+  update(t: number): void;
+  destroy(): void;
+}
+
+/** A cached overlay sprite and the key it shows. */
+interface OverlaySlot<TSprite extends PixiSprite> {
+  sprite: TSprite | null;
+  key: string;
+}
+
+interface Entry<TSprite extends PixiSprite> {
+  member: CrowdMember;
+  readonly sprite: TSprite;
+  readonly tag: OverlaySlot<TSprite>;
+  readonly bubble: OverlaySlot<TSprite>;
+  emoteAt: number;
+  live: PixiAvatar<TSprite> | null;
+  body: BodyPose | null;
+  readonly anim: Animator;
+}
+
+const EMOTE_MS = 2500;
+const CYCLE: Readonly<Partial<Record<BodyPose, number>>> = { walk: 520, run: 320, dance: 900, jump: 700, cheer: 600, idle: 2400 };
+
+/** A crowd over an atlas: `createCrowd(pixi, { atlas, container })`. */
+export function createCrowd<TTexture extends PixiTexture, TSprite extends PixiSprite<TTexture>, TRectangle extends PixiRectangle>(
+  pixi: PixiNs<TTexture, TSprite, TRectangle>,
+  opts: CrowdOptions<NoInfer<TSprite>>,
+): AvatarCrowd {
+  const { atlas, container } = opts;
+  container.sortableChildren = true;
+  const liveMax = opts.liveMax ?? 6;
+  const entries = new Map<string, Entry<TSprite>>();
+  const pageTextures: TTexture[] = [];
+  const frameTextures = new Map<string, TTexture>();
+  const overlayTextures = new Map<string, { texture: TTexture; ax: number; ay: number }>();
+
+  /** Where the name plate sits above the feet (rig units), cached per look, pose and prop. */
+  const nameplates = new Map<string, number>();
+  const nameplateY = (look: LookLike, body: BodyPose, status: StatusProp | null): number => {
+    const key = `${toCode(look)}|${body}|${status ?? ''}`;
+    let plateY = nameplates.get(key);
+    if (plateY === undefined) {
+      plateY = layout(look, { pose: { body, status } }).nameplate.y;
+      nameplates.set(key, plateY);
+    }
+    return plateY;
+  };
+  const overlayTexture = (key: string, overlay: Overlay): { texture: TTexture; ax: number; ay: number } | null => {
+    const hit = overlayTextures.get(key);
+    if (hit) {
+      return hit;
+    }
+    const [left, top, w, h] = overlay.box;
+    const resolution = 2;
+    const made = defaultLayer(Math.ceil(w * resolution), Math.ceil(h * resolution));
+    if (!made || !('getContext' in made.canvas)) {
+      return null;
+    }
+    made.ctx.scale(resolution, resolution);
+    made.ctx.translate(-left, -top);
+    paintNodes(made.ctx, overlay.nodes);
+    const texture = pixi.Texture.from(made.canvas);
+    const out = { texture, ax: -left / w, ay: -top / h };
+    overlayTextures.set(key, out);
+    return out;
+  };
+
+  const silhouette = (): TTexture | null => {
+    const frame = atlas.frame({ look: null });
+    return frame ? textureFor(frame.page, frame.x, frame.y, frame.w, frame.h) : null;
+  };
+
+  const textureFor = (page: number, left: number, top: number, w: number, h: number): TTexture | null => {
+    const sources = atlas.sources;
+    while (pageTextures.length < sources.length) {
+      const source = sources[pageTextures.length];
+      if (!source || !('getContext' in source)) {
+        return null;
+      }
+      pageTextures.push(pixi.Texture.from(source));
+    }
+    const base = pageTextures[page]?.source;
+    if (!base) {
+      return null;
+    }
+    const key = `${String(page)}:${String(left)}:${String(top)}`;
+    let tex = frameTextures.get(key);
+    if (!tex) {
+      tex = new pixi.Texture({ source: base, frame: new pixi.Rectangle(left, top, w, h) });
+      frameTextures.set(key, tex);
+    }
+    return tex;
+  };
+
+  const placeOverlay = (slot: OverlaySlot<TSprite>, key: string, make: () => Overlay | null, atX: number, atY: number): void => {
+    if (key === '') {
+      if (slot.sprite) {
+        slot.sprite.visible = false;
+      }
+      return;
+    }
+    let sprite = slot.sprite;
+    if (slot.key !== key || !sprite) {
+      const overlay = make();
+      const made = overlay ? overlayTexture(key, overlay) : null;
+      if (!made) {
+        return;
+      }
+      if (!sprite) {
+        sprite = new pixi.Sprite(made.texture);
+        container.addChild(sprite);
+      }
+      slot.sprite = sprite;
+      sprite.texture = made.texture;
+      sprite.anchor.set(made.ax, made.ay);
+      sprite.scale.set(0.5);
+      slot.key = key;
+    }
+    sprite.visible = true;
+    sprite.x = atX;
+    sprite.y = atY;
+    sprite.zIndex = 1e6 + atY;
+  };
+
+  return {
+    set(id, member) {
+      const key = String(id);
+      const entry = entries.get(key);
+      if (entry) {
+        if (member.emote && member.emote !== entry.member.emote) {
+          entry.emoteAt = -1;
+          const face = expressionFromEmote(member.emote);
+          if (face) {
+            entry.anim.express(face);
+          }
+        }
+        if (member.look !== entry.member.look) {
+          entry.live?.setLook(member.look);
+        }
+        entry.member = member;
+        return;
+      }
+      const sprite = new pixi.Sprite();
+      container.addChild(sprite);
+      entries.set(key, {
+        member, sprite, tag: { sprite: null, key: '' }, bubble: { sprite: null, key: '' }, emoteAt: member.emote ? -1 : 0, live: null, body: null,
+        anim: animator(member.look, { seed: key }),
+      });
+    },
+    remove(id) {
+      const entry = entries.get(String(id));
+      if (!entry) {
+        return;
+      }
+      entry.sprite.destroy();
+      entry.tag.sprite?.destroy();
+      entry.bubble.sprite?.destroy();
+      entry.live?.destroy();
+      entries.delete(String(id));
+    },
+    update(t) {
+      if (atlas.bake(opts.bakeMs ?? 4) > 0) {
+        pageTextures.forEach(refresh);
+      }
+      const wantsLive = [...entries.values()].filter((e) => e.member.live === true).slice(0, liveMax);
+      const liveSet = new Set(wantsLive);
+      for (const entry of entries.values()) {
+        const m = entry.member;
+        const body = m.body ?? 'idle';
+        if (entry.emoteAt === -1) {
+          entry.emoteAt = t;
+        }
+        const isEmoting = m.emote !== undefined && t - entry.emoteAt < EMOTE_MS;
+        if (liveSet.has(entry)) {
+          if (!entry.live) {
+            entry.live = pixiAvatar(pixi, m.look, { frame: 'full', size: 64, rim: true, shadow: false, animator: entry.anim });
+            container.addChild(entry.live.view);
+          }
+          entry.sprite.visible = false;
+          const view = entry.live.view;
+          if (entry.body !== body) {
+            entry.body = body;
+            entry.anim.setBody(body, { at: t });
+          }
+          entry.live.update({ ...entry.anim.pose(t), body, status: m.status ?? null, phase: (t / (CYCLE[body] ?? 600)) % 1 });
+          view.x = m.x;
+          view.y = m.y - 32;
+          view.zIndex = m.y;
+          view.visible = true;
+        } else {
+          if (entry.live) {
+            entry.live.view.visible = false;
+          }
+          const frame = atlas.frame({
+            look: m.look, facing: m.facing ?? 'S', body, status: m.status ?? null,
+            phase: (t / (CYCLE[body] ?? 600)) % 1, face: isEmoting ? 'happy' : 'neutral',
+          });
+          const tex = frame ? textureFor(frame.page, frame.x, frame.y, frame.w, frame.h) : silhouette();
+          if (tex) {
+            entry.sprite.texture = tex;
+            entry.sprite.visible = true;
+          }
+          if (frame) {
+            entry.sprite.anchor.set(frame.footX / frame.w, frame.footY / frame.h);
+            entry.sprite.scale.x = frame.mirror ? -1 : 1;
+          }
+          entry.sprite.x = m.x;
+          entry.sprite.y = m.y;
+          entry.sprite.zIndex = m.y;
+        }
+        const top = m.y + nameplateY(m.look, body, m.status ?? null) * (entry.live?.view.visible === true ? 64 / 206 : atlas.scale);
+        const tagKey = m.name && !m.tagHidden ? `tag:${m.name}:${m.friend ? 1 : 0}:${m.you ? 1 : 0}` : '';
+        placeOverlay(entry.tag, tagKey, () => (m.name ? overlays.nameTag({ name: m.name, friend: m.friend === true, you: m.you === true }) : null), m.x, top);
+        const bubbleKey = isEmoting && m.emote ? `emote:${m.emote}` : m.reaction ? `react:${m.reaction}` : m.activity ? `act:${m.activity}` : '';
+        placeOverlay(entry.bubble, bubbleKey, () => {
+          if (isEmoting && m.emote) {
+            return overlays.emoteBubble(m.emote);
+          }
+          if (m.reaction) {
+            return overlays.reactionBubble(m.reaction);
+          }
+          return m.activity ? overlays.activityBubble({ game: m.activity }) : null;
+        }, m.x, top - 12);
+      }
+    },
+    destroy() {
+      for (const id of [...entries.keys()]) {
+        this.remove(id);
+      }
+      for (const tex of frameTextures.values()) {
+        tex.destroy(false);
+      }
+      for (const tex of pageTextures) {
+        tex.destroy(true);
+      }
+      for (const o of overlayTextures.values()) {
+        o.texture.destroy(true);
+      }
+    },
+  };
+}