@moood/render 0.0.0-stage → 0.0.0

package/engine/select.js

@@ -0,0 +1,301 @@
+// Selecting any part of the scene. A click (not a drag) picks what is under the cursor —
+// objects and landscape layers nearest first, then the sun / moon / planets, else the sky —
+// pixel-exact: the candidate's own vector shape is re-painted into a tiny canvas around
+// the cursor and we look for ink. The selection glows along its silhouette on an overlay;
+// the page (app.js) tells the chat what is selected.
+// Paths name the selected part inside the scene spec: "objects[3]", "layers[1]",
+// "celestials[0]", "sky" — the same the server understands. Scene elements also carry a
+// stable id (object()), which is what the world's agents know them by.
+const MooodSelect = (() => {
+  const I = Moood.internals;
+  const NAMES = {
+    pine: 'ель', tree: 'дерево', house: 'дом', tower: 'башня', lamp: 'фонарь', lantern: 'фонарик', campfire: 'костёр',
+    window: 'окно', boat: 'лодка', rock: 'камень', bench: 'скамейка', figure: 'человек', cat: 'кот', bird: 'птица',
+    flower: 'цветок', bridge: 'мостик',
+    mountains: 'горы', hills: 'холмы', dunes: 'дюны', forest: 'лес', city: 'город', water: 'вода', ground: 'земля',
+    clouds: 'облака', fog: 'туман', sun: 'солнце', moon: 'луна', planet: 'планета',
+  };
+  const LAND = new Set(['mountains', 'hills', 'dunes', 'forest', 'city', 'water', 'ground']);
+  const PROBE = 7, GLOW = 'rgba(255,228,160,0.95)';
+
+  // the part of the spec a path points to, and a human name for it
+  function item(spec, path) {
+    if (!spec || !path) return undefined;
+    if (path === 'sky') return spec.sky;
+    const m = /^(objects|layers|celestials)\[(\d+)\]$/.exec(path);
+    return m ? spec[m[1]]?.[Number(m[2])] : undefined;
+  }
+  function describe(spec, path) {
+    if (path === 'sky') return 'небо';
+    const it = item(spec, path);
+    return it ? it.name || NAMES[it.kind] || it.kind : path; // custom elements carry their own name
+  }
+
+  // hint: what the card suggests doing with the selection (the page decides — it depends on the mode);
+  // withCard: false — the page shows the selection its own way (the Android app); only(path) — just
+  // these parts can be picked (the others let a click through to what is behind them), each on the
+  // first click
+  function create({ canvas, stage, onChange, hint, withCard = true, only = null }) {
+    let spec = null, sel = null, drawn = '';
+    const probe = I.layer(PROBE, PROBE), pg = probe.getContext('2d', { willReadFrequently: true });
+    const overlay = document.createElement('canvas');
+    overlay.id = 'select-overlay';
+    canvas.after(overlay);
+    const og = overlay.getContext('2d');
+    const card = document.createElement('div');
+    card.id = 'selection';
+    card.hidden = true;
+    document.body.append(card);
+
+    // Scenes are painted in CSS pixels of the frame here (W × H, the stage SW wide — engine.js),
+    // so a plane's view() maps painted coordinates straight to where they are in the frame;
+    // the frame lies at (x, y) in the canvas.
+    const size = () => { const f = stage.frame(); return { W: f.w, H: f.h, SW: I.STAGE * f.h, x: f.x, y: f.y }; };
+    // objects stand where the engine puts them (it may move them to their real distance)
+    const placed = (dz, o) => ({ ...o, x: dz.objectX(o), y: dz.objectY(o), size: dz.objectSize(o), _yh: dz.yh });
+    // a platformer's hero is drawn moved and turned (engine.js heroMatrix): so is its outline
+    function heroed(m, o, cam, SW, H) {
+      if (!o || !cam.hero || o.id !== cam.hero.id) return m;
+      const dz = I.depths(spec), h = I.heroMatrix(cam.hero, dz.objectX(o) * SW, dz.objectSize(o) * H / (o.height || 2));
+      return [m[0] * h[0], 0, 0, m[3], m[0] * h[4] + m[4], m[3] * h[5] + m[5]];
+    }
+    const layerSeed = i => I.hash(JSON.stringify(spec.layers || []) + (spec.title || '')) + i * 101;
+
+    // any ink within a few screen pixels of (px, py) when drawn at on-screen scale s?
+    function inked(px, py, s, draw) {
+      pg.setTransform(1, 0, 0, 1, 0, 0);
+      pg.clearRect(0, 0, PROBE, PROBE);
+      pg.setTransform(s, 0, 0, s, PROBE / 2 - px * s, PROBE / 2 - py * s);
+      draw(pg);
+      const d = pg.getImageData(0, 0, PROBE, PROBE).data;
+      for (let i = 3; i < d.length; i += 4) if (d[i] > 40) return true;
+      return false;
+    }
+
+    function pick(clientX, clientY) {
+      const { W, H, SW, x, y } = size(), cam = stage.camera(), dz = I.depths(spec);
+      const r = canvas.getBoundingClientRect(), k = r.width / Math.max(1, canvas.clientWidth) || 1;
+      const sx = (clientX - r.left) / k - x, sy = (clientY - r.top) / k - y;
+      // nearest first, in the renderer's order: it paints far to near, and at equal distance
+      // layers in spec order, then objects — so the later one is on top
+      // (looking around, the elements standing about — no landscape layers, the sky behind them)
+      const round = I.camSetup(spec).round;
+      const things = [
+        ...(round ? [] : spec.layers || []).map((L, i) => ({ path: `layers[${i}]`, L, i, at: { m: I.view(cam, dz.Z[i], W, H, dz.yh), D: dz.Z[i] - cam.z } })).filter(t => LAND.has(t.L.kind)),
+        ...(spec.objects || []).map((o, i) => ({ path: `objects[${i}]`, o: placed(dz, o), at: round && o.sky ? null : I.placeOf(o, cam, W, H, dz, round) })).filter(t => t.o.kind !== 'bird' && !t.o.plane),
+      ].map((t, k) => ({ ...t, k })).filter(t => t.at && t.at.D > 0.48 && (!only || only(t.path))).sort((a, b) => a.at.D - b.at.D || b.k - a.k);
+      for (const t of things) {
+        const m = heroed(t.at.m, t.o, cam, SW, H), s = m[0], px = (sx - m[4]) / s, py = (sy - m[5]) / m[3];
+        if (t.o) {
+          if (inked(px, py, s, g => I.drawObject(g, t.o, SW, H, 0, []))) return t.path;
+        } else if (t.L.kind === 'water') {
+          if (py >= t.L.y * H) return t.path;
+        } else {
+          const k = s, w = PROBE / k;
+          I.staticLayer(t.L, SW, H, layerSeed(t.i), { x: px - w / 2, y: py - w / 2, w, h: w, k, canvas: probe });
+          const d = pg.getImageData(0, 0, PROBE, PROBE).data;
+          for (let j = 3; j < d.length; j += 4) if (d[j] > 40) return t.path;
+        }
+      }
+      const m = I.view(cam, Infinity, W, H, dz.yh), px = (sx - m[4]) / m[0], py = (sy - m[5]) / m[3];
+      const ci = (spec.celestials || []).findIndex(c => Math.hypot(px - c.x * SW, py - c.y * H) < c.size * H / 2 + 6);
+      const far = ci >= 0 ? `celestials[${ci}]` : 'sky';
+      return !only || only(far) ? far : null;
+    }
+
+    // ── the glow ────────────────────────────────────────────────────────
+    // The selected thing's silhouette, painted once: { c, x, y, k } — canvas c covers painted
+    // coordinates from (x, y) at scale k — and the plane it stands on (Z).
+    let sil = null, box = null; // box: where the outlined thing is on the screen now (CSS pixels)
+    // the part of a silhouette's canvas that has ink: { x, y, w, h } in its pixels
+    function inkBox(c) {
+      const k = Math.max(1, Math.ceil(Math.max(c.width, c.height) / 256)), w = Math.ceil(c.width / k), h = Math.ceil(c.height / k);
+      const t = I.layer(w, h), tg = t.getContext('2d', { willReadFrequently: true });
+      tg.drawImage(c, 0, 0, w, h);
+      const d = tg.getImageData(0, 0, w, h).data;
+      let x0 = w, y0 = h, x1 = -1, y1 = -1;
+      for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) if (d[(y * w + x) * 4 + 3] > 24) { x0 = Math.min(x0, x); x1 = Math.max(x1, x); y0 = Math.min(y0, y); y1 = Math.max(y1, y); }
+      return x1 < 0 ? { x: 0, y: 0, w: c.width, h: c.height } : { x: x0 * k, y: y0 * k, w: (x1 - x0 + 1) * k, h: (y1 - y0 + 1) * k };
+    }
+    function silhouette() {
+      const { SW, H } = size(), dz = I.depths(spec), it = item(spec, sel), i = Number(/\d+/.exec(sel)?.[0]);
+      if (sel.startsWith('objects')) {
+        const o = placed(dz, it), b = I.objectBox(o, SW, H);
+        const k = Math.min(2, 2048 / Math.max(1, b.bw), 2048 / Math.max(1, b.bh));
+        const c = I.layer(b.bw * k, b.bh * k), g = c.getContext('2d');
+        g.setTransform(k, 0, 0, k, -b.bx * k, -b.by * k);
+        I.drawObject(g, o, SW, H, 0, []);
+        return { c, x: b.bx, y: b.by, k, Z: dz.objectZ(it), obj: it };
+      }
+      if (sel.startsWith('layers') && LAND.has(it.kind)) {
+        if (it.kind === 'water') {
+          const c = I.layer(4, 4); c.getContext('2d').fillRect(0, 0, 4, 4);
+          return { c, x: -I.EXT * SW, y: it.y * H, k: 4 / ((1 + 2 * I.EXT) * SW), ky: 4 / ((I.DEEP - it.y) * H), Z: dz.Z[i] };
+        }
+        const k = 0.5, x = -I.EXT * SW;
+        const st = I.staticLayer(it, SW, H, layerSeed(i), { x, y: 0, w: (1 + 2 * I.EXT) * SW, h: I.DEEP * H, k });
+        return { c: st.canvas, x, y: 0, k, Z: dz.Z[i] };
+      }
+      if (sel.startsWith('celestials')) {
+        const r = it.size * H / 2, c = I.layer(2 * r + 4, 2 * r + 4), g = c.getContext('2d');
+        g.beginPath(); g.arc(r + 2, r + 2, r, 0, 7); g.fill();
+        return { c, x: it.x * SW - r - 2, y: it.y * H - r - 2, k: 1, Z: Infinity };
+      }
+      return null; // the sky: nothing to outline
+    }
+    function drawGlow() {
+      const dpr = window.devicePixelRatio || 1, cam = stage.camera();
+      // the scene's state moved or reshaped it (a figure that walks): outline it as it is now
+      if (sel && sil && sil.ver !== I.STATE.ver) sil = { ...(silhouette() || sil), ver: I.STATE.ver };
+      const key = sel && sil ? `${cam.x.toFixed(4)},${cam.y.toFixed(4)},${cam.z.toFixed(4)},${cam.yaw.toFixed(4)},${cam.h},${overlay.width},${sil.ver}` : '';
+      if (key === drawn) return;
+      drawn = key;
+      og.setTransform(1, 0, 0, 1, 0, 0);
+      og.clearRect(0, 0, overlay.width, overlay.height);
+      box = null;
+      if (!key) return;
+      const { W, H, x, y } = size(), dz = I.depths(spec), round = I.camSetup(spec).round;
+      const at = sil.obj && !sil.obj.sky ? I.placeOf(sil.obj, cam, W, H, dz, round) : { m: I.view(cam, sil.Z, W, H, dz.yh), D: Infinity };
+      if (!at || at.D < 0.3) return;
+      const m = heroed(at.m, sil.obj, cam, I.STAGE * H, H);
+      const sx = m[0] / sil.k * dpr, sy = m[3] / (sil.ky || sil.k) * dpr;
+      const ox = (x + m[0] * sil.x + m[4]) * dpr, oy = (y + m[3] * sil.y + m[5]) * dpr;
+      const r = canvas.getBoundingClientRect();
+      sil.ink ||= inkBox(sil.c);
+      box = { x: r.left + (ox + sil.ink.x * sx) / dpr, y: r.top + (oy + sil.ink.y * sy) / dpr, w: sil.ink.w * sx / dpr, h: sil.ink.h * sy / dpr };
+      // the shape itself is drawn far off-canvas; only its blurred shadow lands on screen —
+      // then the shape's interior is cut out, leaving a glow around the outline
+      const OFF = overlay.width + 4000;
+      og.shadowColor = GLOW;
+      og.shadowOffsetX = OFF;
+      for (const blur of [3, 10, 22]) {
+        og.shadowBlur = blur * dpr;
+        og.setTransform(sx, 0, 0, sy, ox - OFF, oy);
+        og.drawImage(sil.c, 0, 0);
+      }
+      og.shadowColor = 'transparent';
+      og.globalCompositeOperation = 'destination-out';
+      og.setTransform(sx, 0, 0, sy, ox, oy);
+      og.drawImage(sil.c, 0, 0);
+      og.globalCompositeOperation = 'source-over';
+    }
+    const fit = () => {
+      const dpr = window.devicePixelRatio || 1;
+      overlay.width = Math.round(overlay.clientWidth * dpr);
+      overlay.height = Math.round(overlay.clientHeight * dpr);
+      drawn = '';
+    };
+    addEventListener('resize', () => { fit(); if (sel) sil = silhouette(); });
+    fit();
+    const loop = () => { requestAnimationFrame(loop); if (spec) drawGlow(); };
+    requestAnimationFrame(loop);
+
+    // ── the card ────────────────────────────────────────────────────────
+    const hint_ = () => (hint ? hint() : 'напиши в чат, что с этим сделать');
+    function renderCard() {
+      card.hidden = !sel || !withCard;
+      if (!sel) return;
+      const it = item(spec, sel);
+      card.innerHTML = '';
+      const head = document.createElement('div');
+      head.className = 'head';
+      const name = document.createElement('b');
+      name.textContent = describe(spec, sel);
+      const close = document.createElement('button');
+      close.type = 'button'; close.textContent = '✕'; close.title = 'снять выделение (Esc)';
+      close.onclick = () => select(null);
+      head.append(name, close);
+      const props = document.createElement('div');
+      props.className = 'props';
+      const colour = it?.color || it?.top;
+      if (colour) { const sw = document.createElement('i'); sw.style.background = colour; props.append(sw); }
+      props.append(Object.entries(it || {}).filter(([k, v]) => !['kind', 'code', 'name', 'id'].includes(k) && typeof v !== 'object' && v !== false && String(v).length < 40)
+        .map(([k, v]) => `${k} ${typeof v === 'number' ? +v.toFixed(2) : v}`).join(' · '));
+      const hint = document.createElement('div');
+      hint.className = 'hint';
+      hint.textContent = hint_();
+      card.append(head, props, hint);
+    }
+
+    function select(path) {
+      sel = path && item(spec, path) !== undefined ? path : null;
+      sil = sel ? silhouette() : null;
+      drawn = 'dirty';
+      renderCard();
+      onChange?.(sel);
+    }
+
+    // Things (objects, sun, moon) select on the first click. The continuous background —
+    // land layers, water, sky — only on a second click on the same part: the first one
+    // clears any selection, so stray clicks on the landscape never select it. Clicking
+    // what is selected clears it.
+    // Background: the old landscape layers and sky, and any element covering more than a
+    // quarter of the view from the start (the sky, a lake, far hills) — measured once per
+    // scene by painting it small.
+    const coverage = new Map();
+    function background(path) {
+      if (/^(layers\[|sky$)/.test(path)) return true;
+      if (!path.startsWith('objects')) return false;
+      if (!coverage.has(path)) {
+        const { W, H, SW } = size(), dz = I.depths(spec), it = item(spec, path), n = 64, c = I.layer(n, n * H / W), g = c.getContext('2d');
+        // from the start — looking around, turned toward it
+        const round = I.camSetup(spec).round, p = round && !it.sky ? dz.objectAt(it) : null;
+        const at = I.placeOf(it, { x: 0, y: 0, z: 0, h: 1, yaw: p ? Math.atan2(p.X, p.Z) : 0 }, W, H, dz, round && !it.sky), k = n / W;
+        const m = at ? at.m : [0, 0, 0, 0, 0, 0];
+        g.setTransform(m[0] * k, 0, 0, m[3] * k, m[4] * k, m[5] * k);
+        try { I.drawObject(g, placed(dz, it), SW, H, 0, []); } catch {}
+        const d = g.getImageData(0, 0, c.width, c.height).data;
+        let ink = 0;
+        for (let i = 3; i < d.length; i += 4) if (d[i] > 40) ink++;
+        coverage.set(path, ink / (d.length / 4));
+      }
+      return coverage.get(path) > 0.25;
+    }
+    let armed = null; // a background part clicked once: { path, t }
+    function clicked(path, t) {
+      const prev = armed;
+      armed = null;
+      if (path === sel) return select(null);
+      if (only) return select(path);
+      if (!background(path)) return select(path);
+      if (prev && prev.path === path && !sel) return select(path);
+      if (sel) select(null);
+      armed = { path, t };
+    }
+
+    // a click is a press and release without dragging, with one finger
+    let down = null;
+    canvas.addEventListener('pointerdown', e => {
+      down = down ? { multi: true } : { x: e.clientX, y: e.clientY, t: performance.now() };
+    });
+    canvas.addEventListener('pointerup', e => {
+      const d = down;
+      down = null;
+      if (!d || d.multi || !spec) return;
+      if (Math.hypot(e.clientX - d.x, e.clientY - d.y) > 5 || performance.now() - d.t > 500) return;
+      const path = pick(e.clientX, e.clientY);
+      if (path) clicked(path, performance.now());
+      else if (sel) select(null);
+    });
+    canvas.addEventListener('pointercancel', () => { down = null; });
+    addEventListener('keydown', e => {
+      if (e.key === 'Escape' && sel && !['INPUT', 'TEXTAREA', 'SELECT'].includes(document.activeElement?.tagName)) select(null);
+    });
+
+    return {
+      // a new scene (another world or version): indices may mean other things now
+      setSpec(next) { if (next !== spec) { spec = next; coverage.clear(); select(null); } },
+      path: () => sel,
+      // the selected scene element itself (with its stable id), or null
+      object: () => (sel && sel.startsWith('objects') ? item(spec, sel) : null),
+      // where the selection is on the screen now — {x, y, w, h} in CSS pixels — or null
+      box: () => (sel ? box : null),
+      // what a click there would pick (a path), or null
+      at: (clientX, clientY) => (spec ? pick(clientX, clientY) : null),
+      refresh: () => renderCard(),
+      clear: () => select(null),
+    };
+  }
+
+  return { create, describe };
+})();

