castle-web-cli 0.4.2 → 0.4.4

package/kits/rpg-2d/editors/behaviorRegistry.ts

@@ -1,33 +0,0 @@
-import type { BehaviorClass } from '../engine/scene';
-
-// Discover every behavior class from `behaviors/*.tsx`. Vite HMR is off, so a
-// newly-added behavior file is picked up on the next reload/restart.
-const modules = import.meta.glob<Record<string, unknown>>('../behaviors/*.tsx', { eager: true });
-
-function isBehaviorClass(value: unknown): value is BehaviorClass {
-  return (
-    typeof value === 'function' &&
-    typeof (value as { behaviorName?: unknown }).behaviorName === 'string'
-  );
-}
-
-function collectBehaviors(): BehaviorClass[] {
-  const found = new Map<string, BehaviorClass>();
-  for (const mod of Object.values(modules)) {
-    for (const exported of Object.values(mod)) {
-      if (isBehaviorClass(exported)) found.set(exported.behaviorName, exported);
-    }
-  }
-  // Layout first (every actor needs it), then alphabetical.
-  return [...found.values()].sort((a, b) => {
-    if (a.behaviorName === 'Layout') return -1;
-    if (b.behaviorName === 'Layout') return 1;
-    return a.behaviorName.localeCompare(b.behaviorName);
-  });
-}
-
-export const behaviorClasses: BehaviorClass[] = collectBehaviors();
-
-export function findBehaviorClass(behaviorName: string): BehaviorClass | undefined {
-  return behaviorClasses.find((candidate) => candidate.behaviorName === behaviorName);
-}

package/kits/rpg-2d/editors/editorHistory.ts

@@ -1,75 +0,0 @@
-import { useState } from 'react';
-
-interface History {
-  undo: string[];
-  redo: string[];
-}
-
-const HISTORY_LIMIT = 50;
-
-export interface EditHistory {
-  commit: (nextText: string) => void;
-  undo: () => void;
-  redo: () => void;
-  canUndo: boolean;
-  canRedo: boolean;
-  // For mid-stroke records: stash current text into the undo stack without
-  // touching `onChange` (the caller will emit the new text itself).
-  recordSnapshot: () => void;
-}
-
-// Text-undo/redo for file-backed editors. `text` is the canonical current
-// value; `onChange` writes the new value back. The hook owns the undo/redo
-// stacks; it never mutates `text` directly.
-export function useEditHistory(text: string, onChange: (next: string) => void): EditHistory {
-  const [history, setHistory] = useState<History>({ undo: [], redo: [] });
-
-  function commit(nextText: string): void {
-    if (nextText === text) return;
-    setHistory((current) => ({
-      undo: [...current.undo, text].slice(-HISTORY_LIMIT),
-      redo: [],
-    }));
-    onChange(nextText);
-  }
-
-  function recordSnapshot(): void {
-    setHistory((current) => ({
-      undo: [...current.undo, text].slice(-HISTORY_LIMIT),
-      redo: [],
-    }));
-  }
-
-  function undo(): void {
-    setHistory((current) => {
-      const previous = current.undo.at(-1);
-      if (!previous) return current;
-      onChange(previous);
-      return {
-        undo: current.undo.slice(0, -1),
-        redo: [text, ...current.redo].slice(0, HISTORY_LIMIT),
-      };
-    });
-  }
-
-  function redo(): void {
-    setHistory((current) => {
-      const next = current.redo[0];
-      if (!next) return current;
-      onChange(next);
-      return {
-        undo: [...current.undo, text].slice(-HISTORY_LIMIT),
-        redo: current.redo.slice(1),
-      };
-    });
-  }
-
-  return {
-    commit,
-    undo,
-    redo,
-    canUndo: history.undo.length > 0,
-    canRedo: history.redo.length > 0,
-    recordSnapshot,
-  };
-}

package/kits/rpg-2d/editors/editorProps.ts

