castle-web-cli 0.4.129 → 0.4.131

package/kits/physics-3d/engine3d/Scene3DPlayer.jsx

@@ -0,0 +1,309 @@
+// 3d scene player: mounts a SceneRuntime (from the imported physics-2d kit's
+// engine -- the actor/behavior model is shared) against a three.js world.
+// Behaviors update, the physics3d system steps rapier, then Transforms sync to
+// three nodes and the composer renders. No game logic here.
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { makeScene } from '@imports/castle.physics-2d/engine/scene';
+import {
+  makeWorld3D,
+  resizeWorld,
+  syncActors,
+  renderWorld,
+  disposeWorld,
+  updatePhysicsDebug,
+} from './world3d';
+
+export function Scene3DPlayer({
+  sceneData,
+  sprites,
+  files,
+  behaviorClasses,
+  scenePath,
+  onFirstFrame,
+}) {
+  const canvasRef = useRef(null);
+  const scoreRef = useRef(null);
+  const lookRef = useRef(null);
+  const [error, setError] = useState(null);
+  const [runId, setRunId] = useState(0);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return undefined;
+    const runtime = makeScene(sceneData, behaviorClasses, sprites, files, scenePath);
+    const world = makeWorld3D(canvas);
+    runtime.three = world;
+    runtime.hud = {};
+    // Scene-independent state: survives `loadFromFile` (the scene data is
+    // replaced, the runtime instance is not). Player score/inventory and the
+    // camera angle live here so they cross scene switches.
+    runtime.persistent = {};
+    runtime.currentScenePath = scenePath ?? 'scenes/main.scene';
+
+    const detachInput = attachInput(canvas, runtime, world);
+    const stopResize = attachResize(canvas, world);
+    const onLoopError = (err) => {
+      console.error(err);
+      setError(err);
+    };
+    const hudRefs = { score: scoreRef, look: lookRef };
+    const stopLoop = startLoop(runtime, world, sprites, hudRefs, onFirstFrame, onLoopError);
+    return () => {
+      stopLoop();
+      stopResize();
+      detachInput();
+      runtime.dispose();
+      disposeWorld(world);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [runId]);
+
+  const onRestart = useCallback(() => {
+    setError(null);
+    setRunId((n) => n + 1);
+  }, []);
+
+  return (
+    <div style={{ position: 'fixed', inset: 0, background: '#000' }}>
+      <canvas
+        ref={canvasRef}
+        tabIndex={0}
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'block',
+          outline: 'none',
+          touchAction: 'none',
+          userSelect: 'none',
+          WebkitUserSelect: 'none',
+          WebkitTouchCallout: 'none',
+        }}
+      />
+      <div ref={scoreRef} style={hudStyles.score} />
+      <div ref={lookRef} style={hudStyles.look} />
+      {error ? <LoopErrorOverlay error={error} onRestart={onRestart} /> : null}
+    </div>
+  );
+}
+
+function attachInput(canvas, runtime, world) {
+  const onKeyDown = (event) => {
+    // Space is gameplay (jump); keep it from scrolling the page.
+    if (event.code === 'Space' && event.target === canvas) event.preventDefault();
+    if (event.code === 'KeyP' && !event.repeat) {
+      world.debugLines.visible = !world.debugLines.visible;
+    }
+    runtime.keys.add(event.code);
+    runtime.keys.add(event.key);
+  };
+  const onKeyUp = (event) => {
+    runtime.keys.delete(event.code);
+    runtime.keys.delete(event.key);
+  };
+  // Pointer (mouse or touch) input is multitouch, tracked per pointerId:
+  //  - a DRAG is the virtual stick -- the offset from where the drag started
+  //    maps to a walk direction (drag up = forward). The first pointer to
+  //    travel past the tap slop owns the stick until it lifts.
+  //  - a TAP (down and up quickly without moving much) is a jump, even while
+  //    another finger is dragging. `moveInput.consumeJump()` hands the
+  //    pending tap to the Player behavior exactly once.
+  // `runtime.moveInput` is what the Player behavior reads.
+  const STICK_RADIUS_PX = 56;
+  const TAP_SLOP_PX = 12;
+  const TAP_MS = 300;
+  const pointers = new Map();
+  let stickId = null;
+  let jumpPending = false;
+  const move = {
+    x: 0,
+    y: 0,
+    active: false,
+    consumeJump() {
+      const had = jumpPending;
+      jumpPending = false;
+      return had;
+    },
+  };
+  runtime.moveInput = move;
+  const clearStick = () => {
+    stickId = null;
+    move.active = false;
+    move.x = 0;
+    move.y = 0;
+  };
+  const onPointerDown = (event) => {
+    canvas.focus();
+    pointers.set(event.pointerId, {
+      x: event.clientX,
+      y: event.clientY,
+      time: performance.now(),
+      moved: false,
+    });
+    canvas.setPointerCapture(event.pointerId);
+  };
+  const onPointerMove = (event) => {
+    const p = pointers.get(event.pointerId);
+    if (!p) return;
+    const dx = event.clientX - p.x;
+    const dy = event.clientY - p.y;
+    if (!p.moved && Math.hypot(dx, dy) > TAP_SLOP_PX) p.moved = true;
+    // A pointer claims the stick once it is clearly a drag (and nothing else
+    // holds it) -- so a tapping finger never yanks the walk direction.
+    if (p.moved && stickId === null) stickId = event.pointerId;
+    if (stickId !== event.pointerId) return;
+    const nx = dx / STICK_RADIUS_PX;
+    const ny = dy / STICK_RADIUS_PX;
+    const len = Math.hypot(nx, ny);
+    const scale = len > 1 ? 1 / len : 1;
+    move.active = true;
+    move.x = nx * scale;
+    move.y = ny * scale;
+  };
+  const onPointerUp = (event) => {
+    const p = pointers.get(event.pointerId);
+    pointers.delete(event.pointerId);
+    if (stickId === event.pointerId) clearStick();
+    if (event.type === 'pointercancel' || !p) return;
+    if (!p.moved && performance.now() - p.time < TAP_MS) jumpPending = true;
+  };
+  window.addEventListener('keydown', onKeyDown);
+  window.addEventListener('keyup', onKeyUp);
+  canvas.addEventListener('pointerdown', onPointerDown);
+  canvas.addEventListener('pointermove', onPointerMove);
+  canvas.addEventListener('pointerup', onPointerUp);
+  canvas.addEventListener('pointercancel', onPointerUp);
+  if (document.hasFocus() || window.parent === window) canvas.focus();
+  return () => {
+    window.removeEventListener('keydown', onKeyDown);
+    window.removeEventListener('keyup', onKeyUp);
+    canvas.removeEventListener('pointerdown', onPointerDown);
+    canvas.removeEventListener('pointermove', onPointerMove);
+    canvas.removeEventListener('pointerup', onPointerUp);
+    canvas.removeEventListener('pointercancel', onPointerUp);
+  };
+}
+
+function attachResize(canvas, world) {
+  const fit = () => resizeWorld(world, canvas.clientWidth, canvas.clientHeight);
+  const observer = new ResizeObserver(fit);
+  observer.observe(canvas);
+  fit();
+  return () => observer.disconnect();
+}
+
+function startLoop(runtime, world, sprites, hudRefs, onFirstFrame, onError) {
+  let raf = 0;
+  let previousTime = performance.now();
+  let firstFrameSignaled = false;
+  const tick = (now) => {
+    const dt = Math.min(0.033, (now - previousTime) / 1000);
+    previousTime = now;
+    try {
+      runtime.update(dt);
+      // A behavior may have requested a scene switch; apply it here, between
+      // frames, never mid physics dispatch. The load resets
+      // registered systems -- the rapier world frees and lazily rebuilds --
+      // while `runtime.persistent` carries the player's cross-scene state.
+      if (runtime.requestedScene) {
+        const next = runtime.requestedScene;
+        runtime.requestedScene = null;
+        runtime.loadFromFile(next);
+        runtime.currentScenePath = next;
+        runtime.persistent.sceneChangeGraceUntil = runtime.time + 1;
+      }
+      syncActors(world, runtime, sprites, dt);
+      if (world.debugLines.visible) updatePhysicsDebug(world, runtime.physics3d?.debugRender());
+      renderWorld(world);
+      updateHud(runtime, hudRefs);
+    } catch (err) {
+      onError?.(err);
+      return;
+    }
+    if (!firstFrameSignaled) {
+      firstFrameSignaled = true;
+      requestAnimationFrame(() => onFirstFrame?.());
+    }
+    raf = requestAnimationFrame(tick);
+  };
+  raf = requestAnimationFrame(tick);
+  return () => cancelAnimationFrame(raf);
+}
+
+// Behaviors write `scene.hud = { score, look }`; the loop pushes it into the
+// overlay divs imperatively (no react re-render at frame rate).
+function updateHud(runtime, hudRefs) {
+  const hud = runtime.hud ?? {};
+  const scoreText = hud.score ? String(hud.score) : '';
+  const lookText = hud.look ?? '';
+  if (hudRefs.score.current && hudRefs.score.current.textContent !== scoreText) {
+    hudRefs.score.current.textContent = scoreText;
+  }
+  if (hudRefs.look.current && hudRefs.look.current.textContent !== lookText) {
+    hudRefs.look.current.textContent = lookText;
+  }
+}
+
+const hudStyles = {
+  score: {
+    position: 'absolute',
+    top: 14,
+    left: 16,
+    color: '#7bd9ed',
+    font: "16px/1.4 'SFMono-Regular', Consolas, monospace",
+    textShadow: '0 1px 2px rgba(0,0,0,0.8)',
+    pointerEvents: 'none',
+  },
+  look: {
+    position: 'absolute',
+    bottom: 22,
+    left: 0,
+    right: 0,
+    textAlign: 'center',
+    color: '#e6e6e2',
+    fontStyle: 'italic',
+    font: 'italic 15px/1.4 Georgia, serif',
+    textShadow: '0 1px 3px rgba(0,0,0,0.9)',
+    pointerEvents: 'none',
+  },
+};
+
+function LoopErrorOverlay({ error, onRestart }) {
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        inset: 0,
+        zIndex: 2147483000,
+        padding: '20px 22px',
+        background: 'rgba(20, 8, 8, 0.94)',
+        color: '#ffd9dc',
+        font: "13px/1.5 'SFMono-Regular', Consolas, monospace",
+        overflow: 'auto',
+      }}>
+      <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 12 }}>
+        <span style={{ fontSize: 15, fontWeight: 700, color: '#ff6b74' }}>Play error</span>
+        <button
+          type="button"
+          onClick={onRestart}
+          style={{
+            marginLeft: 'auto',
+            padding: '4px 12px',
+            border: '1px solid #a02828',
+            borderRadius: 4,
+            background: '#a02828',
+            color: '#fff',
+            font: 'inherit',
+            cursor: 'pointer',
+          }}>
+          Restart
+        </button>
+      </div>
+      <div style={{ color: '#fff', fontWeight: 600 }}>
+        {error?.name ?? 'Error'}: {error?.message ?? String(error)}
+      </div>
+      {typeof error?.stack === 'string' ? (
+        <pre style={{ whiteSpace: 'pre-wrap', color: '#e79aa0', fontSize: 12 }}>{error.stack}</pre>
+      ) : null}
+    </div>
+  );
+}