package/engine/speech.js

@@ -0,0 +1,150 @@
+// Lines said in the scene — whatever runs the game has someone say them: a line appears over the
+// one who says it (following it as the viewer walks: stage.screenOf; the narrator's low in the
+// middle), and is heard in its voice (Gemini, /speak — made once, kept for good); words and voice come together.
+// Lines are said one after another. While a line is heard its bubble glimmers; a bubble keeps a ▶
+// to hear it again, and the page is told (the "moood:speech" event: {id, text, on}) so it can light
+// the line up elsewhere too. While someone is about to speak — the one who answers thinking, the
+// voice being made — a "…" glimmers over them (thinking()).
+const MooodSpeech = (() => {
+  let stage = null, canvas = null, layer = null, voiceless = null, raf = 0, queue = Promise.resolve();
+  const bubbles = new Map(); // element id → { el, text, until, pending }
+  const waiting = new Map(); // element id → how many things it is about to say
+  let current = null; // the voice being heard right now
+  let said = 0;       // lines said before the player last spoke up: those not begun yet are dropped
+  const NARRATOR = 'narrator';
+  MooodVolume.on((kind, v) => { if (kind === 'voice' && current) current.volume = v; });
+
+  function init(opts) {
+    ({ stage, canvas, voiceless } = opts); // voiceless(why): a line couldn't be voiced
+    layer = document.createElement('div');
+    layer.id = 'speech';
+    canvas.after(layer);
+  }
+
+  const told = (id, text, on) => dispatchEvent(new CustomEvent('moood:speech', { detail: { id, text, on } }));
+
+  // a line's voice, loaded and ready to play (made by /speak once — kept for good); null if it can't
+  // be, or not in time — then the line is shown without it, and the lines after it aren't held up
+  const MAKING = 45000, LOADING = 15000;
+  async function voiced(text, voice, how, who) {
+    try {
+      const r = await fetch('/speak', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ text, voice, how, who }),
+        signal: AbortSignal.timeout(MAKING) });
+      if (!r.ok) throw new Error((await r.json().catch(() => ({}))).detail || `speech ${r.status}`);
+      const a = new Audio((await r.json()).url);
+      await new Promise((ok, fail) => {
+        const late = setTimeout(() => fail(new Error('the audio took too long to load')), LOADING);
+        a.oncanplaythrough = () => { clearTimeout(late); ok(); };
+        a.onerror = () => { clearTimeout(late); fail(new Error('the audio would not load')); };
+        a.load();
+      });
+      return a;
+    } catch (err) {
+      (window.__mooodErrors = window.__mooodErrors || []).push(`speech: ${err.message || err}`);
+      voiceless?.(err.name === 'TimeoutError' ? 'голос не успел' : err.message || String(err));
+      return null;
+    }
+  }
+
+  // plays a line's voice, the bubble glimmering; resolves when it has been heard
+  async function hear(id, text, a, bubble) {
+    bubble?.el.classList.add('speaking'); told(id, text, true);
+    current = a;
+    a.volume = MooodVolume.get('voice');
+    // (an audio that never says it ended — a stalled stream — is let go after its length)
+    try { await new Promise(done => { a.onended = a.onerror = done; a.currentTime = 0; a.play().catch(done); setTimeout(done, (a.duration || 30) * 1000 + 3000); }); }
+    finally { if (current === a) current = null; bubble?.el.classList.remove('speaking'); told(id, text, false); }
+  }
+
+  // the player started to speak: the voice being heard stops (its words stay on screen), and what
+  // was still to be said is dropped — the world listens to them now
+  function hush() {
+    said++;
+    if (!current) return;
+    current.pause();
+    current.onended();
+  }
+
+  function bubbleFor(id, text, voice, how, who) {
+    const old = bubbles.get(id);
+    if (old) old.el.remove();
+    const el = document.createElement('div');
+    el.className = id === NARRATOR ? 'bubble narrator' : 'bubble';
+    const p = document.createElement('p');
+    p.textContent = text;
+    el.append(p);
+    if (voice) {
+      const again = document.createElement('button');
+      again.type = 'button'; again.textContent = '▶'; again.title = 'ещё раз';
+      again.onclick = () => replay(id, text, voice, how, who);
+      el.append(again);
+    }
+    layer.append(el);
+    const b = { el, text, until: Infinity, pending: false };
+    bubbles.set(id, b);
+    if (!raf) raf = requestAnimationFrame(place);
+    return b;
+  }
+
+  function place() {
+    raf = 0;
+    const now = performance.now();
+    for (const [id, b] of bubbles) {
+      if (now > b.until) { b.el.remove(); bubbles.delete(id); if (waiting.get(id)) pend(id); continue; }
+      const at = id === NARRATOR ? [innerWidth / 2, innerHeight * 0.86] : stage.screenOf(id, 0.25, true);
+      b.el.style.visibility = at ? '' : 'hidden';
+      if (at) b.el.style.transform = `translate(${Math.round(at[0])}px, ${Math.round(at[1])}px) translate(-50%, -100%)`;
+      b.el.classList.toggle('fading', now > b.until - 1200);
+    }
+    if (bubbles.size) raf = requestAnimationFrame(place);
+  }
+
+  // someone is about to speak (on) — or no longer (off): a glimmering "…" over them meanwhile
+  function pend(id) {
+    const b = bubbleFor(id, '…');
+    b.pending = true;
+    b.el.classList.add('pending');
+  }
+  function thinking(id, on) {
+    const n = (waiting.get(id) || 0) + (on ? 1 : -1);
+    if (n > 0) waiting.set(id, n); else waiting.delete(id);
+    const b = bubbles.get(id);
+    if (n > 0 && (!b || b.until !== Infinity)) pend(id);
+    if (n <= 0 && b?.pending) { b.el.remove(); bubbles.delete(id); }
+  }
+
+  // id: who says it (an element of the scene); voice/how: heard in that voice, that way, played as
+  // `who` ("Savely, the old keeper"). A line with
+  // a voice appears when it can be heard — its words and its voice together; its voice is made
+  // while the lines before it are said.
+  function say(id, text, { voice, how, who } = {}) {
+    text = String(text || '').trim();
+    if (!text) return Promise.resolve();
+    const ready = voice ? voiced(text, voice, how, who) : Promise.resolve(null);
+    const turn = said;
+    const line = queue.then(async () => {
+      if (turn !== said) return;
+      if (voice) thinking(id, true);
+      const a = await ready;
+      if (voice) thinking(id, false);
+      const b = bubbleFor(id, text, voice, how, who);
+      const t0 = performance.now();
+      if (a) await hear(id, text, a, b);
+      // a line stays a while to be read: longer for a longer line, at least after it was heard
+      b.until = Math.max(performance.now() + 2500, t0 + 1500 + text.length * 60);
+    });
+    queue = line.catch(() => {});
+    return line;
+  }
+
+  async function replay(id, text, voice, how, who) {
+    const a = await voiced(text, voice, how, who);
+    if (!a) return;
+    const b = bubbles.get(id);
+    if (b) b.until = Infinity;
+    await hear(id, text, a, b);
+    if (b) b.until = performance.now() + 2500;
+  }
+
+  return { init, say, replay, thinking, hush };
+})();

