Could not load world map data.
${msg}
`;
+ const l = document.getElementById('loading');
+ if (l)
+ l.innerHTML = `Could not load world map data.
${msg}
`;
}
async function loadLand() {
for (const url of LAND_URLS) {
try {
const r = await fetch(url);
- if (!r.ok) throw new Error("HTTP " + r.status);
+ if (!r.ok) throw new Error('HTTP ' + r.status);
const topo = await r.json();
return topojson.feature(topo, topo.objects.land);
- } catch (e) { /* try next source */ }
+ } catch (e) {
+ /* try next source */
+ }
}
return null;
}
loadLand().then((feature) => {
- if (!feature) { fail("all map sources unreachable"); return; }
+ if (!feature) {
+ fail('all map sources unreachable');
+ return;
+ }
data.landFeature = feature;
- document.getElementById("loading").style.display = "none";
+ document.getElementById('loading').style.display = 'none';
engine.start();
});
diff --git a/shared/config.js b/shared/config.js
index b7af6e8..525459f 100644
--- a/shared/config.js
+++ b/shared/config.js
@@ -6,7 +6,7 @@
* `resolveScene()` — the single entry point that produces a validated scene from
* whichever source applies (platform API, inline embed, or the demo's localStorage).
*/
-import { SCENE_SCHEMA, sceneDefaults, sanitizeScene } from "./scene-schema.js";
+import { SCENE_SCHEMA, sceneDefaults, sanitizeScene } from './scene-schema.js';
export { SCENE_SCHEMA, sanitizeScene };
@@ -16,10 +16,10 @@ export const SCENE_DEFAULTS = sceneDefaults();
// Live activity simulation defaults (driven by the demo's base control panel).
export const SIM_DEFAULTS = {
paused: false,
- rotSpeed: 6, // degrees / second (auto-rotate)
- rate: 3.0, // activities per second
- fireworks: true, // celebratory burst on the trigger event
- fwTrigger: "completed", // which activity sets off fireworks
+ rotSpeed: 4, // degrees / second (auto-rotate) — calm and majestic
+ rate: 2.4, // activities per second
+ fireworks: true, // celebratory burst on the trigger event
+ fwTrigger: 'completed', // which activity sets off fireworks
};
// Land-dot grid spacing per density setting (smaller = denser).
@@ -27,23 +27,30 @@ export const DENSITY_STEP = { sparse: 3.8, med: 3.0, dense: 2.4 };
// Aurora colour schemes: [glow stroke, veil stroke].
export const AURORA_SCHEMES = {
- gv: ["#5cffb0", "#b58cff"],
- emerald: ["#3dffa0", "#7affd1"],
- rose: ["#ff7ab0", "#b58cff"],
+ gv: ['#5cffb0', '#b58cff'],
+ emerald: ['#3dffa0', '#7affd1'],
+ rose: ['#ff7ab0', '#b58cff'],
};
export const STORAGE = {
- scene: "gd-globe-scene",
- sceneOpen: "gd-globe-scene-open",
+ scene: 'gd-globe-scene',
+ sceneOpen: 'gd-globe-scene-open',
};
// ---- demo-mode persistence (localStorage) ------------------------------
export function loadScene() {
- try { return sanitizeScene(JSON.parse(localStorage.getItem(STORAGE.scene) || "{}")); }
- catch (e) { return sceneDefaults(); }
+ try {
+ return sanitizeScene(JSON.parse(localStorage.getItem(STORAGE.scene) || '{}'));
+ } catch (e) {
+ return sceneDefaults();
+ }
}
export function saveScene(scene) {
- try { localStorage.setItem(STORAGE.scene, JSON.stringify(scene)); } catch (e) { /* ignore */ }
+ try {
+ localStorage.setItem(STORAGE.scene, JSON.stringify(scene));
+ } catch (e) {
+ /* ignore */
+ }
}
// ---- where the scene comes from ----------------------------------------
@@ -51,12 +58,14 @@ export function saveScene(scene) {
// Every path runs through sanitizeScene(), so the renderer only ever sees a
// fully-validated, in-bounds scene.
export async function resolveScene({ demo = false, configUrl = null, inline = null } = {}) {
- if (inline && typeof inline === "object") return sanitizeScene(inline);
+ if (inline && typeof inline === 'object') return sanitizeScene(inline);
if (configUrl) {
try {
- const r = await fetch(configUrl, { headers: { Accept: "application/json" } });
+ const r = await fetch(configUrl, { headers: { Accept: 'application/json' } });
if (r.ok) return sanitizeScene(await r.json());
- } catch (e) { /* fall through to defaults */ }
+ } catch (e) {
+ /* fall through to defaults */
+ }
return sceneDefaults();
}
if (demo) return loadScene();
diff --git a/shared/engine.js b/shared/engine.js
index f4e8813..099df5f 100644
--- a/shared/engine.js
+++ b/shared/engine.js
@@ -1,9 +1,11 @@
/* games.directory globe — BaseEngine (shared by both renderers)
*
* All the backend-agnostic machinery lives here: the event bus, the ordered
- * layer registry, the clock, auto-rotation, the beam-spawn cadence, drag-to-spin,
- * the sun, and the per-activity counters. A renderer subclasses this and fills in
- * five small hooks for the bits that genuinely differ between Canvas and SVG:
+ * layer registry, the clock, auto-rotation, the beam-spawn cadence, drag-to-spin
+ * (with fling inertia), pointer parallax, the cinematic arrival sequence, the
+ * city-surge scheduler, the sun, adaptive render quality, and the per-activity
+ * counters. A renderer subclasses this and fills in five small hooks for the
+ * bits that genuinely differ between Canvas and SVG:
*
* viewportRect() → the element's bounding rect (sizing source)
* resizeBackend() → size the canvas / set the SVG viewBox
@@ -11,6 +13,23 @@
* renderFrame() → paint one frame (canvas clears+draws; svg mutates nodes)
* applyScene() → map scene → element styles (no-op for canvas)
*
+ * Adaptive quality: an EMA of raw frame time nudges `quality` (a multiplier on
+ * the device-pixel ratio) down when frames run long and back up when there's
+ * headroom, with a cooldown so it never oscillates. A resize re-bakes sprites
+ * at the new backing resolution; CSS size never changes, so it's invisible
+ * except as a slightly softer image on weak GPUs — and a steady 60fps.
+ *
+ * Cinematic arrival: `intro` ramps 0→1 over ~3.2s after start. Layers read
+ * eased sub-windows of it via `introPhase(a, b)` to choreograph the bloom
+ * (stars resolve → sphere fades up → atmosphere ignites → land blooms → beams
+ * begin). When `scene.intro` is false, intro is pinned at 1.
+ *
+ * Pointer parallax: the pointer's position eases into a small look offset
+ * that's ADDED to the rotation at projection time (never written back into
+ * `rotation`), so the whole globe leans gently toward the cursor while drag
+ * and auto-rotate stay untouched. `rotAcc` is the unwrapped, look-inclusive
+ * longitude — background layers key their parallax off it.
+ *
* Members written with `#` are true private state — internal to the engine and
* not part of the API. The hooks above are deliberately public: they're the
* subclass extension surface (`#`-private methods can't be overridden).
@@ -18,17 +37,36 @@
* Layer contract:
* { name, z, rebuildOn?, build?(e), resize?(e), simulate?(e), visible?(e), draw(e) }
*/
-import { Projection } from "./geo.js";
-import { SCENE_DEFAULTS } from "./config.js";
-import { ACTIVITY_TYPES } from "./data.js";
+import { Projection } from './geo.js';
+import { SCENE_DEFAULTS } from './config.js';
+import { ACTIVITY_TYPES } from './data.js';
+
+const QUALITY_MIN = 0.55; // never drop below ~half-res backing store
+const EMA_SLOW_MS = 21; // sustained frames slower than this → step down
+const EMA_FAST_MS = 14.5; // sustained frames faster than this → step up
+const COOLDOWN_FRAMES = 150; // min frames between quality changes (~2.5s)
+
+const INTRO_MS = 3200; // cinematic arrival duration
+const INTRO_BEAMS_AT = 0.85; // beams hold until the scene has mostly bloomed
+
+const LOOK_DEG = 3.2; // max pointer-parallax lean, degrees
+const SURGE_FIRST_MS = 35000; // first city surge after load
+const SURGE_EVERY_MS = [50000, 90000]; // min..max between surges
+const SURGE_LEN_MS = 6500; // how long a surge lasts
export class BaseEngine {
#handlers = {};
#byName = {};
#hooks = [];
- #drag = { active: false, x: 0, y: 0 };
+ #drag = { active: false, x: 0, y: 0, vx: 0, t: 0 };
+ #fling = 0;
#spawnAcc = 0;
#last = 0;
+ #ema = 16.7;
+ #cooldown = 60;
+ #introT0 = 0;
+ #prevLam = null;
+ #nextSurge = 0;
constructor({ scene, sim, data }) {
this.scene = scene || { ...SCENE_DEFAULTS };
@@ -42,21 +80,46 @@ export class BaseEngine {
});
this.proj = new Projection();
- this.rotation = this.proj.rotation; // shared array
+ this.rotation = this.proj.rotation.slice(); // engine-owned; proj gets rotation+look each frame
// viewport (CSS px)
- this.W = 0; this.H = 0; this.CX = 0; this.CY = 0; this.R = 0; this.dpr = 1;
+ this.W = 0;
+ this.H = 0;
+ this.CX = 0;
+ this.CY = 0;
+ this.R = 0;
+ this.dpr = 1;
+ this.quality = 1; // adaptive multiplier on dpr (see header note)
// clock + per-frame shared values
- this.now = 0; this.dt = 0; this.frameCount = 0;
- this.hq = null; this.hqVisible = false;
+ this.now = 0;
+ this.dt = 0;
+ this.frameCount = 0;
+ this.hq = null;
+ this.hqVisible = false;
+
+ // cinematic arrival progress (0→1; pinned at 1 when scene.intro is off)
+ this.intro = 1;
+
+ // pointer parallax: target (set by pointermove) and eased current offset
+ this.look = { x: 0, y: 0, tx: 0, ty: 0 };
+ // unwrapped, look-inclusive longitude — parallax driver for background layers
+ this.rotAcc = 0;
+
+ // active city surge: { city, t0, until } or null
+ this.surge = null;
this.layers = [];
}
// ---- events --------------------------------------------------------
- on(evt, fn) { (this.#handlers[evt] || (this.#handlers[evt] = [])).push(fn); }
- emit(evt, payload) { const h = this.#handlers[evt]; if (h) for (const fn of h) fn(payload); }
+ on(evt, fn) {
+ (this.#handlers[evt] || (this.#handlers[evt] = [])).push(fn);
+ }
+ emit(evt, payload) {
+ const h = this.#handlers[evt];
+ if (h) for (const fn of h) fn(payload);
+ }
// ---- layers --------------------------------------------------------
register(layer) {
@@ -65,9 +128,15 @@ export class BaseEngine {
this.layers.sort((a, b) => a.z - b.z);
return layer;
}
- layer(name) { return this.#byName[name]; }
- build() { for (const l of this.layers) l.build && l.build(this); }
- resizeLayers() { for (const l of this.layers) l.resize && l.resize(this); }
+ layer(name) {
+ return this.#byName[name];
+ }
+ build() {
+ for (const l of this.layers) l.build && l.build(this);
+ }
+ resizeLayers() {
+ for (const l of this.layers) l.resize && l.resize(this);
+ }
rebuildFor(key) {
for (const l of this.layers) {
if (l.build && l.rebuildOn && l.rebuildOn.includes(key)) l.build(this);
@@ -75,16 +144,36 @@ export class BaseEngine {
}
// ---- per-activity counters ----------------------------------------
- onCount(fn) { this.#hooks.push(fn); }
- bump(id) { for (const fn of this.#hooks) fn(id); }
+ onCount(fn) {
+ this.#hooks.push(fn);
+ }
+ bump(id) {
+ for (const fn of this.#hooks) fn(id);
+ }
+
+ // ---- cinematic arrival ----------------------------------------------
+ // Eased progress through the sub-window [a, b] of the intro (fractions of
+ // INTRO_MS). Returns 1 once the intro is over — zero cost in steady state.
+ introPhase(a, b) {
+ if (this.intro >= 1) return 1;
+ const p = (this.intro - a) / (b - a);
+ if (p <= 0) return 0;
+ if (p >= 1) return 1;
+ return p * p * (3 - 2 * p); // smoothstep
+ }
+ replayIntro() {
+ this.#introT0 = performance.now();
+ }
// ---- viewport ------------------------------------------------------
resize() {
const rect = this.viewportRect();
- this.W = rect.width; this.H = rect.height;
- this.CX = this.W * 0.5; this.CY = this.H * 0.5;
+ this.W = rect.width;
+ this.H = rect.height;
+ this.CX = this.W * 0.5;
+ this.CY = this.H * 0.5;
this.R = Math.min(this.W, this.H) * 0.36;
- this.dpr = Math.min(2, window.devicePixelRatio || 1);
+ this.dpr = Math.min(2, window.devicePixelRatio || 1) * this.quality;
this.resizeBackend();
this.proj.setViewport(this.R, this.CX, this.CY);
this.resizeLayers();
@@ -92,35 +181,88 @@ export class BaseEngine {
// ---- main loop -----------------------------------------------------
start() {
- this.build(); // create/look-up state & nodes first
- this.resize(); // size the viewport, then position layers
- this.applyScene(); // map scene → element styles (svg only)
- window.addEventListener("resize", () => this.resize());
+ this.build(); // create/look-up state & nodes first
+ this.resize(); // size the viewport, then position layers
+ this.applyScene(); // map scene → element styles (svg only)
+ window.addEventListener('resize', () => this.resize());
+ document.addEventListener('visibilitychange', () => {
+ this.#last = performance.now();
+ });
this.#bindDrag();
+ this.#bindPointer();
+ this.#introT0 = performance.now();
+ this.#nextSurge = performance.now() + SURGE_FIRST_MS;
this.proj.setRotation(this.rotation[0], this.rotation[1], this.rotation[2]);
this.proj.updateSun(performance.now());
- requestAnimationFrame((t) => { this.#last = t; this.#frame(t); });
+ requestAnimationFrame((t) => {
+ this.#last = t;
+ this.#frame(t);
+ });
}
#frame(now) {
- const dt = Math.min(0.05, (now - this.#last) / 1000);
- this.#last = now; this.now = now; this.dt = dt; this.frameCount++;
+ const raw = now - this.#last;
+ const dt = Math.min(0.05, raw / 1000);
+ this.#last = now;
+ this.now = now;
+ this.dt = dt;
+ this.frameCount++;
+
+ this.#adaptQuality(raw);
+
+ // cinematic arrival progress
+ this.intro = this.scene.intro === false ? 1 : Math.min(1, (now - this.#introT0) / INTRO_MS);
const sim = this.sim;
- if (!sim.paused) {
- if (!this.#drag.active) {
- this.rotation[0] += sim.rotSpeed * dt;
- if (this.rotation[0] > 180) this.rotation[0] -= 360;
- if (this.rotation[0] < -180) this.rotation[0] += 360;
+ if (!this.#drag.active) {
+ // fling inertia glides on top of auto-rotation (works even when paused)
+ if (this.#fling) {
+ this.rotation[0] += this.#fling * dt;
+ this.#fling *= Math.exp(-2.6 * dt);
+ if (Math.abs(this.#fling) < 0.25) this.#fling = 0;
}
- this.#spawnAcc += dt * sim.rate;
+ // rotation eases in from stillness during the arrival
+ if (!sim.paused) this.rotation[0] += sim.rotSpeed * dt * this.introPhase(0, 0.8);
+ if (this.rotation[0] > 180) this.rotation[0] -= 360;
+ if (this.rotation[0] < -180) this.rotation[0] += 360;
+ }
+
+ // pointer parallax eases toward its target (or back to rest)
+ const lk = this.look,
+ ease = Math.min(1, dt * 2.5);
+ const want = this.scene.parallax !== false && !this.#drag.active;
+ lk.x += ((want ? lk.tx : 0) - lk.x) * ease;
+ lk.y += ((want ? lk.ty : 0) - lk.y) * ease;
+
+ // surges: occasionally one city erupts
+ this.#scheduleSurge(now);
+
+ if (!sim.paused && this.intro >= INTRO_BEAMS_AT) {
+ const mult = this.surge ? 2.6 : 1;
+ this.#spawnAcc += dt * sim.rate * mult;
let guard = 0;
const beams = this.#byName.beams;
- while (this.#spawnAcc >= 1 && guard < 12) { beams && beams.spawn(this); this.#spawnAcc -= 1; guard++; }
- }
- this.proj.setRotation(this.rotation[0], this.rotation[1], this.rotation[2]);
+ while (this.#spawnAcc >= 1 && guard < 12) {
+ beams && beams.spawn(this);
+ this.#spawnAcc -= 1;
+ guard++;
+ }
+ } else this.#spawnAcc = 0;
+
+ // displayed rotation = engine rotation + look offset (never written back)
+ const lam = this.rotation[0] + lk.x;
+ const phi = Math.max(-90, Math.min(90, this.rotation[1] + lk.y));
+ this.proj.setRotation(lam, phi, this.rotation[2]);
this.proj.updateSun(now);
+ // unwrapped longitude for background parallax
+ if (this.#prevLam === null) this.#prevLam = lam;
+ let dr = lam - this.#prevLam;
+ if (dr > 180) dr -= 360;
+ else if (dr < -180) dr += 360;
+ this.rotAcc += dr;
+ this.#prevLam = lam;
+
this.hq = this.proj.forward(this.data.HQ.lnglat);
this.hqVisible = !!this.hq && this.proj.visible(this.data.HQ.lnglat);
@@ -131,31 +273,109 @@ export class BaseEngine {
requestAnimationFrame((t) => this.#frame(t));
}
- // ---- drag to spin --------------------------------------------------
+ // ---- surges ----------------------------------------------------------
+ #scheduleSurge(now) {
+ if (this.surge && now > this.surge.until) this.surge = null;
+ if (this.surge || this.sim.paused || this.intro < 1) return;
+ if (this.scene.surges === false || now < this.#nextSurge) return;
+ // pick a city on the visible hemisphere
+ const cities = this.data.CITIES;
+ for (let k = 0; k < 10; k++) {
+ const c = cities[(Math.random() * cities.length) | 0];
+ if (this.proj.visible(c.lnglat)) {
+ this.surge = { city: c, t0: now, until: now + SURGE_LEN_MS };
+ this.emit('surge', { city: c });
+ break;
+ }
+ }
+ this.#nextSurge =
+ now + SURGE_EVERY_MS[0] + Math.random() * (SURGE_EVERY_MS[1] - SURGE_EVERY_MS[0]);
+ }
+
+ // EMA of raw frame time → nudge quality down/up with hysteresis + cooldown.
+ #adaptQuality(rawMs) {
+ if (rawMs <= 0 || rawMs > 250) return; // tab was hidden / first frame
+ this.#ema += (Math.min(rawMs, 80) - this.#ema) * 0.05;
+ if (--this.#cooldown > 0) return;
+ if (this.#ema > EMA_SLOW_MS && this.quality > QUALITY_MIN) {
+ this.quality = Math.max(QUALITY_MIN, this.quality - 0.15);
+ this.#cooldown = COOLDOWN_FRAMES;
+ this.resize();
+ } else if (this.#ema < EMA_FAST_MS && this.quality < 1) {
+ this.quality = Math.min(1, this.quality + 0.15);
+ this.#cooldown = COOLDOWN_FRAMES * 2; // step up more cautiously
+ this.resize();
+ }
+ }
+
+ // ---- pointer parallax ------------------------------------------------
+ #bindPointer() {
+ window.addEventListener('mousemove', (e) => {
+ if (this.#drag.active || !this.W) return;
+ this.look.tx = ((e.clientX / this.W) * 2 - 1) * LOOK_DEG;
+ this.look.ty = -((e.clientY / this.H) * 2 - 1) * LOOK_DEG;
+ });
+ window.addEventListener('mouseleave', () => {
+ this.look.tx = 0;
+ this.look.ty = 0;
+ });
+ }
+
+ // ---- drag to spin (with fling) --------------------------------------
#bindDrag() {
- const c = this.dragTarget(), d = this.#drag;
+ const c = this.dragTarget(),
+ d = this.#drag;
const pt = (e) => (e.touches ? e.touches[0] : e);
- const down = (e) => { d.active = true; const p = pt(e); d.x = p.clientX; d.y = p.clientY; c.classList.add("grabbing"); e.preventDefault(); };
+ const down = (e) => {
+ d.active = true;
+ this.#fling = 0;
+ const p = pt(e);
+ d.x = p.clientX;
+ d.y = p.clientY;
+ d.vx = 0;
+ d.t = performance.now();
+ c.classList.add('grabbing');
+ e.preventDefault();
+ };
const move = (e) => {
if (!d.active) return;
- const p = pt(e), k = 0.26;
- this.rotation[0] += (p.clientX - d.x) * k;
+ const p = pt(e),
+ k = 0.26;
+ const ddeg = (p.clientX - d.x) * k;
+ this.rotation[0] += ddeg;
this.rotation[1] = Math.max(-90, Math.min(90, this.rotation[1] - (p.clientY - d.y) * k));
- d.x = p.clientX; d.y = p.clientY;
+ const t = performance.now(),
+ dts = Math.max(0.008, (t - d.t) / 1000);
+ d.vx = d.vx * 0.75 + (ddeg / dts) * 0.25; // smoothed angular velocity (°/s)
+ d.x = p.clientX;
+ d.y = p.clientY;
+ d.t = t;
+ };
+ const up = () => {
+ if (!d.active) return;
+ d.active = false;
+ c.classList.remove('grabbing');
+ // recent movement → glide; stale velocity (held still) → no fling
+ if (performance.now() - d.t < 90) this.#fling = Math.max(-200, Math.min(200, d.vx));
};
- const up = () => { d.active = false; c.classList.remove("grabbing"); };
- c.addEventListener("mousedown", down);
- window.addEventListener("mousemove", move);
- window.addEventListener("mouseup", up);
- c.addEventListener("touchstart", down, { passive: false });
- window.addEventListener("touchmove", move, { passive: false });
- window.addEventListener("touchend", up);
+ c.addEventListener('mousedown', down);
+ window.addEventListener('mousemove', move);
+ window.addEventListener('mouseup', up);
+ c.addEventListener('touchstart', down, { passive: false });
+ window.addEventListener('touchmove', move, { passive: false });
+ window.addEventListener('touchend', up);
}
// ---- backend hooks (overridden by subclasses) ---------------------
- viewportRect() { throw new Error("viewportRect not implemented"); }
+ viewportRect() {
+ throw new Error('viewportRect not implemented');
+ }
resizeBackend() {}
- dragTarget() { throw new Error("dragTarget not implemented"); }
- renderFrame() { throw new Error("renderFrame not implemented"); }
+ dragTarget() {
+ throw new Error('dragTarget not implemented');
+ }
+ renderFrame() {
+ throw new Error('renderFrame not implemented');
+ }
applyScene() {}
}
diff --git a/shared/geo.js b/shared/geo.js
index 14a7dac..732cf0e 100644
--- a/shared/geo.js
+++ b/shared/geo.js
@@ -8,28 +8,41 @@
* Hot-loop layers read the public fields (lon0, sinLat0, cosLat0, cx, cy, R)
* and inline the projection. Cold paths (HQ, source cities) use forward().
*
+ * The graticule and the night/core circles are cached: the graticule is fixed
+ * config, and the night shapes only change when the sun moves (~1/s), so
+ * nothing rebuilds GeoJSON per frame.
+ *
* Depends on the global `d3` (geo module).
*/
-import { DEG } from "./util.js";
+import { DEG } from './util.js';
export class Projection {
#lastSun = -1e9;
+ #graticule = null;
+ #nightShape = null;
+ #coreShape = null;
constructor() {
this.d3proj = d3.geoOrthographic().clipAngle(90).precision(0.4);
- this.rotation = [-10, -25, 0]; // [lambda, phi, gamma]; start near Europe/Atlantic
- this.antisolar = [180, 0]; // night-hemisphere centre; moved by updateSun()
+ this.rotation = [-10, -25, 0]; // [lambda, phi, gamma]; start near Europe/Atlantic
+ this.antisolar = [180, 0]; // night-hemisphere centre; moved by updateSun()
- this.R = 0; this.cx = 0; this.cy = 0;
- this.lon0 = 0; this.sinLat0 = 0; this.cosLat0 = 1;
+ this.R = 0;
+ this.cx = 0;
+ this.cy = 0;
+ this.lon0 = 0;
+ this.sinLat0 = 0;
+ this.cosLat0 = 1;
- this.sun = { lon: 0, sinLat: 0, cosLat: 1 };
+ this.sun = { lon: 0, sinLat: 0, cosLat: 1, sinLon: 0, cosLon: 1 };
this.setRotation(this.rotation[0], this.rotation[1], this.rotation[2]); // initial sync
}
setViewport(R, cx, cy) {
- this.R = R; this.cx = cx; this.cy = cy;
+ this.R = R;
+ this.cx = cx;
+ this.cy = cy;
this.d3proj.scale(R).translate([cx, cy]);
}
@@ -58,29 +71,58 @@ export class Projection {
return d3.geoDistance(lnglat, c) < Math.PI / 2 - 0.04;
}
- // GeoJSON shapes for a d3.geoPath. The projection applies the rotation, so
- // these depend only on fixed config (+ the antisolar centre for night/core).
- graticule() { return d3.geoGraticule().step([20, 20])(); }
- nightShape() { return d3.geoCircle().radius(90).center(this.antisolar)(); } // twilight edge
- coreShape() { return d3.geoCircle().radius(116).center(this.antisolar)(); } // deep-night core
+ // GeoJSON shapes for a d3.geoPath. The graticule is fixed; the night/core
+ // circles are rebuilt only when the sun moves (see updateSun).
+ graticule() {
+ if (!this.#graticule) this.#graticule = d3.geoGraticule().step([20, 20])();
+ return this.#graticule;
+ }
+ nightShape() {
+ if (!this.#nightShape) this.#nightShape = d3.geoCircle().radius(90).center(this.antisolar)();
+ return this.#nightShape;
+ }
+ coreShape() {
+ if (!this.#coreShape) this.#coreShape = d3.geoCircle().radius(116).center(this.antisolar)();
+ return this.#coreShape;
+ }
+
+ // Unit direction of the subsolar point in view space: x → screen right,
+ // y → screen up (flip for canvas), z → toward the viewer. Lets renderers
+ // place limb glare / scale daylight effects without d3 (and even when the
+ // subsolar point is on the far hemisphere, where forward() returns null).
+ sunDir() {
+ const dlon = this.sun.lon - this.lon0;
+ const cd = Math.cos(dlon),
+ sd = Math.sin(dlon);
+ return {
+ x: this.sun.cosLat * sd,
+ y: this.cosLat0 * this.sun.sinLat - this.sinLat0 * this.sun.cosLat * cd,
+ z: this.sinLat0 * this.sun.sinLat + this.cosLat0 * this.sun.cosLat * cd,
+ };
+ }
// Real subsolar point from the clock; recomputed ~1/s (the sun barely moves).
updateSun(now) {
if (now - this.#lastSun < 1000) return;
this.#lastSun = now;
-
+
const dt = new Date();
const utc = dt.getUTCHours() + dt.getUTCMinutes() / 60 + dt.getUTCSeconds() / 3600;
const lonDeg = -15 * (utc - 12);
const start = Date.UTC(dt.getUTCFullYear(), 0, 0);
const doy = Math.floor((dt - start) / 86400000);
const declDeg = -23.44 * Math.cos((360 / 365) * (doy + 10) * DEG);
-
- this.sun.lon = lonDeg * DEG;
+
+ const lonR = lonDeg * DEG;
+ this.sun.lon = lonR;
+ this.sun.sinLon = Math.sin(lonR);
+ this.sun.cosLon = Math.cos(lonR);
this.sun.sinLat = Math.sin(declDeg * DEG);
this.sun.cosLat = Math.cos(declDeg * DEG);
this.antisolar = [lonDeg + 180, -declDeg];
+ this.#nightShape = null; // rebuild lazily with the new centre
+ this.#coreShape = null;
}
}
diff --git a/shared/geometry.js b/shared/geometry.js
index 13f7140..c93e2f0 100644
--- a/shared/geometry.js
+++ b/shared/geometry.js
@@ -3,14 +3,26 @@
* Pure functions that turn the projection + scene into coordinates. No DOM, no
* canvas, no rendering — each renderer takes these points/arrays and paints them
* its own way. Depends on the global `d3` (geoContains) for land-dot seeding.
+ *
+ * Perf notes:
+ * • Land dots / spikes precompute sin/cos of BOTH lat and lng at build time,
+ * so the per-frame projection needs zero trig calls per point — just a few
+ * multiplies (cos/sin of a longitude difference via the angle-sum identity).
+ * • Land dots are sorted by relief tier at build time (`tierEnd` ranges), so
+ * the renderer draws each tier as one contiguous run with one fillStyle and
+ * no per-dot branch.
+ * • The aurora samples fixed longitudes, so their sin/cos live in a table.
*/
-import { DEG, TAU } from "./util.js";
-import { AURORA_SCHEMES } from "./config.js";
+import { DEG, TAU } from './util.js';
+import { AURORA_SCHEMES } from './config.js';
// ---- beam arc (screen-space lifted quadratic) --------------------------
export function arcControl(a, b, CX, CY, R) {
- const mx = (a[0] + b[0]) / 2, my = (a[1] + b[1]) / 2;
- const vx = mx - CX, vy = my - CY, vlen = Math.hypot(vx, vy) || 1;
+ const mx = (a[0] + b[0]) / 2,
+ my = (a[1] + b[1]) / 2;
+ const vx = mx - CX,
+ vy = my - CY,
+ vlen = Math.hypot(vx, vy) || 1;
const dist = Math.hypot(b[0] - a[0], b[1] - a[1]);
const lift = Math.min(R * 0.9, dist * 0.42 + R * 0.12);
return [mx + (vx / vlen) * lift, my + (vy / vlen) * lift];
@@ -18,55 +30,111 @@ export function arcControl(a, b, CX, CY, R) {
// De Casteljau split of the quadratic (p0,cp,p1) at t → the partial curve's
// control point (ax,ay) and its endpoint / beam head (hx,hy).
export function quadSplit(p0, cp, p1, t) {
- const ax = p0[0] + (cp[0] - p0[0]) * t, ay = p0[1] + (cp[1] - p0[1]) * t;
- const bx = cp[0] + (p1[0] - cp[0]) * t, by = cp[1] + (p1[1] - cp[1]) * t;
+ const ax = p0[0] + (cp[0] - p0[0]) * t,
+ ay = p0[1] + (cp[1] - p0[1]) * t;
+ const bx = cp[0] + (p1[0] - cp[0]) * t,
+ by = cp[1] + (p1[1] - cp[1]) * t;
return { ax, ay, hx: ax + (bx - ax) * t, hy: ay + (by - ay) * t };
}
// Point on the quadratic at parameter u.
export function quadPoint(p0, cp, p1, u) {
const iu = 1 - u;
- return [iu * iu * p0[0] + 2 * iu * u * cp[0] + u * u * p1[0],
- iu * iu * p0[1] + 2 * iu * u * cp[1] + u * u * p1[1]];
+ return [
+ iu * iu * p0[0] + 2 * iu * u * cp[0] + u * u * p1[0],
+ iu * iu * p0[1] + 2 * iu * u * cp[1] + u * u * p1[1],
+ ];
}
// ---- dotted land -------------------------------------------------------
+// Returns tier-SORTED arrays (small → large) plus `tierEnd` — the exclusive
+// end index of each tier — so renderers can draw contiguous runs. The legacy
+// fields (`lng`, `tier`) are kept for compatibility with the SVG build.
export function buildLandDots(feature, step) {
- const sinA = [], cosA = [], lngA = [], cityA = [], grpA = [], tierA = [], pts = [];
+ const recs = [];
for (let lat = -84; lat <= 84; lat += step) {
const ringStep = step / Math.max(0.18, Math.cos(lat * DEG));
for (let l = -180; l < 180; l += ringStep) {
if (!d3.geoContains(feature, [l, lat])) continue;
- const latR = lat * DEG;
- sinA.push(Math.sin(latR)); cosA.push(Math.cos(latR)); lngA.push(l * DEG);
- pts.push([l, lat]);
- cityA.push(Math.random() < 0.45 ? 1 : 0);
- grpA.push((Math.random() * 3) | 0);
- // size tier for relief texture: ~46% small, ~37% medium, ~17% large
+ const latR = lat * DEG,
+ lngR = l * DEG;
const r = Math.random();
- tierA.push(r < 0.46 ? 0 : (r < 0.83 ? 1 : 2));
+ recs.push({
+ sin: Math.sin(latR),
+ cos: Math.cos(latR),
+ lng: lngR,
+ sinLng: Math.sin(lngR),
+ cosLng: Math.cos(lngR),
+ city: Math.random() < 0.45 ? 1 : 0,
+ grp: (Math.random() * 3) | 0,
+ tier: r < 0.46 ? 0 : r < 0.83 ? 1 : 2,
+ pt: [l, lat],
+ });
}
}
- return {
- sin: Float64Array.from(sinA), cos: Float64Array.from(cosA), lng: Float64Array.from(lngA),
- isCity: Uint8Array.from(cityA), grp: Uint8Array.from(grpA), tier: Uint8Array.from(tierA),
- n: sinA.length, pts,
+ recs.sort((a, b) => a.tier - b.tier);
+ const n = recs.length;
+ const d = {
+ sin: new Float32Array(n),
+ cos: new Float32Array(n),
+ lng: new Float32Array(n),
+ sinLng: new Float32Array(n),
+ cosLng: new Float32Array(n),
+ isCity: new Uint8Array(n),
+ grp: new Uint8Array(n),
+ tier: new Uint8Array(n),
+ tierEnd: [0, 0, n],
+ n,
+ pts: new Array(n),
};
+ for (let i = 0; i < n; i++) {
+ const r = recs[i];
+ d.sin[i] = r.sin;
+ d.cos[i] = r.cos;
+ d.lng[i] = r.lng;
+ d.sinLng[i] = r.sinLng;
+ d.cosLng[i] = r.cosLng;
+ d.isCity[i] = r.city;
+ d.grp[i] = r.grp;
+ d.tier[i] = r.tier;
+ d.pts[i] = r.pt;
+ if (r.tier === 0) d.tierEnd[0] = i + 1;
+ if (r.tier <= 1) d.tierEnd[1] = i + 1;
+ }
+ return d;
}
// ---- corona spikes -----------------------------------------------------
export function buildSpikes(step = 7) {
- const sinA = [], cosA = [], lngA = [], lenA = [], phA = [];
+ const sinA = [],
+ cosA = [],
+ lngA = [],
+ sinLngA = [],
+ cosLngA = [],
+ lenA = [],
+ phA = [];
for (let lat = -86; lat <= 86; lat += step) {
const ringStep = step / Math.max(0.16, Math.cos(lat * DEG));
for (let l = -180; l < 180; l += ringStep) {
- const latR = lat * DEG;
- sinA.push(Math.sin(latR)); cosA.push(Math.cos(latR)); lngA.push(l * DEG);
- lenA.push(0.25 + Math.random() * 0.95); phA.push(Math.random() * TAU);
+ const latR = lat * DEG,
+ lngR = l * DEG;
+ sinA.push(Math.sin(latR));
+ cosA.push(Math.cos(latR));
+ lngA.push(lngR);
+ sinLngA.push(Math.sin(lngR));
+ cosLngA.push(Math.cos(lngR));
+ lenA.push(0.25 + Math.random() * 0.95);
+ phA.push(Math.random() * TAU);
}
}
return {
- sin: Float64Array.from(sinA), cos: Float64Array.from(cosA), lng: Float64Array.from(lngA),
- lenF: Float64Array.from(lenA), phase: Float64Array.from(phA), n: sinA.length,
+ sin: Float32Array.from(sinA),
+ cos: Float32Array.from(cosA),
+ lng: Float32Array.from(lngA),
+ sinLng: Float32Array.from(sinLngA),
+ cosLng: Float32Array.from(cosLngA),
+ lenF: Float32Array.from(lenA),
+ phase: Float32Array.from(phA),
+ n: sinA.length,
};
}
@@ -77,7 +145,9 @@ export function pickNodes(pts, count = 18) {
for (let i = 0; i < count; i++) {
nodes.push({
ll: pts[(Math.random() * pts.length) | 0],
- phase: Math.random() * TAU, sp: 1.5 + Math.random() * 2.5, size: 1.3 + Math.random() * 1.6,
+ phase: Math.random() * TAU,
+ sp: 1.5 + Math.random() * 2.5,
+ size: 1.3 + Math.random() * 1.6,
});
}
return nodes;
@@ -86,28 +156,52 @@ export function pickNodes(pts, count = 18) {
// ---- orbital rings -----------------------------------------------------
export const ORBIT_DEFS = [
{ rf: 1.16, incl: 1.15, yaw0: 0.4, spin: 0.05, sat: true },
- { rf: 1.24, incl: 0.6, yaw0: 2.1, spin: -0.035, sat: false },
- { rf: 1.10, incl: 1.45, yaw0: 1.2, spin: 0.06, sat: true },
+ { rf: 1.24, incl: 0.6, yaw0: 2.1, spin: -0.035, sat: false },
+ { rf: 1.1, incl: 1.45, yaw0: 1.2, spin: 0.06, sat: true },
{ rf: 1.32, incl: 0.95, yaw0: 3.0, spin: -0.025, sat: false },
- { rf: 1.19, incl: 0.3, yaw0: 0.8, spin: 0.04, sat: false },
+ { rf: 1.19, incl: 0.3, yaw0: 0.8, spin: 0.04, sat: false },
];
// Front/back point lists for one ring at time `now`. o = index (drives sat phase).
export function computeOrbit(cfg, o, R, CX, CY, now, N = 84) {
const Rr = R * cfg.rf;
- const ci = Math.cos(cfg.incl), si = Math.sin(cfg.incl);
+ const ci = Math.cos(cfg.incl),
+ si = Math.sin(cfg.incl);
const yaw = cfg.yaw0 + now * 0.001 * cfg.spin * 6;
- const cy_ = Math.cos(yaw), sy = Math.sin(yaw);
- const front = [], back = [];
- let fSeg = null, bSeg = null, sat = null;
- const satIdx = ((now * 0.0004 * (o + 1)) % 1) * N | 0;
+ const cy_ = Math.cos(yaw),
+ sy = Math.sin(yaw);
+ const front = [],
+ back = [];
+ let fSeg = null,
+ bSeg = null,
+ sat = null;
+ const satIdx = (((now * 0.0004 * (o + 1)) % 1) * N) | 0;
for (let k = 0; k <= N; k++) {
const a = (k / N) * TAU;
- const x0 = Math.cos(a), y0 = Math.sin(a);
- const y1 = y0 * ci, z1 = y0 * si, x1 = x0; // tilt around X (z0 = 0)
- const x2 = x1 * cy_ + z1 * sy, z2 = -x1 * sy + z1 * cy_, y2 = y1; // spin around Y
- const sx = CX + x2 * Rr, syc = CY - y2 * Rr;
- if (z2 >= 0) { if (!fSeg) { fSeg = []; front.push(fSeg); } fSeg.push(sx, syc); bSeg = null; }
- else { if (!bSeg) { bSeg = []; back.push(bSeg); } bSeg.push(sx, syc); fSeg = null; }
+ const x0 = Math.cos(a),
+ y0 = Math.sin(a);
+ const y1 = y0 * ci,
+ z1 = y0 * si,
+ x1 = x0; // tilt around X (z0 = 0)
+ const x2 = x1 * cy_ + z1 * sy,
+ z2 = -x1 * sy + z1 * cy_,
+ y2 = y1; // spin around Y
+ const sx = CX + x2 * Rr,
+ syc = CY - y2 * Rr;
+ if (z2 >= 0) {
+ if (!fSeg) {
+ fSeg = [];
+ front.push(fSeg);
+ }
+ fSeg.push(sx, syc);
+ bSeg = null;
+ } else {
+ if (!bSeg) {
+ bSeg = [];
+ back.push(bSeg);
+ }
+ bSeg.push(sx, syc);
+ fSeg = null;
+ }
if (cfg.sat && k === satIdx) sat = { x: sx, y: syc, front: z2 >= 0 };
}
return { front, back, sat };
@@ -118,28 +212,54 @@ export function auroraSpecs(scene) {
const sch = AURORA_SCHEMES[scene.auroraScheme] || AURORA_SCHEMES.gv;
const bl = scene.auroraLat;
return [
- { lat: bl, amp: 4.5, phase: 0, col: sch[0], width: 5.5, op0: 0.34, opPh: 0 },
- { lat: bl + 2.5, amp: 5.5, phase: 1.6, col: sch[1], width: 3.5, op0: 0.30, opPh: 1.7 },
- { lat: -bl, amp: 4.5, phase: 2.4, col: sch[0], width: 5.5, op0: 0.34, opPh: 3.1 },
- { lat: -bl - 2.5, amp: 5.5, phase: 3.9, col: sch[1], width: 3.5, op0: 0.30, opPh: 4.6 },
+ { lat: bl, amp: 4.5, phase: 0, col: sch[0], width: 5.5, op0: 0.34, opPh: 0 },
+ { lat: bl + 2.5, amp: 5.5, phase: 1.6, col: sch[1], width: 3.5, op0: 0.3, opPh: 1.7 },
+ { lat: -bl, amp: 4.5, phase: 2.4, col: sch[0], width: 5.5, op0: 0.34, opPh: 3.1 },
+ { lat: -bl - 2.5, amp: 5.5, phase: 3.9, col: sch[1], width: 3.5, op0: 0.3, opPh: 4.6 },
];
}
+// Fixed longitude sample points for the aurora bands (4° apart) — their sin/cos
+// never change, so they live in a build-once table.
+const AUR_N = 91;
+const AUR_LNG = new Float64Array(AUR_N),
+ AUR_SIN = new Float64Array(AUR_N),
+ AUR_COS = new Float64Array(AUR_N);
+for (let i = 0; i < AUR_N; i++) {
+ const lngR = (-180 + i * 4) * DEG;
+ AUR_LNG[i] = lngR;
+ AUR_SIN[i] = Math.sin(lngR);
+ AUR_COS[i] = Math.cos(lngR);
+}
// Front-only polyline segments for one band (split where it crosses the limb).
export function auroraSegments(proj, CX, CY, R, baseLat, amp, phase, now, speed) {
const { lon0, sinLat0, cosLat0 } = proj;
+ const cosLon0 = Math.cos(lon0),
+ sinLon0 = Math.sin(lon0);
const t = now * 0.0006 * speed;
- const segs = []; let seg = null;
- for (let l = -180; l <= 180; l += 4) {
- const lngR = l * DEG;
- const lat = baseLat + amp * Math.sin(lngR * 3 + t * 6 + phase) + amp * 0.5 * Math.sin(lngR * 7 - t * 4 + phase);
- const latR = lat * DEG, sinL = Math.sin(latR), cosL = Math.cos(latR);
- const dlon = lngR - lon0, cd = Math.cos(dlon);
+ const segs = [];
+ let seg = null;
+ for (let i = 0; i < AUR_N; i++) {
+ const lngR = AUR_LNG[i];
+ const lat =
+ baseLat +
+ amp * Math.sin(lngR * 3 + t * 6 + phase) +
+ amp * 0.5 * Math.sin(lngR * 7 - t * 4 + phase);
+ const latR = lat * DEG,
+ sinL = Math.sin(latR),
+ cosL = Math.cos(latR);
+ const cd = AUR_COS[i] * cosLon0 + AUR_SIN[i] * sinLon0; // cos(lng − lon0)
const cosc = sinLat0 * sinL + cosLat0 * cosL * cd;
- if (cosc <= 0.02) { seg = null; continue; } // back / limb → break
- const sd = Math.sin(dlon);
+ if (cosc <= 0.02) {
+ seg = null;
+ continue;
+ } // back / limb → break
+ const sd = AUR_SIN[i] * cosLon0 - AUR_COS[i] * sinLon0; // sin(lng − lon0)
const px = CX + R * (cosL * sd);
const py = CY - R * (cosLat0 * sinL - sinLat0 * cosL * cd);
- if (!seg) { seg = []; segs.push(seg); }
+ if (!seg) {
+ seg = [];
+ segs.push(seg);
+ }
seg.push(px, py);
}
return segs;
diff --git a/shared/scene-schema.js b/shared/scene-schema.js
index daa6282..54e6223 100644
--- a/shared/scene-schema.js
+++ b/shared/scene-schema.js
@@ -25,54 +25,203 @@ export const SCENE_SCHEMA = {
version: 1,
sections: [
{
- id: "texture", title: "Texture", fields: [
- { key: "dotSize", type: "range", label: "Dot size", default: 2.9, min: 1.5, max: 4.5, step: 0.1, unit: "px", decimals: 1 },
- { key: "texture", type: "range", label: "Relief texture", default: 0.32, min: 0, max: 0.6, step: 0.02, display: "pctOfMax" },
- { key: "landBright", type: "range", label: "Land brightness", default: 1, min: 0.4, max: 1, step: 0.05, display: "pct" },
- { key: "density", type: "select", label: "Dot density", default: "med",
- options: [{ value: "sparse", label: "Sparse" }, { value: "med", label: "Medium" }, { value: "dense", label: "Dense" }] },
- { key: "grid", type: "toggle", label: "Lat / long grid", default: false },
+ id: 'texture',
+ title: 'Texture',
+ fields: [
+ {
+ key: 'dotSize',
+ type: 'range',
+ label: 'Dot size',
+ default: 2.9,
+ min: 1.5,
+ max: 4.5,
+ step: 0.1,
+ unit: 'px',
+ decimals: 1,
+ },
+ {
+ key: 'texture',
+ type: 'range',
+ label: 'Relief texture',
+ default: 0.32,
+ min: 0,
+ max: 0.6,
+ step: 0.02,
+ display: 'pctOfMax',
+ },
+ {
+ key: 'landBright',
+ type: 'range',
+ label: 'Land brightness',
+ default: 1,
+ min: 0.4,
+ max: 1,
+ step: 0.05,
+ display: 'pct',
+ },
+ {
+ key: 'density',
+ type: 'select',
+ label: 'Dot density',
+ default: 'med',
+ options: [
+ { value: 'sparse', label: 'Sparse' },
+ { value: 'med', label: 'Medium' },
+ { value: 'dense', label: 'Dense' },
+ ],
+ },
+ { key: 'grid', type: 'toggle', label: 'Lat / long grid', default: false },
],
},
{
- id: "atmosphere", title: "Atmosphere", fields: [
- { key: "atmos", type: "range", label: "Atmospheric glow", default: 1, min: 0, max: 2, step: 0.1, display: "pctOfMax" },
+ id: 'atmosphere',
+ title: 'Atmosphere',
+ fields: [
+ {
+ key: 'atmos',
+ type: 'range',
+ label: 'Atmospheric glow',
+ default: 1,
+ min: 0,
+ max: 2,
+ step: 0.1,
+ display: 'pctOfMax',
+ },
+ { key: 'sunGlare', type: 'toggle', label: 'Sun glare on limb', default: true },
],
},
{
- id: "daynight", title: "Day & night", fields: [
- { key: "dayNight", type: "toggle", label: "Day / night shadow", default: true },
- { key: "darkness", type: "range", label: "Night darkness", default: 0.55, min: 0, max: 0.9, step: 0.05, display: "pctOfMax" },
- { key: "cityLights", type: "toggle", label: "City lights", default: true },
- { key: "cityBright", type: "range", label: "City brightness", default: 1, min: 0.3, max: 1.4, step: 0.05, display: "pctOfMax" },
+ id: 'daynight',
+ title: 'Day & night',
+ fields: [
+ { key: 'dayNight', type: 'toggle', label: 'Day / night shadow', default: true },
+ {
+ key: 'darkness',
+ type: 'range',
+ label: 'Night darkness',
+ default: 0.55,
+ min: 0,
+ max: 0.9,
+ step: 0.05,
+ display: 'pctOfMax',
+ },
+ { key: 'cityLights', type: 'toggle', label: 'City lights', default: true },
+ {
+ key: 'cityBright',
+ type: 'range',
+ label: 'City brightness',
+ default: 1,
+ min: 0.3,
+ max: 1.4,
+ step: 0.05,
+ display: 'pctOfMax',
+ },
+ { key: 'sunGlint', type: 'toggle', label: 'Ocean sun glint', default: true },
],
},
{
- id: "aurora", title: "Aurora", fields: [
- { key: "aurora", type: "toggle", label: "Aurora", default: true },
- { key: "auroraIntensity", type: "range", label: "Intensity", default: 1, min: 0, max: 1.5, step: 0.05, display: "pctOfMax" },
- { key: "auroraLat", type: "range", label: "Latitude", default: 71, min: 55, max: 82, step: 1, unit: "°", decimals: 0 },
- { key: "auroraSpeed", type: "range", label: "Speed", default: 1, min: 0, max: 3, step: 0.1, unit: "×", decimals: 1 },
- { key: "auroraScheme", type: "select", label: "Colour", default: "gv",
- options: [{ value: "gv", label: "Green·Violet" }, { value: "emerald", label: "Emerald" }, { value: "rose", label: "Rose" }] },
+ id: 'aurora',
+ title: 'Aurora',
+ fields: [
+ { key: 'aurora', type: 'toggle', label: 'Aurora', default: true },
+ {
+ key: 'auroraIntensity',
+ type: 'range',
+ label: 'Intensity',
+ default: 1,
+ min: 0,
+ max: 1.5,
+ step: 0.05,
+ display: 'pctOfMax',
+ },
+ {
+ key: 'auroraLat',
+ type: 'range',
+ label: 'Latitude',
+ default: 71,
+ min: 55,
+ max: 82,
+ step: 1,
+ unit: '°',
+ decimals: 0,
+ },
+ {
+ key: 'auroraSpeed',
+ type: 'range',
+ label: 'Speed',
+ default: 1,
+ min: 0,
+ max: 3,
+ step: 0.1,
+ unit: '×',
+ decimals: 1,
+ },
+ {
+ key: 'auroraScheme',
+ type: 'select',
+ label: 'Colour',
+ default: 'gv',
+ options: [
+ { value: 'gv', label: 'Green·Violet' },
+ { value: 'emerald', label: 'Emerald' },
+ { value: 'rose', label: 'Rose' },
+ ],
+ },
],
},
{
- id: "effects", title: "Effects", fields: [
- { key: "corona", type: "toggle", label: "Edge corona", default: true },
- { key: "coronaIntensity", type: "range", label: "Corona intensity", default: 0.1, min: 0, max: 0.4, step: 0.02, display: "pctOfMax" },
- { key: "nodes", type: "toggle", label: "Star nodes", default: true },
- { key: "orbits", type: "toggle", label: "Orbital rings", default: true },
+ id: 'effects',
+ title: 'Effects',
+ fields: [
+ { key: 'corona', type: 'toggle', label: 'Edge corona', default: true },
+ {
+ key: 'coronaIntensity',
+ type: 'range',
+ label: 'Corona intensity',
+ default: 0.1,
+ min: 0,
+ max: 0.4,
+ step: 0.02,
+ display: 'pctOfMax',
+ },
+ { key: 'nodes', type: 'toggle', label: 'Star nodes', default: true },
+ { key: 'orbits', type: 'toggle', label: 'Orbital rings', default: true },
],
},
{
- id: "cosmos", title: "Cosmos", fields: [
- { key: "shootingStars", type: "toggle", label: "Shooting stars", default: true },
- { key: "meteorRate", type: "range", label: "Meteor frequency", default: 0.5, min: 0, max: 1, step: 0.05, display: "pct" },
- { key: "beamTrails", type: "toggle", label: "Comet beam trails", default: true },
- { key: "atmosPulse", type: "toggle", label: "Atmosphere pulse", default: true },
- { key: "starTwinkle", type: "toggle", label: "Star twinkle", default: true },
- { key: "starDrift", type: "toggle", label: "Star drift", default: true },
+ id: 'cinema',
+ title: 'Cinema',
+ fields: [
+ { key: 'intro', type: 'toggle', label: 'Cinematic arrival', default: true },
+ { key: 'parallax', type: 'toggle', label: 'Pointer parallax', default: true },
+ { key: 'heartbeat', type: 'toggle', label: 'HQ heartbeat', default: true },
+ { key: 'surges', type: 'toggle', label: 'City surges', default: true },
+ ],
+ },
+ {
+ id: 'cosmos',
+ title: 'Cosmos',
+ fields: [
+ { key: 'shootingStars', type: 'toggle', label: 'Shooting stars', default: true },
+ {
+ key: 'meteorRate',
+ type: 'range',
+ label: 'Meteor frequency',
+ default: 0.4,
+ min: 0,
+ max: 1,
+ step: 0.05,
+ display: 'pct',
+ },
+ { key: 'parallaxStars', type: 'toggle', label: 'Parallax stars', default: true },
+ { key: 'nebula', type: 'toggle', label: 'Nebula haze', default: true },
+ { key: 'moon', type: 'toggle', label: 'The Moon', default: true },
+ { key: 'comet', type: 'toggle', label: 'Rare comet', default: true },
+ { key: 'constellations', type: 'toggle', label: 'Constellations', default: true },
+ { key: 'beamTrails', type: 'toggle', label: 'Comet beam trails', default: true },
+ { key: 'atmosPulse', type: 'toggle', label: 'Atmosphere pulse', default: true },
+ { key: 'starTwinkle', type: 'toggle', label: 'Star twinkle', default: true },
+ { key: 'starDrift', type: 'toggle', label: 'Star drift', default: true },
],
},
],
@@ -94,19 +243,21 @@ export function sceneDefaults() {
// clamped/snapped to its bounds (range), checked against options (select), or
// forced to boolean (toggle). Missing/invalid values fall back to the default.
export function sanitizeScene(input) {
- const src = input && typeof input === "object" ? input : {};
+ const src = input && typeof input === 'object' ? input : {};
const out = {};
for (const f of sceneFields()) {
const v = src[f.key];
- if (f.type === "toggle") {
- out[f.key] = typeof v === "boolean" ? v : f.default;
- } else if (f.type === "select") {
+ if (f.type === 'toggle') {
+ out[f.key] = typeof v === 'boolean' ? v : f.default;
+ } else if (f.type === 'select') {
out[f.key] = f.options.some((o) => o.value === v) ? v : f.default;
- } else { // range
+ } else {
+ // range
let n = Number(v);
if (!Number.isFinite(n)) n = f.default;
n = Math.min(f.max, Math.max(f.min, n));
- if (f.step) n = Math.min(f.max, Math.max(f.min, f.min + Math.round((n - f.min) / f.step) * f.step));
+ if (f.step)
+ n = Math.min(f.max, Math.max(f.min, f.min + Math.round((n - f.min) / f.step) * f.step));
out[f.key] = Number(n.toFixed(6)); // kill binary-float dust from snapping
}
}
@@ -115,7 +266,7 @@ export function sanitizeScene(input) {
// Human-readable read-out for a range field (used by the demo panel only).
export function formatValue(field, value) {
- if (field.display === "pct") return Math.round(value * 100) + "%";
- if (field.display === "pctOfMax") return Math.round((value / field.max) * 100) + "%";
- return Number(value).toFixed(field.decimals ?? 0) + (field.unit || "");
+ if (field.display === 'pct') return Math.round(value * 100) + '%';
+ if (field.display === 'pctOfMax') return Math.round((value / field.max) * 100) + '%';
+ return Number(value).toFixed(field.decimals ?? 0) + (field.unit || '');
}
diff --git a/shared/sim.js b/shared/sim.js
index b4b5574..1580207 100644
--- a/shared/sim.js
+++ b/shared/sim.js
@@ -4,22 +4,35 @@
* renderers own the visual objects (canvas data / svg nodes) but defer *what
* happens* to these helpers, so the behaviour can't drift between builds.
*/
-import { weightedPick, tint } from "./util.js";
+import { weightedPick, tint } from './util.js';
// ---- beams -------------------------------------------------------------
-export const BEAM = { DRAW_MS: 1500, HOLD_MS: 700, FADE_MS: 950 };
+// Calm-and-majestic pacing: a slow, graceful draw with a long dissolve.
+export const BEAM = { DRAW_MS: 1800, HOLD_MS: 700, FADE_MS: 1100 };
BEAM.LIFE_MS = BEAM.DRAW_MS + BEAM.HOLD_MS + BEAM.FADE_MS;
// Choose the next beam's activity type (weighted) + a visible source city.
+// During a city surge, ~70% of beams originate from the surging city.
export function pickBeam(e) {
if (!e.proj.visible(e.data.HQ.lnglat)) return null; // can't land if HQ faces away
const enabled = e.data.ACTIVITY_TYPES.filter((t) => e.state.types[t.id].enabled);
if (!enabled.length) return null;
const type = weightedPick(enabled, (t) => e.state.types[t.id].weight || 1);
let city = null;
- for (let k = 0; k < 8; k++) {
+ if (
+ e.surge &&
+ e.surge.until > e.now &&
+ Math.random() < 0.7 &&
+ e.proj.visible(e.surge.city.lnglat)
+ ) {
+ city = e.surge.city;
+ }
+ for (let k = 0; !city && k < 8; k++) {
const c = e.data.CITIES[(Math.random() * e.data.CITIES.length) | 0];
- if (e.proj.visible(c.lnglat)) { city = c; break; }
+ if (e.proj.visible(c.lnglat)) {
+ city = c;
+ break;
+ }
}
return city ? { type, city } : null;
}
@@ -35,18 +48,25 @@ export function spawnMeteorParams(W, H) {
const x = fromRight ? W + 40 : Math.random() * W * 0.9;
const y = fromRight ? Math.random() * H * 0.6 : -40;
const ang = (Math.random() * 0.5 + 0.62) * Math.PI; // ~112°–203°: down & left
- const speed = (W + H) * (0.34 + Math.random() * 0.30);
+ const speed = (W + H) * (0.26 + Math.random() * 0.22);
return {
- x, y, vx: Math.cos(ang) * speed, vy: Math.abs(Math.sin(ang)) * speed,
- len: 90 + Math.random() * 170, w: 1.3 + Math.random() * 1.1, hr: 1.4 + Math.random() * 1.2,
- t: 0, ttl: 0.9 + Math.random() * 0.7,
+ x,
+ y,
+ vx: Math.cos(ang) * speed,
+ vy: Math.abs(Math.sin(ang)) * speed,
+ len: 90 + Math.random() * 170,
+ w: 1.3 + Math.random() * 1.1,
+ hr: 1.4 + Math.random() * 1.2,
+ t: 0,
+ ttl: 1.1 + Math.random() * 0.8,
};
}
// Advance a meteor; returns false once it should be removed.
export function stepMeteor(m, dt, H) {
m.t += dt;
if (m.t >= m.ttl || m.x < -120 || m.y > H + 120) return false;
- m.x += m.vx * dt; m.y += m.vy * dt;
+ m.x += m.vx * dt;
+ m.y += m.vy * dt;
return true;
}
export function meteorOpacity(m) {
@@ -59,16 +79,22 @@ export function meteorOpacity(m) {
// ---- fireworks ---------------------------------------------------------
// One burst: a flash spec + N spark specs (numeric only; caller sets x/y = cx/cy).
export function fireworkBurst(R, scale = 1, color) {
- const cols = [color, "#ffffff", tint(color)];
+ const cols = [color, '#ffffff', tint(color)];
const N = Math.round(48 * scale);
const sparks = [];
for (let i = 0; i < N; i++) {
- const ang = Math.random() * Math.PI * 2, core = i < N * 0.28;
+ const ang = Math.random() * Math.PI * 2,
+ core = i < N * 0.28;
const speed = (0.42 + Math.random() * 0.95) * R * 1.7 * scale * (core ? 1.3 : 1);
sparks.push({
- vx: Math.cos(ang) * speed, vy: Math.sin(ang) * speed,
- r: core ? 1.5 : 2.1, color: core ? "#fff" : cols[(Math.random() * cols.length) | 0],
- t: 0, ttl: 0.9 + Math.random() * 0.8, twk: Math.random() * 10, twinkle: Math.random() < 0.55,
+ vx: Math.cos(ang) * speed,
+ vy: Math.sin(ang) * speed,
+ r: core ? 1.5 : 2.1,
+ color: core ? '#fff' : cols[(Math.random() * cols.length) | 0],
+ t: 0,
+ ttl: 0.9 + Math.random() * 0.8,
+ twk: Math.random() * 10,
+ twinkle: Math.random() < 0.55,
});
}
return { flash: { t: 0, ttl: 0.34, grow: R * 0.46 * scale }, sparks };
@@ -77,17 +103,20 @@ export function fireworkBurst(R, scale = 1, color) {
export function fireworkBarrage(R, color) {
const rx = (m) => (Math.random() * 2 - 1) * R * m;
return [
- { delay: 0, dx: 0, dy: 0, color, scale: 1 },
- { delay: 210, dx: rx(0.20), dy: -R * 0.14 * Math.random() - R * 0.04, color, scale: 0.72 },
- { delay: 410, dx: rx(0.24), dy: -R * 0.02, color: tint(color), scale: 0.66 },
+ { delay: 0, dx: 0, dy: 0, color, scale: 1 },
+ { delay: 210, dx: rx(0.2), dy: -R * 0.14 * Math.random() - R * 0.04, color, scale: 0.72 },
+ { delay: 410, dx: rx(0.24), dy: -R * 0.02, color: tint(color), scale: 0.66 },
];
}
// Integrate one spark (gravity + drag). No-op for the flash.
export function stepFirework(p, dt, R) {
if (p.flash) return;
const drag = Math.max(0, 1 - 2.4 * dt);
- p.vx *= drag; p.vy *= drag; p.vy += R * 1.25 * dt;
- p.x += p.vx * dt; p.y += p.vy * dt;
+ p.vx *= drag;
+ p.vy *= drag;
+ p.vy += R * 1.25 * dt;
+ p.x += p.vx * dt;
+ p.y += p.vy * dt;
}
export function fireworkAlpha(p) {
const a = p.t / p.ttl;
diff --git a/shared/ui.css b/shared/ui.css
index a290739..fa0f1ad 100644
--- a/shared/ui.css
+++ b/shared/ui.css
@@ -1,210 +1,755 @@
/* games.directory globe — shared chrome (backend-agnostic).
* Renderer-specific styling lives in canvas/canvas.css and svg/scene.css. */
-:root{
- --bg:#05060c;
- --ink:#eaf0ff;
- --muted:#8a93b2;
- --line:rgba(140,160,210,.14);
- --panel:rgba(14,18,32,.72);
- --panel-brd:rgba(150,170,220,.16);
- --accent:#5ad1ff;
- --sans:"Space Grotesk",system-ui,sans-serif;
- --mono:"JetBrains Mono",ui-monospace,monospace;
-}
-*{box-sizing:border-box}
-html,body{margin:0;height:100%}
-body{
+:root {
+ --bg: #04050b;
+ --ink: #eaf0ff;
+ --muted: #8a93b2;
+ --line: rgba(140, 160, 210, 0.14);
+ --panel: rgba(14, 18, 32, 0.72);
+ --panel-brd: rgba(150, 170, 220, 0.16);
+ --accent: #5ad1ff;
+ --sans: 'Space Grotesk', system-ui, sans-serif;
+ --mono: 'JetBrains Mono', ui-monospace, monospace;
+}
+* {
+ box-sizing: border-box;
+}
+html,
+body {
+ margin: 0;
+ height: 100%;
+}
+body {
background:
- radial-gradient(1200px 800px at 70% -10%, rgba(40,70,130,.22), transparent 60%),
- radial-gradient(900px 700px at 15% 110%, rgba(70,40,120,.18), transparent 55%),
- var(--bg);
- color:var(--ink);
- font-family:var(--sans);
- overflow:hidden;
- -webkit-font-smoothing:antialiased;
+ radial-gradient(1200px 800px at 70% -10%, rgba(40, 70, 130, 0.2), transparent 60%),
+ radial-gradient(900px 700px at 15% 110%, rgba(70, 40, 120, 0.16), transparent 55%),
+ radial-gradient(140% 100% at 50% 120%, rgba(8, 12, 26, 0.6), transparent 70%), var(--bg);
+ color: var(--ink);
+ font-family: var(--sans);
+ overflow: hidden;
+ -webkit-font-smoothing: antialiased;
}
/* faint parallax starfield (DOM in both renderers) */
-.stars{position:fixed;inset:-8%;pointer-events:none;opacity:.6;
+.stars {
+ position: fixed;
+ inset: -8%;
+ pointer-events: none;
+ opacity: 0.6;
background-image:
- radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.7), transparent),
- radial-gradient(1px 1px at 80% 20%, rgba(255,255,255,.5), transparent),
- radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.45), transparent),
- radial-gradient(1px 1px at 35% 80%, rgba(255,255,255,.5), transparent),
- radial-gradient(1.4px 1.4px at 90% 60%, rgba(255,255,255,.55), transparent),
- radial-gradient(1px 1px at 10% 65%, rgba(255,255,255,.4), transparent),
- radial-gradient(1.2px 1.2px at 50% 12%, rgba(255,255,255,.5), transparent);}
-.stars2{opacity:.42;
+ radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.7), transparent),
+ radial-gradient(1px 1px at 80% 20%, rgba(255, 255, 255, 0.5), transparent),
+ radial-gradient(1px 1px at 60% 70%, rgba(255, 255, 255, 0.45), transparent),
+ radial-gradient(1px 1px at 35% 80%, rgba(255, 255, 255, 0.5), transparent),
+ radial-gradient(1.4px 1.4px at 90% 60%, rgba(255, 255, 255, 0.55), transparent),
+ radial-gradient(1px 1px at 10% 65%, rgba(255, 255, 255, 0.4), transparent),
+ radial-gradient(1.2px 1.2px at 50% 12%, rgba(255, 255, 255, 0.5), transparent);
+}
+.stars2 {
+ opacity: 0.42;
background-image:
- radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.6), transparent),
- radial-gradient(1.3px 1.3px at 72% 42%, rgba(200,224,255,.7), transparent),
- radial-gradient(1px 1px at 44% 58%, rgba(255,255,255,.5), transparent),
- radial-gradient(1px 1px at 88% 84%, rgba(255,255,255,.45), transparent),
- radial-gradient(1.1px 1.1px at 28% 90%, rgba(255,255,255,.5), transparent),
- radial-gradient(1px 1px at 64% 8%, rgba(255,255,255,.45), transparent);}
-@keyframes drift1{from{transform:translate3d(0,0,0)}to{transform:translate3d(-2%,1.5%,0)}}
-@keyframes drift2{from{transform:translate3d(0,0,0)}to{transform:translate3d(2.4%,-1.8%,0)}}
-@keyframes tw1{0%,100%{opacity:.6}50%{opacity:.34}}
-@keyframes tw2{0%,100%{opacity:.42}50%{opacity:.68}}
+ radial-gradient(1px 1px at 12% 18%, rgba(255, 255, 255, 0.6), transparent),
+ radial-gradient(1.3px 1.3px at 72% 42%, rgba(200, 224, 255, 0.7), transparent),
+ radial-gradient(1px 1px at 44% 58%, rgba(255, 255, 255, 0.5), transparent),
+ radial-gradient(1px 1px at 88% 84%, rgba(255, 255, 255, 0.45), transparent),
+ radial-gradient(1.1px 1.1px at 28% 90%, rgba(255, 255, 255, 0.5), transparent),
+ radial-gradient(1px 1px at 64% 8%, rgba(255, 255, 255, 0.45), transparent);
+}
+@keyframes drift1 {
+ from {
+ transform: translate3d(0, 0, 0);
+ }
+ to {
+ transform: translate3d(-2%, 1.5%, 0);
+ }
+}
+@keyframes drift2 {
+ from {
+ transform: translate3d(0, 0, 0);
+ }
+ to {
+ transform: translate3d(2.4%, -1.8%, 0);
+ }
+}
+@keyframes tw1 {
+ 0%,
+ 100% {
+ opacity: 0.6;
+ }
+ 50% {
+ opacity: 0.34;
+ }
+}
+@keyframes tw2 {
+ 0%,
+ 100% {
+ opacity: 0.42;
+ }
+ 50% {
+ opacity: 0.68;
+ }
+}
-.stage{position:fixed;inset:0}
+.stage {
+ position: fixed;
+ inset: 0;
+}
/* brand mark */
-.brand{position:fixed;top:26px;left:30px;z-index:5}
-.brand .mark{display:flex;align-items:center;gap:11px}
-.brand .glyph{width:30px;height:30px;border-radius:8px;
- background:linear-gradient(140deg,#5ad1ff,#7c6bff);
- display:grid;place-items:center;color:#04060e;font-weight:700;font-size:17px;
- box-shadow:0 6px 24px rgba(90,140,255,.35)}
-.brand .name{font-weight:600;font-size:18px;letter-spacing:-.01em}
-.brand .name b{color:var(--accent);font-weight:600}
-.brand .tag{margin:7px 0 0 41px;font-family:var(--mono);font-size:11px;color:var(--muted);
- letter-spacing:.06em;text-transform:uppercase}
+.brand {
+ position: fixed;
+ top: 26px;
+ left: 30px;
+ z-index: 5;
+}
+.brand .mark {
+ display: flex;
+ align-items: center;
+ gap: 11px;
+}
+.brand .glyph {
+ width: 30px;
+ height: 30px;
+ border-radius: 8px;
+ background: linear-gradient(140deg, #5ad1ff, #7c6bff);
+ display: grid;
+ place-items: center;
+ color: #04060e;
+ font-weight: 700;
+ font-size: 17px;
+ box-shadow: 0 6px 24px rgba(90, 140, 255, 0.35);
+}
+.brand .name {
+ font-weight: 600;
+ font-size: 18px;
+ letter-spacing: -0.01em;
+}
+.brand .name b {
+ color: var(--accent);
+ font-weight: 600;
+}
+.brand .tag {
+ margin: 7px 0 0 41px;
+ font-family: var(--mono);
+ font-size: 11px;
+ color: var(--muted);
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+}
/* control panel — demo only; the clean production hero hides it entirely */
-body:not(.demo) .panel{display:none}
-.panel{position:fixed;left:30px;bottom:28px;z-index:6;width:312px;
- background:var(--panel);border:1px solid var(--panel-brd);border-radius:16px;
- backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);
- box-shadow:0 24px 60px rgba(0,0,0,.5);padding:16px 16px 14px}
-.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
-.live{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;
- letter-spacing:.14em;color:var(--muted)}
-.live .blip{width:8px;height:8px;border-radius:50%;background:#36d399;
- box-shadow:0 0 0 0 rgba(54,211,153,.6);animation:blip 1.8s ease-out infinite}
-@keyframes blip{0%{box-shadow:0 0 0 0 rgba(54,211,153,.55)}100%{box-shadow:0 0 0 9px rgba(54,211,153,0)}}
+body:not(.demo) .panel {
+ display: none;
+}
+.panel {
+ position: fixed;
+ left: 30px;
+ bottom: 28px;
+ z-index: 6;
+ width: 312px;
+ background: var(--panel);
+ border: 1px solid var(--panel-brd);
+ border-radius: 16px;
+ backdrop-filter: blur(18px) saturate(1.2);
+ -webkit-backdrop-filter: blur(18px) saturate(1.2);
+ box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
+ padding: 16px 16px 14px;
+}
+.panel-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 12px;
+}
+.live {
+ display: flex;
+ align-items: center;
+ gap: 7px;
+ font-family: var(--mono);
+ font-size: 11px;
+ letter-spacing: 0.14em;
+ color: var(--muted);
+}
+.live .blip {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: #36d399;
+ box-shadow: 0 0 0 0 rgba(54, 211, 153, 0.6);
+ animation: blip 1.8s ease-out infinite;
+}
+@keyframes blip {
+ 0% {
+ box-shadow: 0 0 0 0 rgba(54, 211, 153, 0.55);
+ }
+ 100% {
+ box-shadow: 0 0 0 9px rgba(54, 211, 153, 0);
+ }
+}
-.total{display:flex;align-items:baseline;gap:9px;margin-bottom:14px}
-.total #total-count{font-family:var(--mono);font-weight:600;font-size:34px;line-height:1;
- color:#fff;font-variant-numeric:tabular-nums}
-.total .total-lbl{font-size:12px;color:var(--muted)}
+.total {
+ display: flex;
+ align-items: baseline;
+ gap: 9px;
+ margin-bottom: 14px;
+}
+.total #total-count {
+ font-family: var(--mono);
+ font-weight: 600;
+ font-size: 34px;
+ line-height: 1;
+ color: #fff;
+ font-variant-numeric: tabular-nums;
+}
+.total .total-lbl {
+ font-size: 12px;
+ color: var(--muted);
+}
-.act-row{display:grid;grid-template-columns:22px 1fr auto 26px;align-items:center;gap:10px;
- padding:5px 0}
-.act-row.off{opacity:.4}
-.swatch{position:relative;width:18px;height:18px;border-radius:5px;background:var(--c);
- cursor:pointer;box-shadow:0 0 10px -1px var(--c), inset 0 0 0 1px rgba(255,255,255,.18)}
-.swatch input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;border:0;padding:0}
-.act-name{font-size:13px;color:var(--ink)}
-.act-count{font-family:var(--mono);font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
-.eye{appearance:none;border:1px solid var(--line);background:transparent;border-radius:6px;
- width:26px;height:22px;display:grid;place-items:center;cursor:pointer;padding:0;transition:.15s}
-.eye .eye-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);
- box-shadow:0 0 8px var(--accent);transition:.15s}
-.eye[aria-pressed="false"] .eye-dot{background:#444b63;box-shadow:none}
-.eye:hover{border-color:var(--accent)}
+.act-row {
+ display: grid;
+ grid-template-columns: 22px 1fr auto 26px;
+ align-items: center;
+ gap: 10px;
+ padding: 5px 0;
+}
+.act-row.off {
+ opacity: 0.4;
+}
+.swatch {
+ position: relative;
+ width: 18px;
+ height: 18px;
+ border-radius: 5px;
+ background: var(--c);
+ cursor: pointer;
+ box-shadow:
+ 0 0 10px -1px var(--c),
+ inset 0 0 0 1px rgba(255, 255, 255, 0.18);
+}
+.swatch input {
+ position: absolute;
+ inset: 0;
+ opacity: 0;
+ cursor: pointer;
+ width: 100%;
+ height: 100%;
+ border: 0;
+ padding: 0;
+}
+.act-name {
+ font-size: 13px;
+ color: var(--ink);
+}
+.act-count {
+ font-family: var(--mono);
+ font-size: 13px;
+ color: var(--muted);
+ font-variant-numeric: tabular-nums;
+}
+.eye {
+ appearance: none;
+ border: 1px solid var(--line);
+ background: transparent;
+ border-radius: 6px;
+ width: 26px;
+ height: 22px;
+ display: grid;
+ place-items: center;
+ cursor: pointer;
+ padding: 0;
+ transition: 0.15s;
+}
+.eye .eye-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ background: var(--accent);
+ box-shadow: 0 0 8px var(--accent);
+ transition: 0.15s;
+}
+.eye[aria-pressed='false'] .eye-dot {
+ background: #444b63;
+ box-shadow: none;
+}
+.eye:hover {
+ border-color: var(--accent);
+}
-.divider{height:1px;background:var(--line);margin:12px 0}
+.divider {
+ height: 1px;
+ background: var(--line);
+ margin: 12px 0;
+}
-.ctrl{margin:9px 0}
-.ctrl-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
-.ctrl-top label{font-size:12px;color:var(--muted)}
-.ctrl-top .val{font-family:var(--mono);font-size:12px;color:var(--accent)}
-input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:3px;
- background:linear-gradient(90deg,var(--accent),#7c6bff);outline:none;cursor:pointer}
-input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;
- background:#fff;box-shadow:0 0 0 4px rgba(90,209,255,.25);cursor:pointer}
-input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#fff;border:0;
- box-shadow:0 0 0 4px rgba(90,209,255,.25);cursor:pointer}
+.ctrl {
+ margin: 9px 0;
+}
+.ctrl-top {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 6px;
+}
+.ctrl-top label {
+ font-size: 12px;
+ color: var(--muted);
+}
+.ctrl-top .val {
+ font-family: var(--mono);
+ font-size: 12px;
+ color: var(--accent);
+}
+input[type='range'] {
+ -webkit-appearance: none;
+ appearance: none;
+ width: 100%;
+ height: 4px;
+ border-radius: 3px;
+ background: linear-gradient(90deg, var(--accent), #7c6bff);
+ outline: none;
+ cursor: pointer;
+}
+input[type='range']::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ width: 15px;
+ height: 15px;
+ border-radius: 50%;
+ background: #fff;
+ box-shadow: 0 0 0 4px rgba(90, 209, 255, 0.25);
+ cursor: pointer;
+}
+input[type='range']::-moz-range-thumb {
+ width: 15px;
+ height: 15px;
+ border-radius: 50%;
+ background: #fff;
+ border: 0;
+ box-shadow: 0 0 0 4px rgba(90, 209, 255, 0.25);
+ cursor: pointer;
+}
-.row-btns{display:flex;gap:8px;margin-top:13px}
-.btn{flex:1;appearance:none;border:1px solid var(--panel-brd);background:rgba(255,255,255,.04);
- color:var(--ink);font-family:var(--sans);font-size:13px;font-weight:500;border-radius:10px;
- padding:9px 10px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;
- transition:.15s}
-.btn:hover{background:rgba(255,255,255,.09);border-color:var(--accent)}
-.btn .ico{width:12px;height:12px;display:inline-block}
-#pause .pp-pause{display:inline-block}#pause .pp-play{display:none}
-#pause.paused .pp-pause{display:none}#pause.paused .pp-play{display:inline-block}
+.row-btns {
+ display: flex;
+ gap: 8px;
+ margin-top: 13px;
+}
+.btn {
+ flex: 1;
+ appearance: none;
+ border: 1px solid var(--panel-brd);
+ background: rgba(255, 255, 255, 0.04);
+ color: var(--ink);
+ font-family: var(--sans);
+ font-size: 13px;
+ font-weight: 500;
+ border-radius: 10px;
+ padding: 9px 10px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 7px;
+ transition: 0.15s;
+}
+.btn:hover {
+ background: rgba(255, 255, 255, 0.09);
+ border-color: var(--accent);
+}
+.btn .ico {
+ width: 12px;
+ height: 12px;
+ display: inline-block;
+}
+#pause .pp-pause {
+ display: inline-block;
+}
+#pause .pp-play {
+ display: none;
+}
+#pause.paused .pp-pause {
+ display: none;
+}
+#pause.paused .pp-play {
+ display: inline-block;
+}
-.fw-row{display:grid;grid-template-columns:26px auto 1fr;align-items:center;gap:9px;margin-top:12px}
-.fw-row.off{opacity:.5}
-.fw-label{font-size:13px;color:var(--ink);white-space:nowrap}
-.fw-select{justify-self:end;background:rgba(255,255,255,.05);color:var(--ink);
- border:1px solid var(--panel-brd);border-radius:8px;padding:6px 8px;font-family:var(--sans);
- font-size:12px;cursor:pointer;max-width:130px;-webkit-appearance:none;appearance:none}
-.fw-select:focus{outline:none;border-color:var(--accent)}
-.fw-select option{background:#0e1220;color:var(--ink)}
-.hint{margin-top:11px;font-family:var(--mono);font-size:10.5px;color:var(--muted);
- text-align:center;letter-spacing:.04em;opacity:.8}
+.fw-row {
+ display: grid;
+ grid-template-columns: 26px auto 1fr;
+ align-items: center;
+ gap: 9px;
+ margin-top: 12px;
+}
+.fw-row.off {
+ opacity: 0.5;
+}
+.fw-label {
+ font-size: 13px;
+ color: var(--ink);
+ white-space: nowrap;
+}
+.fw-select {
+ justify-self: end;
+ background: rgba(255, 255, 255, 0.05);
+ color: var(--ink);
+ border: 1px solid var(--panel-brd);
+ border-radius: 8px;
+ padding: 6px 8px;
+ font-family: var(--sans);
+ font-size: 12px;
+ cursor: pointer;
+ max-width: 130px;
+ -webkit-appearance: none;
+ appearance: none;
+}
+.fw-select:focus {
+ outline: none;
+ border-color: var(--accent);
+}
+.fw-select option {
+ background: #0e1220;
+ color: var(--ink);
+}
+.hint {
+ margin-top: 11px;
+ font-family: var(--mono);
+ font-size: 10.5px;
+ color: var(--muted);
+ text-align: center;
+ letter-spacing: 0.04em;
+ opacity: 0.8;
+}
/* scene settings (expander) */
-.scene-expander{margin-top:13px;width:100%;appearance:none;cursor:pointer;
- display:flex;align-items:center;gap:9px;padding:10px 12px;border-radius:11px;
- border:1px solid var(--panel-brd);background:rgba(255,255,255,.04);color:var(--ink);
- font-family:var(--sans);font-size:13px;font-weight:500;transition:.15s}
-.scene-expander:hover{background:rgba(255,255,255,.09);border-color:var(--accent)}
-.scene-expander .gear-ico{width:15px;height:15px;color:var(--accent);flex:none}
-.scene-expander .se-label{flex:1;text-align:left}
-.scene-expander .chev{width:13px;height:13px;color:var(--muted);transition:transform .2s}
-.scene-expander[aria-pressed="true"]{border-color:var(--accent);background:rgba(90,209,255,.08)}
-.scene-expander[aria-pressed="true"] .chev{transform:rotate(180deg);color:var(--accent)}
-.scene{margin-top:12px;border-top:1px solid var(--line);padding-top:6px;
- max-height:46vh;overflow-y:auto;overflow-x:hidden}
-.scene::-webkit-scrollbar{width:7px}
-.scene::-webkit-scrollbar-thumb{background:rgba(150,170,220,.22);border-radius:4px}
-.scene[hidden]{display:none}
-.sec-h{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
- color:var(--muted);margin:14px 0 6px;opacity:.8}
-.sec-h:first-child{margin-top:6px}
-.sc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0}
-.sc-row .sc-lbl{font-size:12.5px;color:var(--ink)}
-.sc-slider{padding:2px 0 9px}
-.sc-slider .sc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
-.sc-slider .sc-lbl{font-size:12.5px;color:var(--muted)}
-.sc-slider .sc-val{font-family:var(--mono);font-size:11.5px;color:var(--accent)}
-.sc-seg{display:flex;gap:4px;background:rgba(255,255,255,.04);border:1px solid var(--line);
- border-radius:9px;padding:3px}
-.sc-seg button{flex:1;appearance:none;border:0;background:transparent;color:var(--muted);
- font-family:var(--sans);font-size:11.5px;padding:5px 8px;border-radius:6px;cursor:pointer;transition:.13s;white-space:nowrap}
-.sc-seg button.on{background:rgba(90,209,255,.16);color:var(--ink)}
-.sw{appearance:none;border:0;width:38px;height:22px;border-radius:12px;background:rgba(120,135,170,.35);
- position:relative;cursor:pointer;transition:.18s;flex:none}
-.sw::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
- background:#fff;transition:.18s;box-shadow:0 1px 3px rgba(0,0,0,.4)}
-.sw[aria-pressed="true"]{background:linear-gradient(90deg,var(--accent),#7c6bff)}
-.sw[aria-pressed="true"]::after{left:18px}
+.scene-expander {
+ margin-top: 13px;
+ width: 100%;
+ appearance: none;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ gap: 9px;
+ padding: 10px 12px;
+ border-radius: 11px;
+ border: 1px solid var(--panel-brd);
+ background: rgba(255, 255, 255, 0.04);
+ color: var(--ink);
+ font-family: var(--sans);
+ font-size: 13px;
+ font-weight: 500;
+ transition: 0.15s;
+}
+.scene-expander:hover {
+ background: rgba(255, 255, 255, 0.09);
+ border-color: var(--accent);
+}
+.scene-expander .gear-ico {
+ width: 15px;
+ height: 15px;
+ color: var(--accent);
+ flex: none;
+}
+.scene-expander .se-label {
+ flex: 1;
+ text-align: left;
+}
+.scene-expander .chev {
+ width: 13px;
+ height: 13px;
+ color: var(--muted);
+ transition: transform 0.2s;
+}
+.scene-expander[aria-pressed='true'] {
+ border-color: var(--accent);
+ background: rgba(90, 209, 255, 0.08);
+}
+.scene-expander[aria-pressed='true'] .chev {
+ transform: rotate(180deg);
+ color: var(--accent);
+}
+.scene {
+ margin-top: 12px;
+ border-top: 1px solid var(--line);
+ padding-top: 6px;
+ max-height: 46vh;
+ overflow-y: auto;
+ overflow-x: hidden;
+}
+.scene::-webkit-scrollbar {
+ width: 7px;
+}
+.scene::-webkit-scrollbar-thumb {
+ background: rgba(150, 170, 220, 0.22);
+ border-radius: 4px;
+}
+.scene[hidden] {
+ display: none;
+}
+.sec-h {
+ font-family: var(--mono);
+ font-size: 10px;
+ letter-spacing: 0.16em;
+ text-transform: uppercase;
+ color: var(--muted);
+ margin: 14px 0 6px;
+ opacity: 0.8;
+}
+.sec-h:first-child {
+ margin-top: 6px;
+}
+.sc-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 10px;
+ padding: 5px 0;
+}
+.sc-row .sc-lbl {
+ font-size: 12.5px;
+ color: var(--ink);
+}
+.sc-slider {
+ padding: 2px 0 9px;
+}
+.sc-slider .sc-top {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 6px;
+}
+.sc-slider .sc-lbl {
+ font-size: 12.5px;
+ color: var(--muted);
+}
+.sc-slider .sc-val {
+ font-family: var(--mono);
+ font-size: 11.5px;
+ color: var(--accent);
+}
+.sc-seg {
+ display: flex;
+ gap: 4px;
+ background: rgba(255, 255, 255, 0.04);
+ border: 1px solid var(--line);
+ border-radius: 9px;
+ padding: 3px;
+}
+.sc-seg button {
+ flex: 1;
+ appearance: none;
+ border: 0;
+ background: transparent;
+ color: var(--muted);
+ font-family: var(--sans);
+ font-size: 11.5px;
+ padding: 5px 8px;
+ border-radius: 6px;
+ cursor: pointer;
+ transition: 0.13s;
+ white-space: nowrap;
+}
+.sc-seg button.on {
+ background: rgba(90, 209, 255, 0.16);
+ color: var(--ink);
+}
+.sw {
+ appearance: none;
+ border: 0;
+ width: 38px;
+ height: 22px;
+ border-radius: 12px;
+ background: rgba(120, 135, 170, 0.35);
+ position: relative;
+ cursor: pointer;
+ transition: 0.18s;
+ flex: none;
+}
+.sw::after {
+ content: '';
+ position: absolute;
+ top: 2px;
+ left: 2px;
+ width: 18px;
+ height: 18px;
+ border-radius: 50%;
+ background: #fff;
+ transition: 0.18s;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+}
+.sw[aria-pressed='true'] {
+ background: linear-gradient(90deg, var(--accent), #7c6bff);
+}
+.sw[aria-pressed='true']::after {
+ left: 18px;
+}
/* live ticker (top-right) */
-.ticker{position:fixed;top:26px;right:30px;z-index:5;width:286px;
- display:flex;flex-direction:column;gap:7px;pointer-events:none}
-.tk-line{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:11px;
- background:rgba(14,18,32,.5);border:1px solid rgba(150,170,220,.12);
- backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px) saturate(1.1);
- box-shadow:0 8px 24px rgba(0,0,0,.32);
- font-family:var(--mono);font-size:11.5px;color:var(--ink);
- animation:tkin .5s cubic-bezier(.2,.75,.2,1) both;overflow:hidden}
-.tk-line .tk-dot{width:8px;height:8px;border-radius:50%;flex:none;box-shadow:0 0 9px currentColor}
-.tk-line .tk-txt{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.01em}
-.tk-line .tk-city{color:var(--muted)}
-@keyframes tkin{from{opacity:0;transform:translateY(-9px) scale(.985)}to{opacity:1;transform:none}}
+.ticker {
+ position: fixed;
+ top: 26px;
+ right: 30px;
+ z-index: 5;
+ width: 286px;
+ display: flex;
+ flex-direction: column;
+ gap: 7px;
+ pointer-events: none;
+}
+.tk-line {
+ display: flex;
+ align-items: center;
+ gap: 9px;
+ padding: 8px 12px;
+ border-radius: 11px;
+ background: rgba(14, 18, 32, 0.5);
+ border: 1px solid rgba(150, 170, 220, 0.12);
+ backdrop-filter: blur(10px) saturate(1.1);
+ -webkit-backdrop-filter: blur(10px) saturate(1.1);
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
+ font-family: var(--mono);
+ font-size: 11.5px;
+ color: var(--ink);
+ animation: tkin 0.5s cubic-bezier(0.2, 0.75, 0.2, 1) both;
+ overflow: hidden;
+}
+.tk-line .tk-dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ flex: none;
+ box-shadow: 0 0 9px currentColor;
+}
+.tk-line .tk-txt {
+ flex: 1;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ letter-spacing: 0.01em;
+}
+.tk-line .tk-city {
+ color: var(--muted);
+}
+.tk-line.tk-surge {
+ border-color: rgba(90, 209, 255, 0.4);
+ background: rgba(20, 34, 52, 0.6);
+ color: #dff4ff;
+ font-weight: 600;
+ letter-spacing: 0.02em;
+}
+@keyframes tkin {
+ from {
+ opacity: 0;
+ transform: translateY(-9px) scale(0.985);
+ }
+ to {
+ opacity: 1;
+ transform: none;
+ }
+}
/* FPS meter */
-.fps-meter{position:fixed;top:26px;left:50%;transform:translateX(-50%);z-index:7;
- display:flex;align-items:baseline;gap:6px;padding:6px 12px;border-radius:10px;
- background:rgba(14,18,32,.6);border:1px solid var(--panel-brd);
- backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
- font-family:var(--mono);color:var(--ink);pointer-events:none;
- box-shadow:0 8px 24px rgba(0,0,0,.32)}
-.fps-meter .fps-num{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;color:#5cffb0}
-.fps-meter .fps-unit{font-size:10px;color:var(--muted)}
-.fps-meter .fps-ms{font-size:11px;color:var(--muted);margin-left:4px}
-.fps-meter .fps-tag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
- margin-left:8px;padding-left:8px;border-left:1px solid var(--line)}
-.fps-meter.warn .fps-num{color:#ffd166}
-.fps-meter.bad .fps-num{color:#ff8a8a}
+.fps-meter {
+ position: fixed;
+ top: 26px;
+ left: 50%;
+ transform: translateX(-50%);
+ z-index: 7;
+ display: flex;
+ align-items: baseline;
+ gap: 6px;
+ padding: 6px 12px;
+ border-radius: 10px;
+ background: rgba(14, 18, 32, 0.6);
+ border: 1px solid var(--panel-brd);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+ font-family: var(--mono);
+ color: var(--ink);
+ pointer-events: none;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
+}
+.fps-meter .fps-num {
+ font-size: 17px;
+ font-weight: 600;
+ font-variant-numeric: tabular-nums;
+ color: #5cffb0;
+}
+.fps-meter .fps-unit {
+ font-size: 10px;
+ color: var(--muted);
+}
+.fps-meter .fps-ms {
+ font-size: 11px;
+ color: var(--muted);
+ margin-left: 4px;
+}
+.fps-meter .fps-tag {
+ font-size: 10px;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: var(--accent);
+ margin-left: 8px;
+ padding-left: 8px;
+ border-left: 1px solid var(--line);
+}
+.fps-meter.warn .fps-num {
+ color: #ffd166;
+}
+.fps-meter.bad .fps-num {
+ color: #ff8a8a;
+}
/* loading */
-#loading{position:fixed;inset:0;display:grid;place-items:center;z-index:20;
- background:var(--bg);color:var(--muted);font-family:var(--mono);font-size:13px}
-.spinner{width:30px;height:30px;border:2px solid rgba(255,255,255,.15);border-top-color:var(--accent);
- border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 14px}
-@keyframes spin{to{transform:rotate(360deg)}}
-.load-err{color:#ff8a8a;text-align:center;line-height:1.6}
+#loading {
+ position: fixed;
+ inset: 0;
+ display: grid;
+ place-items: center;
+ z-index: 20;
+ background: var(--bg);
+ color: var(--muted);
+ font-family: var(--mono);
+ font-size: 13px;
+}
+.spinner {
+ width: 30px;
+ height: 30px;
+ border: 2px solid rgba(255, 255, 255, 0.15);
+ border-top-color: var(--accent);
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+ margin: 0 auto 14px;
+}
+@keyframes spin {
+ to {
+ transform: rotate(360deg);
+ }
+}
+.load-err {
+ color: #ff8a8a;
+ text-align: center;
+ line-height: 1.6;
+}
-@media (max-width:560px){
- .panel{left:12px;right:12px;bottom:12px;width:auto}
- .brand{top:14px;left:16px}
- .ticker{display:none}
- .fps-meter{top:auto;bottom:12px;left:12px;transform:none}
+@media (max-width: 560px) {
+ .panel {
+ left: 12px;
+ right: 12px;
+ bottom: 12px;
+ width: auto;
+ }
+ .brand {
+ top: 14px;
+ left: 16px;
+ }
+ .ticker {
+ display: none;
+ }
+ .fps-meter {
+ top: auto;
+ bottom: 12px;
+ left: 12px;
+ transform: none;
+ }
}
diff --git a/shared/ui.js b/shared/ui.js
index 4a329e3..d16838b 100644
--- a/shared/ui.js
+++ b/shared/ui.js
@@ -5,126 +5,150 @@
* and notify the engine when a change needs a structural rebuild. Both
* renderers reuse this verbatim so their controls behave identically.
*/
-import { SCENE_SCHEMA, formatValue } from "./scene-schema.js";
-import { saveScene, STORAGE } from "./config.js";
+import { SCENE_SCHEMA, formatValue } from './scene-schema.js';
+import { saveScene, STORAGE } from './config.js';
-const STRUCTURAL_KEYS = new Set(["density"]); // changes that require a rebuild
+const STRUCTURAL_KEYS = new Set(['density']); // changes that require a rebuild
// ---- "Scene & effects" gear panel (demo only) --------------------------
// Rendered straight from the schema, so adding a setting there adds a control here.
export function buildScenePanel({ host, toggle, scene, onChange }) {
const fields = SCENE_SCHEMA.sections.flatMap((s) => s.fields);
const byKey = {};
- fields.forEach((f) => { byKey[f.key] = f; });
+ fields.forEach((f) => {
+ byKey[f.key] = f;
+ });
- host.innerHTML = SCENE_SCHEMA.sections.map(sectionHTML).join("");
+ host.innerHTML = SCENE_SCHEMA.sections.map(sectionHTML).join('');
// hydrate controls from current scene
fields.forEach((f) => {
- if (f.type === "range") {
+ if (f.type === 'range') {
host.querySelector(`[data-k="${f.key}"]`).value = scene[f.key];
host.querySelector(`[data-val="${f.key}"]`).textContent = formatValue(f, scene[f.key]);
- } else if (f.type === "toggle") {
- host.querySelector(`[data-tog="${f.key}"]`).setAttribute("aria-pressed", scene[f.key] ? "true" : "false");
- } else if (f.type === "select") {
+ } else if (f.type === 'toggle') {
+ host
+ .querySelector(`[data-tog="${f.key}"]`)
+ .setAttribute('aria-pressed', scene[f.key] ? 'true' : 'false');
+ } else if (f.type === 'select') {
host.querySelectorAll(`[data-seg="${f.key}"]`).forEach((bn) => {
- bn.classList.toggle("on", bn.getAttribute("data-v") === scene[f.key]);
+ bn.classList.toggle('on', bn.getAttribute('data-v') === scene[f.key]);
});
}
});
- const commit = (k) => { saveScene(scene); onChange(k, STRUCTURAL_KEYS.has(k)); };
+ const commit = (k) => {
+ saveScene(scene);
+ onChange(k, STRUCTURAL_KEYS.has(k));
+ };
- host.addEventListener("input", (e) => {
- const k = e.target.getAttribute("data-k");
+ host.addEventListener('input', (e) => {
+ const k = e.target.getAttribute('data-k');
if (!k) return;
scene[k] = +e.target.value;
host.querySelector(`[data-val="${k}"]`).textContent = formatValue(byKey[k], scene[k]);
commit(k);
});
- host.addEventListener("click", (e) => {
- const tog = e.target.closest("[data-tog]");
+ host.addEventListener('click', (e) => {
+ const tog = e.target.closest('[data-tog]');
if (tog) {
- const k = tog.getAttribute("data-tog");
+ const k = tog.getAttribute('data-tog');
scene[k] = !scene[k];
- tog.setAttribute("aria-pressed", scene[k] ? "true" : "false");
+ tog.setAttribute('aria-pressed', scene[k] ? 'true' : 'false');
commit(k);
return;
}
- const seg = e.target.closest("[data-seg]");
+ const seg = e.target.closest('[data-seg]');
if (seg) {
- const k = seg.getAttribute("data-seg"), v = seg.getAttribute("data-v");
+ const k = seg.getAttribute('data-seg'),
+ v = seg.getAttribute('data-v');
scene[k] = v;
- host.querySelectorAll(`[data-seg="${k}"]`).forEach((bn) => bn.classList.toggle("on", bn === seg));
+ host
+ .querySelectorAll(`[data-seg="${k}"]`)
+ .forEach((bn) => bn.classList.toggle('on', bn === seg));
commit(k);
}
});
// open/close + persistence
function setOpen(open) {
- host.toggleAttribute("hidden", !open);
- toggle.setAttribute("aria-pressed", open ? "true" : "false");
- try { localStorage.setItem(STORAGE.sceneOpen, open ? "1" : "0"); } catch (e) { /* ignore */ }
+ host.toggleAttribute('hidden', !open);
+ toggle.setAttribute('aria-pressed', open ? 'true' : 'false');
+ try {
+ localStorage.setItem(STORAGE.sceneOpen, open ? '1' : '0');
+ } catch (e) {
+ /* ignore */
+ }
}
- toggle.addEventListener("click", () => setOpen(host.hasAttribute("hidden")));
+ toggle.addEventListener('click', () => setOpen(host.hasAttribute('hidden')));
let wasOpen = false;
- try { wasOpen = localStorage.getItem(STORAGE.sceneOpen) === "1"; } catch (e) { /* ignore */ }
+ try {
+ wasOpen = localStorage.getItem(STORAGE.sceneOpen) === '1';
+ } catch (e) {
+ /* ignore */
+ }
if (wasOpen) setOpen(true);
}
function sectionHTML(section) {
- return ``
+ );
}
- if (f.type === "toggle") {
- return `
${f.label}` +
- `
`;
+ if (f.type === 'toggle') {
+ return (
+ `
${f.label}` +
+ `
`
+ );
}
- if (f.type === "select") {
- const b = f.options.map((o) => `
`).join("");
+ if (f.type === 'select') {
+ const b = f.options
+ .map((o) => `
`)
+ .join('');
return `
`;
}
- return "";
+ return '';
}
// ---- activity list (swatch / name / count / toggle) --------------------
export function buildActivityControls({ list, types, state }) {
types.forEach((t) => {
- const row = document.createElement("div");
- row.className = "act-row";
+ const row = document.createElement('div');
+ row.className = 'act-row';
row.innerHTML =
`
` +
+ `
` +
`
${t.label}` +
`
0` +
`
`;
+ `
`;
list.appendChild(row);
});
- list.addEventListener("input", (e) => {
- const id = e.target.getAttribute("data-color");
+ list.addEventListener('input', (e) => {
+ const id = e.target.getAttribute('data-color');
if (!id) return;
state.types[id].color = e.target.value;
- e.target.closest(".swatch").style.setProperty("--c", e.target.value);
+ e.target.closest('.swatch').style.setProperty('--c', e.target.value);
});
- list.addEventListener("click", (e) => {
- const btn = e.target.closest("[data-toggle]");
+ list.addEventListener('click', (e) => {
+ const btn = e.target.closest('[data-toggle]');
if (!btn) return;
- const id = btn.getAttribute("data-toggle");
+ const id = btn.getAttribute('data-toggle');
const on = !state.types[id].enabled;
state.types[id].enabled = on;
- btn.setAttribute("aria-pressed", on ? "true" : "false");
- btn.closest(".act-row").classList.toggle("off", !on);
+ btn.setAttribute('aria-pressed', on ? 'true' : 'false');
+ btn.closest('.act-row').classList.toggle('off', !on);
});
- const totalEl = document.getElementById("total-count");
+ const totalEl = document.getElementById('total-count');
return {
// refresh the per-type and grand-total counters
bump(id) {
@@ -141,46 +165,49 @@ export function buildActivityControls({ list, types, state }) {
// ---- base controls: rate / rotation / pause / fireworks ----------------
export function buildBaseControls({ sim, types }) {
- const rate = document.getElementById("rate");
- const rateVal = document.getElementById("rate-val");
+ const rate = document.getElementById('rate');
+ const rateVal = document.getElementById('rate-val');
rate.value = sim.rate;
- rateVal.textContent = sim.rate.toFixed(1) + "/s";
- rate.addEventListener("input", () => {
+ rateVal.textContent = sim.rate.toFixed(1) + '/s';
+ rate.addEventListener('input', () => {
sim.rate = +rate.value;
- rateVal.textContent = sim.rate.toFixed(1) + "/s";
+ rateVal.textContent = sim.rate.toFixed(1) + '/s';
});
- const rot = document.getElementById("rot");
- const rotVal = document.getElementById("rot-val");
+ const rot = document.getElementById('rot');
+ const rotVal = document.getElementById('rot-val');
rot.value = sim.rotSpeed;
- rotVal.textContent = sim.rotSpeed === 0 ? "off" : sim.rotSpeed + "°/s";
- rot.addEventListener("input", () => {
+ rotVal.textContent = sim.rotSpeed === 0 ? 'off' : sim.rotSpeed + '°/s';
+ rot.addEventListener('input', () => {
sim.rotSpeed = +rot.value;
- rotVal.textContent = sim.rotSpeed === 0 ? "off" : sim.rotSpeed + "°/s";
+ rotVal.textContent = sim.rotSpeed === 0 ? 'off' : sim.rotSpeed + '°/s';
});
- const pause = document.getElementById("pause");
- pause.addEventListener("click", () => {
+ const pause = document.getElementById('pause');
+ pause.addEventListener('click', () => {
sim.paused = !sim.paused;
- pause.classList.toggle("paused", sim.paused);
- pause.querySelector(".pp-label").textContent = sim.paused ? "Play" : "Pause";
+ pause.classList.toggle('paused', sim.paused);
+ pause.querySelector('.pp-label').textContent = sim.paused ? 'Play' : 'Pause';
});
- const fwSel = document.getElementById("fw-trigger");
+ const fwSel = document.getElementById('fw-trigger');
types.forEach((t) => {
- const o = document.createElement("option");
- o.value = t.id; o.textContent = t.label;
+ const o = document.createElement('option');
+ o.value = t.id;
+ o.textContent = t.label;
if (t.id === sim.fwTrigger) o.selected = true;
fwSel.appendChild(o);
});
fwSel.value = sim.fwTrigger;
- fwSel.addEventListener("change", () => { sim.fwTrigger = fwSel.value; });
+ fwSel.addEventListener('change', () => {
+ sim.fwTrigger = fwSel.value;
+ });
- const fwTog = document.getElementById("fw-toggle");
- fwTog.addEventListener("click", () => {
+ const fwTog = document.getElementById('fw-toggle');
+ fwTog.addEventListener('click', () => {
sim.fireworks = !sim.fireworks;
- fwTog.setAttribute("aria-pressed", sim.fireworks ? "true" : "false");
- fwTog.closest(".fw-row").classList.toggle("off", !sim.fireworks);
+ fwTog.setAttribute('aria-pressed', sim.fireworks ? 'true' : 'false');
+ fwTog.closest('.fw-row').classList.toggle('off', !sim.fireworks);
});
}
@@ -192,8 +219,8 @@ export function createTicker(el, verbs) {
const now = performance.now();
if (now - lastTick < 220) return; // throttle so high rates don't thrash the DOM
lastTick = now;
- const line = document.createElement("div");
- line.className = "tk-line";
+ const line = document.createElement('div');
+ line.className = 'tk-line';
line.innerHTML =
`
` +
`
${verbs[type.id] || type.label}` +
@@ -201,5 +228,15 @@ export function createTicker(el, verbs) {
el.insertBefore(line, el.firstChild);
while (el.children.length > 7) el.removeChild(el.lastChild);
},
+ // surge callout — a highlighted line that bypasses the throttle
+ special(text) {
+ const line = document.createElement('div');
+ line.className = 'tk-line tk-surge';
+ line.innerHTML =
+ `` +
+ `${text}`;
+ el.insertBefore(line, el.firstChild);
+ while (el.children.length > 7) el.removeChild(el.lastChild);
+ },
};
}