@adatechnology/game-test-room 0.6.0 → 0.7.0

package/dist/index.js

@@ -2,8 +2,10 @@
 import { createDestruction, JOINT_DEFAULTS as JOINT_DEFAULTS2, resolveStrings as resolveDestructionStrings } from "@adatechnology/game-destruction";
 import { createDestructionRenderer, specFromObject3D } from "@adatechnology/game-destruction-three";
 import { createArsenal, DEFAULT_LOADOUT } from "@adatechnology/game-weapons";
-import { createFluids, createItemUse, ITEM_USES, resolveStrings as resolveFluidStrings } from "@adatechnology/game-fluids";
-import { createFluidRenderer } from "@adatechnology/game-fluids-three";
+import { createFilmLcg, createFluids, createItemUse, ITEM_USES, resolveStrings as resolveFluidStrings } from "@adatechnology/game-fluids";
+import { createFilmBridge, createFilmManager, createFluidRenderer } from "@adatechnology/game-fluids-three";
+import { createGroundField, createVfx } from "@adatechnology/game-vfx";
+import { createGroundPatch, createVfxRenderer } from "@adatechnology/game-vfx-three";
 import { checkAnimation, checkBench, checkDestructible, checkSpec } from "@adatechnology/game-contracts";
 
 // src/items.ts
