castle-web-cli 0.4.2 → 0.4.4

package/kits/basic-2d-frozen/package.json

@@ -1,41 +0,0 @@
-{
-  "name": "basic-2d",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "serve": "node ../../cli/dist/index.js serve . --open",
-    "restart": "node ../../cli/dist/index.js restart .",
-    "screenshot": "node ../../cli/dist/index.js screenshot .",
-    "check": "eslint . && jscpd && node --input-type=module -e \"const { bundleProject } = await import('../../cli/dist/bundle.js'); await bundleProject('.');\""
-  },
-  "jscpd": {
-    "path": [
-      "engine",
-      "editors",
-      "behaviors"
-    ],
-    "threshold": 0,
-    "reporters": [
-      "consoleFull"
-    ]
-  },
-  "dependencies": {
-    "@codemirror/commands": "^6.10.3",
-    "@codemirror/lang-javascript": "^6.2.5",
-    "@codemirror/language": "^6.12.3",
-    "@codemirror/state": "^6.6.0",
-    "@codemirror/view": "^6.41.1",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@lezer/highlight": "^1.2.3",
-    "castle-web-sdk": "file:../../sdk",
-    "codemirror": "^6.0.2",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4"
-  },
-  "devDependencies": {
-    "eslint": "^9.0.0",
-    "eslint-plugin-react-hooks": "^5.0.0",
-    "jscpd": "^4.0.5",
-    "prettier": "^3.8.3"
-  }
-}

package/kits/basic-2d-frozen/scenes/main.scene

@@ -1,108 +0,0 @@
-{
-  "name": "Main Scene",
-  "background": "#1b2030",
-  "actors": [
-    {
-      "id": "actor_1",
-      "components": {
-        "Layout": {
-          "x": 80,
-          "y": 115,
-          "width": 64,
-          "height": 64,
-          "z": 0,
-          "rotation": 0
-        },
-        "Drawing": {
-          "file": "drawings/floor.drawing",
-          "tint": "#ff6b6bff"
-        }
-      }
-    },
-    {
-      "id": "actor_2",
-      "components": {
-        "Layout": {
-          "x": 172,
-          "y": 160,
-          "width": 48,
-          "height": 48,
-          "z": 0,
-          "rotation": 0
-        },
-        "Drawing": {
-          "file": "drawings/floor.drawing",
-          "tint": "#ffd166ff"
-        }
-      }
-    },
-    {
-      "id": "actor_3",
-      "components": {
-        "Layout": {
-          "x": 229,
-          "y": 63,
-          "width": 80,
-          "height": 56,
-          "z": 0,
-          "rotation": 0
-        },
-        "Drawing": {
-          "file": "drawings/floor.drawing",
-          "tint": "#06d6a0ff"
-        }
-      }
-    },
-    {
-      "id": "actor_4",
-      "components": {
-        "Layout": {
-          "x": 184,
-          "y": 239,
-          "width": 56,
-          "height": 56,
-          "z": 0,
-          "rotation": 0
-        },
-        "Drawing": {
-          "file": "drawings/floor.drawing",
-          "tint": "#4dabf7ff"
-        }
-      }
-    },
-    {
-      "id": "actor_5",
-      "components": {
-        "Layout": {
-          "x": 324,
-          "y": 259,
-          "width": 64,
-          "height": 80,
-          "z": 0,
-          "rotation": 0
-        },
-        "Drawing": {
-          "file": "drawings/floor.drawing",
-          "tint": "#b197fcff"
-        }
-      }
-    },
-    {
-      "id": "actor_6",
-      "components": {
-        "Layout": {
-          "x": 292,
-          "y": 389,
-          "width": 96,
-          "height": 64,
-          "z": 0,
-          "rotation": 0
-        },
-        "Drawing": {
-          "file": "drawings/floor.drawing",
-          "tint": "#f06595ff"
-        }
-      }
-    }
-  ]
-}

package/kits/basic-2d-frozen/vite.config.js

@@ -1 +0,0 @@
-export default {};

package/kits/rpg-2d/.prettierrc

@@ -1,8 +0,0 @@
-{
-  "printWidth": 100,
-  "tabWidth": 2,
-  "singleQuote": true,
-  "bracketSameLine": true,
-  "trailingComma": "es5",
-  "arrowParens": "always"
-}

package/kits/rpg-2d/behaviors/Camera.tsx

