blockyard 0.0.9 → 0.1.1

package/public/js/agents.js

@@ -268,6 +268,91 @@ function bloom(ctx, x, y, r, rgb, a = 1) {
   }
 }
 
+/**
+ * THE SAUCER, drawn at a point on screen -- shared, because two effects fly the same craft
+ * (operator, 2026-09-15: "The top-down view in block space coming from a sphere does not look
+ * good. Can we re-purpose the UFO"). The scan beam used to hang from a glowing ball, which from
+ * directly above is just a bright blob; a craft reads as a source even top-down, because its rim
+ * and its dome give it an orientation a sphere does not have.
+ *
+ * `r` is in PIXELS: callers size it from view.unit, never from lw (see bloom).
+ */
+/**
+ * THE SAUCER SEEN FROM ABOVE (operator, 2026-09-15: "We need a top-down rendering of the UFO for
+ * this scene"). The side-on craft below is right where the camera looks along the board; on the
+ * block board it looks down, and a dome-and-rim drawn edge-on there is just a blue smear -- which
+ * is what the screenshot showed.
+ *
+ * From above a saucer is concentric: hull, inner ring, canopy, and running lights spaced around
+ * the rim. `squash` is the camera's depth foreshortening (oblique.dy), so the circles come out as
+ * the same ellipses the board itself is drawn in.
+ */
+export function saucerAbove(ctx, cx, cy, r, a = 1, squash = 1, phase = 0) {
+  const ell = (rr, fill) => {
+    ctx.fillStyle = fill;
+    ctx.beginPath();
+    for (let i = 0; i <= 28; i++) {
+      const th = (i / 28) * Math.PI * 2;
+      const x = cx + Math.cos(th) * rr, y = cy + Math.sin(th) * rr * squash;
+      if (i) ctx.lineTo(x, y); else ctx.moveTo(x, y);
+    }
+    ctx.closePath(); ctx.fill();
+  };
+  ell(r, `rgba(70,110,170,${(0.85 * a).toFixed(3)})`);            // the hull, dark against the glow
+  ell(r * 0.74, `rgba(120,180,255,${(0.9 * a).toFixed(3)})`);     // the lit ring
+  ell(r * 0.40, `rgba(205,235,255,${(0.95 * a).toFixed(3)})`);    // the canopy
+  ell(r * 0.18, `rgba(255,255,255,${(0.95 * a).toFixed(3)})`);    // its highlight
+  // running lights: spaced round the rim, turning slowly so it reads as a craft and not a target
+  for (let i = 0; i < 8; i++) {
+    const th = phase + (i / 8) * Math.PI * 2;
+    const x = cx + Math.cos(th) * r * 0.88, y = cy + Math.sin(th) * r * 0.88 * squash;
+    const tw = 0.55 + 0.45 * Math.sin(phase * 3 + i * 1.9);
+    ctx.fillStyle = `rgba(255,255,255,${(0.9 * tw * a).toFixed(3)})`;
+    ctx.beginPath(); ctx.arc(x, y, Math.max(0.6, r * 0.075), 0, Math.PI * 2); ctx.fill();
+  }
+}
+
+export function saucer(ctx, cx, cy, r, a = 1) {
+  const dome = [];
+  for (let i = 0; i <= 20; i++) { const ang = Math.PI + (i / 20) * Math.PI; dome.push({ x: cx + Math.cos(ang) * r, y: cy + Math.sin(ang) * r * 0.42 }); }
+  poly(ctx, dome, `rgba(120,180,255,${(0.9 * a).toFixed(3)})`);
+  poly(ctx, [
+    { x: cx - r, y: cy }, { x: cx + r, y: cy },
+    { x: cx + r * 0.7, y: cy + r * 0.25 }, { x: cx - r * 0.7, y: cy + r * 0.25 },
+  ], `rgba(200,230,255,${(0.95 * a).toFixed(3)})`);
+  bloom(ctx, cx, cy + r * 0.2, r * 0.8, [180, 230, 255], 0.5 * a);
+}
+
+/**
+ * A lens flare at a bright point: an anamorphic streak in the colour, a white core, four thin
+ * rays turning slowly, and a run of faint ghosts along the line toward the picture's middle.
+ * `f` is 1 at full and 0 gone. Gradients only, no composite modes (the canvas rules).
+ */
+export function lensFlare(ctx, x, y, L, rgb, f, view, lw) {
+  if (f <= 0) return;
+  const c = rgb.join(',');
+  const lin = (x0, y0, x1, y1, stops) => {
+    const g = typeof ctx.createLinearGradient === 'function' ? ctx.createLinearGradient(x0, y0, x1, y1) : null;
+    if (!g || typeof g.addColorStop !== 'function') return stops[Math.floor(stops.length / 2)][1];
+    for (const [o, col] of stops) g.addColorStop(o, col);
+    return g;
+  };
+  const stroke = (x0, y0, x1, y1, fill, w) => { ctx.strokeStyle = fill; ctx.lineWidth = Math.max(lw * 0.8, w); ctx.beginPath(); ctx.moveTo(x0, y0); ctx.lineTo(x1, y1); ctx.stroke(); };
+  stroke(x - L * 0.7, y, x + L * 0.7, y, lin(x - L * 0.7, y, x + L * 0.7, y, [[0, `rgba(${c},0)`], [0.5, `rgba(${c},${(0.25 * f).toFixed(3)})`], [1, `rgba(${c},0)`]]), L * 0.06);
+  stroke(x - L, y, x + L, y, lin(x - L, y, x + L, y, [[0, `rgba(${c},0)`], [0.35, `rgba(${c},${(0.35 * f).toFixed(3)})`], [0.5, `rgba(255,255,255,${(0.9 * f).toFixed(3)})`], [0.65, `rgba(${c},${(0.35 * f).toFixed(3)})`], [1, `rgba(${c},0)`]]), L * 0.018);
+  const spin = (view.now ?? 0) * 0.0004;
+  for (let k = 0; k < 4; k++) {
+    const ang = spin + (k / 4) * Math.PI, rl = L * 0.45;
+    const x0 = x - Math.cos(ang) * rl, y0 = y - Math.sin(ang) * rl, x1 = x + Math.cos(ang) * rl, y1 = y + Math.sin(ang) * rl;
+    stroke(x0, y0, x1, y1, lin(x0, y0, x1, y1, [[0, 'rgba(255,255,255,0)'], [0.5, `rgba(255,255,255,${(0.5 * f).toFixed(3)})`], [1, 'rgba(255,255,255,0)']]), L * 0.008);
+  }
+  const cx0 = (view.boardW ?? 0) / 2, cy0 = -(view.boardH ?? 0) / 4;
+  for (let k = 1; k <= 4; k++) {
+    const t = k * 0.3, gx = x + (cx0 - x) * t, gy = y + (cy0 - y) * t, gr = L * 0.05 * (0.6 + t), ga = 0.14 * f * (1 - k / 6);
+    ctx.fillStyle = `rgba(${c},${ga.toFixed(3)})`; ctx.beginPath(); ctx.arc(gx, gy, Math.max(1, gr), 0, Math.PI * 2); ctx.fill();
+  }
+}
+
 /** A square standing at grid (x, y) at height z, as screen points. */
 const quad = (view, x, y, z, r) => [
   project(x - r, y - r, z, view), project(x + r, y - r, z, view),
@@ -504,16 +589,8 @@ defineAgent('tractor', {
         { x: base.x + w1 * 0.45, y: base.y }, { x: base.x - w1 * 0.45, y: base.y },
       ], `rgba(220,245,255,${(0.3 * t.beam).toFixed(3)})`);
     }