@@ -1255,6 +1257,7 @@ function createBenchStore(module, locale, onListenerError) {
   const changed = () => {
     for (const watcher of watchers) watcher();
   };
+  let sheet = null;
   const controlOf = (id) => controls.find((control) => control.id === id);
   const store = {
     moduleId: module.id,
@@ -1296,6 +1299,11 @@ function createBenchStore(module, locale, onListenerError) {
       watchers.add(listener);
       return () => watchers.delete(listener);
     },
+    sheet: () => sheet,
+    setSheet(next) {
+      sheet = next;
+      changed();
+    },
     patch(id, patch) {
       const index = controls.findIndex((control2) => control2.id === id);
       if (index < 0) return;
@@ -1517,7 +1525,10 @@ function createExplosives(context) {
     const weaponName = context.toolName(projectile.weapon);
     const reach = Math.max(detonation.injuryRadius, detonation.lethalRadius);
     const reached = detonation.energy <= 0 ? 0 : detonation.cone ? coneBlast(detonation) : world.explode(detonation.point, detonation.energy, reach, "player").length;
-    if (detonation.energy > 0) renderer.explode(detonation.point, detonation.energy, reach);
+    if (detonation.energy > 0) {
+      const isPlayed = context.effects.explosion(detonation.explosive, detonation.point, { direction: detonation.direction }) !== null;
+      renderer.explode(detonation.point, detonation.energy, reach, { visual: !isPlayed });
+    }
     if (detonation.stunSeconds !== void 0) renderer.emit("flash", detonation.point, [0, 1, 0], 1, 1);
     const onPlayer = blastEffect(detonation, toArray(camera.position));
     action("explode", translate("act.explode", { weapon: weaponName, energy: format(detonation.energy, 0), radius: format(reach, 1), n: reached }), {
@@ -1526,7 +1537,7 @@ function createExplosives(context) {
     if (onPlayer.zone !== "none") {
       action("blast_player", translate("act.blast_player", { weapon: weaponName, zone: translate(`blast.zone.${onPlayer.zone}`), distance: format(onPlayer.distance, 1), stun: format(onPlayer.stunSeconds, 1) }), { data: { ...onPlayer } });
     }
-    context.emitHost({ type: "explosion", source: projectile.weapon, point: detonation.point, energy: detonation.energy, radius: reach, cause: detonation.cause });
+    context.emitHost({ type: "explosion", source: projectile.weapon, point: detonation.point, energy: detonation.energy, radius: reach, cause: detonation.cause, explosive: detonation.explosive });
     if (detonation.fire) context.startFire(projectile.weapon, detonation.point, detonation.fire, detonation.cause === "impact");
   };
   const detonateBare = (projectile, isImpact) => {
@@ -1853,9 +1864,10 @@ function createRoomMetrics(sources) {
       if (!["objects", "fragments", "particles", "decals"].some((id) => wanted.has(id))) return out;
       const destruction = sources.destruction.stats();
       const fluids = sources.fluids.stats();
+      const effects = sources.effects.stats();
       put("objects", destruction.pieces);
       put("fragments", destruction.fragments);
-      put("particles", destruction.particles + fluids.particles);
+      put("particles", destruction.particles + fluids.particles + effects.puffs + effects.sparks + effects.glows + effects.chunks);
       put("decals", destruction.decals + fluids.stains);
       return out;
     }
@@ -2955,7 +2967,7 @@ var mk = (tag, cls, text) => {
   if (text !== void 0) e.textContent = text;
   return e;
 };
-var shapeOf = (view) => JSON.stringify([view.title, view.controls.map((c) => ({ ...c, value: void 0 })), view.layers.map((l) => [l.id, l.name])]);
+var shapeOf = (view) => JSON.stringify([view.title, view.controls.map((c) => ({ ...c, value: void 0 })), view.layers.map((l) => [l.id, l.name]), view.sheet ?? null]);
 function createBenchPanel(o) {
   const { t } = o;
   const element = mk("div", "tr-panel tr-bench");
@@ -3010,7 +3022,8 @@ function createBenchPanel(o) {
   const choiceControl = (control) => {
     const wrap = mk("div", "tr-ctl");
     wrap.appendChild(mk("span", void 0, control.name));
-    if (control.options.length <= SEGMENTED_MAX) {
+    const grouped = control.options.some((option) => option.group !== void 0);
+    if (control.options.length <= SEGMENTED_MAX && !grouped) {
       const group = mk("div", "tr-seg");
       group.setAttribute("role", "group");
       const buttons = control.options.map((option) => {
@@ -3033,10 +3046,22 @@ function createBenchPanel(o) {
     }
     const select = mk("select");
     select.disabled = control.disabled;
+    let heading;
+    let section = select;
     for (const option of control.options) {
+      if (option.group !== heading) {
+        heading = option.group;
+        section = select;
+        if (heading !== void 0) {
+          const optgroup = mk("optgroup");
+          optgroup.label = heading;
+          select.appendChild(optgroup);
+          section = optgroup;
+        }
+      }
       const op = mk("option", void 0, option.name);
       op.value = option.id;
-      select.appendChild(op);
+      section.appendChild(op);
     }
     select.onchange = () => o.onControl(control.id, select.value);
     wrap.appendChild(select);
@@ -3074,7 +3099,63 @@ function createBenchPanel(o) {
     }
     return wrap;
   };
+  let playhead = null;
+  const sheetCard = (sheet) => {
+    const card = mk("div", "tr-sheet");
+    if (sheet.kicker) card.appendChild(mk("div", "sub", sheet.kicker));
+    card.appendChild(mk("h4", void 0, sheet.title));
+    if (sheet.body) card.appendChild(mk("p", void 0, sheet.body));
+    if (sheet.facts?.length) {
+      const facts = mk("dl", "tr-facts");
+      for (const fact of sheet.facts) facts.append(mk("dt", void 0, fact.label), mk("dd", void 0, fact.value));
+      card.appendChild(facts);
+    }
+    if (sheet.steps?.length) {
+      const steps = mk("ol", "tr-steps");
+      for (const step of sheet.steps) {
+        const li = mk("li");
+        li.append(mk("b", void 0, step.at), document.createTextNode(` ${step.text}`));
+        steps.appendChild(li);
+      }
+      card.appendChild(steps);
+    }
+    if (sheet.swatches?.length) {
+      const row = mk("div", "tr-swatches");
+      for (const swatch of sheet.swatches) {
+        const chip = mk("span", "tr-swatch");
+        const dot = mk("i");
+        dot.style.background = swatch.color;
+        chip.append(dot, document.createTextNode(swatch.name));
+        row.appendChild(chip);
+      }
+      card.appendChild(row);
+    }
+    if (sheet.timeline) {
+      const { segments, ticks, metric } = sheet.timeline;
+      const end = Math.max(1e-3, ...segments.map((segment) => segment.end), ...ticks);
+      const strip = mk("div", "tr-timeline");
+      for (const segment of segments) {
+        const bar = mk("div", "tr-segment", segment.name);
+        bar.style.left = `${segment.start / end * 100}%`;
+        bar.style.width = `${(segment.end - segment.start) / end * 100}%`;
+        bar.style.background = segment.color;
+        strip.appendChild(bar);
+      }
+      for (const tick of ticks) {
+        const mark = mk("u", "tr-tick");
+        mark.style.left = `${tick / end * 100}%`;
+        strip.appendChild(mark);
+      }
+      const head = mk("s", "tr-playhead");
+      strip.appendChild(head);
+      playhead = { node: head, metric, end };
+      card.appendChild(strip);
+    }
+    if (sheet.note) card.appendChild(mk("p", "sub", sheet.note));
+    return card;
+  };
   const rebuild = (view) => {
+    playhead = null;
     body.textContent = "";
     refreshers.length = 0;
     body.appendChild(mk("div", "sub", view.title));
@@ -3082,6 +3163,7 @@ function createBenchPanel(o) {
     for (const control of view.controls) if (!control.hidden) list.appendChild(controlElement(control));
     body.appendChild(list);
     if (view.layers.length) body.appendChild(layerList(view.layers));
+    if (view.sheet) body.appendChild(sheetCard(view.sheet));
   };
   const renderMetrics = (rows) => {
     metricList.textContent = "";
@@ -3112,6 +3194,7 @@ function createBenchPanel(o) {
       hasBench = view !== null;
       syncDisplay();
       if (!view) {
+        playhead = null;
         shape = "";
         body.textContent = "";
         refreshers.length = 0;
@@ -3141,6 +3224,10 @@ function createBenchPanel(o) {
         node.text.textContent = row.text;
         if (node.bar && row.ratio !== void 0) fillBar(node.bar, row.ratio);
       }
+      if (playhead) {
+        const at = rows.module.find((row) => row.id === playhead?.metric)?.value;
+        playhead.node.style.left = `${Math.max(0, Math.min(1, (at ?? 0) / playhead.end)) * 100}%`;
+      }
     },
     get visible() {
       if (element.style.display === "none") return false;
@@ -3173,6 +3260,13 @@ var CSS = `
 .tr-status{margin-top:4px;min-height:16px;color:#ffd23f;text-shadow:0 1px 2px #000}
 .tr-prog{margin:4px auto 0;width:260px;background:rgba(10,12,16,.72);border-radius:6px;padding:4px 8px;display:none}
 .tr-prog b{display:block;font-weight:500;margin-bottom:3px}
+.tr-sheet{margin-top:8px;padding:8px;border:1px solid #2a2e36;border-radius:6px;font-size:12px;line-height:1.4}
+.tr-sheet h4{margin:2px 0 4px;font-size:13px}.tr-sheet p{margin:4px 0}
+.tr-facts{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;margin:4px 0}.tr-facts dt{opacity:.7}.tr-facts dd{margin:0}
+.tr-steps{margin:4px 0;padding-left:16px}.tr-swatches{display:flex;flex-wrap:wrap;gap:6px}.tr-swatch i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px}
+.tr-timeline{position:relative;height:22px;margin:8px 0;background:#1b1e24;border-radius:4px;overflow:hidden}
+.tr-segment{position:absolute;top:0;height:100%;font-size:10px;overflow:hidden;white-space:nowrap;opacity:.85;padding:0 3px;box-sizing:border-box;color:#000}
+.tr-tick{position:absolute;top:0;bottom:0;width:1px;background:#fff6;text-decoration:none}.tr-playhead{position:absolute;top:0;bottom:0;width:2px;background:#fff;text-decoration:none}
 .tr-bar{height:7px;background:#2a2e36;border-radius:4px;overflow:hidden}
 .tr-bar i{display:block;height:100%;background:#4fc3f7;width:0}
 .tr-bar.hp i{background:#66bb6a}.tr-bar.warn i{background:#ffb300}.tr-bar.bad i{background:#ef5350}
@@ -3777,9 +3871,29 @@ function createTestRoom(options) {
   let simTime = 0;
   const log = createLog({ exportCancelled: () => t("log.export_cancelled") });
   log.setClock(() => simTime);
+  const craterField = options.craters ? createGroundField() : void 0;
+  const craterPatch = craterField ? createGroundPatch(THREE, { field: craterField, material: new THREE.MeshStandardMaterial({ color: 9342602, roughness: 0.95 }) }) : void 0;
+  if (craterPatch) {
+    const floor = arena.group.getObjectByName("floor");
+    if (floor) floor.visible = false;
+    scene.add(craterPatch.mesh);
+  }
+  const vfx = createVfxRenderer(THREE, {
+    scene,
+    camera,
+    overlay: container,
+    quality,
+    pointScale,
+    vfx: createVfx({
+      profile: quality,
+      groundAt: (x, z) => groundAt(x, z) + (craterField?.heightAt(x, z) ?? 0),
+      ...craterField ? { ground: craterField } : {}
+    })
+  });
   const renderer = createDestructionRenderer(THREE, {
     scene,
     world,
+    vfx: vfx.world,
     quality,
     groundAt,
     pointScale,
@@ -3805,7 +3919,17 @@ function createTestRoom(options) {
       if (best) splitOf.set(piece.objectId, best);
     }
   });
-  const fluidView = createFluidRenderer(THREE, { scene, fluids, quality, pointScale });
+  const fluidView = createFluidRenderer(THREE, { scene, fluids, quality, pointScale, vfx: vfx.world });
+  const filmRandom = createFilmLcg(1);
+  const film = createFilmManager(THREE, {
+    scene,
+    camera,
+    random: filmRandom,
+    fluids,
+    groundAt,
+    ...typeof gl.copyTextureToTexture === "function" ? { gpu: gl } : {}
+  });
+  const filmBridge = createFilmBridge({ fluids, manager: film, random: filmRandom });
   const specs = /* @__PURE__ */ new Map();
   const loose = [];
   const arsenal = options.arsenal ?? createArsenal({ locale, weapons: options.weapons, seed: 1 });
@@ -3921,7 +4045,7 @@ function createTestRoom(options) {
     for (const ev of batch) {
       if (ev.type === "leak") puncture(ev);
       else if (ev.type === "ignite") igniteNear(ev.point, 0.9);
-      else if (ev.type === "explode") emitHost({ type: "explosion", source: ev.object, point: ev.point, energy: ev.energy, radius: ev.radius, cause: "part" });
+      else if (ev.type === "explode") emitHost({ type: "explosion", source: ev.object, point: ev.point, energy: ev.energy, radius: ev.radius, cause: "part", ...ev.effect !== void 0 ? { explosive: ev.effect } : {} });
       fire("event", ev);
       options.onEvent?.(ev);
     }
@@ -4109,8 +4233,10 @@ function createTestRoom(options) {
       renderer.restore(e.so.objectId);
     }
     renderer.clear();
+    vfx.world.clear();
     fluids.clearStains([0, 0, 0], 1e4);
     fluidView.clear();
+    film.clear();
     fluids.setTap(TAP_ID, false);
   };
   const clear = () => {
@@ -4501,6 +4627,7 @@ function createTestRoom(options) {
     camera,
     world,
     renderer,
+    effects: vfx.world,
     arsenal,
     objects: () => [...entries.values()].filter((e) => !e.arena).map((e) => e.so.root),
     bodies: crossingBodies,
@@ -4934,7 +5061,7 @@ function createTestRoom(options) {
   let metricsAcc = 0;
   let ownsLoop = false;
   const roomMetricIds = options.metrics === false ? [] : options.metrics ?? ROOM_METRICS;
-  const roomMetrics = createRoomMetrics({ gl, destruction: renderer, fluids: fluidView, ids: roomMetricIds });
+  const roomMetrics = createRoomMetrics({ gl, destruction: renderer, fluids: fluidView, effects: vfx.world, ids: roomMetricIds });
   let qualityName = quality;
   const syncContainers = (sdt) => {
     for (const e of entries.values()) {
@@ -4983,8 +5110,12 @@ function createTestRoom(options) {
     }
     syncLiters();
     renderer.update(dt);
+    vfx.update(dt);
+    craterPatch?.sync();
     updateImpacts();
     fluidView.update(dt);
+    filmBridge.update(dt);
+    film.update(dt);
     for (const [id, s] of tools) {
       s.update(dt);
       flushEvents(id, s);
@@ -5145,7 +5276,7 @@ function createTestRoom(options) {
   const benchView = () => {
     const store = activeBench ? benches.get(activeBench) : void 0;
     if (!store) return null;
-    return { title: modules.get(store.moduleId)?.name ?? store.moduleId, controls: store.controls(), layers: store.layers() };
+    return { title: modules.get(store.moduleId)?.name ?? store.moduleId, controls: store.controls(), layers: store.layers(), sheet: store.sheet() };
   };
   const METRIC_UNAVAILABLE = "n/a";
   const metricText = (value, digits, unit) => typeof value === "number" ? `${num(value, digits)}${unit ? ` ${unit}` : ""}` : value ?? METRIC_UNAVAILABLE;
@@ -5180,7 +5311,7 @@ function createTestRoom(options) {
     const module = declared.map((metric) => {
       const value = values[metric.id];
       const ratio = metric.max && typeof value === "number" ? value / metric.max : void 0;
-      return { id: metric.id, name: metric.name, text: metricText(value, metric.digits ?? 0, metric.unit), ...ratio === void 0 ? {} : { ratio } };
+      return { id: metric.id, name: metric.name, text: metricText(value, metric.digits ?? 0, metric.unit), ...typeof value === "number" ? { value } : {}, ...ratio === void 0 ? {} : { ratio } };
     });
     return { room: room2, module };
   };
@@ -5241,6 +5372,7 @@ function createTestRoom(options) {
     camera,
     locale,
     groundAt,
+    effects: vfx,
     tool: () => ({
       weapon: toolId,
       category: tool.def.category,
@@ -5294,6 +5426,7 @@ function createTestRoom(options) {
     layer: store.layer,
     onChange: store.onChange,
     patch: store.patch,
+    sheet: store.setSheet,
     look: (eye, target) => room.look(eye, target)
   });
   const checkModuleBench = (mod, fail) => {
@@ -5579,6 +5712,7 @@ function createTestRoom(options) {
       const id = moduleId ?? activeBench;
       return (id ? benches.get(id) : void 0) ?? null;
     },
+    applyCamera: () => vfx.applyCamera(),
     metrics() {
       return { room: roomMetrics.sample(), module: moduleMetrics() };
     },
@@ -5592,7 +5726,11 @@ function createTestRoom(options) {
       player.dispose();
       ui?.dispose();
       renderer.dispose();
+      vfx.dispose();
+      craterPatch?.dispose();
       fluidView.dispose();
+      filmBridge.dispose();
+      film.dispose();
       for (const tr of tracers) tr.line.removeFromParent();
       explosives.clear();
       if (ownRenderer) {
@@ -5682,7 +5820,9 @@ function createTestRoom(options) {
       const dt = Math.min(0.05, realDelta);
       last = now;
       if (!scenarioRunning) update(dt);
+      const restoreCamera = vfx.applyCamera();
       gl.render(scene, camera);
+      restoreCamera();
       roomMetrics.rendered();
     };
     raf = requestAnimationFrame(loop);