@@ -1,52 +0,0 @@
-import { cardSize } from '../engine/scene';
-import type { ActorData, Behavior, SceneRuntime } from '../engine/scene';
-import type { LayoutProps } from './Layout.tsx';
-
-export interface CameraProps {
-  target: string;
-  followX: boolean;
-  followY: boolean;
-  // Room bounds in card units. The camera is clamped so it never scrolls
-  // past the room edges.
-  roomWidth: number;
-  roomHeight: number;
-}
-
-// Follow camera: keeps the target actor centered in the viewport, clamped to
-// the room bounds so the empty area past the room edges never scrolls in.
-export class Camera implements Behavior<CameraProps> {
-  static behaviorName = 'Camera';
-  static defaultProps: CameraProps = {
-    target: '',
-    followX: true,
-    followY: true,
-    roomWidth: 900,
-    roomHeight: 1100,
-  };
-
-  props: CameraProps;
-
-  constructor(props: CameraProps) {
-    this.props = props;
-  }
-
-  update(_actor: ActorData, scene: SceneRuntime): void {
-    const target = this.props.target ? scene.getActor(this.props.target) : undefined;
-    const targetLayout = target?.components.Layout as LayoutProps | undefined;
-    if (!targetLayout) return;
-
-    const centerX = targetLayout.x + targetLayout.width / 2;
-    const centerY = targetLayout.y + targetLayout.height / 2;
-    const desiredX = centerX - cardSize.width / 2;
-    const desiredY = centerY - cardSize.height / 2;
-
-    scene.camera = {
-      x: this.props.followX ? clamp(desiredX, 0, this.props.roomWidth - cardSize.width) : 0,
-      y: this.props.followY ? clamp(desiredY, 0, this.props.roomHeight - cardSize.height) : 0,
-    };
-  }
-}
-
-function clamp(value: number, min: number, max: number): number {
-  return Math.max(min, Math.min(Math.max(min, max), value));
-}

package/kits/rpg-2d/behaviors/Collider.tsx