@@ -1,10 +0,0 @@
-// Shared prop shape for file-backed editors (Code / Drawing / Scene). Each
-// editor receives the current file's `path`, its `text`, an `onChange` to
-// write back, and the file-browser toggle/state for the editor header.
-export interface FileEditorProps {
-  path: string;
-  text: string;
-  onChange: (text: string) => void;
-  onToggleFiles?: () => void;
-  filesOpen?: boolean;
-}

package/kits/rpg-2d/engine/ScenePlayer.tsx

@@ -1,130 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { initialFiles, parseJsonFile } from './files';
-import type { DrawingData } from './files';
-import { configureSceneCanvas, makeScene } from './scene';
-import type { BehaviorClass, SceneData, SceneRuntime } from './scene';
-import { SceneUI } from './SceneUI';
-import { TouchControls } from './TouchControls';
-
-// Engine-level scene player: mount a `SceneRuntime` against a canvas, wire
-// keyboard / pointer input, run the update+draw loop, and render the
-// behavior-driven UI overlay. No game logic lives here -- behaviors and
-// scenes are the place for that.
-export function ScenePlayer({
-  sceneData,
-  drawings,
-  behaviorClasses,
-}: {
-  sceneData: SceneData;
-  drawings: Record<string, DrawingData>;
-  behaviorClasses: BehaviorClass[];
-}) {
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  const runtimeRef = useRef<SceneRuntime | null>(null);
-  const getKeys = useCallback(() => runtimeRef.current?.keys ?? null, []);
-  const getRuntime = useCallback(() => runtimeRef.current, []);
-  // `loadedScene` lets Portal swap scenes: when a behavior sets
-  // `runtime.requestedScene = 'scenes/foo.scene'` the player loop notices,
-  // bumps this state, the effect re-runs, and a fresh runtime mounts.
-  const [loadedScene, setLoadedScene] = useState<SceneData>(sceneData);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return undefined;
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return undefined;
-    configureSceneCanvas(canvas, ctx);
-
-    const runtime = makeScene(loadedScene, behaviorClasses, drawings).clone();
-    runtimeRef.current = runtime;
-
-    const onKeyDown = (event: KeyboardEvent): void => {
-      runtime.keys.add(event.key);
-    };
-    const onKeyUp = (event: KeyboardEvent): void => {
-      runtime.keys.delete(event.key);
-    };
-    const onPointerDown = (event: PointerEvent): void => {
-      runtime.setPointerFromScreen(canvas, event.clientX, event.clientY, true);
-      canvas.setPointerCapture(event.pointerId);
-    };
-    const onPointerMove = (event: PointerEvent): void => {
-      runtime.setPointerFromScreen(canvas, event.clientX, event.clientY);
-    };
-    const onPointerUp = (event: PointerEvent): void => {
-      runtime.setPointerFromScreen(canvas, event.clientX, event.clientY, false);
-      try {
-        canvas.releasePointerCapture(event.pointerId);
-      } catch {
-        // Pointer capture may already be gone after cancel/blur.
-      }
-    };
-
-    window.addEventListener('keydown', onKeyDown);
-    window.addEventListener('keyup', onKeyUp);
-    canvas.addEventListener('pointerdown', onPointerDown);
-    canvas.addEventListener('pointermove', onPointerMove);
-    canvas.addEventListener('pointerup', onPointerUp);
-    canvas.addEventListener('pointercancel', onPointerUp);
-
-    const stopLoop = startPlayerLoop(canvas, ctx, runtime, (next) => setLoadedScene(next));
-
-    return () => {
-      stopLoop();
-      window.removeEventListener('keydown', onKeyDown);
-      window.removeEventListener('keyup', onKeyUp);
-      canvas.removeEventListener('pointerdown', onPointerDown);
-      canvas.removeEventListener('pointermove', onPointerMove);
-      canvas.removeEventListener('pointerup', onPointerUp);
-      canvas.removeEventListener('pointercancel', onPointerUp);
-      runtimeRef.current = null;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [loadedScene]);
-
-  return (
-    <div style={{ position: 'fixed', inset: 0, background: '#000' }}>
-      <canvas
-        ref={canvasRef}
-        style={{ width: '100%', height: '100%', display: 'block' }}
-      />
-      <SceneUI getRuntime={getRuntime} />
-      <TouchControls getKeys={getKeys} />
-    </div>
-  );
-}
-
-function startPlayerLoop(
-  canvas: HTMLCanvasElement,
-  ctx: CanvasRenderingContext2D,
-  runtime: SceneRuntime,
-  onSceneSwap: (next: SceneData) => void
-): () => void {
-  let raf = 0;
-  let previousTime = performance.now();
-  let swapped = false;
-  const tick = (now: number): void => {
-    const dt = Math.min(0.033, (now - previousTime) / 1000);
-    previousTime = now;
-    runtime.update(dt);
-    configureSceneCanvas(canvas, ctx);
-    runtime.draw(ctx, { useCamera: true });
-    const requested = runtime.requestedScene;
-    if (requested && !swapped) {
-      const text = initialFiles[requested];
-      if (text) {
-        const { value } = parseJsonFile<SceneData>(requested, text);
-        if (value) {
-          swapped = true;
-          runtime.requestedScene = undefined;
-          onSceneSwap(value);
-          return;
-        }
-      }
-      runtime.requestedScene = undefined;
-    }
-    raf = requestAnimationFrame(tick);
-  };
-  raf = requestAnimationFrame(tick);
-  return () => cancelAnimationFrame(raf);
-}

