@songsid/agend 2.3.0 → 2.3.2-beta.1

package/dist/ui/fleet-office-zones.js

@@ -2,27 +2,39 @@
 // fleet-office-pack.js). Each instance goes to the area for its state now and takes a seat slot there; when its state
 // changes it walks (along the pack's waypoints) to the new area. Pure — fleet-office.js draws it. Also here: what a
 // character says in its speech bubble, and which furniture is active.
-import { LOGICAL } from "./fleet-office-pack.js";
+import { LOGICAL, own } from "./fleet-office-pack.js";
 import { nameHash, pathLength, along, routeVia } from "./fleet-office-model.js";
 
 /** The area for a state: the pack's own, else its "default", else its first area. */
 export function zoneOf(pack, state) {
   const z = pack.stateZones || {};
-  return z[state] || z.default || Object.keys(pack.areas)[0];
+  return own(z, state) || own(z, "default") || Object.keys(pack.areas)[0];
 }
 
-/** How far apart overflow spots are, and how far they stay from the area's seats (logical units). */
-export const OVERFLOW = { STEP: 56, CLEAR: 40, EDGE: 24 };
-/** An area's overflow spots, for when its seats are taken: a grid inside its rect, clear of its seats, in reading order. */
-export function overflowSpots(area) {
-  const out = [], { x, y, w, h } = area.rect;
-  for (let sy = y + OVERFLOW.EDGE + 30; sy <= y + h - OVERFLOW.EDGE; sy += OVERFLOW.STEP) {
-    for (let sx = x + OVERFLOW.EDGE; sx <= x + w - OVERFLOW.EDGE; sx += OVERFLOW.STEP) {
-      if (area.seats.every((s) => Math.hypot(s.x - sx, s.y - sy) >= OVERFLOW.CLEAR)) out.push({ x: sx, y: sy });
+/**
+ * How far apart overflow spots are, and how far they stay from the area's seats (logical units); TITLE: the band at
+ * the top of an area its name is written in, kept clear. A crowded area packs tighter (STEPS, #2513: 70 instances, 42
+ * idle, piled up in the lounge) before anyone is left to the "+N" count.
+ */
+export const OVERFLOW = { STEP: 56, CLEAR: 40, EDGE: 24, TITLE: 30, STEPS: [56, 46, 38, 32] };
+function spotsAt(area, step) {
+  const out = [], { x, y, w, h } = area.rect, clear = step === OVERFLOW.STEP ? OVERFLOW.CLEAR : Math.round(step * 0.72);
+  for (let sy = y + OVERFLOW.EDGE + OVERFLOW.TITLE; sy <= y + h - OVERFLOW.EDGE; sy += step) {
+    for (let sx = x + OVERFLOW.EDGE; sx <= x + w - OVERFLOW.EDGE; sx += step) {
+      if (area.seats.every((s) => Math.hypot(s.x - sx, s.y - sy) >= clear)) out.push({ x: sx, y: sy });
     }
   }
   return out;
 }
+/**
+ * An area's overflow spots, for when its seats are taken: a tidy grid inside its rect, clear of its seats and its
+ * title, in reading order. `need`: how many are wanted — the widest spacing that fits them all, else the tightest.
+ */
+export function overflowSpots(area, need = 0) {
+  let spots = [];
+  for (const step of OVERFLOW.STEPS) { spots = spotsAt(area, step); if (spots.length >= need) return spots; }
+  return spots;
+}
 
 /**
  * Seats for everyone: `wants` [{ name, area }] in the fleet's order; `prev` what the last call gave (name → { area,
@@ -31,51 +43,71 @@ export function overflowSpots(area) {
  * Returns { seats: Map name → { area, slot, x, y }, crowd: Map }.
  */
 export function assignSeats(pack, wants, prev = new Map()) {
-  const seats = new Map(), crowd = new Map(), taken = new Map(), spill = new Map();
-  const spotsOf = (area) => { if (!spill.has(area)) spill.set(area, overflowSpots(pack.areas[area])); return spill.get(area); };
-  const pos = (area, slot) => (slot >= 0 ? pack.areas[area].seats[slot] : spotsOf(area)[-slot - 1]);
+  const seats = new Map(), crowd = new Map(), taken = new Map(), spill = new Map(), demand = new Map();
+  const areaOf = (a) => own(pack.areas, a);
+  for (const w of wants) demand.set(w.area, (demand.get(w.area) || 0) + 1);
+  const spotsOf = (area) => {
+    if (!spill.has(area)) spill.set(area, overflowSpots(areaOf(area), Math.max(0, (demand.get(area) || 0) - areaOf(area).seats.length)));
+    return spill.get(area);
+  };
+  const pos = (area, slot) => (slot >= 0 ? areaOf(area).seats[slot] : spotsOf(area)[-slot - 1]);
   const usedIn = (area) => { if (!taken.has(area)) taken.set(area, new Set()); return taken.get(area); };
   const give = (name, area, slot) => { const p = pos(area, slot); usedIn(area).add(slot); seats.set(name, { area, slot, x: p.x, y: p.y }); };
   for (const w of wants) {
     const p = prev.get(w.name);
-    if (!p || p.area !== w.area || !pack.areas[w.area] || !pos(w.area, p.slot) || usedIn(w.area).has(p.slot)) continue;
+    if (!p || p.area !== w.area || !areaOf(w.area) || !pos(w.area, p.slot) || usedIn(w.area).has(p.slot)) continue;
     give(w.name, w.area, p.slot);
   }
   for (const w of wants) {
-    if (seats.has(w.name) || !pack.areas[w.area]) continue;
-    const used = usedIn(w.area), area = pack.areas[w.area];
+    if (seats.has(w.name) || !areaOf(w.area)) continue;
+    const used = usedIn(w.area), area = areaOf(w.area);
     let slot = area.seats.findIndex((_, i) => !used.has(i));
     if (slot < 0) { const j = spotsOf(w.area).findIndex((_, i) => !used.has(-i - 1)); slot = j < 0 ? null : -j - 1; }
     if (slot === null) crowd.set(w.area, (crowd.get(w.area) || 0) + 1);
     else give(w.name, w.area, slot);
   }
-  return { seats, crowd };
+  // Over capacity: more people want the area than it has seats (their bubbles and tags are thinned, fleet-office.js).
+  const over = new Set([...demand].filter(([a, n]) => areaOf(a) && n > areaOf(a).seats.length).map(([a]) => a));
+  return { seats, crowd, over };
 }
 
 /**
  * The zones layout for `nodes` (buildOrgView's) on a pack: everyone but the missing at their seat. The same shape as
  * the desks layout (rooms → desks with a seat), in logical units, plus `mode: "zones"`, the pack's areas and graph, the
- * seats given (`seats`, the next call's `prev`) and `crowd`.
+ * seats given (`seats`, the next call's `prev`), `crowd` and `over` (the areas over capacity).
  */
 export function zonesLayout(pack, nodes, prev = new Map()) {
   const wants = nodes.filter((n) => n.state !== "missing").map((n) => ({ name: n.name, area: zoneOf(pack, n.state) }));
-  const { seats, crowd } = assignSeats(pack, wants, prev);
+  const { seats, crowd, over } = assignSeats(pack, wants, prev);
   const desks = nodes.filter((n) => seats.has(n.name)).map((n) => {
     const s = seats.get(n.name);
     return { key: `zone/${n.name}`, node: n, x: s.x - 24, y: s.y - 52, w: 48, h: 66, seat: { x: s.x, y: s.y }, wp: null, area: s.area, slot: s.slot };
   });
   return { mode: "zones", rooms: [{ key: "\u0000zones", name: null, lobby: false, x: 0, y: 0, w: LOGICAL.w, h: LOGICAL.h, desks }], areas: pack.areas,
-    waypoints: pack.waypoints || [], edges: pack.edges || [], door: pack.door, width: LOGICAL.w, height: LOGICAL.h, seats, crowd };
+    waypoints: pack.waypoints || [], edges: pack.edges || [], door: pack.door, width: LOGICAL.w, height: LOGICAL.h, seats, crowd, over };
 }
 
 // ── Walking ──
 
 /** Logical units per ms (crossing the canvas takes about six seconds). */
 export const WALK = { SPEED: 0.2 };
+/** The step of a polyline a fraction `t` (0–1) of the way along it: { dx, dy } (its direction), or null (no length). */
+export function headingAt(pts, t) {
+  const total = pathLength(pts);
+  if (!total) return null;
+  let left = Math.max(0, Math.min(1, t)) * total;
+  for (let i = 1; i < pts.length; i++) {
+    const dx = pts[i].x - pts[i - 1].x, dy = pts[i].y - pts[i - 1].y, l = Math.hypot(dx, dy);
+    if (l > 0 && (left <= l || i === pts.length - 1)) return { dx, dy };
+    left -= l;
+  }
+  return null;
+}
 /**
  * Where each character is. `sync(targets, now, graph, still)`: targets name → { x, y }; someone new is already there;
  * someone whose target moved walks from where they are now along the graph (routeVia) — or is there at once when
- * `still` (reduced motion); someone gone is forgotten. `at(name, now)` → { x, y, walking }; `moving(now)`.
+ * `still` (reduced motion); someone gone is forgotten. `at(name, now)` → { x, y, walking } and, while walking, `heading`: the
+ * current step's { dx, dy }, which picks a pack's walkDown / walkUp / walkSide strip; `moving(now)`.
  */
 export function createWalkers() {
   const by = new Map();
@@ -84,7 +116,7 @@ export function createWalkers() {
     const t = (now - w.start) / w.ms;
     if (t >= 1) return { x: w.to.x, y: w.to.y, walking: false };
     const p = along(w.pts, Math.max(0, t));
-    return { x: p.x, y: p.y, walking: true };
+    return { x: p.x, y: p.y, walking: true, heading: headingAt(w.pts, Math.max(0, t)) };
   };
   return {
     sync(targets, now, graph, still = false) {
@@ -104,14 +136,17 @@ export function createWalkers() {
 
 /**
  * The person at (x, y) in layout px as the scene draws them (#2431 review): each desk's box moved to where its person is
- * now (`posOf(desk)`: a walker's position; null: at the seat), the one drawn last (the nearest) tried first.
+ * now (`posOf(desk)`: a walker's position; null: at the seat), the one drawn last (the nearest) tried first — the same
+ * order the scene draws them in. `boxOf(desk, at)` (#2513 review): the box the skin draws that person in there (an
+ * uploaded character's strip, anchor and size, in its current pose and walking direction); null: the desk's own box.
  */
-export function personAt(desks, x, y, posOf) {
-  const people = desks.filter((d) => d.node).map((d) => { const at = posOf(d) || d.seat; return { d, at, dx: at.x - d.seat.x, dy: at.y - d.seat.y }; })
+export function personAt(desks, x, y, posOf, boxOf = null) {
+  const people = desks.filter((d) => d.node).map((d) => ({ d, at: posOf(d) || { ...d.seat, walking: false, heading: null } }))
     .sort((a, b) => a.at.y - b.at.y);
   for (let i = people.length - 1; i >= 0; i--) {
-    const { d, dx, dy } = people[i];
-    if (x >= d.x + dx && x < d.x + dx + d.w && y >= d.y + dy && y < d.y + dy + d.h) return d;
+    const { d, at } = people[i];
+    const b = (boxOf && boxOf(d, at)) || { x: d.x + at.x - d.seat.x, y: d.y + at.y - d.seat.y, w: d.w, h: d.h };
+    if (x >= b.x && x < b.x + b.w && y >= b.y && y < b.y + b.h) return d;
   }
   return null;
 }
@@ -143,11 +178,13 @@ export function bubbleAt(name, state, ms, lines) {
  * { key, calling, shown, box, tail? } with `box` the bubble's whole box ({ x, y, w, h }, for its whole line, so it never
  * moves while typing out) and `tail` the point its tail reaches: the strip from the box down to it is kept clear too. The ones calling for the person go first (they always show), then the one that started earliest
  * (the most typed out) — one already showing keeps its place. Each takes its spot, or one row up (`lift`) when that is
- * free; else it waits for another round. Returns the placed ones, each with its `dy` (0 or -lift).
+ * free; else it waits for another round. Returns the placed ones, each with its `dy` (0 or -lift). `rank` (optional,
+ * bubbleRank): a lower one goes first (else: calling 0, the rest 2); `blocked`: boxes no bubble may cover (name tags).
  */
-export function placeBubbles(items, lift = 22) {
-  const order = [...items].sort((a, b) => (Number(b.calling) - Number(a.calling)) || (b.shown - a.shown) || (a.key < b.key ? -1 : a.key > b.key ? 1 : 0));
-  const taken = [], out = [];
+export function placeBubbles(items, lift = 22, blocked = []) {
+  const rank = (it) => (it.rank ?? (it.calling ? 0 : 2));
+  const order = [...items].sort((a, b) => (rank(a) - rank(b)) || (b.shown - a.shown) || (a.key < b.key ? -1 : a.key > b.key ? 1 : 0));
+  const taken = [...blocked], out = [];
   const hits = (r) => taken.some((t) => r.x < t.x + t.w && t.x < r.x + r.w && r.y < t.y + t.h && t.y < r.y + r.h);
   for (const it of order) {
     for (const dy of [0, -lift]) {
@@ -161,10 +198,35 @@ export function placeBubbles(items, lift = 22) {
   return out;
 }
 
+/** Who speaks first when bubbles compete: calling for the person, then working, then everyone else. */
+export const bubbleRank = (state) => (CALLING.has(state) ? 0 : state === "working" ? 1 : 2);
+/** At most this many bubbles in an area over capacity (#2513). */
+export const CROWD_BUBBLES = 3;
+/** States whose bubbles are left out in an area over capacity (the chatter; a call or work still speaks). */
+const QUIET_IN_CROWD = new Set(["idle", "paused", "stopped", "starting", "queued"]);
+/**
+ * The bubbles a frame may show (#2513): in an area over capacity (`over`), none for idle or asleep people and at most
+ * CROWD_BUBBLES, the highest ranked first (bubbleRank); elsewhere all of them. `items`: { area, state, shown, key, … }.
+ */
+export function thinBubbles(items, over) {
+  const byArea = new Map(), out = [];
+  for (const it of items) {
+    if (!over || !over.has(it.area)) { out.push(it); continue; }
+    if (QUIET_IN_CROWD.has(it.state)) continue;
+    if (!byArea.has(it.area)) byArea.set(it.area, []);
+    byArea.get(it.area).push(it);
+  }
+  for (const list of byArea.values()) {
+    list.sort((a, b) => (bubbleRank(a.state) - bubbleRank(b.state)) || (b.shown - a.shown) || (a.key < b.key ? -1 : a.key > b.key ? 1 : 0));
+    out.push(...list.slice(0, CROWD_BUBBLES));
+  }
+  return out;
+}
+
 /** The lines for a state: the skin's (in the page's language), else the page's own. */
 export function linesFor(state, lang, pack, defaults) {
-  const own = pack && pack.bubbles && pack.bubbles[lang] && pack.bubbles[lang][state];
-  return own && own.length ? own : defaults[state] || [];
+  const mine = pack && own(own(pack.bubbles, lang), state);
+  return Array.isArray(mine) && mine.length ? mine : own(defaults, state) || [];
 }
 
 // ── Furniture ──