@moood/render 0.0.0 → 0.1.2

package/engine/scenestate.js

@@ -1,220 +1,220 @@
-// The scene's state and its scripts — the scene's own mechanics, knowing nothing of the game
-// played on it. The state is a set of values (spec.state holds where they start: "time": "20:00",
-// "dawn": 0, "girl": "waiting" …) — the scene's parameters. Whatever changes them, the scene reacts:
-//   scripts — spec.script and any element's `script`: JS run in the page (a clock that ticks, a
-//     ship that passes at 00:50, someone walking to where the state says);
-//   the game — whatever runs on the scene sets them (its agents, its master): the page passes them on;
-//   widgets — MooodState is global: get / set / on.
-// The painting code reads the current values as e.state and is repainted when they change. A
-// number may be set to move there over some seconds, along an easing curve (kit.js: smooth by
-// default — it starts and stops gently; linear, in, out, back, spring, anticipate…). What a value
-// was a moment ago stays known for a while (was): what lags behind — a coat's tail, hair, a
-// head that follows — reads it. A script may tell that something happened (scene.tell): the
-// game decides what it means.
-const MooodState = (() => {
-  let stage = null, tell = null, save = null, t0 = performance.now();
-  let values = {}, cur = {}, tweens = new Map(), listeners = [], timers = [], raf = 0, pending = {}, flushTimer = 0;
-  // each number's recent moves, to say what it was a moment ago: key → [{start, end, from, to, curve}]
-  // (a jump: start = end); kept for PAST seconds
-  const PAST = 10;
-  // the engine's own values (engine.js, gl.js: the camera a film moves, its fade): 0 until set
-  const ENGINE = { camera_x: 0, camera_h: 0, camera_z: 0, camera_look: 0, fade: 0 };
-  let past = new Map();
-  const report = (who, err) => (window.__mooodErrors = window.__mooodErrors || []).push(`script ${who}: ${err && err.message || err}`);
-
-  // where a move is at `now` (a move along a path: where its path is, `way` 0…1 of it)
-  const along = (m, now) => {
-    if (now >= m.end) return m.to;
-    if (now <= m.start) return m.from;
-    const u = m.curve((now - m.start) / (m.end - m.start));
-    return m.way ? m.way(u) : m.from + (m.to - m.from) * u;
-  };
-  // what a number was `ago` seconds ago (as it is now if it hasn't moved since)
-  function was(key, ago = 0) {
-    const now = performance.now(), at = now - ago * 1000, moves = past.get(key);
-    if (!moves || !moves.length) return cur[key];
-    for (let i = moves.length - 1; i >= 0; i--) if (moves[i].start <= at) return along(moves[i], at);
-    return moves[0].from;
-  }
-  function remember(key, move) {
-    const moves = past.get(key) || [], gone = move.start - PAST * 1000;
-    while (moves.length > 1 && moves[1].end < gone) moves.shift();
-    moves.push(move);
-    past.set(key, moves);
-  }
-
-  function publish() { cur = { ...values }; for (const [k, tw] of tweens) cur[k] = along(tw, performance.now()); stage?.setState(cur, was, sample); }
-  // the moving values, where they are now (the stage asks as it paints a frame)
-  function sample() {
-    if (!tweens.size) return;
-    const now = performance.now();
-    for (const [k, tw] of tweens) if (now >= tw.end) tweens.delete(k);
-    publish();
-  }
-  function tick() {
-    raf = 0;
-    sample();
-    if (tweens.size) raf = requestAnimationFrame(tick);
-  }
-  function emit(ev, key, ...args) {
-    for (const l of listeners.slice()) {
-      if (l.ev !== ev || (l.key != null && l.key !== key)) continue;
-      try { l.fn(...args); } catch (err) { report(l.who, err); }
-    }
-  }
-  // changes go to the game's keeping (if it keeps them), a few at a time
-  function keep(changes) {
-    if (!save) return;
-    Object.assign(pending, changes);
-    clearTimeout(flushTimer);
-    flushTimer = setTimeout(() => { const body = pending; pending = {}; save(body); }, 500);
-  }
-  // set a value; a number with `over` seconds moves there along `ease` (a curve's name, or u → u);
-  // null removes it. kept: false — the game set it and keeps it itself
-  function set(key, value, over = 0, ease = 'smooth', { kept = true } = {}) {
-    key = String(key);
-    const old = key in cur ? cur[key] : key in values ? values[key] : ENGINE[key];
-    if (value === undefined) value = null;
-    const now = performance.now();
-    if (typeof value === 'number' && typeof old === 'number' && over > 0 && value !== old) {
-      const move = { start: now, end: now + over * 1000, from: old, to: value, curve: MooodKit.anim.easeOf(ease) };
-      tweens.set(key, move);
-      remember(key, move);
-      if (!raf) raf = requestAnimationFrame(tick);
-    } else {
-      tweens.delete(key);
-      if (typeof value === 'number') remember(key, { start: now, end: now, from: typeof old === 'number' ? old : value, to: value, curve: MooodKit.anim.ease.linear });
-    }
-    if (value === null) delete values[key]; else values[key] = value;
-    publish();
-    if (kept) keep({ [key]: value });
-    if (JSON.stringify(old) !== JSON.stringify(value)) emit('change', key, value, old, key);
-  }
-  // several numbers moved together through points, as one movement: keys ['cart_a', 'cart_d'], points
-  // [[a, d], …] (from where they are now); over `over` seconds or at `speed` (their units a second,
-  // along the way), along `ease` — so it slows nowhere but where the curve says (a path cut into
-  // set()s stops at every corner). Returns its seconds.
-  function path(keys, points, { over = 0, speed = 0, ease = 'smooth' } = {}) {
-    keys = keys.map(String);
-    const from = keys.map(k => Number(k in cur ? cur[k] : k in values ? values[k] : ENGINE[k]) || 0);
-    const pts = [from, ...points.map(p => keys.map((_, i) => Number(p[i]) || 0))], to = pts[pts.length - 1];
-    const ends = [0];
-    for (let i = 1; i < pts.length; i++) ends.push(ends[i - 1] + Math.hypot(...pts[i].map((v, j) => v - pts[i - 1][j])));
-    const length = ends[ends.length - 1], seconds = over > 0 ? over : speed > 0 ? length / speed : 0;
-    if (!(seconds > 0 && length > 0)) { keys.forEach((k, i) => set(k, to[i])); return 0; }
-    const at = (u, j) => {
-      const d = u * length;
-      let i = 1;
-      while (i < ends.length - 1 && ends[i] < d) i++;
-      const f = (d - ends[i - 1]) / ((ends[i] - ends[i - 1]) || 1);
-      return pts[i - 1][j] + (pts[i][j] - pts[i - 1][j]) * f;
-    };
-    const now = performance.now(), curve = MooodKit.anim.easeOf(ease), old = keys.map(k => cur[k]);
-    keys.forEach((k, j) => {
-      const move = { start: now, end: now + seconds * 1000, from: from[j], to: to[j], curve, way: u => at(u, j) };
-      tweens.set(k, move);
-      remember(k, move);
-      values[k] = to[j];
-    });
-    if (!raf) raf = requestAnimationFrame(tick);
-    publish();
-    keep(Object.fromEntries(keys.map((k, j) => [k, to[j]])));
-    keys.forEach((k, j) => { if (old[j] !== to[j]) emit('change', k, to[j], old[j], k); });
-    return seconds;
-  }
-  // an angle in degrees, turned the short way round (from 170 to −170 is 20°, not 340°)
-  function turn(key, degrees, over = 0, ease = 'smooth') {
-    const old = Number(key in cur ? cur[key] : values[key]) || 0;
-    set(key, old + ((((degrees - old) % 360) + 540) % 360 - 180), over, ease);
-  }
-
-  // the API a script gets: for the scene (id null) or for one element
-  function api(who, id, element, shared) {
-    const own = fn => (...a) => { try { fn(...a); } catch (err) { report(who, err); } };
-    const after = (seconds, fn) => { const h = setTimeout(own(fn), Math.max(0, seconds) * 1000); timers.push(() => clearTimeout(h)); };
-    return {
-      id, element,
-      anim: MooodKit.anim, kit: shared.kit, lib: shared.lib,
-      get state() { return cur; },
-      get time() { return (performance.now() - t0) / 1000; },   // seconds since the scene opened
-      get: key => cur[key],
-      set: (key, value, over, ease) => set(key, value, over, ease),
-      turn: (key, degrees, over, ease) => turn(key, degrees, over, ease),
-      path: (keys, points, opts) => path(keys, points, opts),
-      was: (key, ago) => was(key, ago),
-      // a platformer's hero now: { across, elevation (metres), ground } — or null
-      hero: () => stage?.hero?.() ?? null,
-      // something happened in the scene (about one of its elements, if `about`): the game hears it
-      tell: (text, about = null) => tell?.(String(text), about),
-      every(seconds, fn) { const h = setInterval(own(fn), Math.max(0.05, seconds) * 1000); timers.push(() => clearInterval(h)); },
-      after,
-      // a timeline: rows [at, key, value, over?, ease?] — or [at, fn] — where `at` is the second it
-      // starts (from now), or '+s': s seconds after the row before it ends ('+0': as it ends); a
-      // key in degrees turned the short way: [at, key, {turn: degrees}, over?, ease?]; numbers
-      // moved together through points (path, above): [at, [keys], {path: points}, over, ease?].
-      // Returns when the last row ends (seconds from now).
-      play(rows) {
-        let end = 0, last = 0;
-        for (const row of rows) {
-          const [at, a, b, over = 0, ease] = row;
-          const start = typeof at === 'string' && at.startsWith('+') ? last + Number(at.slice(1)) : Number(at);
-          if (typeof a === 'function') after(start, a);
-          else if (Array.isArray(a) && b && typeof b === 'object' && Array.isArray(b.path)) after(start, () => path(a, b.path, { over, ease }));
-          else if (b && typeof b === 'object' && 'turn' in b) after(start, () => turn(a, b.turn, over, ease));
-          else after(start, () => set(a, b, over, ease));
-          last = start + (typeof a === 'function' ? 0 : over);
-          end = Math.max(end, last);
-        }
-        return end;
-      },
-      // on('change', fn(value, old, key)) · on('change', key, fn) · on('load', fn(state))
-      on(ev, a, b) {
-        const fn = typeof a === 'function' ? a : b, key = typeof a === 'function' ? null : String(a);
-        listeners.push({ ev, key, fn, who });
-      },
-    };
-  }
-
-  // (re)starts the scene: its starting values, `state` on top (what the game kept), then the
-  // scripts — once what they share (the world's modules, the scene's lib) is here. opts: stage;
-  // modules — where the spec's modules come from (kit.js: {world, refs} or {texts});
-  // tell(text, about) — what the scripts tell; save(changes) — the game keeps the values the scene
-  // changes (none: they live as long as the page)
-  let run = 0;
-  function start(spec, state = {}, opts = {}) {
-    stop();
-    stage = opts.stage || stage;
-    tell = opts.tell || null;
-    save = opts.save || null;
-    values = { ...(spec?.state && typeof spec.state === 'object' ? spec.state : {}), ...state };
-    past = new Map();
-    t0 = performance.now();
-    publish();
-    emit('load', null, cur);
-    const mine = ++run;
-    const go = shared => {
-      if (mine !== run) return; // started again meanwhile
-      const exec = (code, who, id, element) => {
-        if (typeof code !== 'string' || !code.trim()) return;
-        try { new Function('scene', code)(api(who, id, element, shared)); } catch (err) { report(who, err); }
-      };
-      exec(spec?.script, 'scene', null, null);
-      for (const o of spec?.objects || []) exec(o.script, o.name || o.id, o.id || null, o);
-    };
-    const shared = MooodKit.shared(spec, opts.modules);
-    if (shared instanceof Promise) shared.then(go); else go(shared);
-  }
-  function stop() {
-    for (const off of timers) off();
-    // the scripts' listeners go; widgets' stay (a widget lives on while its html is the same)
-    timers = []; listeners = listeners.filter(l => l.who === 'widget'); tweens.clear();
-    cancelAnimationFrame(raf); raf = 0;
-  }
-
-  return {
-    start, stop, set, turn, path, was,
-    get: key => cur[key],
-    all: () => cur,
-    on: (ev, a, b) => api('widget', null, null, { kit: {}, lib: {} }).on(ev, a, b),
-  };
-})();
+// The scene's state and its scripts — the scene's own mechanics, knowing nothing of the game
+// played on it. The state is a set of values (spec.state holds where they start: "time": "20:00",
+// "dawn": 0, "girl": "waiting" …) — the scene's parameters. Whatever changes them, the scene reacts:
+//   scripts — spec.script and any element's `script`: JS run in the page (a clock that ticks, a
+//     ship that passes at 00:50, someone walking to where the state says);
+//   the game — whatever runs on the scene sets them (its agents, its master): the page passes them on;
+//   widgets — MooodState is global: get / set / on.
+// The painting code reads the current values as e.state and is repainted when they change. A
+// number may be set to move there over some seconds, along an easing curve (kit.js: smooth by
+// default — it starts and stops gently; linear, in, out, back, spring, anticipate…). What a value
+// was a moment ago stays known for a while (was): what lags behind — a coat's tail, hair, a
+// head that follows — reads it. A script may tell that something happened (scene.tell): the
+// game decides what it means.
+const MooodState = (() => {
+  let stage = null, tell = null, save = null, t0 = performance.now();
+  let values = {}, cur = {}, tweens = new Map(), listeners = [], timers = [], raf = 0, pending = {}, flushTimer = 0;
+  // each number's recent moves, to say what it was a moment ago: key → [{start, end, from, to, curve}]
+  // (a jump: start = end); kept for PAST seconds
+  const PAST = 10;
+  // the engine's own values (engine.js, gl.js: the camera a film moves, its fade): 0 until set
+  const ENGINE = { camera_x: 0, camera_h: 0, camera_z: 0, camera_look: 0, fade: 0 };
+  let past = new Map();
+  const report = (who, err) => (window.__mooodErrors = window.__mooodErrors || []).push(`script ${who}: ${err && err.message || err}`);
+
+  // where a move is at `now` (a move along a path: where its path is, `way` 0…1 of it)
+  const along = (m, now) => {
+    if (now >= m.end) return m.to;
+    if (now <= m.start) return m.from;
+    const u = m.curve((now - m.start) / (m.end - m.start));
+    return m.way ? m.way(u) : m.from + (m.to - m.from) * u;
+  };
+  // what a number was `ago` seconds ago (as it is now if it hasn't moved since)
+  function was(key, ago = 0) {
+    const now = performance.now(), at = now - ago * 1000, moves = past.get(key);
+    if (!moves || !moves.length) return cur[key];
+    for (let i = moves.length - 1; i >= 0; i--) if (moves[i].start <= at) return along(moves[i], at);
+    return moves[0].from;
+  }
+  function remember(key, move) {
+    const moves = past.get(key) || [], gone = move.start - PAST * 1000;
+    while (moves.length > 1 && moves[1].end < gone) moves.shift();
+    moves.push(move);
+    past.set(key, moves);
+  }
+
+  function publish() { cur = { ...values }; for (const [k, tw] of tweens) cur[k] = along(tw, performance.now()); stage?.setState(cur, was, sample); }
+  // the moving values, where they are now (the stage asks as it paints a frame)
+  function sample() {
+    if (!tweens.size) return;
+    const now = performance.now();
+    for (const [k, tw] of tweens) if (now >= tw.end) tweens.delete(k);
+    publish();
+  }
+  function tick() {
+    raf = 0;
+    sample();
+    if (tweens.size) raf = requestAnimationFrame(tick);
+  }
+  function emit(ev, key, ...args) {
+    for (const l of listeners.slice()) {
+      if (l.ev !== ev || (l.key != null && l.key !== key)) continue;
+      try { l.fn(...args); } catch (err) { report(l.who, err); }
+    }
+  }
+  // changes go to the game's keeping (if it keeps them), a few at a time
+  function keep(changes) {
+    if (!save) return;
+    Object.assign(pending, changes);
+    clearTimeout(flushTimer);
+    flushTimer = setTimeout(() => { const body = pending; pending = {}; save(body); }, 500);
+  }
+  // set a value; a number with `over` seconds moves there along `ease` (a curve's name, or u → u);
+  // null removes it. kept: false — the game set it and keeps it itself
+  function set(key, value, over = 0, ease = 'smooth', { kept = true } = {}) {
+    key = String(key);
+    const old = key in cur ? cur[key] : key in values ? values[key] : ENGINE[key];
+    if (value === undefined) value = null;
+    const now = performance.now();
+    if (typeof value === 'number' && typeof old === 'number' && over > 0 && value !== old) {
+      const move = { start: now, end: now + over * 1000, from: old, to: value, curve: MooodKit.anim.easeOf(ease) };
+      tweens.set(key, move);
+      remember(key, move);
+      if (!raf) raf = requestAnimationFrame(tick);
+    } else {
+      tweens.delete(key);
+      if (typeof value === 'number') remember(key, { start: now, end: now, from: typeof old === 'number' ? old : value, to: value, curve: MooodKit.anim.ease.linear });
+    }
+    if (value === null) delete values[key]; else values[key] = value;
+    publish();
+    if (kept) keep({ [key]: value });
+    if (JSON.stringify(old) !== JSON.stringify(value)) emit('change', key, value, old, key);
+  }
+  // several numbers moved together through points, as one movement: keys ['cart_a', 'cart_d'], points
+  // [[a, d], …] (from where they are now); over `over` seconds or at `speed` (their units a second,
+  // along the way), along `ease` — so it slows nowhere but where the curve says (a path cut into
+  // set()s stops at every corner). Returns its seconds.
+  function path(keys, points, { over = 0, speed = 0, ease = 'smooth' } = {}) {
+    keys = keys.map(String);
+    const from = keys.map(k => Number(k in cur ? cur[k] : k in values ? values[k] : ENGINE[k]) || 0);
+    const pts = [from, ...points.map(p => keys.map((_, i) => Number(p[i]) || 0))], to = pts[pts.length - 1];
+    const ends = [0];
+    for (let i = 1; i < pts.length; i++) ends.push(ends[i - 1] + Math.hypot(...pts[i].map((v, j) => v - pts[i - 1][j])));
+    const length = ends[ends.length - 1], seconds = over > 0 ? over : speed > 0 ? length / speed : 0;
+    if (!(seconds > 0 && length > 0)) { keys.forEach((k, i) => set(k, to[i])); return 0; }
+    const at = (u, j) => {
+      const d = u * length;
+      let i = 1;
+      while (i < ends.length - 1 && ends[i] < d) i++;
+      const f = (d - ends[i - 1]) / ((ends[i] - ends[i - 1]) || 1);
+      return pts[i - 1][j] + (pts[i][j] - pts[i - 1][j]) * f;
+    };
+    const now = performance.now(), curve = MooodKit.anim.easeOf(ease), old = keys.map(k => cur[k]);
+    keys.forEach((k, j) => {
+      const move = { start: now, end: now + seconds * 1000, from: from[j], to: to[j], curve, way: u => at(u, j) };
+      tweens.set(k, move);
+      remember(k, move);
+      values[k] = to[j];
+    });
+    if (!raf) raf = requestAnimationFrame(tick);
+    publish();
+    keep(Object.fromEntries(keys.map((k, j) => [k, to[j]])));
+    keys.forEach((k, j) => { if (old[j] !== to[j]) emit('change', k, to[j], old[j], k); });
+    return seconds;
+  }
+  // an angle in degrees, turned the short way round (from 170 to −170 is 20°, not 340°)
+  function turn(key, degrees, over = 0, ease = 'smooth') {
+    const old = Number(key in cur ? cur[key] : values[key]) || 0;
+    set(key, old + ((((degrees - old) % 360) + 540) % 360 - 180), over, ease);
+  }
+
+  // the API a script gets: for the scene (id null) or for one element
+  function api(who, id, element, shared) {
+    const own = fn => (...a) => { try { fn(...a); } catch (err) { report(who, err); } };
+    const after = (seconds, fn) => { const h = setTimeout(own(fn), Math.max(0, seconds) * 1000); timers.push(() => clearTimeout(h)); };
+    return {
+      id, element,
+      anim: MooodKit.anim, kit: shared.kit, lib: shared.lib,
+      get state() { return cur; },
+      get time() { return (performance.now() - t0) / 1000; },   // seconds since the scene opened
+      get: key => cur[key],
+      set: (key, value, over, ease) => set(key, value, over, ease),
+      turn: (key, degrees, over, ease) => turn(key, degrees, over, ease),
+      path: (keys, points, opts) => path(keys, points, opts),
+      was: (key, ago) => was(key, ago),
+      // a platformer's hero now: { across, elevation (metres), ground } — or null
+      hero: () => stage?.hero?.() ?? null,
+      // something happened in the scene (about one of its elements, if `about`): the game hears it
+      tell: (text, about = null) => tell?.(String(text), about),
+      every(seconds, fn) { const h = setInterval(own(fn), Math.max(0.05, seconds) * 1000); timers.push(() => clearInterval(h)); },
+      after,
+      // a timeline: rows [at, key, value, over?, ease?] — or [at, fn] — where `at` is the second it
+      // starts (from now), or '+s': s seconds after the row before it ends ('+0': as it ends); a
+      // key in degrees turned the short way: [at, key, {turn: degrees}, over?, ease?]; numbers
+      // moved together through points (path, above): [at, [keys], {path: points}, over, ease?].
+      // Returns when the last row ends (seconds from now).
+      play(rows) {
+        let end = 0, last = 0;
+        for (const row of rows) {
+          const [at, a, b, over = 0, ease] = row;
+          const start = typeof at === 'string' && at.startsWith('+') ? last + Number(at.slice(1)) : Number(at);
+          if (typeof a === 'function') after(start, a);
+          else if (Array.isArray(a) && b && typeof b === 'object' && Array.isArray(b.path)) after(start, () => path(a, b.path, { over, ease }));
+          else if (b && typeof b === 'object' && 'turn' in b) after(start, () => turn(a, b.turn, over, ease));
+          else after(start, () => set(a, b, over, ease));
+          last = start + (typeof a === 'function' ? 0 : over);
+          end = Math.max(end, last);
+        }
+        return end;
+      },
+      // on('change', fn(value, old, key)) · on('change', key, fn) · on('load', fn(state))
+      on(ev, a, b) {
+        const fn = typeof a === 'function' ? a : b, key = typeof a === 'function' ? null : String(a);
+        listeners.push({ ev, key, fn, who });
+      },
+    };
+  }
+
+  // (re)starts the scene: its starting values, `state` on top (what the game kept), then the
+  // scripts — once what they share (the world's modules, the scene's lib) is here. opts: stage;
+  // modules — where the spec's modules come from (kit.js: {world, refs} or {texts});
+  // tell(text, about) — what the scripts tell; save(changes) — the game keeps the values the scene
+  // changes (none: they live as long as the page)
+  let run = 0;
+  function start(spec, state = {}, opts = {}) {
+    stop();
+    stage = opts.stage || stage;
+    tell = opts.tell || null;
+    save = opts.save || null;
+    values = { ...(spec?.state && typeof spec.state === 'object' ? spec.state : {}), ...state };
+    past = new Map();
+    t0 = performance.now();
+    publish();
+    emit('load', null, cur);
+    const mine = ++run;
+    const go = shared => {
+      if (mine !== run) return; // started again meanwhile
+      const exec = (code, who, id, element) => {
+        if (typeof code !== 'string' || !code.trim()) return;
+        try { new Function('scene', code)(api(who, id, element, shared)); } catch (err) { report(who, err); }
+      };
+      exec(spec?.script, 'scene', null, null);
+      for (const o of spec?.objects || []) exec(o.script, o.name || o.id, o.id || null, o);
+    };
+    const shared = MooodKit.shared(spec, opts.modules);
+    if (shared instanceof Promise) shared.then(go); else go(shared);
+  }
+  function stop() {
+    for (const off of timers) off();
+    // the scripts' listeners go; widgets' stay (a widget lives on while its html is the same)
+    timers = []; listeners = listeners.filter(l => l.who === 'widget'); tweens.clear();
+    cancelAnimationFrame(raf); raf = 0;
+  }
+
+  return {
+    start, stop, set, turn, path, was,
+    get: key => cur[key],
+    all: () => cur,
+    on: (ev, a, b) => api('widget', null, null, { kit: {}, lib: {} }).on(ev, a, b),
+  };
+})();