package/kits/rpg-2d/engine/SceneUI.tsx

@@ -1,74 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import styles from './ui.module.css';
-import { cardSize } from './scene';
-import type { SceneRuntime } from './scene';
-
-// Game-time UI overlay.
-//
-// Behaviors expose a `ui(actor, scene)` handler -- the React counterpart of
-// `draw`. `SceneUI` collects every behavior's UI output each frame and renders
-// it into a deck-sized layer that sits exactly over the canvas. The layer is
-// `cardSize` units wide/tall and scaled onto the canvas box, so behaviors lay
-// out in the same card units as `Layout`. The root clips with `overflow:
-// hidden`, so deck UI can never render outside the card.
-
-export function SceneUI({ getRuntime }: { getRuntime: () => SceneRuntime | null }) {
-  const rootRef = useRef<HTMLDivElement | null>(null);
-  const [box, setBox] = useState({ width: 0, height: 0 });
-  const [, forceRender] = useState(0);
-
-  // Track the canvas-sized overlay box so the card-unit layer scales onto it.
-  useEffect(() => {
-    const root = rootRef.current;
-    if (!root) return undefined;
-    const measure = (): void => setBox({ width: root.clientWidth, height: root.clientHeight });
-    const observer = new ResizeObserver(measure);
-    observer.observe(root);
-    measure();
-    return () => observer.disconnect();
-  }, []);
-
-  // Re-render every frame so behavior UI reflects live runtime state.
-  useEffect(() => {
-    let raf = 0;
-    const frame = (): void => {
-      forceRender((tick) => tick + 1);
-      raf = requestAnimationFrame(frame);
-    };
-    raf = requestAnimationFrame(frame);
-    return () => cancelAnimationFrame(raf);
-  }, []);
-
-  return (
-    <div ref={rootRef} className={styles.sceneUiRoot}>
-      <div
-        className={styles.sceneUiLayer}
-        style={{
-          width: cardSize.width,
-          height: cardSize.height,
-          transform: `scale(${box.width / cardSize.width}, ${box.height / cardSize.height})`,
-        }}>
-        {collectUiNodes(getRuntime())}
-      </div>
-    </div>
-  );
-}
-
-// Build one keyed React node per behavior that defines a `ui` handler.
-function collectUiNodes(runtime: SceneRuntime | null): React.ReactNode[] {
-  if (!runtime) return [];
-  const nodes: React.ReactNode[] = [];
-  for (const actor of runtime.getActors()) {
-    for (const [behaviorName, props] of Object.entries(actor.components)) {
-      if (!props) continue;
-      const Behavior = runtime.behaviors.get(behaviorName);
-      if (!Behavior) continue;
-      const instance = new Behavior(props as never);
-      if (!instance.ui) continue;
-      const node = instance.ui(actor, runtime);
-      if (node == null) continue;
-      nodes.push(<React.Fragment key={`${actor.id}:${behaviorName}`}>{node}</React.Fragment>);
-    }
-  }
-  return nodes;
-}