-    // the saucer: a flattened dome with a lit rim
-    const r = U * 1.6;
-    const dome = [];
-    for (let i = 0; i <= 20; i++) { const ang = Math.PI + (i / 20) * Math.PI; dome.push({ x: c.x + Math.cos(ang) * r, y: c.y + Math.sin(ang) * r * 0.42 }); }
-    poly(ctx, dome, 'rgba(120,180,255,0.9)');
-    poly(ctx, [
-      { x: c.x - r, y: c.y }, { x: c.x + r, y: c.y },
-      { x: c.x + r * 0.7, y: c.y + r * 0.25 }, { x: c.x - r * 0.7, y: c.y + r * 0.25 },
-    ], 'rgba(200,230,255,0.95)');
-    bloom(ctx, c.x, c.y + r * 0.2, r * 0.8, [180, 230, 255], 0.5);
+    // the saucer, shared with the scan beam's source (saucer() above)
+    saucer(ctx, c.x, c.y, U * 1.6);
     void lw;
   },
 });
@@ -721,11 +798,19 @@ defineAgent('stormball', {
     // range, so the candles it passes are beside it and the arcs strike what it comes near
     // (operator, 2026-09-14: "electrifying any elements it comes near")
     const line = st?.axes?.line;
-    let alt = highest + 3.5;
+    let alt = highest + 3.5, zPath = null;
     if (line?.length > 1) {
-      let lo = Infinity, hi = -Infinity;
-      for (const p of line) { lo = Math.min(lo, p.z); hi = Math.max(hi, p.z); }
-      alt = lo + (hi - lo) * (0.35 + 0.5 * rnd());
+      let hi = -Infinity;
+      for (const p of line) hi = Math.max(hi, p.z);
+      // UP AND DOWN THE WHOLE CHART (operator, 2026-09-15: "it's not moving up and down enough
+      // during transit. It should try to cover a lot of space"): the height is two sines over the
+      // run, the slow one swinging across most of the range, the quick one on top. The range is
+      // the ground to the line's high -- not the line's own low, which sits above the volume band
+      // (operator, later: "The lightning ball really stays in the top 2/3's of the screen. It
+      // needs to seek the ground level more than it presently does before rising again")
+      const lo = 1;
+      alt = (lo + hi) / 2;
+      zPath = { lo, hi, f: [1.2 + rnd() * 1.3, 3 + rnd() * 3], ph: [rnd() * Math.PI * 2, rnd() * Math.PI * 2] };
     }
     // across the board the long way round, far enough past both edges to start and end off-screen
     const leftToRight = rnd() < 0.5;
@@ -736,35 +821,49 @@ defineAgent('stormball', {
     // "have it fully moved off the display before you remove it"): the corona reaches 12 units
     // from the centre and the trail seven behind, and at 8 the run ended with the glow still
     // on the chart and cut off dead
-    const margin = st?.axes?.line?.length > 1 ? 16 : Math.max(W, H) * 0.55 + 6;
+    const margin = st?.axes?.line?.length > 1 ? 20 : Math.max(W, H) * 0.55 + 6;
     const from = { x: leftToRight ? -margin : W + margin, y: H * (0.22 + 0.56 * rnd()) };
     const to = { x: leftToRight ? W + margin : -margin, y: H * (0.22 + 0.56 * rnd()) };
     const weave = { amp: 1.5 + 2 * rnd(), cycles: 1 + rnd() * 1.5, phase: rnd() * Math.PI * 2 };
-    // bursts of arcs: a few a second, one to three at a time, each alive for a moment
+    // bursts of arcs: a few a second, one to three at a time, each alive for a moment -- half as
+    // often on the price board (operator, 2026-09-15: "Tone down chance of emitting lightning by
+    // 50%"), where the run is also slower, so per second it is quieter still
     const arcs = [];
-    for (let u = 0.03; u < 0.97; u += 0.016 + 0.035 * rnd()) {
+    // ...a fifth quieter again ("Reduce ball lighting electricity chance by 20%"), then 15% more
+    // ("increase the ball lightning strike chance by +15%"): 2.5 / 1.15
+    const every = line?.length > 1 ? 2.17 : 1;
+    for (let u = 0.03; u < 0.97; u += (0.016 + 0.035 * rnd()) * every) {
       const n = 1 + Math.floor(rnd() * 4);
       for (let k = 0; k < n; k++) {
         const arc = { u0: u + rnd() * 0.01, life: 0.02 + 0.035 * rnd(), ang: rnd() * Math.PI * 2, reach: 3.5 + 8 * rnd(), seed: Math.floor(rnd() * 1e9) };
+        // one strike in five flares: a lens flare blooms where it lands (operator, 2026-09-15:
+        // "Consider adding the lense flare effect on occasional lightning strikes")
+        if (rnd() < 0.2) arc.flare = true;
         // A SECOND ARC OFF THE STRUCK BLOCK, AND SOMETIMES A THIRD (operator, 2026-09-14: "a small
         // chance for a second arc to spawn from the block and arc to a different block", then "Make
         // the secondary arcing more frequent, and have a 50% for an additional third arc"). Half
         // the arcs carry a chain -- its own direction and reach from the block the first lands on,
         // to a different block -- and half of those chain once more from the second block to a
         // third. Decided here, so a replay throws the same chains.
-        if (rnd() < 0.5) {
+        // ...then a quarter fewer of each (2026-09-15: "decrease secondary and third arcing by 25%")
+        if (rnd() < 0.375) {
           arc.chain = { ang: rnd() * Math.PI * 2, reach: 2.5 + 6 * rnd(), seed: Math.floor(rnd() * 1e9) };
-          if (rnd() < 0.5) arc.chain.next = { ang: rnd() * Math.PI * 2, reach: 2.5 + 6 * rnd(), seed: Math.floor(rnd() * 1e9) };
+          if (rnd() < 0.375) arc.chain.next = { ang: rnd() * Math.PI * 2, reach: 2.5 + 6 * rnd(), seed: Math.floor(rnd() * 1e9) };
         }
         arcs.push(arc);
       }
     }
-    return { from, to, weave, alt, arcs, W, H, top };
+    return { from, to, weave, alt, zPath, arcs, W, H, top };
   },
   frame(a, u) {
     const at = (uu) => {
       const x = a.from.x + (a.to.x - a.from.x) * uu;
       const y = a.from.y + (a.to.y - a.from.y) * uu + a.weave.amp * Math.sin(uu * Math.PI * 2 * a.weave.cycles + a.weave.phase);
+      if (a.zPath) {
+        const { lo, hi, f, ph } = a.zPath;
+        const w = 0.5 + 0.44 * Math.sin(uu * Math.PI * 2 * f[0] + ph[0]) + 0.14 * Math.sin(uu * Math.PI * 2 * f[1] + ph[1]);
+        return { x, y, z: lo + (hi - lo) * Math.max(0, Math.min(1, w)) };
+      }
       return { x, y, z: a.alt + 0.6 * Math.sin(uu * 17) };
     };
     const ball = at(u);
@@ -790,20 +889,30 @@ defineAgent('stormball', {
       return hit;
     };
     const live = [];
-    const heads = [{ x: ball.x, y: ball.y, color: [70, 180, 255], alpha: 0.7, r: 4.5 }];
+    // LIGHT EMITTERS (operator, 2026-09-15: "The lightning ball needs to illuminate anything it
+    // comes near with an electric hazy white effect. Need the lightning strikes to emit lights").
+    // `heads` is how an agent lights the board (fxAt): the ball is a wide hazy white source now,
+    // not a blue tint, and every strike is a source of its own where it lands
+    const heads = [{ x: ball.x, y: ball.y, color: [225, 240, 255], alpha: 0.95, r: 6.5 }];
     for (const arc of a.arcs) {
       const age = (u - arc.u0) / arc.life;
       if (age < 0 || age > 2.2) continue;                         // alive, then an afterglow on the block
       const p = at(arc.u0);
+      // NO ARCS FROM OFF THE BOARD (2026-09-15: "make the lightning ball completely disappear off
+      // the viewport before killing it. Seeing it flash out at the end"): a ball past the edge
+      // could still reach a candle at the edge with an arc, so the last thing seen was a bolt
+      // from nowhere; while it is off the board nothing is drawn from it -- not even an arc it
+      // threw a moment before the edge -- and the run ends with it long gone
+      if (a.zPath && (ball.x < -1 || ball.x > a.W + 1)) continue;
       // the block the arc strikes: the tallest cell near where it is thrown, and none if the floor is bare
       const hit = strike(p.x + Math.cos(arc.ang) * arc.reach, p.y + Math.sin(arc.ang) * arc.reach);
       if (!hit) continue;
-      if (age <= 1) live.push({ to: hit, seed: arc.seed, strength: 1 - age * 0.6 });
+      if (age <= 1) live.push({ to: hit, seed: arc.seed, strength: 1 - age * 0.6, age, flare: !!arc.flare });
       // THE BLOCK IT TOUCHES IS ELECTRIFIED: a hard blue flare that flickers while the arc lives and
       // dies away after it -- lit through fxAt's heads, so only the cubes actually struck light up
       const flicker = 0.7 + 0.3 * Math.sin(u * 900 + arc.seed);
       const glow = age <= 1 ? flicker : Math.max(0, 1 - (age - 1) / 1.2) * 0.7;
-      heads.push({ x: hit.x, y: hit.y, color: [60, 190, 255], alpha: Math.min(1, glow * 1.25), r: 1.2 });
+      heads.push({ x: hit.x, y: hit.y, color: [230, 245, 255], alpha: Math.min(1, glow * 1.25), r: 2.4 });
       // ...and the chain, if this arc carries one: from the struck block to another. ITS OWN
       // EVENT, not a bend in the first (2026-09-14: "I'm not seeing secondary arcs" -- they were
       // there in a third of the arc frames, drawn in the first arc's colour from the first arc's
@@ -823,7 +932,7 @@ defineAgent('stormball', {
         if (!to) break;
         if (age2 <= 1) live.push({ from, to, seed: link.seed, strength: Math.min(1, 1.2 * (1 - age2 * 0.5)), chain: hop, age: age2 });
         const glow2 = age2 <= 1 ? 0.7 + 0.3 * Math.sin(u * 900 + link.seed) : Math.max(0, 1 - (age2 - 1) / 1.2) * 0.7;
-        heads.push({ x: to.x, y: to.y, color: [120, 255, 170], alpha: Math.min(1, glow2 * 1.25), r: 1.2 });
+        heads.push({ x: to.x, y: to.y, color: [200, 255, 225], alpha: Math.min(1, glow2 * 1.25), r: 2.2 });
         struck.push(to); from = to; link = link.next; hop++;
       }
     }
@@ -838,42 +947,110 @@ defineAgent('stormball', {
     // bigger than the first cut on the block board: it is the one thing there (operator: "visually
     // stunning"); half that on the price board (operator, 2026-09-14: "make the ball lightning half
     // the size it is now"), where it shares the view with the line
-    const R = U * (view.axes?.line?.length > 1 ? 1.7 : 3.4);
-    // a jagged bolt between two screen points, `kink` pixels of wander, re-rolled each frame
-    const bolt = (p, q, kink, steps) => {
-      const pts = [p];
-      for (let i = 1; i < steps; i++) {
-        const f = i / steps, nx = -(q.y - p.y), ny = q.x - p.x, L = Math.hypot(nx, ny) || 1;
-        const off = (Math.random() - 0.5) * 2 * kink * Math.sin(Math.PI * f);
-        pts.push({ x: p.x + (q.x - p.x) * f + (nx / L) * off, y: p.y + (q.y - p.y) * f + (ny / L) * off });
-      }
-      pts.push(q);
+    // ...then half again (2026-09-15: "the lightning ball is still too large. shrink it up by half again")
+    const R = U * (view.axes?.line?.length > 1 ? 0.85 : 3.4);
+    // LIGHTNING THAT LOOKS LIKE LIGHTNING (operator, 2026-09-15: "the lightning ball tendrils on
+    // the markets page look too big and jagged. Is there a way to thin them up a bit, or make
+    // substantial visual improvements to the lightning arcs?"). The first bolt was nine points
+    // thrown 18% of the length to either side, re-rolled every frame, in strokes sized to the grid
+    // unit -- on the price board, whose unit is three times the block board's, that was a fat
+    // zigzag flailing at 60 Hz. Three changes:
+    //  * MIDPOINT DISPLACEMENT: the channel is split in half, the middle thrown to one side, and
+    //    each half split again four times over with the throw halving each level -- the shape of
+    //    a discharge, which wanders on the large scale and crackles on the small, never a zigzag;
+    //  * BRANCHES: one or two forks leave the channel partway, thinner and shorter, each a
+    //    smaller discharge of its own, dying out before they reach anything;
+    //  * HELD FOR A BEAT: the shape is rolled from the arc's seed and the clock in 60 ms steps, so
+    //    it holds for a few frames and then jumps -- a flicker, not a shiver -- and the strokes
+    //    are sized to the ball's own radius, so the price board's half-size ball throws half-width
+    //    bolts.
+    const beat = Math.floor((view.now ?? 0) / 60);
+    const rollFrom = (seed) => { let x = (seed ^ (beat * 2654435761)) >>> 0 || 1; return () => ((x = (Math.imul(x, 1103515245) + 12345) >>> 0) / 4294967296); };
+    const displace = (pts, i, j, amp, depth, rnd) => {
+      if (depth === 0 || j - i < 2) return;
+      const m = (i + j) >> 1, a = pts[i], b = pts[j];
+      const nx = -(b.y - a.y), ny = b.x - a.x, L = Math.hypot(nx, ny) || 1;
+      const off = (rnd() - 0.5) * 2 * amp * L;
+      pts[m] = { x: (a.x + b.x) / 2 + (nx / L) * off, y: (a.y + b.y) / 2 + (ny / L) * off };
+      displace(pts, i, m, amp * 0.55, depth - 1, rnd); displace(pts, m, j, amp * 0.55, depth - 1, rnd);
+    };
+    const bolt = (p, q, amp, rnd, levels = 4) => {
+      const n = 1 << levels, pts = new Array(n + 1); pts[0] = p; pts[n] = q;
+      displace(pts, 0, n, amp, levels, rnd);
       return pts;
     };
+    // THE HAZE: a wide, soft, white light round the ball, over the board, so what it passes reads
+    // as lit by it and not only tinted -- and the same, smaller, wherever an arc lands
+    {
+      const g = typeof ctx.createRadialGradient === 'function' ? ctx.createRadialGradient(c.x, c.y, 0, c.x, c.y, R * 5) : null;
+      if (g && typeof g.addColorStop === 'function') { g.addColorStop(0, 'rgba(235,245,255,0.30)'); g.addColorStop(0.35, 'rgba(225,240,255,0.14)'); g.addColorStop(1, 'rgba(220,235,255,0)'); ctx.fillStyle = g; }
+      else ctx.fillStyle = 'rgba(235,245,255,0.08)';
+      ctx.beginPath(); ctx.arc(c.x, c.y, R * 5, 0, Math.PI * 2); ctx.fill();
+    }
     // the arcs first, so the sphere sits over the roots of its own lightning
     for (const arc of s.arcs) {
       const end = project(arc.to.x, arc.to.y, arc.to.z, view);
       // a chained arc leaves the block the first one struck, not the ball
       const from = arc.from ? project(arc.from.x, arc.from.y, arc.from.z, view) : c;
-      const main = bolt(from, end, Math.hypot(end.x - from.x, end.y - from.y) * 0.18, 9);
+      const rnd = rollFrom(arc.seed);
+      const main = bolt(from, end, 0.11, rnd);
       // a chain (hop 1 or 2 from the block) is electric green, so it reads as the block discharging, not the ball
       const [halo, body, edge] = arc.chain ? ['20,200,110', '110,255,170', '215,255,235'] : ['30,120,255', '60,170,255', '140,220,255'];
-      const sz = arc.chain ? 0.85 : 1;
-      line(ctx, main, `rgba(${halo},${(0.3 * arc.strength).toFixed(3)})`, Math.max(lw * 8, U * 1.1) * sz);
-      line(ctx, main, `rgba(${body},${(0.6 * arc.strength).toFixed(3)})`, Math.max(lw * 4, U * 0.45) * sz);
-      line(ctx, main, `rgba(${edge},${(0.95 * arc.strength).toFixed(3)})`, Math.max(lw * 2, U * 0.2) * sz);
-      line(ctx, main, `rgba(245,252,255,${arc.strength.toFixed(3)})`, Math.max(lw, U * 0.08) * sz);
-      // ...and a ring bursting from the block it lands on, the moment it lands
+      const sz = (arc.chain ? 0.85 : 1) * R;
+      const stroke = (pts, col, w, a) => line(ctx, pts, `rgba(${col},${a.toFixed(3)})`, Math.max(lw, w));
+      // THE FLASH (2026-09-15: "the lightning bolts still need much more visual flash and effects
+      // to them"): the first fifth of an arc's life is the strike -- the halo blazes at three
+      // times its weight and a white flash blooms where it lands -- then a bead of light runs the
+      // channel from root to tip, sparks spray from the strike point and fall away, and the whole
+      // thing settles to the steady glow. `age` is 0 at the strike and 1 at the end.
+      const age = arc.age ?? (1 - arc.strength) / 0.6;
+      const flash = Math.max(0, 1 - age / 0.2);
+      stroke(main, halo, sz * (0.30 + 0.25 * flash), (0.28 + 0.5 * flash) * arc.strength);
+      stroke(main, body, sz * 0.12, 0.6 * arc.strength);
+      stroke(main, edge, sz * 0.055, 0.95 * arc.strength);
+      stroke(main, '245,252,255', sz * (0.022 + 0.02 * flash), arc.strength);
+      if (flash > 0) bloom(ctx, end.x, end.y, R * 1.6 * (1.2 - flash * 0.5), [255, 255, 255], 0.9 * flash);
+      // the landing lights its surroundings: a hazy white pool that outlives the flash
+      if (age < 0.8) bloom(ctx, end.x, end.y, R * 2.6, [230, 242, 255], 0.35 * (1 - age / 0.8) * arc.strength);
+      // the occasional strike flares: an anamorphic streak through the landing, four turning
+      // rays, and a run of ghosts off toward the picture's middle, over the first third of the arc
+      if (arc.flare && age < 0.35) lensFlare(ctx, end.x, end.y, R * 2.2, arc.chain ? [110, 255, 170] : [140, 220, 255], Math.pow(1 - age / 0.35, 1.5), view, lw);
+      // the bead: a bright knot of light running the channel in the first third of the arc's life
+      const run = Math.min(1, age / 0.35), bi = Math.min(main.length - 1, Math.floor(run * (main.length - 1)));
+      if (age < 0.5) bloom(ctx, main[bi].x, main[bi].y, sz * 0.22, [235, 250, 255], 0.9 * (1 - age));
+      // the sparks: a dozen short lines flung from the strike point, longer and fainter as they go,
+      // drifting down, gone by half the arc's life
+      if (age < 0.55) {
+        const srnd = rollFrom(arc.seed ^ 0x9e3779b9);
+        const life = age / 0.55;
+        for (let k = 0; k < 12; k++) {
+          const ang = srnd() * Math.PI * 2, spd = 0.6 + srnd() * 1.4, len = sz * (0.25 + 0.2 * srnd());
+          const dist = sz * 1.3 * spd * life, drop = sz * 1.2 * life * life;
+          const x1 = end.x + Math.cos(ang) * dist, y1 = end.y + Math.sin(ang) * dist + drop;
+          const x0 = x1 - Math.cos(ang) * len * (1 - life), y0 = y1 - Math.sin(ang) * len * (1 - life) - drop * 0.15;
+          line(ctx, [{ x: x0, y: y0 }, { x: x1, y: y1 }], `rgba(${edge},${(0.9 * (1 - life) * arc.strength).toFixed(3)})`, Math.max(lw, sz * 0.02));
+        }
+      }
+      // the branches: two or three leave the channel a third to two thirds along, at 20-45
+      // degrees, a quarter to a half of the remaining length, and fade toward their tips
+      const forks = 2 + (rnd() < 0.5 ? 1 : 0);
+      for (let f = 0; f < forks; f++) {
+        const k = Math.floor(main.length * (0.3 + 0.4 * rnd()));
+        const at = main[k], dx = end.x - at.x, dy = end.y - at.y;
+        const ang = (rnd() < 0.5 ? 1 : -1) * (0.35 + 0.45 * rnd()), len = 0.25 + 0.25 * rnd();
+        const tip = { x: at.x + (dx * Math.cos(ang) - dy * Math.sin(ang)) * len, y: at.y + (dx * Math.sin(ang) + dy * Math.cos(ang)) * len };
+        const br = bolt(at, tip, 0.14, rnd, 3);
+        stroke(br, body, sz * 0.06, 0.35 * arc.strength);
+        stroke(br, edge, sz * 0.028, 0.7 * arc.strength);
+        stroke(br, '245,252,255', sz * 0.012, 0.8 * arc.strength);
+      }
+      // ...and a ring bursting from the block a chain lands on, the moment it lands
       if (arc.chain && arc.age < 0.6) {
         const f = arc.age / 0.6;
-        ring(ctx, end.x, end.y, U * (0.4 + 2.2 * f), `rgba(150,255,190,${(0.9 * (1 - f)).toFixed(3)})`, Math.max(lw * 2, U * 0.12) * (1 - 0.5 * f));
-        ring(ctx, end.x, end.y, U * (0.2 + 1.4 * f), `rgba(235,255,245,${(0.8 * (1 - f)).toFixed(3)})`, Math.max(lw, U * 0.06));
+        ring(ctx, end.x, end.y, R * (0.12 + 0.65 * f), `rgba(150,255,190,${(0.9 * (1 - f)).toFixed(3)})`, Math.max(lw * 2, R * 0.035) * (1 - 0.5 * f));
+        ring(ctx, end.x, end.y, R * (0.06 + 0.4 * f), `rgba(235,255,245,${(0.8 * (1 - f)).toFixed(3)})`, Math.max(lw, R * 0.018));
       }
-      // a fork off the main channel, and a spark where it lands
-      const k = 3 + Math.floor(Math.random() * 4);
-      const fork = main[k], forkEnd = { x: fork.x + (Math.random() - 0.5) * U * 3, y: fork.y + (Math.random() - 0.5) * U * 3 };
-      line(ctx, bolt(fork, forkEnd, U * 0.5, 4), `rgba(130,215,255,${(0.6 * arc.strength).toFixed(3)})`, Math.max(lw, U * 0.08));
-      bloom(ctx, end.x, end.y, U * 2.2, [90, 200, 255], arc.strength);
+      bloom(ctx, end.x, end.y, R * 0.65, arc.chain ? [120, 255, 180] : [90, 200, 255], arc.strength);
     }
     // THE SPHERE IS ONE SMOOTH THING (operator, 2026-09-14: "needs a smooth gradient, not different
     // discs around it. It needs to be visually stunning. Consider adding nebula effects"). Radial
@@ -938,9 +1115,9 @@ defineAgent('stormball', {
       const ang = Math.random() * Math.PI * 2, r0 = R * (0.35 + 0.5 * Math.random()), r1 = R * (1.05 + 0.55 * Math.random());
       const p = { x: c.x + Math.cos(ang) * r0, y: c.y + Math.sin(ang) * r0 };
       const q = { x: c.x + Math.cos(ang + (Math.random() - 0.5) * 0.9) * r1, y: c.y + Math.sin(ang + (Math.random() - 0.5) * 0.9) * r1 };
-      const pts = bolt(p, q, R * 0.22, 4);
-      line(ctx, pts, 'rgba(90,190,255,0.55)', Math.max(lw * 2.2, U * 0.12));
-      line(ctx, pts, 'rgba(230,248,255,0.95)', Math.max(lw, U * 0.04));
+      const pts = bolt(p, q, 0.16, rollFrom(i * 7919 + 17), 3);
+      line(ctx, pts, 'rgba(90,190,255,0.55)', Math.max(lw * 1.6, R * 0.035));
+      line(ctx, pts, 'rgba(230,248,255,0.95)', Math.max(lw, R * 0.012));
     }
   },
 });

package/public/js/app.js

@@ -11,17 +11,46 @@ import { renderMiningOverview, renderMining, renderBlockSpace, refreshLabel } fr
 import { viewerIdle } from './details3d.js';
 import {
   loadSettings, setSetting, resetSettings, seedSettings, setSettingsPush,
-  SETTINGS_KEY, PANEL as SETTINGS_PANEL, formatRangeValue,
-} from './settings.js';
+  SETTINGS_KEY, PANEL as SETTINGS_PANEL, formatRangeValue, SKY_BOARDS, SKY_CHOICES } from './settings.js';
+// APPEARANCE (2026-09-16): the theme goes on <html> before the first paint, from the browser's copy
+// of the settings, and follows every change after (followTheme); the cards' swatches are painted
+// through the CSSOM because the CSP refuses a style attribute in markup
+import { TAB_ROWS } from './settings.js';
+import { followTheme, presetFace, resolveScheme, resolveTheme, PRESETS, BASE_KEYS } from './theme.js';
 import { renderExplorer } from './explorer.js';
 import { renderMarkets, summaryHtml as marketsSummaryHtml, REFRESH_MS as MARKETS_REFRESH_MS } from './markets.js';
 import { renderKiosk } from './kiosk.js';
-import { renderTetrust } from './tetrust.js';
-import { renderBlockout } from './blockout.js';
-import { renderBlockanoid } from './blockanoid.js';
+// THE GAMES LOAD WHEN THEY ARE OPENED (the outside review of 2026-09-16: "Move the DOOM/Wolfenstein/
+// Quake emulator and 3D games into an optional, separately loadable module ... This reduces the
+// attack and bug surface of the core monitor"). They were static imports, so the Overview of a node
+// monitor fetched and evaluated twenty game modules -- a quarter of the app's code -- before it drew
+// a chart. Each game is now an import() made the first time its page is opened; a monitor that is
+// only ever used as a monitor never runs a line of them.
+const GAMES = Object.freeze({
+  tetrust: () => import('./tetrust.js').then((m) => m.renderTetrust),
+  blockout: () => import('./blockout.js').then((m) => m.renderBlockout),
+  blockanoid: () => import('./blockanoid.js').then((m) => m.renderBlockanoid),
+  scorched: () => import('./scorchedyard.js').then((m) => m.renderScorchedYard),
+  wolf3d: () => import('./wolf3d.js').then((m) => m.renderWolf3d),
+  doom: () => import('./doom.js').then((m) => m.renderDoom),
+  quake: () => import('./quake.js').then((m) => m.renderQuake),
+});
+const gameRenderers = new Map();
+const gameLoads = new Map();
+/** Draw a game's page, loading its module the first time; the page repaints once it has arrived. */
+function renderGame(page, s) {
+  const draw = gameRenderers.get(page);
+  if (draw) { draw(s, state, helpers); return; }
+  if (gameLoads.has(page)) return;
+  gameLoads.set(page, GAMES[page]()
+    .then((fn) => { gameRenderers.set(page, fn); if (state.page === page) render(); })
+    .catch((e) => { gameLoads.delete(page); toast(`${page} could not be loaded: ${e.message}`, 'bad'); }));
+}
 import { renderAbout } from './about.js';
 import { renderChain, renderMempool, renderPeers, renderNetwork, renderLogs, renderNode, renderAdmin, ensureLogsLoaded, init as initPanels, initChainDrill } from './panels.js';
 
+followTheme();
+
 // panels.js needs the formatters but must not import them from here (circular);
 // they are injected once at module start instead.
 initPanels(F);
@@ -288,8 +317,10 @@ function renderOverview(s) {
   const stripOn = !!loadSettings().markets?.overviewSummary;
   const strip = document.getElementById('ovMkSummary');
   if (strip) {
-    strip.hidden = !stripOn || !overviewMarkets;
-    if (stripOn && overviewMarkets) strip.innerHTML = marketsSummaryHtml(overviewMarkets, F);
+    // and nothing to show while the feed is off (the default): the strip stays hidden
+    const have = overviewMarkets && overviewMarkets.enabled !== false;
+    strip.hidden = !stripOn || !have;
+    if (stripOn && have) strip.innerHTML = marketsSummaryHtml(overviewMarkets, F);
   }
 
   const mp = s.mempool ?? {};
@@ -516,9 +547,9 @@ export function render() {
     case 'explorer': renderExplorer(s, state, helpers); break;
     case 'markets': renderMarkets(s, state, helpers); break;
     case 'kiosk': renderKiosk(s, state, helpers); break;
-    case 'tetrust': renderTetrust(s, state, helpers); break;
-    case 'blockout': renderBlockout(s, state, helpers); break;
-    case 'blockanoid': renderBlockanoid(s, state, helpers); break;
+    case 'tetrust': case 'blockout': case 'blockanoid': case 'scorched': case 'wolf3d': case 'doom': case 'quake':
+      renderGame(state.page, s);
+      break;
     case 'about': renderAbout(s, state, helpers); break;
   }
 }
@@ -908,7 +939,7 @@ function shortBuild(build) {
 // subroutes; they stay on the URL so every explorer page is a link.
 // The games live behind the Diversions pop-down at the end of the nav; the menu shows as the
 // active tab while one of them is open, since its own button is out of sight inside the popup.
-const DIVERSION_PAGES = ['tetrust', 'blockout', 'blockanoid'];
+const DIVERSION_PAGES = ['tetrust', 'blockout', 'blockanoid', 'scorched', 'wolf3d', 'doom', 'quake'];
 
 function setPage(route) {
   const [page, ...rest] = String(route).split('/');
@@ -1120,8 +1151,10 @@ async function boot() {
   const drawSettings = () => {
     const s = loadSettings();
     if (!SETTINGS_PANEL.some((g) => g.group === cfgTab)) cfgTab = SETTINGS_PANEL[0].group;
-    const tabs = `<div class="cfgtabs" role="tablist">${SETTINGS_PANEL.map((g) =>
-      `<button type="button" class="cfgtab${g.group === cfgTab ? ' on' : ''}" role="tab" aria-selected="${g.group === cfgTab}" data-cfgtab="${g.group}">${g.title}</button>`).join('')}</div>`;
+    // one row per TAB_ROWS entry, labelled, the games last (operator: "Diversions go at the very end")
+    const tab = (g) => `<button type="button" class="cfgtab${g.group === cfgTab ? ' on' : ''}" role="tab" aria-selected="${g.group === cfgTab}" data-cfgtab="${g.group}">${g.title}</button>`;
+    const tabs = `<div class="cfgtabs" role="tablist">${TAB_ROWS.map((row) =>
+      `<div class="cfgtabrow"><span class="cfgtablbl">${row.label}</span>${row.groups.map((id) => SETTINGS_PANEL.find((g) => g.group === id)).filter(Boolean).map(tab).join('')}</div>`).join('')}</div>`;
     cfgBody.innerHTML = tabs + SETTINGS_PANEL.filter((g) => g.group === cfgTab).map((g) => {
       // ALL / NONE, on the groups that ask for it (the two effects tabs): twenty-eight switches is
       // a lot of clicking to answer "just show me the quiet board". This was "every row is a
@@ -1130,9 +1163,53 @@ async function boot() {
       const bulk = g.bulk
         ? `<div class="cfgbulk"><button type="button" class="btn" data-cfgall="${g.group}">all on</button><button type="button" class="btn" data-cfgnone="${g.group}">all off</button></div>`
         : '';
-      return `<div class="cfggroup"><h3>${g.title}</h3><p>${g.note}</p>${bulk}${g.rows.map((r) => {
+      // THE SWITCH ROWS IN TWO COLUMNS, HINT AS THE TOOLTIP (2026-09-15, "same treatment on the
+      // settings panel"): on the two effects tabs, thirty-odd switches with a line of hint each ran
+      // to 2,600px of scrolling; as compact rows two across, with the hint on hover, the whole tab
+      // is a screen. The sliders above them keep their hints in view.
+      const compact = !!g.bulk;
+      let open = false;
+      const rowsHtml = g.rows.map((r) => {
       const v = s[g.group][r.key];
       const id = `cfg-${g.group}-${r.key}`;
+      // THE APPEARANCE TAB'S OWN CONTROLS: the mode as a segmented row of buttons, the theme as cards
+      // with a swatch strip and a line about each (the shape of every editor's appearance page),
+      // and a "start Custom from this" button under the cards. The swatches' colours are set after
+      // the markup lands (data-swatch), the one way the CSP lets a script colour an element.
+      if (r.kind === 'segment') {
+        const seg = `<span class="cfgseg" role="radiogroup" aria-label="${r.label}">${r.options.map(([val, label]) =>
+          `<button type="button" class="cfgsegbtn${val === v ? ' on' : ''}" role="radio" aria-checked="${val === v}" data-cfgset="${g.group}.${r.key}" data-value="${val}">${label}</button>`).join('')}</span>`;
+        return `<div class="cfgrow"><b><label>${r.label}</label></b><span>${seg}</span><i>${r.hint}</i></div>`;
+      }
+      // WHICH SKY, WHERE (docs/PLAN-SKIES.md): the table at the top of the Sky tab. One row per board
+      // that has a sky, each a select on that board's own `sky` key -- the same setting the board's
+      // tab shows, through the same data-cfg path, so a change in either place is one change.
+      if (r.kind === 'skymap') {
+        const rows = SKY_BOARDS.map((b) => {
+          const cur = s[b.group]?.sky ?? 'galaxy';
+          const sel = `<select data-cfg="${b.group}.sky" aria-label="${b.label}: sky">${SKY_CHOICES.map(([val, label]) => `<option value="${val}"${val === cur ? ' selected' : ''}>${label}</option>`).join('')}</select>`;
+          return `<tr><th scope="row">${b.label}${b.note ? `<small>${b.note}</small>` : ''}</th><td>${sel}</td></tr>`;
+        }).join('');
+        return `<div class="cfgrow cfgskymap"><b><label>${r.label}</label></b><span><table class="skymap">${rows}</table></span><i>${r.hint}</i></div>`;
+      }
+      // a heading inside a group: the two skies of the Sky tab, each introducing its own rows
+      if (r.kind === 'heading') {
+        const close = open ? '</div>' : '';
+        open = false;
+        return `${close}<div class="cfghead"><b>${r.label}</b><i>${r.hint}</i></div>`;
+      }
+      if (r.kind === 'cards') {
+        const scheme = resolveScheme(s.appearance);
+        const cards = r.options.map(([val, label]) => {
+          const face = val === 'custom' ? resolveTheme(s) : presetFace(val, scheme);
+          const blurb = val === 'custom' ? 'Your own nine colours, below' : PRESETS[val].blurb;
+          const sw = ['bg', 'panel', 'text', 'accent', 'ok', 'warn', 'bad'].map((k) => `<i data-swatch="${face[k]}" title="${k}"></i>`).join('');
+          return `<button type="button" class="thcard${val === v ? ' on' : ''}" role="radio" aria-checked="${val === v}" data-cfgset="${g.group}.${r.key}" data-value="${val}" data-face-bg="${face.bg}" data-face-fg="${face.text}" data-face-line="${face.line}">`
+            + `<span class="thsw">${sw}</span><b>${label}</b><small>${blurb}</small></button>`;
+        }).join('');
+        const from = v === 'custom' ? '' : `<button type="button" class="btn cfgcustomise" data-cfgcustomise="1" title="Copy this theme's colours into the nine pickers below and switch to Custom">customise ${PRESETS[v]?.label ?? 'this'} →</button>`;
+        return `<div class="cfgrow cfgcards"><b><label>${r.label}</label></b><span>${from}</span><span class="thcards" role="radiogroup" aria-label="${r.label}">${cards}</span><i>${r.hint}</i></div>`;
+      }
       const ctl = r.kind === 'toggle'
         ? `<input type="checkbox" id="${id}" data-cfg="${g.group}.${r.key}"${v ? ' checked' : ''}>`
         : r.kind === 'choice'
@@ -1140,9 +1217,32 @@ async function boot() {
           : r.kind === 'colour'
             ? `<input type="color" id="${id}" data-cfg="${g.group}.${r.key}" value="${v}">`
             : `<span class="cfgrange"><input type="range" id="${id}" data-cfg="${g.group}.${r.key}" min="${r.min}" max="${r.max}" step="${r.step}" value="${v}"><span class="val" data-val-for="${g.group}.${r.key}">${formatRangeValue(r.step, v)}</span></span>`;
-      return `<div class="cfgrow"><b><label for="${id}">${r.label}</label></b><span>${ctl}</span><i>${r.hint}</i></div>`;
-      }).join('')}</div>`;
+      // (and the nine custom colours of the Appearance tab the same way: two across, hint as tooltip,
+      // dimmed while another theme is chosen, so the tab is a screen)
+      // A CONTROL THAT DOES NOTHING RIGHT NOW SAYS SO (operator, 2026-09-16: "It's counter
+      // intuitive in the preferences to display a spiral galaxy for a night/day scene"). A row
+      // whose `dimWhen` is true of the current settings is dimmed and says which sky it belongs
+      // to, rather than being hidden: the setting is still there, and still remembered.
+      const off = (r.custom && s.appearance.theme !== 'custom') || (typeof r.dimWhen === 'function' && r.dimWhen(s));
+      const idle = off ? ' idle' : '';
+      const note = off && r.dimNote ? ` <em>${r.dimNote}</em>` : '';
+      if ((compact && r.kind === 'toggle') || r.custom) {
+        const start = open ? '' : '<div class="cfgrows2">';
+        open = true;
+        return `${start}<div class="cfgrow compact${idle}" title="${String(off && r.dimNote ? `${r.dimNote} — ${r.hint}` : r.hint).replace(/"/g, '&quot;')}"><b><label for="${id}">${r.label}</label></b><span>${ctl}</span></div>`;
+      }
+      const close = open ? '</div>' : '';
+      open = false;
+      return `${close}<div class="cfgrow${idle}"><b><label for="${id}">${r.label}</label></b><span>${ctl}</span><i>${r.hint}${note}</i></div>`;
+      }).join('') + (open ? '</div>' : '');
+      // the Space effects tab says so while the Living sky has them off (settings.js spaceOptions)
+      const held = g.group === 'effects' && s.sky.type === 'living' ? '<p class="cfgheld">Off while the sky is the Living sky (Sky tab): these play over space. Your switches are kept.</p>' : '';
+      return `<div class="cfggroup"><h3>${g.title}</h3><p>${g.note}</p>${held}${bulk}${rowsHtml}</div>`;
     }).join('');
+    for (const el of cfgBody.querySelectorAll('[data-swatch]')) el.style.setProperty('background', el.dataset.swatch);
+    for (const el of cfgBody.querySelectorAll('.thcard')) {
+      el.style.setProperty('--th-bg', el.dataset.faceBg); el.style.setProperty('--th-fg', el.dataset.faceFg); el.style.setProperty('--th-line', el.dataset.faceLine);
+    }
   };
   const openSettings = (open) => {
     cfgWrap.classList.toggle('hidden', !open);
@@ -1163,6 +1263,21 @@ async function boot() {
   cfgBody.addEventListener('click', (e) => {
     const tab = e.target.closest?.('[data-cfgtab]');
     if (tab) { cfgTab = tab.dataset.cfgtab; drawSettings(); return; }
+    // a segment button or a theme card: one value, then the tab redraws so the cards' swatches
+    // show the face the new mode picks
+    const pick = e.target.closest?.('[data-cfgset]');
+    if (pick) { setSetting(loadSettings(), pick.dataset.cfgset, pick.dataset.value); drawSettings(); repaintSoon(); return; }
+    // "customise this": the nine base colours of the theme on screen become the Custom pickers'
+    // values, and Custom is selected, so the pickers start from a look rather than from the shipped one
+    if (e.target.closest?.('[data-cfgcustomise]')) {
+      const face = resolveTheme(loadSettings());
+      let next = loadSettings();
+      const keyOf = { bg: 'customBg', panel: 'customPanel', text: 'customText', muted: 'customMuted', accent: 'customAccent', line: 'customLine', ok: 'customOk', warn: 'customWarn', bad: 'customBad' };
+      for (const k of BASE_KEYS) next = setSetting(next, `appearance.${keyOf[k]}`, face[k]);
+      setSetting(next, 'appearance.theme', 'custom');
+      drawSettings(); repaintSoon();
+      return;
+    }
     const bulk = e.target.closest?.('[data-cfgall], [data-cfgnone]');
     if (!bulk) return;
     const on = bulk.hasAttribute('data-cfgall');