package/kits/physics-3d/engine3d/editor3dData.js

@@ -0,0 +1,114 @@
+// Data-side helpers for the 3d scene editor: the 3d counterparts of the
+// imported engine's placement / duplication helpers (which write 2d Layout),
+// plus the blueprint-file template-id shim. Everything here works on parsed
+// scene JSON and returns fresh copies -- commits go through the editor's
+// history.
+import {
+  getBlueprintTemplate,
+  mintActorIdFromName,
+  mintBlueprintFile,
+} from '@imports/castle.physics-2d/engine/blueprint';
+
+export const TEMPLATE_ACTOR_ID = '__template__';
+
+export const round2 = (v) => Math.round(v * 100) / 100;
+
+// Grid snap for placements; matches the gizmo's 0.1m translation snap.
+const snap = (v) => Math.round(v * 10) / 10;
+
+// A blueprint file's template actor has no id on disk; inject a synthetic one
+// so selection / inspector / gizmo code sees a normal actor, and strip it
+// before every write.
+export function withTemplateId(sceneData, isBlueprintFile) {
+  if (!sceneData || !isBlueprintFile) return sceneData;
+  const next = structuredClone(sceneData);
+  next.actors = next.actors ?? [];
+  if (next.actors[0]) next.actors[0].id = TEMPLATE_ACTOR_ID;
+  return next;
+}
+
+export function stripTemplateId(sceneData) {
+  const next = structuredClone(sceneData);
+  if (next.actors?.[0]?.id === TEMPLATE_ACTOR_ID) delete next.actors[0].id;
+  return next;
+}
+
+// Place a new instance of a blueprint at a ground point. Only Transform x/z
+// are written on the instance -- height and everything else inherit.
+export function placeBlueprintInstance3D(sceneData, files, blueprintPath, point) {
+  const next = structuredClone(sceneData);
+  next.actors = next.actors ?? [];
+  const existingIds = new Set(next.actors.map((actor) => actor.id));
+  const template = getBlueprintTemplate(files, blueprintPath);
+  const newId = mintActorIdFromName(existingIds, template?.name);
+  next.actors.push({
+    id: newId,
+    blueprint: blueprintPath,
+    components: { Transform: { x: snap(point.x), z: snap(point.z) } },
+  });
+  return { sceneData: next, newId };
+}
+
+// Duplicate selected actors with a 1m diagonal offset (the 3d version of the
+// imported engine's duplicateActors, which offsets 2d Layout instead).
+// `resolvedActors` supplies merged Transforms so an instance that inherits its
+// position still lands next to the original.
+export function duplicateActors3D(sceneData, actorIds, resolvedActors) {
+  const next = structuredClone(sceneData);
+  const existingIds = new Set(next.actors.map((actor) => actor.id));
+  const newIds = [];
+  for (const id of actorIds) {
+    const source = next.actors.find((actor) => actor.id === id);
+    if (!source) continue;
+    const copy = structuredClone(source);
+    copy.id = mintActorIdFromName(existingIds, id.replace(/-\d+$/, ''));
+    existingIds.add(copy.id);
+    const merged = resolvedActors?.find((actor) => actor.id === id)?.components?.Transform ?? {};
+    copy.components = {
+      ...(copy.components ?? {}),
+      Transform: {
+        ...(copy.components?.Transform ?? {}),
+        x: round2((merged.x ?? 0) + 1),
+        z: round2((merged.z ?? 0) + 1),
+      },
+    };
+    next.actors.push(copy);
+    newIds.push(copy.id);
+  }
+  return { sceneData: next, newIds };
+}
+
+// The hotbar's "+" slot: mint a fresh 3d blueprint file (a solid box) and
+// place one instance of it at the origin.
+export function addActorWithBlueprint3D(sceneData, files) {
+  const blueprintFile = mintBlueprintFile(files, {
+    Transform: { y: 0.5 },
+    Shape: { kind: 'box' },
+    Solid: {},
+  });
+  const filesWithNew = { ...files, [blueprintFile.path]: blueprintFile.text };
+  const { sceneData: next, newId } = placeBlueprintInstance3D(
+    sceneData,
+    filesWithNew,
+    blueprintFile.path,
+    { x: 0, z: 0 }
+  );
+  return { sceneData: next, newId, blueprintFile };
+}
+
+// A gizmo gesture's end state -> sparse Transform override patch. Position is
+// always written (instance-local); rotation only when meaningful or already
+// present.
+export function transformPatch(existing, change) {
+  const next = {
+    ...(existing ?? {}),
+    x: round2(change.x),
+    y: round2(change.y),
+    z: round2(change.z),
+  };
+  for (const key of ['rotationX', 'rotationY', 'rotationZ']) {
+    const value = Math.round((change[key] ?? 0) * 10) / 10;
+    if (value !== 0 || (existing && existing[key] !== undefined)) next[key] = value;
+  }
+  return next;
+}