package/kits/rpg-2d/engine/TouchControls.tsx

@@ -1,157 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-
-// On-screen movement controls: a 4-way d-pad feeds arrow keys onto
-// `scene.keys` -- the exact same keyboard keys behaviors consume, no separate
-// input path.
-const KEYS = {
-  up: 'ArrowUp',
-  down: 'ArrowDown',
-  left: 'ArrowLeft',
-  right: 'ArrowRight',
-} as const;
-
-type ButtonId = keyof typeof KEYS;
-
-export function TouchControls({
-  getKeys,
-  visible = true,
-}: {
-  getKeys: () => Set<string> | null | undefined;
-  visible?: boolean;
-}) {
-  const [isTouch, setIsTouch] = useState(false);
-  const heldRef = useRef<Set<ButtonId>>(new Set());
-
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
-    const override = params.get('touch');
-    if (override === '1' || override === 'true') {
-      setIsTouch(true);
-      return undefined;
-    }
-    if (override === '0' || override === 'false') {
-      setIsTouch(false);
-      return undefined;
-    }
-    const mq = window.matchMedia('(pointer: coarse)');
-    const update = (): void => {
-      setIsTouch(mq.matches || 'ontouchstart' in window || navigator.maxTouchPoints > 0);
-    };
-    update();
-    mq.addEventListener?.('change', update);
-    return () => mq.removeEventListener?.('change', update);
-  }, []);
-
-  const release = useCallback(
-    (id: ButtonId): void => {
-      if (!heldRef.current.has(id)) return;
-      heldRef.current.delete(id);
-      getKeys()?.delete(KEYS[id]);
-    },
-    [getKeys]
-  );
-
-  useEffect(() => {
-    if (!visible || !isTouch) {
-      // Drop any keys we were holding when controls hide.
-      const keys = getKeys();
-      if (keys) for (const id of heldRef.current) keys.delete(KEYS[id]);
-      heldRef.current.clear();
-    }
-  }, [visible, isTouch, getKeys]);
-
-  if (!visible || !isTouch) return null;
-
-  const press = (id: ButtonId): void => {
-    heldRef.current.add(id);
-    getKeys()?.add(KEYS[id]);
-  };
-
-  const button = (id: ButtonId, label: string, extra?: React.CSSProperties) => (
-    <button
-      key={id}
-      type="button"
-      tabIndex={-1}
-      aria-label={id}
-      onTouchStart={(event) => {
-        event.preventDefault();
-        press(id);
-      }}
-      onTouchEnd={(event) => {
-        event.preventDefault();
-        release(id);
-      }}
-      onTouchCancel={(event) => {
-        event.preventDefault();
-        release(id);
-      }}
-      onMouseDown={(event) => {
-        event.preventDefault();
-        press(id);
-      }}
-      onMouseUp={() => release(id)}
-      onMouseLeave={() => release(id)}
-      onContextMenu={(event) => event.preventDefault()}
-      style={{ ...buttonStyle, ...extra }}>
-      {label}
-    </button>
-  );
-
-  return (
-    <div style={containerStyle}>
-      <div style={dpadStyle}>
-        {button('up', '▲', dpadUpStyle)}
-        {button('left', '◀', dpadLeftStyle)}
-        {button('right', '▶', dpadRightStyle)}
-        {button('down', '▼', dpadDownStyle)}
-      </div>
-    </div>
-  );
-}
-
-const containerStyle: React.CSSProperties = {
-  position: 'fixed',
-  left: 0,
-  right: 0,
-  bottom: 0,
-  display: 'flex',
-  justifyContent: 'flex-start',
-  alignItems: 'flex-end',
-  padding: '12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px)',
-  pointerEvents: 'none',
-  zIndex: 50,
-};
-
-// 3x3 grid -- the d-pad arms occupy the cross cells, corners stay empty.
-const dpadStyle: React.CSSProperties = {
-  display: 'grid',
-  gridTemplateColumns: 'repeat(3, 64px)',
-  gridTemplateRows: 'repeat(3, 64px)',
-  gap: 6,
-  pointerEvents: 'auto',
-};
-
-const dpadUpStyle: React.CSSProperties = { gridColumn: 2, gridRow: 1 };
-const dpadLeftStyle: React.CSSProperties = { gridColumn: 1, gridRow: 2 };
-const dpadRightStyle: React.CSSProperties = { gridColumn: 3, gridRow: 2 };
-const dpadDownStyle: React.CSSProperties = { gridColumn: 2, gridRow: 3 };
-
-const buttonStyle: React.CSSProperties = {
-  width: 64,
-  height: 64,
-  borderRadius: 12,
-  border: '1px solid rgba(255, 255, 255, 0.35)',
-  background: 'rgba(0, 0, 0, 0.35)',
-  color: 'rgba(255, 255, 255, 0.92)',
-  fontSize: 24,
-  fontWeight: 600,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  userSelect: 'none',
-  WebkitUserSelect: 'none',
-  WebkitTouchCallout: 'none',
-  WebkitTapHighlightColor: 'transparent',
-  touchAction: 'none',
-  cursor: 'pointer',
-};