@@ -1,98 +0,0 @@
-import React from 'react';
-import { Panel, SelectField } from '../engine/ui';
-import { AutoFields } from '../engine/autoInspector';
-import type { ActorData, Behavior, SceneDrawOptions, SceneRuntime } from '../engine/scene';
-import type { LayoutProps } from './Layout.tsx';
-
-export type ColliderKind = 'solid' | 'pickup';
-
-export interface ColliderProps {
-  kind: ColliderKind;
-  width: number;
-  height: number;
-  offsetX?: number;
-  offsetY?: number;
-  debug?: boolean;
-}
-
-export interface Rect {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export class Collider implements Behavior<ColliderProps> {
-  static behaviorName = 'Collider';
-  static defaultProps: ColliderProps = {
-    kind: 'solid',
-    width: 32,
-    height: 32,
-    offsetX: 0,
-    offsetY: 0,
-    debug: false,
-  };
-
-  props: ColliderProps;
-
-  constructor(props: ColliderProps) {
-    this.props = props;
-  }
-
-  draw(
-    actor: ActorData,
-    _scene: SceneRuntime,
-    ctx: CanvasRenderingContext2D,
-    options: SceneDrawOptions
-  ): void {
-    if (!options.showDebugColliders && !this.props.debug) return;
-    const rect = getColliderRect(actor);
-    if (!rect) return;
-    ctx.save();
-    ctx.strokeStyle = this.props.kind === 'pickup' ? '#ffe17a' : '#8db7ff';
-    ctx.lineWidth = 2;
-    ctx.strokeRect(rect.x + 1, rect.y + 1, rect.width - 2, rect.height - 2);
-    ctx.restore();
-  }
-
-  static Inspector({
-    component,
-    setComponent,
-  }: {
-    component: ColliderProps;
-    setComponent: (nextProps: Partial<ColliderProps>) => void;
-  }) {
-    return (
-      <Panel title="Collider">
-        <SelectField
-          label="Kind"
-          value={component.kind}
-          onChange={(kind) => setComponent({ kind: kind as ColliderKind })}
-          options={['solid', 'pickup']}
-        />
-        <AutoFields
-          defaultProps={Collider.defaultProps}
-          component={component}
-          setComponent={setComponent}
-          exclude={['kind']}
-        />
-      </Panel>
-    );
-  }
-}
-
-export function getColliderRect(actor: ActorData): Rect | null {
-  const layout = actor.components.Layout as LayoutProps | undefined;
-  const collider = actor.components.Collider as ColliderProps | undefined;
-  if (!layout || !collider) return null;
-  return {
-    x: layout.x + (collider.offsetX ?? 0),
-    y: layout.y + (collider.offsetY ?? 0),
-    width: collider.width ?? layout.width,
-    height: collider.height ?? layout.height,
-  };
-}
-
-export function intersects(a: Rect, b: Rect): boolean {
-  return a.x < b.x + b.width && a.x + a.width > b.x && a.y < b.y + b.height && a.y + a.height > b.y;
-}

package/kits/rpg-2d/behaviors/Dialog.tsx

@@ -1,184 +0,0 @@
-import React from 'react';
-import { Panel } from '../engine/ui';
-import { AutoFields } from '../engine/autoInspector';
-import type { ActorData, Behavior, SceneRuntime } from '../engine/scene';
-
-export interface DialogProps {
-  // One line per text-box page. Player advances with E or click.
-  lines: string[];
-  // Who is speaking -- rendered as a label above the text box.
-  speaker: string;
-  // Card-px range from the player center at which this dialog auto-opens.
-  // Falls back to the player's PlayerController.interactRange when 0.
-  range: number;
-}
-
-interface DialogRuntime extends Record<string, unknown> {
-  open: boolean;
-  page: number;
-  advancePressed: boolean;
-  pointerWasDown: boolean;
-  // Was the player inside the proximity radius on the previous frame? The
-  // dialog opens on the rising edge of this -- i.e., when the player first
-  // walks into range. Bloom-run's overlap-trigger pattern.
-  wasInside: boolean;
-  // Once the player has finished the conversation it never auto-opens
-  // again for this scene session, even on re-entry.
-  done: boolean;
-}
-
-// Proximity-trigger dialog. When the player walks within `range`, the dialog
-// auto-opens to page 0. E or click advance pages; finishing the last page
-// closes the box and locks it shut until the player leaves the radius and
-// walks back in. (Space is reserved for the editor's play/stop toggle.)
-export class Dialog implements Behavior<DialogProps> {
-  static behaviorName = 'Dialog';
-  static defaultProps: DialogProps = {
-    lines: ['...'],
-    speaker: '',
-    range: 0,
-  };
-
-  props: DialogProps;
-
-  constructor(props: DialogProps) {
-    this.props = props;
-  }
-
-  update(actor: ActorData, scene: SceneRuntime): void {
-    const runtime = getDialogRuntime(actor);
-
-    const player = findPlayer(scene);
-    const range = this.props.range || getPlayerRange(player);
-    const inside = player ? actorCenterDistance(actor, player) <= range : false;
-
-    // Rising-edge entry: open and arm against the input edge that may have
-    // accompanied the walk-in (click / held E). Once `done`, the
-    // conversation is over for this session and never auto-reopens.
-    if (inside && !runtime.wasInside && !runtime.open && !runtime.done) {
-      runtime.open = true;
-      runtime.page = 0;
-      runtime.advancePressed = true;
-      runtime.pointerWasDown = true;
-    }
-
-    if (runtime.open) {
-      // Space is intentionally NOT an advance key -- the editor uses it to
-      // toggle play/stop, so consuming it here would fight the editor's
-      // global shortcut. E and click only.
-      const pressed = scene.keys.has('e') || scene.keys.has('E');
-      const pointerDown = scene.pointer.down;
-      const keyEdge = pressed && !runtime.advancePressed;
-      const pointerEdge = pointerDown && !runtime.pointerWasDown;
-      if (keyEdge || pointerEdge) {
-        runtime.page += 1;
-        if (runtime.page >= this.props.lines.length) {
-          runtime.open = false;
-          runtime.page = 0;
-          // Conversation finished -- permanently lock this dialog for the
-          // session so walking back into range does not re-open it.
-          runtime.done = true;
-          runtime.wasInside = true;
-          runtime.advancePressed = pressed;
-          runtime.pointerWasDown = pointerDown;
-          return;
-        }
-      }
-      runtime.advancePressed = pressed;
-      runtime.pointerWasDown = pointerDown;
-      // Hold wasInside true while open so a brief out-of-range glitch can't
-      // re-trigger anything weird mid-dialog.
-      runtime.wasInside = true;
-      return;
-    }
-
-    runtime.wasInside = inside;
-  }
-
-  ui(actor: ActorData): React.ReactNode {
-    const runtime = actor.runtime as DialogRuntime | undefined;
-    if (!runtime?.open) return null;
-    const line = this.props.lines[runtime.page] ?? '';
-    return (
-      <div
-        style={{
-          position: 'absolute',
-          left: 16,
-          right: 16,
-          bottom: 16,
-          padding: '14px 18px',
-          background: 'rgba(12, 16, 24, 0.92)',
-          color: '#f4f1de',
-          border: '2px solid rgba(255, 255, 255, 0.6)',
-          borderRadius: 8,
-          font: '14px/1.4 system-ui, sans-serif',
-          pointerEvents: 'none',
-        }}
-      >
-        {this.props.speaker ? (
-          <div style={{ fontWeight: 700, marginBottom: 6, color: '#ffd166' }}>
-            {this.props.speaker}
-          </div>
-        ) : null}
-        <div>{line}</div>
-        <div style={{ marginTop: 8, fontSize: 11, opacity: 0.7 }}>
-          {runtime.page + 1} / {this.props.lines.length} -- press E or click
-        </div>
-      </div>
-    );
-  }
-
-  static Inspector({
-    component,
-    setComponent,
-  }: {
-    component: DialogProps;
-    setComponent: (nextProps: Partial<DialogProps>) => void;
-  }) {
-    return (
-      <Panel title="Dialog">
-        <AutoFields
-          defaultProps={Dialog.defaultProps}
-          component={component}
-          setComponent={setComponent}
-        />
-      </Panel>
-    );
-  }
-}
-
-function getDialogRuntime(actor: ActorData): DialogRuntime {
-  if (!actor.runtime) actor.runtime = {};
-  const runtime = actor.runtime as DialogRuntime;
-  if (typeof runtime.open !== 'boolean') runtime.open = false;
-  if (typeof runtime.page !== 'number') runtime.page = 0;
-  if (typeof runtime.advancePressed !== 'boolean') runtime.advancePressed = false;
-  if (typeof runtime.pointerWasDown !== 'boolean') runtime.pointerWasDown = false;
-  if (typeof runtime.wasInside !== 'boolean') runtime.wasInside = false;
-  if (typeof runtime.done !== 'boolean') runtime.done = false;
-  return runtime;
-}
-
-function findPlayer(scene: SceneRuntime): ActorData | null {
-  for (const candidate of scene.getActors()) {
-    if (candidate.components.PlayerController) return candidate;
-  }
-  return null;
-}
-
-function getPlayerRange(player: ActorData | null): number {
-  if (!player) return 120;
-  const props = player.components.PlayerController as { interactRange?: number } | undefined;
-  return props?.interactRange ?? 120;
-}
-
-function actorCenterDistance(a: ActorData, b: ActorData): number {
-  const la = a.components.Layout as { x: number; y: number; width: number; height: number } | undefined;
-  const lb = b.components.Layout as { x: number; y: number; width: number; height: number } | undefined;
-  if (!la || !lb) return Infinity;
-  const ax = la.x + la.width / 2;
-  const ay = la.y + la.height / 2;
-  const bx = lb.x + lb.width / 2;
-  const by = lb.y + lb.height / 2;
-  return Math.hypot(ax - bx, ay - by);
-}

package/kits/rpg-2d/behaviors/Drawing.tsx

@@ -1,161 +0,0 @@
-import React from 'react';
-import { Panel, SelectField } from '../engine/ui';
-import { AutoFields } from '../engine/autoInspector';
-import { compositeFrame, frameIndexAt, parseHexColor, toHexColor } from '../engine/drawing';
-import type { DrawingData, FileMap } from '../engine/files';
-import type { ActorData, Behavior, SceneRuntime } from '../engine/scene';
-import type { LayoutProps } from './Layout.tsx';
-
-export interface DrawingProps {
-  file: string;
-  tint?: string;
-}
-
-// Renders the actor's drawing -- a layered, optionally animated pixel-art
-// sprite. Pulls the active frame from the drawing's playMode + fps + scene
-// time, composites visible layers, optionally tints, and blits.
-export class Drawing implements Behavior<DrawingProps> {
-  static behaviorName = 'Drawing';
-  static defaultProps: DrawingProps = {
-    file: 'drawings/floor.drawing',
-    tint: '#ffffffff',
-  };
-
-  props: DrawingProps;
-
-  constructor(props: DrawingProps) {
-    this.props = props;
-  }
-
-  draw(actor: ActorData, scene: SceneRuntime, ctx: CanvasRenderingContext2D): void {
-    if (actor.runtime?.collected) return;
-    const layout = actor.components.Layout as LayoutProps | undefined;
-    if (!layout) return;
-
-    const drawing = scene.drawings[this.props.file];
-    if (!drawing) return;
-
-    const frameIndex = frameIndexAt(drawing, scene.time);
-    drawAnimatedDrawing(
-      ctx,
-      drawing,
-      frameIndex,
-      layout.x,
-      layout.y,
-      layout.width,
-      layout.height,
-      this.props.tint
-    );
-  }
-
-  static Inspector({
-    component,
-    setComponent,
-    files,
-  }: {
-    component: DrawingProps;
-    files: FileMap;
-    setComponent: (nextProps: Partial<DrawingProps>) => void;
-  }) {
-    const drawingFiles = getDrawingFiles(files);
-    return (
-      <Panel title="Drawing">
-        <SelectField
-          label="File"
-          value={component.file}
-          onChange={(file) => setComponent({ file })}
-          options={drawingFiles}
-        />
-        <AutoFields
-          defaultProps={Drawing.defaultProps}
-          component={component}
-          setComponent={setComponent}
-          only={['tint']}
-        />
-      </Panel>
-    );
-  }
-}
-
-// Composite the visible layers of `frameIndex` and blit the result, tinted,
-// as one image. A single `drawImage` (vs per-pixel fillRect on the main ctx)
-// avoids hairline seams under any actor rotation.
-export function drawAnimatedDrawing(
-  ctx: CanvasRenderingContext2D,
-  drawing: DrawingData,
-  frameIndex: number,
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-  tint?: string
-): void {
-  if (drawing.width <= 0 || drawing.height <= 0) return;
-  const canvas = getFrameCanvas(drawing, frameIndex, tint);
-  const prevSmoothing = ctx.imageSmoothingEnabled;
-  ctx.imageSmoothingEnabled = false;
-  ctx.drawImage(canvas, x, y, width, height);
-  ctx.imageSmoothingEnabled = prevSmoothing;
-}
-
-// Cache of native-resolution offscreen canvases keyed by drawing object, then
-// by `frameIndex|tint`. A drawing edit produces a fresh DrawingData object,
-// so a new object naturally misses the WeakMap and rebuilds.
-const frameCanvasCache = new WeakMap<DrawingData, Map<string, HTMLCanvasElement>>();
-
-function getFrameCanvas(
-  drawing: DrawingData,
-  frameIndex: number,
-  tint?: string
-): HTMLCanvasElement {
-  const key = `${frameIndex}|${tint ?? ''}`;
-  let byKey = frameCanvasCache.get(drawing);
-  if (!byKey) {
-    byKey = new Map();
-    frameCanvasCache.set(drawing, byKey);
-  }
-  const cached = byKey.get(key);
-  if (cached) return cached;
-
-  const canvas = document.createElement('canvas');
-  canvas.width = drawing.width;
-  canvas.height = drawing.height;
-  const octx = canvas.getContext('2d');
-  if (octx) {
-    const composited = compositeFrame(drawing, frameIndex);
-    const tintRgba = parseTint(tint);
-    for (let py = 0; py < drawing.height; py++) {
-      for (let px = 0; px < drawing.width; px++) {
-        const color = composited[py * drawing.width + px];
-        if (!color || color.endsWith('00')) continue;
-        octx.fillStyle = tintRgba ? applyTint(color, tintRgba) : color;
-        octx.fillRect(px, py, 1, 1);
-      }
-    }
-  }
-  byKey.set(key, canvas);
-  return canvas;
-}
-
-function parseTint(tint?: string): [number, number, number, number] | null {
-  if (!tint) return null;
-  const rgba = parseHexColor(tint);
-  if (!rgba) return null;
-  if (rgba[0] === 255 && rgba[1] === 255 && rgba[2] === 255 && rgba[3] === 255) return null;
-  return rgba;
-}
-
-function applyTint(color: string, tint: [number, number, number, number]): string {
-  const rgba = parseHexColor(color);
-  if (!rgba) return color;
-  return toHexColor([
-    (rgba[0] * tint[0]) / 255,
-    (rgba[1] * tint[1]) / 255,
-    (rgba[2] * tint[2]) / 255,
-    (rgba[3] * tint[3]) / 255,
-  ]);
-}
-
-function getDrawingFiles(files: FileMap): string[] {
-  return Object.keys(files).filter((path) => path.endsWith('.drawing'));
-}