castle-web-cli 0.4.10 → 0.4.12

package/kits/basic-3d/editors/CodeEditor.jsx

@@ -0,0 +1,112 @@
+import React, { useEffect, useRef } from 'react';
+import { javascript } from '@codemirror/lang-javascript';
+import { HighlightStyle, indentUnit, syntaxHighlighting } from '@codemirror/language';
+import { EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { tags } from '@lezer/highlight';
+import { basicSetup } from 'codemirror';
+import { basename } from '../engine/files';
+import { EditorBody, EditorHeader, styles } from '../engine/ui';
+const castleHighlightStyle = HighlightStyle.define([
+  { tag: tags.strong, color: '#285CC4' },
+  { tag: tags.namespace, color: '#BB7547' },
+  { tag: tags.keyword, color: '#BC4A9B' },
+  { tag: [tags.literal, tags.inserted], color: '#5DAF8D' },
+  { tag: [tags.string, tags.deleted], color: '#E86A73' },
+  { tag: tags.comment, color: '#8B93AF', fontStyle: 'italic' },
+]);
+const castleCodeTheme = EditorView.theme({
+  '&': {
+    height: '100%',
+    fontSize: '9pt',
+    backgroundColor: '#fff',
+  },
+  '&.cm-editor.cm-focused': {
+    outline: 'none',
+  },
+  '.cm-scroller': {
+    overflow: 'auto',
+    fontFamily: 'Menlo, Monaco, Lucida Console, monospace',
+  },
+  '.cm-content': {
+    minHeight: '100%',
+    color: '#322b28',
+    paddingBottom: '400px',
+    paddingRight: '80px',
+  },
+  '.cm-gutters': {
+    display: 'none',
+  },
+  '.cm-activeLine': {
+    backgroundColor: '#eeeeeea0',
+  },
+  '.cm-activeLineGutter': {
+    color: '#000',
+    backgroundColor: '#ddd',
+  },
+});
+export function CodeEditor({ path, text, onChange, onToggleFiles, filesOpen }) {
+  const editorRef = useRef(null);
+  const viewRef = useRef(null);
+  const onChangeRef = useRef(onChange);
+  const initialTextRef = useRef(text);
+  const applyingExternalTextRef = useRef(false);
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  // The editor is created once per `path`; the initial doc comes from a ref
+  // so `text` is not a dep of this effect (subsequent `text` updates flow
+  // through the second effect below). On `path` change we read whatever the
+  // latest `text` is at the moment of mount.
+  initialTextRef.current = text;
+  useEffect(() => {
+    if (!editorRef.current) return undefined;
+    const view = new EditorView({
+      parent: editorRef.current,
+      state: EditorState.create({
+        doc: initialTextRef.current,
+        extensions: [
+          basicSetup,
+          javascript({ jsx: true, typescript: true }),
+          indentUnit.of('  '),
+          castleCodeTheme,
+          syntaxHighlighting(castleHighlightStyle),
+          EditorView.updateListener.of((update) => {
+            if (!update.docChanged || applyingExternalTextRef.current) return;
+            onChangeRef.current(update.state.doc.toString());
+          }),
+        ],
+      }),
+    });
+    viewRef.current = view;
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+  }, [path]);
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    const currentText = view.state.doc.toString();
+    if (currentText === text) return;
+    applyingExternalTextRef.current = true;
+    view.dispatch({
+      changes: {
+        from: 0,
+        to: currentText.length,
+        insert: text,
+      },
+    });
+    applyingExternalTextRef.current = false;
+  }, [text]);
+  return (
+    <>
+      <EditorHeader title={basename(path)} onToggleFiles={onToggleFiles} filesOpen={filesOpen} />
+      <EditorBody>
+        <div className={styles.codeEditor}>
+          <div ref={editorRef} className={styles.codeMirrorHost} />
+        </div>
+      </EditorBody>
+    </>
+  );
+}

package/kits/basic-3d/editors/FileBrowser.jsx