package/kits/rpg-2d/engine/autoInspector.tsx

@@ -1,111 +0,0 @@
-import React from 'react';
-import { CheckboxField, ColorField, NumberField, Panel, TextField, isHexColor } from './ui';
-
-// Auto-generated inspector fields.
-//
-// `AutoFields` derives a control per prop from a behavior's `defaultProps`:
-// the field SET and the inferred type come from `defaultProps`, the current
-// value comes from the actor's component (falling back to the default).
-//
-// A behavior that needs custom UI for a prop auto-gen cannot express
-// (enum/select, file refs) defines a `static Inspector` and renders the
-// standard props with `<AutoFields only={...} />` / `exclude={...}` while
-// hand-writing only the special ones.
-
-type FieldKey<T> = Extract<keyof T, string>;
-
-export function AutoFields<T extends object>({
-  defaultProps,
-  component,
-  setComponent,
-  only,
-  exclude,
-}: {
-  defaultProps: T;
-  component: Partial<T>;
-  setComponent: (next: Partial<T>) => void;
-  only?: FieldKey<T>[];
-  exclude?: FieldKey<T>[];
-}) {
-  const keys = (Object.keys(defaultProps) as FieldKey<T>[]).filter((key) => {
-    if (only) return only.includes(key);
-    if (exclude) return !exclude.includes(key);
-    return true;
-  });
-  return (
-    <>
-      {keys.map((key) => {
-        const fallback = defaultProps[key];
-        const current = key in component ? (component as T)[key] : fallback;
-        const set = (value: unknown) => setComponent({ [key]: value } as Partial<T>);
-        const label = humanizeKey(key);
-        const sample = fallback ?? current;
-
-        if (typeof sample === 'number') {
-          return (
-            <NumberField
-              key={key}
-              label={label}
-              value={current as number | null | undefined}
-              onChange={set}
-            />
-          );
-        }
-        if (typeof sample === 'boolean') {
-          return (
-            <CheckboxField
-              key={key}
-              label={label}
-              checked={current as boolean | null | undefined}
-              onChange={set}
-            />
-          );
-        }
-        if (isHexColor(sample)) {
-          return (
-            <ColorField
-              key={key}
-              label={label}
-              value={current as string | null | undefined}
-              onChange={set}
-            />
-          );
-        }
-        return (
-          <TextField
-            key={key}
-            label={label}
-            value={current == null ? '' : String(current)}
-            onChange={set}
-          />
-        );
-      })}
-    </>
-  );
-}
-
-export function AutoInspector<T extends object>({
-  behaviorName,
-  defaultProps,
-  component,
-  setComponent,
-}: {
-  behaviorName: string;
-  defaultProps: T;
-  component: Partial<T>;
-  setComponent: (next: Partial<T>) => void;
-}) {
-  return (
-    <Panel title={humanizeKey(behaviorName)}>
-      <AutoFields defaultProps={defaultProps} component={component} setComponent={setComponent} />
-    </Panel>
-  );
-}
-
-// `deadZoneY` -> `Dead Zone Y`, `PlatformerCharacter` -> `Platformer Character`.
-export function humanizeKey(key: string): string {
-  return key
-    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
-    .replace(/^./, (c) => c.toUpperCase())
-    .trim();
-}