package/engine/strip.js

@@ -0,0 +1,153 @@
+// The artist's work as it goes, and a world's scenes, as little pictures.
+//   MooodDrawings.listen(since, handle) — the artist's work from `since` (/api/drawings/live, live.js):
+//     handle(event) gets every event.
+//   MooodEditing.listen(worlds, handle) — which scenes of these worlds are being edited, as it goes
+//     (/api/editing/worlds/<ids>/live): handle(event) gets every event.
+//   MooodStrip.create(box, {scenes, drawing, current, world: {id, address}, go}) — a strip of little
+//     pictures: first what is being drawn in the world (its sketch as it is now, marked waiting or
+//     drawing, live: /d/<id>), then its scenes (<world's address>/scenes/<id>); each opens in the
+//     viewer, over the page (viewer.js) — or, go, is gone to (the strip a scene's page switches by). A scene being edited (whoever's session: the artist's, an
+//     assistant's through the MCP…) shows what edits it and its draft. Its handle(event) keeps the
+//     drawings up to date, its edited(event) the editing.
+const MooodDrawings = (() => {
+  const listen = (since, handle) => MooodLive.open('/api/drawings/live', since, handle);
+  return { listen };
+})();
+
+const MooodEditing = (() => {
+  const listen = (worlds, handle) => MooodLive.open(`/api/editing/worlds/${worlds.join(',')}/live`, '', handle);
+  return { listen };
+})();
+
+const MooodStrip = (() => {
+  const AGAIN = 4500, TRIES = 40;  // a picture not made yet (it is, seconds after its version) is looked for again: ~3 minutes
+  const STATE = { waiting: 'в очереди', drawing: 'рисуется' };
+  const DRAFTS = 5000;  // a scene's draft is pictured again at most this often
+
+  // a scene: its picture (the draft's, while it is being edited) — shown once it has come: until
+  // then (a version's picture is made seconds after it) the card is empty, and it is asked again
+  function sceneCard(world, views) {
+    const a = document.createElement('a');
+    const img = document.createElement('img');
+    img.alt = '';
+    img.hidden = true;
+    const badge = document.createElement('span');
+    badge.className = 'badge';
+    a.append(img, badge);
+    let src = '', tries = 0, again = null;
+    img.onload = () => { img.hidden = false; };
+    img.onerror = () => { if (tries++ < TRIES) again = setTimeout(() => { img.src = `${src}${src.includes('?') ? '&' : '?'}again=${tries}`; }, AGAIN); };
+    const show = next => {
+      if (next === src) return;
+      clearTimeout(again);
+      src = next; tries = 0;
+      img.src = src;  // (the picture there stays until the next one has come)
+    };
+    return {
+      el: a,
+      update(s, here, editing) {
+        a.href = `${world.address}/scenes/${s.id}`;
+        if (views) a.dataset.view = s.title || 'без названия';
+        // the content its picture shows: the viewer opens that — but a scene being edited shows its
+        // draft, so the viewer opens the scene as it is now
+        if (editing) delete a.dataset.key; else a.dataset.key = s.look;
+        a.className = [s.id === here && 'here', editing && 'sketch'].filter(Boolean).join(' ');
+        a.title = editing ? `${s.title || ''}\n${editing.label} правит сцену${editing.stage ? ` — ${editing.stage}` : ''}` : s.title || '';
+        badge.hidden = !editing;
+        badge.textContent = editing ? `правит: ${editing.label}` : '';
+        show(editing?.seq ? `/api/scenes/${s.id}/draft.png?seq=${editing.seq}` : `/pictures/${s.look}.png`);
+      },
+    };
+  }
+
+  // a request being drawn: its sketch's picture, its state, what was asked and what the artist says
+  function jobCard(d, views) {
+    const a = document.createElement('a');
+    a.href = `/d/${d.id}`;
+    if (views) a.dataset.view = `рисуется: ${d.request}`;
+    const img = document.createElement('img');
+    img.alt = '';
+    img.hidden = true;
+    img.onload = () => { img.hidden = false; };
+    const badge = document.createElement('span');
+    badge.className = 'badge';
+    a.append(img, badge);
+    const card = {
+      el: a,
+      update(d) {
+        a.className = `sketch ${d.state}`;
+        badge.textContent = STATE[d.state] || d.state;
+        a.title = `${STATE[d.state] || ''}: ${d.request}${d.words?.length ? `\n\n${d.words.slice(-3).join('\n')}` : ''}`;
+        if (!d.picture) { img.hidden = true; img.removeAttribute('src'); delete img.dataset.v; }  // nothing drawn yet
+        else if (img.dataset.v !== String(d.picture)) { img.dataset.v = d.picture; img.src = `/api/drawings/${d.id}/picture.png?v=${d.picture}`; }
+      },
+    };
+    card.update(d);
+    return card;
+  }
+
+  function create(box, { scenes = [], drawing = [], current = null, world, go = false }) {
+    let here = current;
+    const mine = d => d.world === world.id;
+    const jobs = new Map(drawing.filter(mine).map(d => [d.id, { d, card: null }]));
+    let editing = {};  // scene → its open session {id, label, stage, seq}, as last pictured
+    const cards = new Map();  // scene → its card
+    const draw = () => {
+      box.textContent = '';
+      for (const j of jobs.values()) { j.card = j.card || jobCard(j.d, !go); box.append(j.card.el); }
+      for (const s of scenes) {
+        if (!cards.has(s.id)) cards.set(s.id, sceneCard(world, !go));
+        const card = cards.get(s.id);
+        card.update(s, here, editing[s.id]);
+        box.append(card.el);
+      }
+      box.hidden = !jobs.size && !scenes.length;
+    };
+    draw();
+
+    // the scenes being edited; a draft pictured at most every DRAFTS ms (the latest)
+    let later = null;
+    const redraw = () => { if (!later) later = setTimeout(() => { later = null; draw(); }, DRAFTS); };
+    const ended = async id => {  // the scene as it is now (a new version, or as it was)
+      const i = scenes.findIndex(x => x.id === id);
+      if (i < 0) return;
+      const s = await (await fetch(`/api/scenes/${id}`)).json();
+      scenes[i] = { ...scenes[i], version: s.current, look: s.look, title: s.spec?.title || '' };
+    };
+    async function edited(ev) {
+      if (ev.type === 'now') {
+        const was = editing;
+        editing = ev.sessions;
+        for (const id of Object.keys(was)) if (!editing[id]) await ended(Number(id));
+        draw();
+      } else if (!scenes.some(s => s.id === ev.scene)) {
+        // (another world's scene)
+      } else if (ev.type === 'session') { editing[ev.scene] = ev.session; draw(); }
+      else if (ev.type === 'log' && editing[ev.scene]) { editing[ev.scene].stage = ev.text; redraw(); }
+      else if (ev.type === 'draft' && editing[ev.scene]) { editing[ev.scene].seq = ev.seq; redraw(); }
+      else if (ev.type === 'end' && editing[ev.scene]?.id === ev.session) { delete editing[ev.scene]; await ended(ev.scene); draw(); }
+      else if (ev.type === 'content') { await ended(ev.scene); draw(); }  // (as main has it now: a module changed, a branch merged)
+    }
+    function handle(ev) {
+      const d = ev.job;
+      if (!d || !mine(d)) return;
+      const j = jobs.get(d.id);
+      if (ev.type === 'asked' || ev.type === 'started') {
+        if (j) { Object.assign(j.d, { state: d.state }, ev.type === 'started' ? { picture: 0 } : {}); j.card?.update(j.d); }
+        else { jobs.set(d.id, { d: { ...d, picture: 0, words: [] }, card: null }); draw(); }
+      } else if (ev.type === 'pictured' && j) {
+        j.d.picture = ev.picture; j.d.state = 'drawing'; j.card?.update(j.d);
+      } else if (ev.type === 'said' && j) {
+        j.d.words = [...(j.d.words || []), ev.text].slice(-3); j.card?.update(j.d);
+      } else if (ev.type === 'done') {
+        jobs.delete(d.id);
+        if (ev.scene && !scenes.some(s => s.id === ev.scene.id)) scenes.unshift(ev.scene);
+        draw();
+      } else if (ev.type === 'failed' && j) {
+        jobs.delete(d.id); draw();
+      }
+    }
+    return { handle, edited, at(id) { here = id; draw(); } };
+  }
+  return { create };
+})();