@@ -0,0 +1,143 @@
+import React, { useState } from 'react';
+import { basename } from '../engine/files';
+import { cx, Icon, SheetGrabHandle, styles, useMobileSheet } from '../engine/ui';
+export function FileBrowser({
+  files,
+  selectedPath,
+  onSelect,
+  sheetOpen = false,
+  onSheetOpenChange,
+}) {
+  const tree = buildFileTree(Object.keys(files));
+  const [expanded, setExpanded] = useState(() => new Set(collectDirectoryPaths(tree)));
+  const sheet = useMobileSheet({
+    snap: sheetOpen ? 'high' : 'hidden',
+    baseClassName: styles.fileBrowser,
+    onTransition: (direction) => {
+      if (direction !== 'up') onSheetOpenChange?.(false);
+    },
+  });
+  function toggle(path) {
+    setExpanded((current) => {
+      const next = new Set(current);
+      if (next.has(path)) next.delete(path);
+      else next.add(path);
+      return next;
+    });
+  }
+  return (
+    <aside {...sheet.rootProps}>
+      <div {...sheet.grabProps}>
+        <SheetGrabHandle label="Files" hint={basename(selectedPath)} />
+      </div>
+      <div className={styles.fileBrowserHeader}>
+        <div>
+          <div className={styles.fileBrowserTitle}>Deck Files</div>
+        </div>
+      </div>
+      <div className={styles.fileTree}>
+        {tree.children.map((node) => (
+          <FileNode
+            key={node.path}
+            node={node}
+            depth={0}
+            expanded={expanded}
+            selectedPath={selectedPath}
+            onSelect={onSelect}
+            onToggle={toggle}
+          />
+        ))}
+      </div>
+    </aside>
+  );
+}
+function FileNode({ node, depth, expanded, selectedPath, onSelect, onToggle }) {
+  const depthStyle = { '--file-depth': depth };
+  if (node.type === 'directory') {
+    const isExpanded = expanded.has(node.path);
+    return (
+      <div className={styles.fileBranch}>
+        <button
+          className={styles.fileDirRow}
+          style={depthStyle}
+          onClick={() => onToggle(node.path)}>
+          <span className={styles.fileDisclosure}>
+            <Icon name={isExpanded ? 'chevron-down' : 'chevron-right'} />
+          </span>
+          <span>{node.name}</span>
+        </button>
+        {isExpanded ? (
+          <div>
+            {node.children.map((child) => (
+              <FileNode
+                key={child.path}
+                node={child}
+                depth={depth + 1}
+                expanded={expanded}
+                selectedPath={selectedPath}
+                onSelect={onSelect}
+                onToggle={onToggle}
+              />
+            ))}
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+  // File rows nest under their directory header: extra left padding so
+  // file text sits to the right of the parent directory header.
+  const fileRowStyle = {
+    ...depthStyle,
+    paddingLeft: `calc(9px + ${depth} * 16px + 7px)`,
+  };
+  return (
+    <button
+      className={cx(styles.fileRow, selectedPath === node.path && styles.fileRowSelected)}
+      style={fileRowStyle}
+      onClick={() => onSelect(node.path)}>
+      <span>{basename(node.path)}</span>
+    </button>
+  );
+}
+function buildFileTree(paths) {
+  const root = {
+    type: 'directory',
+    name: '',
+    path: '',
+    children: [],
+    childMap: new Map(),
+  };
+  for (const path of paths) {
+    const parts = path.split('/');
+    let parent = root;
+    for (let index = 0; index < parts.length; index++) {
+      const name = parts[index];
+      const nodePath = parts.slice(0, index + 1).join('/');
+      const isFile = index === parts.length - 1;
+      if (!parent.childMap?.has(name)) {
+        const node = isFile
+          ? { type: 'file', name, path: nodePath }
+          : { type: 'directory', name, path: nodePath, children: [], childMap: new Map() };
+        parent.childMap?.set(name, node);
+        parent.children.push(node);
+      }
+      const child = parent.childMap?.get(name);
+      if (!child || child.type !== 'directory') break;
+      parent = child;
+    }
+  }
+  pruneChildMaps(root);
+  return root;
+}
+function pruneChildMaps(node) {
+  if (node.type !== 'directory') return;
+  for (const child of node.children) pruneChildMaps(child);
+  delete node.childMap;
+}
+function collectDirectoryPaths(node) {
+  if (node.type !== 'directory') return [];
+  return [
+    ...(node.path ? [node.path] : []),
+    ...node.children.flatMap((child) => collectDirectoryPaths(child)),
+  ];
+}

package/kits/basic-3d/editors/ModelEditor.jsx

@@ -0,0 +1,400 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import * as THREE from 'three';
+import { basename, formatJson, parseJsonFile } from '../engine/files';
+import {
+  buildModelGroup,
+  defaultModelPart,
+  disposeObject3D,
+  fitRendererToCanvas,
+  geometryKinds,
+  radiansToDegrees,
+} from '../engine/threeUtil';
+import { roundUnits } from '../engine/scene';
+import { ThreeCanvas } from '../engine/SceneViewport';
+import {
+  cx,
+  EditorBody,
+  EditorHeader,
+  IconButton,
+  Panel,
+  SelectField,
+  SheetGrabHandle,
+  styles,
+  useMobileSheet,
+} from '../engine/ui';
+import { AutoFields } from '../engine/autoInspector';
+import { useEditHistory } from './editorHistory';
+import { createPreviewScene, createViewportRig, GIZMO_MODES } from './viewportRig';
+
+const CLICK_THRESHOLD_PX = 5;
+
+// Authoring editor for `.model` files -- a list of primitive parts, the 3d
+// analog of the 2d kit's pixel DrawingEditor. Left-drag orbits, click selects
+// a part, the gizmo moves/rotates it, exact values live in the inspector.
+export function ModelEditor({ path, text, onChange, onToggleFiles, filesOpen }) {
+  const [selectedPartIndex, setSelectedPartIndex] = useState(-1);
+  const [gizmoMode, setGizmoMode] = useState('translate');
+  const [inspectorOpen, setInspectorOpen] = useState(true);
+  const history = useEditHistory(text, onChange);
+  const inspectorSheet = useInspectorSheet(inspectorOpen);
+  const { value: model, error } = parseJsonFile(path, text);
+  const parts = model?.parts ?? [];
+  const viewport = useModelViewport({
+    model,
+    text,
+    selectedPartIndex,
+    gizmoMode,
+    applyModel: (next) => onChange(formatJson(next)),
+    recordSnapshot: history.recordSnapshot,
+  });
+  const clickSelect = usePartClickSelect(viewport, setSelectedPartIndex);
+  function commitModel(nextModel) {
+    history.commit(formatJson(nextModel));
+  }
+  function updatePart(index, nextProps) {
+    if (!model || !model.parts?.[index]) return;
+    const next = structuredClone(model);
+    next.parts[index] = { ...next.parts[index], ...nextProps };
+    commitModel(next);
+  }
+  function addPart(geometry) {
+    if (!model) return;
+    const next = structuredClone(model);
+    next.parts = next.parts ?? [];
+    next.parts.push({ ...defaultModelPart, geometry });
+    commitModel(next);
+    setSelectedPartIndex(next.parts.length - 1);
+  }
+  function duplicatePart(index) {
+    if (!model || !model.parts?.[index]) return;
+    const next = structuredClone(model);
+    const copy = structuredClone(next.parts[index]);
+    copy.x = roundUnits((copy.x ?? 0) + 0.5);
+    copy.z = roundUnits((copy.z ?? 0) + 0.5);
+    next.parts.splice(index + 1, 0, copy);
+    commitModel(next);
+    setSelectedPartIndex(index + 1);
+  }
+  function removePart(index) {
+    if (!model || !model.parts?.[index]) return;
+    const next = structuredClone(model);
+    next.parts.splice(index, 1);
+    commitModel(next);
+    setSelectedPartIndex(-1);
+  }
+  const sharedActionButtons = (
+    <>
+      <IconButton icon="undo" label="Undo" onClick={history.undo} disabled={!history.canUndo} />
+      <IconButton icon="redo" label="Redo" onClick={history.redo} disabled={!history.canRedo} />
+    </>
+  );
+  const gizmoButtons = (
+    <>
+      {GIZMO_MODES.filter((mode) => mode.key !== 'scale').map((mode) => (
+        <IconButton
+          key={mode.key}
+          icon={mode.icon}
+          label={mode.label}
+          active={gizmoMode === mode.key}
+          onClick={() => setGizmoMode(mode.key)}
+        />
+      ))}
+    </>
+  );
+  return (
+    <>
+      <EditorHeader
+        title={basename(path)}
+        subtitle={model ? `${parts.length} part${parts.length === 1 ? '' : 's'}` : error}
+        right={
+          <span className={styles.mobileOnly}>
+            {sharedActionButtons}
+            <IconButton
+              icon="palette"
+              label="Tools"
+              active={inspectorOpen}
+              onClick={() => setInspectorOpen((previous) => !previous)}
+            />
+          </span>
+        }
+        onToggleFiles={onToggleFiles}
+        filesOpen={filesOpen}
+      />
+      <EditorBody>
+        <div className={cx(styles.sceneWorkspace)}>
+          <div className={styles.sceneTools}>
+            <div className={styles.sceneToolsGroup}>{gizmoButtons}</div>
+            <div className={styles.sceneToolsGroup}>{sharedActionButtons}</div>
+            <span aria-hidden="true" />
+          </div>
+          <div className={cx(styles.stageWrap, styles.stageWrapFull)}>
+            <div className={styles.stageCard}>
+              <ThreeCanvas
+                onSetup={viewport.onSetup}
+                onFrame={viewport.onFrame}
+                className={styles.stageCanvas}
+                onContextMenu={(event) => event.preventDefault()}
+                onPointerDown={clickSelect.onPointerDown}
+                onPointerUp={clickSelect.onPointerUp}
+              />
+            </div>
+          </div>
+          <ModelInspector
+            sheet={inspectorSheet}
+            parts={parts}
+            selectedPartIndex={selectedPartIndex}
+            onSelectPart={setSelectedPartIndex}
+            onAddPart={addPart}
+            onDuplicatePart={duplicatePart}
+            onRemovePart={removePart}
+            onUpdatePart={updatePart}
+          />
+        </div>
+      </EditorBody>
+    </>
+  );
+}
+
+// Preview scene + camera rig + gizmo lifecycle for the model being edited.
+function useModelViewport(args) {
+  const argsRef = useRef(args);
+  argsRef.current = args;
+  const sceneRef = useRef(null);
+  const groupRef = useRef(null);
+  const rigRef = useRef(null);
+  const gizmoDraggingRef = useRef(false);
+  const gizmoRecordedRef = useRef(false);
+  if (!sceneRef.current) sceneRef.current = createPreviewScene();
+  const rebuildGroup = useCallback(() => {
+    const scene = sceneRef.current;
+    if (groupRef.current) {
+      scene.remove(groupRef.current);
+      disposeObject3D(groupRef.current);
+      groupRef.current = null;
+    }
+    const model = argsRef.current.model;
+    if (model) {
+      groupRef.current = buildModelGroup(model, null);
+      scene.add(groupRef.current);
+    }
+  }, []);
+  // Rebuild the preview on text changes -- except mid-gizmo-drag, where the
+  // attached mesh is the live source of truth and a rebuild would orphan it.
+  useEffect(() => {
+    if (gizmoDraggingRef.current) return;
+    rebuildGroup();
+    attachGizmoToSelection(rigRef.current, groupRef.current, argsRef.current);
+  }, [args.text, rebuildGroup]);
+  useEffect(() => {
+    attachGizmoToSelection(rigRef.current, groupRef.current, argsRef.current);
+  }, [args.selectedPartIndex, args.gizmoMode]);
+  useEffect(() => {
+    return () => {
+      if (groupRef.current) disposeObject3D(groupRef.current);
+    };
+  }, []);
+  const onSetup = ({ canvas }) => {
+    const rig = createViewportRig({
+      canvas,
+      scene: sceneRef.current,
+      onGizmoChange: (gizmo) => writeGizmoPart(gizmo, argsRef, gizmoRecordedRef),
+      onGizmoDraggingChanged: (dragging) => {
+        gizmoDraggingRef.current = dragging;
+        if (dragging) {
+          gizmoRecordedRef.current = false;
+        } else {
+          rebuildGroup();
+          attachGizmoToSelection(rigRef.current, groupRef.current, argsRef.current);
+        }
+      },
+    });
+    rig.setNavMode(true);
+    rigRef.current = rig;
+    attachGizmoToSelection(rig, groupRef.current, argsRef.current);
+    return () => {
+      rig.dispose();
+      rigRef.current = null;
+    };
+  };
+  const onFrame = ({ canvas, renderer }) => {
+    const rig = rigRef.current;
+    if (!rig) return;
+    if (!fitRendererToCanvas(renderer, rig.camera, canvas)) return;
+    rig.orbit.update();
+    renderer.render(sceneRef.current, rig.camera);
+  };
+  return { onSetup, onFrame, sceneRef, groupRef, rigRef };
+}
+
+function attachGizmoToSelection(rig, group, args) {
+  if (!rig) return;
+  const mesh = group?.children.find((child) => child.userData.partIndex === args.selectedPartIndex);
+  if (mesh) {
+    rig.gizmo.attach(mesh);
+    rig.gizmo.setMode(args.gizmoMode);
+  } else {
+    rig.gizmo.detach();
+  }
+}
+
+// Gizmo drag write-back for the selected part (position + rotation; size is
+// numeric-only in the inspector).
+function writeGizmoPart(gizmo, argsRef, gizmoRecordedRef) {
+  const current = argsRef.current;
+  const mesh = gizmo.object;
+  const index = mesh?.userData.partIndex;
+  if (!mesh || index == null || !current.model?.parts?.[index]) return;
+  if (!gizmoRecordedRef.current) {
+    current.recordSnapshot();
+    gizmoRecordedRef.current = true;
+  }
+  const next = structuredClone(current.model);
+  next.parts[index] = {
+    ...next.parts[index],
+    x: roundUnits(mesh.position.x),
+    y: roundUnits(mesh.position.y),
+    z: roundUnits(mesh.position.z),
+    rotationX: roundUnits(radiansToDegrees(mesh.rotation.x)),
+    rotationY: roundUnits(radiansToDegrees(mesh.rotation.y)),
+    rotationZ: roundUnits(radiansToDegrees(mesh.rotation.z)),
+  };
+  current.applyModel(next);
+}
+
+// Click (press + release without drag) selects the part under the pointer;
+// empty space deselects. Orbit owns actual drags.
+function usePartClickSelect(viewport, setSelectedPartIndex) {
+  const downRef = useRef(null);
+  const onPointerDown = useCallback(
+    (event) => {
+      if (event.button !== 0 || viewport.rigRef.current?.gizmoBusy()) return;
+      downRef.current = { x: event.clientX, y: event.clientY };
+    },
+    [viewport.rigRef]
+  );
+  const onPointerUp = useCallback(
+    (event) => {
+      const down = downRef.current;
+      downRef.current = null;
+      if (!down || viewport.rigRef.current?.gizmoBusy()) return;
+      if (Math.hypot(event.clientX - down.x, event.clientY - down.y) > CLICK_THRESHOLD_PX) return;
+      const rig = viewport.rigRef.current;
+      const group = viewport.groupRef.current;
+      if (!rig || !group) return;
+      const index = raycastPartIndex(event, rig.camera, group);
+      setSelectedPartIndex(index);
+    },
+    [viewport, setSelectedPartIndex]
+  );
+  return { onPointerDown, onPointerUp };
+}
+
+function raycastPartIndex(event, camera, group) {
+  const canvas = event.currentTarget;
+  const rect = canvas.getBoundingClientRect();
+  const ndc = {
+    x: ((event.clientX - rect.left) / rect.width) * 2 - 1,
+    y: -(((event.clientY - rect.top) / rect.height) * 2 - 1),
+  };
+  const raycaster = new THREE.Raycaster();
+  raycaster.setFromCamera(ndc, camera);
+  const hits = raycaster.intersectObjects(group.children, false);
+  return hits.length ? (hits[0].object.userData.partIndex ?? -1) : -1;
+}
+
+function useInspectorSheet(inspectorOpen) {
+  const [snap, setSnap] = useState('high');
+  useEffect(() => {
+    if (inspectorOpen) setSnap('high');
+  }, [inspectorOpen]);
+  const effectiveSnap = inspectorOpen ? snap : 'hidden';
+  return useMobileSheet({
+    snap: effectiveSnap,
+    baseClassName: styles.inspector,
+    onTransition: (direction) => {
+      if (!inspectorOpen) return;
+      if (direction === 'tap') setSnap((previous) => (previous === 'high' ? 'low' : 'high'));
+      else if (direction === 'down') setSnap('low');
+      else if (direction === 'up') setSnap('high');
+    },
+  });
+}
+
+function ModelInspector({
+  sheet,
+  parts,
+  selectedPartIndex,
+  onSelectPart,
+  onAddPart,
+  onDuplicatePart,
+  onRemovePart,
+  onUpdatePart,
+}) {
+  const selectedPart = parts[selectedPartIndex];
+  return (
+    <aside {...sheet.rootProps}>
+      <div {...sheet.grabProps}>
+        <SheetGrabHandle
+          label="Inspector"
+          hint={selectedPart ? `part ${selectedPartIndex}` : `${parts.length} parts`}
+        />
+      </div>
+      <div className={cx(styles.sheetBody, styles.inspectorBody)}>
+        <Panel title="Parts">
+          <div className={styles.actorList}>
+            {parts.map((part, index) => (
+              <button
+                key={index}
+                type="button"
+                className={cx(
+                  styles.actorRow,
+                  index === selectedPartIndex && styles.actorRowSelected
+                )}
+                onClick={() => onSelectPart(index === selectedPartIndex ? -1 : index)}>
+                {index}: {part.geometry ?? 'box'}
+              </button>
+            ))}
+          </div>
+          <div style={{ paddingTop: 8 }}>
+            <SelectField
+              label="Add part"
+              value=""
+              onChange={(geometry) => {
+                if (geometry) onAddPart(geometry);
+              }}
+              options={['', ...geometryKinds]}
+            />
+          </div>
+        </Panel>
+        {selectedPart ? (
+          <Panel title={`Part ${selectedPartIndex}`}>
+            <SelectField
+              label="Geometry"
+              value={selectedPart.geometry ?? 'box'}
+              onChange={(geometry) => onUpdatePart(selectedPartIndex, { geometry })}
+              options={geometryKinds}
+            />
+            <AutoFields
+              defaultProps={defaultModelPart}
+              component={selectedPart}
+              setComponent={(nextProps) => onUpdatePart(selectedPartIndex, nextProps)}
+              exclude={['geometry']}
+            />
+            <div style={{ display: 'flex', gap: 8, paddingBottom: 12 }}>
+              <IconButton
+                icon="clone"
+                label="Duplicate part"
+                onClick={() => onDuplicatePart(selectedPartIndex)}
+              />
+              <IconButton
+                icon="trash"
+                label="Remove part"
+                onClick={() => onRemovePart(selectedPartIndex)}
+              />
+            </div>
+          </Panel>
+        ) : null}
+      </div>
+    </aside>
+  );
+}

package/kits/basic-3d/editors/PlayOnly.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { initialFiles, parseJsonFile, parseModels } from '../engine/files';
+import { ScenePlayer } from '../engine/ScenePlayer';
+import { behaviorClasses } from './behaviorRegistry';
+// Play-mode entry point. Intentionally thin: it locates the start scene and
+// hands it to the engine's `ScenePlayer`, which owns the runtime and input.
+// Deck/game logic belongs in `scenes/` and `behaviors/`, not here.
+export function PlayOnly() {
+  const sceneText = initialFiles['scenes/main.scene'] ?? '';
+  const { value: sceneData } = parseJsonFile('scenes/main.scene', sceneText);
+  if (!sceneData) return null;
+  const models = parseModels(initialFiles);
+  return <ScenePlayer sceneData={sceneData} models={models} behaviorClasses={behaviorClasses} />;
+}