package/kits/rpg-2d/engine/drawing.ts

@@ -1,81 +0,0 @@
-import { TRANSPARENT, blankPixelGrid, frameCount } from './files';
-import type { DrawingData } from './files';
-
-// Render-time helpers for layered+animated drawings. Pulled from the bloom-run
-// engine; only the bits the runtime Drawing behavior + DrawingEditor need are
-// kept. Pixel grids are row-major `string[]` of hex-RGBA strings.
-
-// Parse a hex color into [r, g, b, a] (0-255), or null when not a hex color.
-export function parseHexColor(color: string): [number, number, number, number] | null {
-  const hex = color.trim().replace(/^#/, '');
-  if (hex.length !== 6 && hex.length !== 8) return null;
-  if (!/^[0-9a-fA-F]+$/.test(hex)) return null;
-  const r = parseInt(hex.slice(0, 2), 16);
-  const g = parseInt(hex.slice(2, 4), 16);
-  const b = parseInt(hex.slice(4, 6), 16);
-  const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) : 255;
-  return [r, g, b, a];
-}
-
-export function toHexColor(rgba: [number, number, number, number]): string {
-  return '#' + rgba.map((c) => clamp255(c).toString(16).padStart(2, '0')).join('');
-}
-
-function clamp255(value: number): number {
-  return Math.max(0, Math.min(255, Math.round(value)));
-}
-
-export function isTransparent(color: string | undefined): boolean {
-  if (!color) return true;
-  const rgba = parseHexColor(color);
-  return !rgba || rgba[3] === 0;
-}
-
-// Source-over alpha composite of `src` onto `dst`, both hex-RGBA.
-export function blendColors(dst: string, src: string): string {
-  const d = parseHexColor(dst);
-  const s = parseHexColor(src);
-  if (!s) return dst;
-  if (!d || s[3] === 255) return src;
-  const sa = s[3] / 255;
-  const da = d[3] / 255;
-  const outA = sa + da * (1 - sa);
-  if (outA <= 0) return TRANSPARENT;
-  const mix = (sc: number, dc: number): number => (sc * sa + dc * da * (1 - sa)) / outA;
-  return toHexColor([mix(s[0], d[0]), mix(s[1], d[1]), mix(s[2], d[2]), outA * 255]);
-}
-
-// Flatten the visible layers of a frame into one pixel grid (bottom-to-top).
-export function compositeFrame(drawing: DrawingData, frameIndex: number): string[] {
-  const { width, height } = drawing;
-  const out = blankPixelGrid(width, height);
-  for (const layer of drawing.layers) {
-    if (!layer.visible) continue;
-    const frame = layer.frames[frameIndex];
-    if (!frame) continue;
-    for (let i = 0; i < out.length; i++) {
-      const src = frame[i];
-      if (isTransparent(src)) continue;
-      out[i] = blendColors(out[i], src);
-    }
-  }
-  return out;
-}
-
-// Resolve which 0-based frame to show at scene time `time` (seconds), given
-// the drawing's fps + play mode. `still` always shows initialFrame.
-export function frameIndexAt(drawing: DrawingData, time: number): number {
-  const count = frameCount(drawing);
-  if (count <= 1) return 0;
-  const initial = clampInt(drawing.initialFrame - 1, 0, count - 1);
-  if (drawing.playMode === 'still' || drawing.fps === 0) return initial;
-  const advanced = Math.floor(Math.abs(time) * Math.abs(drawing.fps));
-  if (drawing.playMode === 'once') {
-    return clampInt(initial + advanced, 0, count - 1);
-  }
-  return (initial + (advanced % count)) % count;
-}
-
-function clampInt(value: number, min: number, max: number): number {
-  return Math.max(min, Math.min(max, Math.floor(value)));
-}