@fabi-play/engine 0.4.0 → 0.7.0

package/dist/fabi-play-engine.lite.umd.js

@@ -1,4 +1,4 @@
-/*! @fabi-play/engine 0.4.0 (lite: load fabi-play.js first) | Fabi Play Kit License | https://docs.fabiplay.app */
+/*! @fabi-play/engine 0.7.0 (lite: load fabi-play.js first) | Fabi Play Kit License | https://docs.fabiplay.app */
 (function (root, factory) {
   var script = typeof document !== 'undefined' ? document.currentScript : null;
   if (typeof define === 'function' && define.amd) define([], function () { return factory(script); });
@@ -113,6 +113,77 @@ var DEFAULT_AVATARS_BY_AGE = {
 };
 var DEFAULT_AVATARS = DEFAULT_AVATARS_BY_AGE["6-8"];
 var toScreen = (view, p) => view ? { x: view.x + p.x * view.w, y: view.y + p.y * view.h } : { x: p.x, y: p.y };
+var AIM_VISIBLE = 0.5;
+var HAND_SPACE = { left: 1.6, top: 1.6, w: 3.2, h: 3 };
+var TORSO_PER_SHOULDER_WIDTH = 1.2;
+function aimPoint(who, side, opts = {}) {
+  const body = Array.isArray(who) ? who : who.body;
+  if (!Array.isArray(body)) return null;
+  const w2 = side === "left" ? P.leftWrist : P.rightWrist;
+  const at = (i) => isNumber(body[i * 3]) && isNumber(body[i * 3 + 1]) && (body[i * 3 + 2] ?? 0) >= AIM_VISIBLE ? i : -1;
+  if (at(w2) < 0) return null;
+  const wx = body[w2 * 3];
+  const wy = body[w2 * 3 + 1];
+  if (opts.orientation !== "portrait") return toScreen(opts.view, { x: wx, y: wy });
+  if (at(P.leftShoulder) < 0 || at(P.rightShoulder) < 0) return null;
+  const ls = P.leftShoulder * 3;
+  const rs = P.rightShoulder * 3;
+  const sx = (body[ls] + body[rs]) / 2;
+  const sy = (body[ls + 1] + body[rs + 1]) / 2;
+  const lh = P.leftHip * 3;
+  const rh = P.rightHip * 3;
+  const hx = (body[lh] + body[rh]) / 2;
+  const hy = (body[lh + 1] + body[rh + 1]) / 2;
+  let torso = isNumber(hx) && isNumber(hy) ? Math.hypot(hx - sx, hy - sy) : 0;
+  if (at(P.leftHip) < 0 || at(P.rightHip) < 0) torso = Math.max(torso, TORSO_PER_SHOULDER_WIDTH * Math.hypot(body[ls] - body[rs], body[ls + 1] - body[rs + 1]));
+  torso = Math.max(torso, 0.01);
+  return {
+    x: clamp01((wx - sx + HAND_SPACE.left * torso) / (HAND_SPACE.w * torso)),
+    y: clamp01((wy - sy + HAND_SPACE.top * torso) / (HAND_SPACE.h * torso))
+  };
+}
+var AIM_HOLD_MS = 300;
+var AimHold = class {
+  constructor(holdMs = AIM_HOLD_MS) {
+    __publicField(this, "holdMs", holdMs);
+    __publicField(this, "last", /* @__PURE__ */ new Map());
+  }
+  /** A number for a player's hand. */
+  static key(player, side) {
+    return player * 2 + (side === "right" ? 1 : 0);
+  }
+  /** The aim to use at time t (ms) for the hand key, given what aimPoint said now (p, or null if lost). */
+  at(key, p, t) {
+    const l = this.last.get(key);
+    if (p) {
+      if (l) {
+        l.x = p.x;
+        l.y = p.y;
+        l.t = t;
+      } else this.last.set(key, { x: p.x, y: p.y, t });
+      return p;
+    }
+    if (!l) return null;
+    if (t - l.t <= this.holdMs) return { x: l.x, y: l.y };
+    this.last.delete(key);
+    return null;
+  }
+  /** Forgets every hand. */
+  clear() {
+    this.last.clear();
+  }
+};
+var MAX_SAFE_INSET = 0.25;
+var NO_SAFE_AREA = Object.freeze({ top: 0, bottom: 0, left: 0, right: 0 });
+function parseSafeArea(v) {
+  if (!isObject(v)) return void 0;
+  const f = (n) => isNumber(n) ? Math.min(Math.max(n, 0), MAX_SAFE_INSET) : 0;
+  return { top: f(v.top), bottom: f(v.bottom), left: f(v.left), right: f(v.right) };
+}
+var COVER_ASPECT = 16 / 9;
+var isObject = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+var isNumber = (v) => typeof v === "number" && Number.isFinite(v);
+var clamp01 = (n) => Math.min(Math.max(n, 0), 1);
 var POSE_HEADER = 12;
 var POSE_BODY_BYTES = LANDMARKS * 4;
 var poseBytes = (bodies) => POSE_HEADER + bodies * POSE_BODY_BYTES;
@@ -4427,11 +4498,20 @@ function wrists(body) {
   return out;
 }
 var playerColor = (player) => PLAYER_COLORS[((player - 1) % PLAYER_COLORS.length + PLAYER_COLORS.length) % PLAYER_COLORS.length];
-function handsOf(frames, toScreen2, width, height, bodyOf = () => null) {
+var SIDES = ["left", "right"];
+function handsOf(frames, toScreen2, width, height, bodyOf = () => null, aim = {}) {
   const out = [];
   for (const f of frames) {
     const body = bodyOf(f) ?? f.body;
     if (!Array.isArray(body)) continue;
+    if (aim.orientation === "portrait") {
+      for (const side of SIDES) {
+        let p = aimPoint(body, side, { orientation: "portrait" });
+        if (aim.hold) p = aim.hold.at(AimHold.key(f.id, side), p, aim.t ?? 0);
+        if (p) out.push({ player: f.id, side, x: p.x * width, y: p.y * height, color: playerColor(f.id) });
+      }
+      continue;
+    }
     for (const w2 of wrists(body)) {
       const s = toScreen2(w2);
       out.push({ player: f.id, side: w2.side, x: s.x * width, y: s.y * height, color: playerColor(f.id) });
@@ -5093,6 +5173,10 @@ var HandMarkers = class extends Node {
   }
 };
 var now = () => performance.now();
+var frozenSafeArea = (v) => {
+  const sa = parseSafeArea(v);
+  return sa && Object.freeze(sa);
+};
 async function createEngine(opts = {}) {
   const play = opts.play ?? null;
   let canvas = opts.canvas ?? null;
@@ -5227,6 +5311,8 @@ async function createEngine(opts = {}) {
   ro?.observe(canvas);
   let backdrop = play?.backdrop === "video" ? "video" : "none";
   let view = play?.view ?? null;
+  let orientation = play?.orientation === "portrait" ? "portrait" : "landscape";
+  let safeArea = frozenSafeArea(play?.safeArea) ?? NO_SAFE_AREA;
   let livePlayers = [];
   let lastPlayersAt = -Infinity;
   let hostPaused = false;
@@ -5254,7 +5340,7 @@ async function createEngine(opts = {}) {
         lastPlayersAt = now();
       }
     };
-    const hold = (on) => {
+    const hold2 = (on) => {
       hostPaused = on;
       syncSound();
     };
@@ -5268,6 +5354,11 @@ async function createEngine(opts = {}) {
     };
     unlisten.push(
       play.on("start", (m) => lateHint(m?.device)),
+      play.on("start", (m) => {
+        if (m?.orientation === "portrait" || m?.orientation === "landscape") orientation = m.orientation;
+        const sa = frozenSafeArea(m?.safeArea);
+        if (sa) safeArea = sa;
+      }),
       // The simple API knows muted only from the start (its getter is false before): read it again then.
       play.on("start", (m) => {
         if (typeof m?.muted === "boolean") sound.muted = m.muted;
@@ -5276,11 +5367,11 @@ async function createEngine(opts = {}) {
       play.on("players", (m) => setPlayers(m?.players)),
       play.on("backdrop", (m) => setBackdrop(m?.backdrop, m?.view)),
       play.on("start", (m) => setBackdrop(m?.backdrop, m?.view ?? play.view)),
-      play.on("pause", () => hold(true)),
-      play.on("resume", () => hold(false)),
-      play.on("break-start", () => hold(true)),
-      play.on("break-done", () => hold(false)),
-      play.on("break-end", () => hold(false))
+      play.on("pause", () => hold2(true)),
+      play.on("resume", () => hold2(false)),
+      play.on("break-start", () => hold2(true)),
+      play.on("break-done", () => hold2(false)),
+      play.on("break-end", () => hold2(false))
     );
     sound.muted = play.muted === true;
   }
@@ -5291,11 +5382,13 @@ async function createEngine(opts = {}) {
   let tick = 0;
   const live = () => now() - lastPlayersAt < 1e3 ? livePlayers : [];
   const toScreen2 = (p) => play ? play.toScreen(p) : toScreen(view, p);
+  const hold = new AimHold();
   const allHands = () => {
     if (handsAt === tick) return handsCache;
     handsAt = tick;
-    const bodyOf = backdrop === "video" || !play?.smoothedBody ? () => null : (f) => play.smoothedBody(f);
-    handsCache = handsOf(live(), toScreen2, stageW, STAGE_HEIGHT, bodyOf);
+    const portrait = orientation === "portrait";
+    const bodyOf = backdrop === "video" && !portrait || !play?.smoothedBody ? () => null : (f) => play.smoothedBody(f);
+    handsCache = handsOf(live(), toScreen2, stageW, STAGE_HEIGHT, bodyOf, portrait ? { orientation, hold, t: now() } : void 0);
     return handsCache;
   };
   const box = { x: 0, y: 0, w: 1, h: 1 };
@@ -5458,6 +5551,12 @@ async function createEngine(opts = {}) {
     get view() {
       return view;
     },
+    get orientation() {
+      return orientation;
+    },
+    get safeArea() {
+      return safeArea;
+    },
     get paused() {
       return hostPaused || userPaused;
     },
@@ -6317,7 +6416,7 @@ ${msg}`);
 };
 
 // src/filters.ts
-var clamp01 = (v) => Math.min(Math.max(v, 0), 1);
+var clamp012 = (v) => Math.min(Math.max(v, 0), 1);
 var pos = (v) => Math.max(v, 0);
 var Base = class {
   constructor() {
@@ -6369,11 +6468,11 @@ var Contrast = class extends Amount {
 };
 var Invert = class extends Amount {
   toMatrix(m) {
-    const a = clamp01(this.amount);
+    const a = clamp012(this.amount);
     linear(m, 1 - 2 * a, a);
   }
   css() {
-    return `invert(${clamp01(this.amount)})`;
+    return `invert(${clamp012(this.amount)})`;
   }
 };
 var Saturate = class extends Amount {
@@ -6396,7 +6495,7 @@ var Saturate = class extends Amount {
 };
 var Grayscale = class extends Amount {
   toMatrix(m) {
-    const k = 1 - clamp01(this.amount);
+    const k = 1 - clamp012(this.amount);
     m9[0] = 0.2126 + 0.7874 * k;
     m9[1] = 0.7152 - 0.7152 * k;
     m9[2] = 0.0722 - 0.0722 * k;
@@ -6409,12 +6508,12 @@ var Grayscale = class extends Amount {
     rgb3(m, m9);
   }
   css() {
-    return `grayscale(${clamp01(this.amount)})`;
+    return `grayscale(${clamp012(this.amount)})`;
   }
 };
 var Sepia = class extends Amount {
   toMatrix(m) {
-    const k = 1 - clamp01(this.amount);
+    const k = 1 - clamp012(this.amount);
     m9[0] = 0.393 + 0.607 * k;
     m9[1] = 0.769 - 0.769 * k;
     m9[2] = 0.189 - 0.189 * k;
@@ -6427,7 +6526,7 @@ var Sepia = class extends Amount {
     rgb3(m, m9);
   }
   css() {
-    return `sepia(${clamp01(this.amount)})`;
+    return `sepia(${clamp012(this.amount)})`;
   }
 };
 var HueRotate = class extends Amount {
@@ -6476,7 +6575,7 @@ var Tint = class extends Amount {
     return i + 2;
   }
   toMatrix(m) {
-    const a = clamp01(this.amount);
+    const a = clamp012(this.amount);
     linear(m, 1 - a, 0);
     m[4] = (this.c >> 16 & 255) / 255 * a;
     m[9] = (this.c >> 8 & 255) / 255 * a;
@@ -6487,7 +6586,7 @@ var Tint = class extends Amount {
     return null;
   }
   paint2d(ctx, x, y, w2, h) {
-    const a = clamp01(this.amount);
+    const a = clamp012(this.amount);
     if (a <= 0) return;
     ctx.save();
     ctx.setTransform(1, 0, 0, 1, 0, 0);
@@ -6553,7 +6652,7 @@ var DropShadow = class extends Base {
     return this.a;
   }
   set opacity(v) {
-    this.a = clamp01(v);
+    this.a = clamp012(v);
   }
   get color() {
     return this.rgb;