castle-web-cli 0.4.3 → 0.4.5

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

@@ -1,45 +0,0 @@
-import React from 'react';
-import { Panel } from '../engine/ui';
-import { AutoFields } from '../engine/autoInspector';
-import type { Behavior } from '../engine/scene';
-
-export interface FriendProps {
-  // Display name -- shown above the NPC by the editor / inspector. Not used by
-  // dialog UI; the speaker label lives on Dialog itself.
-  name: string;
-}
-
-// Marker behavior: tags an actor as a talkable NPC. PlayerController scans
-// for actors with this component (or a Dialog) when picking the interact
-// target on E / Space. Pair with Dialog to give the NPC something to say.
-// Relationship-meter math from the cozy-2d Friend is intentionally stripped.
-export class Friend implements Behavior<FriendProps> {
-  static behaviorName = 'Friend';
-  static defaultProps: FriendProps = {
-    name: 'Friend',
-  };
-
-  props: FriendProps;
-
-  constructor(props: FriendProps) {
-    this.props = props;
-  }
-
-  static Inspector({
-    component,
-    setComponent,
-  }: {
-    component: FriendProps;
-    setComponent: (nextProps: Partial<FriendProps>) => void;
-  }) {
-    return (
-      <Panel title="Friend">
-        <AutoFields
-          defaultProps={Friend.defaultProps}
-          component={component}
-          setComponent={setComponent}
-        />
-      </Panel>
-    );
-  }
-}

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

@@ -1,29 +0,0 @@
-import type { Behavior } from '../engine/scene';
-
-export interface LayoutProps {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  z?: number;
-  // Rotation in degrees, applied about the actor center when drawing.
-  rotation?: number;
-}
-
-export class Layout implements Behavior<LayoutProps> {
-  static behaviorName = 'Layout';
-  static defaultProps: LayoutProps = {
-    x: 0,
-    y: 0,
-    width: 32,
-    height: 32,
-    z: 0,
-    rotation: 0,
-  };
-
-  props: LayoutProps;
-
-  constructor(props: LayoutProps) {
-    this.props = props;
-  }
-}

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

@@ -1,255 +0,0 @@
-import type { ActorData, Behavior, SceneRuntime } from '../engine/scene';
-import { getColliderRect, intersects } from './Collider';
-import type { ColliderProps } from './Collider';
-import type { DrawingProps } from './Drawing';
-import type { LayoutProps } from './Layout.tsx';
-
-export type Facing = 'down' | 'up' | 'left' | 'right';
-
-export interface PlayerControllerProps {
-  speed: number;
-  // Prefix for walk/idle drawing files. The controller swaps the actor's
-  // Drawing component to `${spritePrefix}-${state}-${facing}.drawing` based on
-  // movement -- e.g. `drawings/player` resolves to `drawings/player-walk-up.drawing`.
-  spritePrefix: string;
-  // Card-px range at which proximity-triggered behaviors (Dialog, Portal,
-  // etc.) consider the player "near". Dialog reads this off the player to
-  // decide when to auto-open.
-  interactRange: number;
-}
-
-interface PlayerRuntime extends Record<string, unknown> {
-  facing: Facing;
-  moving: boolean;
-  // Tap-to-move destination in world coords; null when key-driven or idle.
-  moveTargetX: number | null;
-  moveTargetY: number | null;
-  // Tracks the pointer.down rising/falling edge so a tap registers once per
-  // press and so a release on a held drag can stop the player.
-  pointerWasDown: boolean;
-  // Seconds the current press has been held -- separates a quick tap
-  // (single move-to-point) from a held drag (re-target every frame).
-  pressTime: number;
-  // While true, each frame re-aims the ground move target at the live
-  // pointer position so a held drag continuously steers the player.
-  dragFollow: boolean;
-}
-
-// Arrival tolerance for tap-to-move (card px). When the player is within this
-// distance of the target, the walk ends.
-const ARRIVE_EPS = 6;
-// A press released within this many seconds counts as a quick tap (single
-// move-to-point); anything longer is a held drag that stops on release.
-const QUICK_TAP_SEC = 0.18;
-
-// Top-down 4-direction walk + idle. WASD / arrows steer directly; a quick
-// pointer tap walks to the tap point; a held drag continuously re-aims at
-// the live pointer. NPC dialogs are proximity-triggered by Dialog itself,
-// not by this controller -- the player just walks, and getting close to an
-// NPC opens its dialog automatically.
-export class PlayerController implements Behavior<PlayerControllerProps> {
-  static behaviorName = 'PlayerController';
-  static defaultProps: PlayerControllerProps = {
-    speed: 180,
-    spritePrefix: 'drawings/player',
-    interactRange: 36,
-  };
-
-  props: PlayerControllerProps;
-
-  constructor(props: PlayerControllerProps) {
-    this.props = props;
-  }
-
-  update(actor: ActorData, scene: SceneRuntime, dt: number): void {
-    const layout = actor.components.Layout as LayoutProps | undefined;
-    if (!layout) return;
-
-    const runtime = getPlayerRuntime(actor);
-
-    // While any actor's dialog is open, freeze the player: no movement, no
-    // tap-to-move. Pointer-edge tracking is forced "down" so the click that
-    // closes the dialog cannot also start a new ground walk on the same
-    // frame -- the user must release first.
-    if (isAnyDialogOpen(scene)) {
-      runtime.moving = false;
-      runtime.pointerWasDown = true;
-      runtime.dragFollow = false;
-      runtime.pressTime = 0;
-      runtime.moveTargetX = null;
-      runtime.moveTargetY = null;
-      syncDrawing(actor, runtime, this.props.spritePrefix);
-      return;
-    }
-
-    this.consumePointer(scene, runtime, dt);
-
-    const dx = readAxis(scene, ['a', 'A', 'ArrowLeft'], ['d', 'D', 'ArrowRight']);
-    const dy = readAxis(scene, ['w', 'W', 'ArrowUp'], ['s', 'S', 'ArrowDown']);
-
-    if (dx !== 0 || dy !== 0) {
-      runtime.moveTargetX = null;
-      runtime.moveTargetY = null;
-      runtime.dragFollow = false;
-      this.walkByVector(actor, scene, runtime, dx, dy, dt);
-    } else if (runtime.moveTargetX !== null && runtime.moveTargetY !== null) {
-      this.walkToTarget(actor, scene, runtime, dt);
-    } else {
-      runtime.moving = false;
-    }
-
-    syncDrawing(actor, runtime, this.props.spritePrefix);
-  }
-
-  private walkByVector(
-    actor: ActorData,
-    scene: SceneRuntime,
-    runtime: PlayerRuntime,
-    dx: number,
-    dy: number,
-    dt: number
-  ): void {
-    runtime.moving = true;
-    faceVector(runtime, dx, dy);
-    const len = Math.hypot(dx, dy) || 1;
-    const speed = this.props.speed;
-    moveAndCollide(actor, scene, (dx / len) * speed * dt, 0);
-    moveAndCollide(actor, scene, 0, (dy / len) * speed * dt);
-  }
-
-  private walkToTarget(
-    actor: ActorData,
-    scene: SceneRuntime,
-    runtime: PlayerRuntime,
-    dt: number
-  ): void {
-    const layout = actor.components.Layout as LayoutProps;
-    const tx = runtime.moveTargetX ?? 0;
-    const ty = runtime.moveTargetY ?? 0;
-    const cx = layout.x + layout.width / 2;
-    const cy = layout.y + layout.height / 2;
-    let dx = tx - cx;
-    let dy = ty - cy;
-    const dist = Math.hypot(dx, dy);
-
-    if (dist <= ARRIVE_EPS) {
-      runtime.moveTargetX = null;
-      runtime.moveTargetY = null;
-      runtime.moving = false;
-      return;
-    }
-
-    dx /= dist;
-    dy /= dist;
-    const speed = this.props.speed;
-    const step = Math.min(speed * dt, dist);
-    runtime.moving = true;
-    faceVector(runtime, dx, dy);
-    moveAndCollide(actor, scene, dx * step, 0);
-    moveAndCollide(actor, scene, 0, dy * step);
-  }
-
-  // A quick press-release becomes a single move-to-tap-point. A held press
-  // becomes a drag-follow: each frame re-aim the ground target at the live
-  // pointer. Releasing a held drag stops the player. There is no tap-on-NPC
-  // special case any more -- Dialog auto-opens on proximity, so the user
-  // just walks where they want.
-  private consumePointer(scene: SceneRuntime, runtime: PlayerRuntime, dt: number): void {
-    const isDown = scene.pointer.down;
-    const pressedThisFrame = isDown && !runtime.pointerWasDown;
-    const releasedThisFrame = !isDown && runtime.pointerWasDown;
-    runtime.pointerWasDown = isDown;
-
-    if (pressedThisFrame) {
-      runtime.moveTargetX = scene.pointer.x;
-      runtime.moveTargetY = scene.pointer.y;
-      runtime.dragFollow = true;
-      runtime.pressTime = 0;
-      return;
-    }
-
-    if (isDown) {
-      runtime.pressTime += dt;
-      if (runtime.dragFollow) {
-        runtime.moveTargetX = scene.pointer.x;
-        runtime.moveTargetY = scene.pointer.y;
-      }
-      return;
-    }
-
-    if (releasedThisFrame) {
-      const wasQuickTap = runtime.pressTime <= QUICK_TAP_SEC;
-      if (!wasQuickTap && runtime.dragFollow) {
-        runtime.moveTargetX = null;
-        runtime.moveTargetY = null;
-      }
-      runtime.dragFollow = false;
-      runtime.pressTime = 0;
-    }
-  }
-}
-
-function getPlayerRuntime(actor: ActorData): PlayerRuntime {
-  if (!actor.runtime) actor.runtime = {};
-  const runtime = actor.runtime as PlayerRuntime;
-  if (!runtime.facing) runtime.facing = 'down';
-  if (typeof runtime.moving !== 'boolean') runtime.moving = false;
-  if (runtime.moveTargetX === undefined) runtime.moveTargetX = null;
-  if (runtime.moveTargetY === undefined) runtime.moveTargetY = null;
-  if (typeof runtime.pointerWasDown !== 'boolean') runtime.pointerWasDown = false;
-  if (typeof runtime.pressTime !== 'number') runtime.pressTime = 0;
-  if (typeof runtime.dragFollow !== 'boolean') runtime.dragFollow = false;
-  return runtime;
-}
-
-function readAxis(scene: SceneRuntime, negatives: string[], positives: string[]): number {
-  const neg = negatives.some((key) => scene.keys.has(key)) ? 1 : 0;
-  const pos = positives.some((key) => scene.keys.has(key)) ? 1 : 0;
-  return pos - neg;
-}
-
-function faceVector(runtime: PlayerRuntime, dx: number, dy: number): void {
-  if (Math.abs(dx) >= Math.abs(dy)) {
-    if (dx > 0) runtime.facing = 'right';
-    else if (dx < 0) runtime.facing = 'left';
-  } else {
-    if (dy > 0) runtime.facing = 'down';
-    else if (dy < 0) runtime.facing = 'up';
-  }
-}
-
-function syncDrawing(actor: ActorData, runtime: PlayerRuntime, prefix: string): void {
-  const drawing = actor.components.Drawing as DrawingProps | undefined;
-  if (!drawing) return;
-  const state = runtime.moving ? 'walk' : 'idle';
-  drawing.file = `${prefix}-${state}-${runtime.facing}.drawing`;
-}
-
-function moveAndCollide(actor: ActorData, scene: SceneRuntime, dx: number, dy: number): void {
-  const layout = actor.components.Layout as LayoutProps | undefined;
-  if (!layout) return;
-  if (dx === 0 && dy === 0) return;
-  layout.x += dx;
-  layout.y += dy;
-  const myRect = getColliderRect(actor);
-  if (!myRect) return;
-  for (const other of scene.getActors()) {
-    if (other.id === actor.id) continue;
-    const otherCollider = other.components.Collider as ColliderProps | undefined;
-    if (!otherCollider || otherCollider.kind !== 'solid') continue;
-    const otherRect = getColliderRect(other);
-    if (!otherRect || !intersects(myRect, otherRect)) continue;
-    if (dx !== 0) layout.x -= dx;
-    if (dy !== 0) layout.y -= dy;
-    return;
-  }
-}
-
-function isAnyDialogOpen(scene: SceneRuntime): boolean {
-  for (const actor of scene.getActors()) {
-    if (!actor.components.Dialog) continue;
-    const runtime = actor.runtime as { open?: boolean } | undefined;
-    if (runtime?.open) return true;
-  }
-  return false;
-}

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

@@ -1,60 +0,0 @@
-import React from 'react';
-import { Panel } from '../engine/ui';
-import { AutoFields } from '../engine/autoInspector';
-import { getColliderRect, intersects } from './Collider';
-import type { ActorData, Behavior, SceneRuntime } from '../engine/scene';
-
-export interface PortalProps {
-  // File path of the scene to swap to when the player overlaps this portal.
-  // e.g. 'scenes/town.scene'. The engine reloads the scene on the next frame.
-  targetScene: string;
-}
-
-// Scene transition trigger. When any actor with a PlayerController overlaps
-// the portal's collider, set `scene.requestedScene = targetScene` so the
-// ScenePlayer mounts the next scene.
-export class Portal implements Behavior<PortalProps> {
-  static behaviorName = 'Portal';
-  static defaultProps: PortalProps = {
-    targetScene: '',
-  };
-
-  props: PortalProps;
-
-  constructor(props: PortalProps) {
-    this.props = props;
-  }
-
-  update(actor: ActorData, scene: SceneRuntime): void {
-    if (!this.props.targetScene) return;
-    const myRect = getColliderRect(actor);
-    if (!myRect) return;
-    for (const candidate of scene.getActors()) {
-      if (!candidate.components.PlayerController) continue;
-      const playerRect = getColliderRect(candidate);
-      if (!playerRect) continue;
-      if (intersects(myRect, playerRect)) {
-        scene.requestedScene = this.props.targetScene;
-        return;
-      }
-    }
-  }
-
-  static Inspector({
-    component,
-    setComponent,
-  }: {
-    component: PortalProps;
-    setComponent: (nextProps: Partial<PortalProps>) => void;
-  }) {
-    return (
-      <Panel title="Portal">
-        <AutoFields
-          defaultProps={Portal.defaultProps}
-          component={component}
-          setComponent={setComponent}
-        />
-      </Panel>
-    );
-  }
-}

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

@@ -1,90 +0,0 @@
-import React from 'react';
-import { Panel } from '../engine/ui';
-import { AutoFields } from '../engine/autoInspector';
-import type { Behavior } from '../engine/scene';
-
-export interface QuestStep {
-  id: string;
-  title: string;
-  // One-line hint shown beneath the title.
-  hint: string;
-}
-
-export interface QuestLogProps {
-  // Visible chapter title -- e.g. 'Chapter 1: The Awakening'.
-  chapter: string;
-  // The full quest line for this chapter, in order. The first uncompleted
-  // step is the active quest. Add an id to `completedIds` to mark done.
-  steps: QuestStep[];
-  // Step ids already completed (seeded for a fresh save).
-  completedIds: string[];
-}
-
-// Place on a 'manager' actor (one per scene). Renders a small HUD panel with
-// the chapter title and the active quest hint.
-export class QuestLog implements Behavior<QuestLogProps> {
-  static behaviorName = 'QuestLog';
-  static defaultProps: QuestLogProps = {
-    chapter: 'Chapter 1',
-    steps: [],
-    completedIds: [],
-  };
-
-  props: QuestLogProps;
-
-  constructor(props: QuestLogProps) {
-    this.props = props;
-  }
-
-  ui(): React.ReactNode {
-    const done = new Set(this.props.completedIds);
-    const active = this.props.steps.find((step) => !done.has(step.id));
-    return (
-      <div
-        style={{
-          position: 'absolute',
-          top: 12,
-          right: 12,
-          maxWidth: 220,
-          padding: '8px 12px',
-          background: 'rgba(12, 16, 24, 0.78)',
-          color: '#f4f1de',
-          border: '1px solid rgba(255, 255, 255, 0.35)',
-          borderRadius: 6,
-          font: '11px/1.3 system-ui, sans-serif',
-          pointerEvents: 'none',
-        }}
-      >
-        <div style={{ fontWeight: 700, color: '#ffd166', marginBottom: 4 }}>
-          {this.props.chapter}
-        </div>
-        {active ? (
-          <>
-            <div style={{ fontWeight: 600 }}>{active.title}</div>
-            <div style={{ opacity: 0.85 }}>{active.hint}</div>
-          </>
-        ) : (
-          <div style={{ opacity: 0.85 }}>All quests complete.</div>
-        )}
-      </div>
-    );
-  }
-
-  static Inspector({
-    component,
-    setComponent,
-  }: {
-    component: QuestLogProps;
-    setComponent: (nextProps: Partial<QuestLogProps>) => void;
-  }) {
-    return (
-      <Panel title="QuestLog">
-        <AutoFields
-          defaultProps={QuestLog.defaultProps}
-          component={component}
-          setComponent={setComponent}
-        />
-      </Panel>
-    );
-  }
-}

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

@@ -1,123 +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 SaveMenuProps {
-  // localStorage key for this deck's save slot. Decks pick a unique value
-  // (e.g. 'rpg-2d-starter/save-1') so multiple decks don't clobber each other.
-  storageKey: string;
-}
-
-interface SaveMenuRuntime extends Record<string, unknown> {
-  savePressed: boolean;
-  loadPressed: boolean;
-  toast: string;
-  toastUntil: number;
-}
-
-// Save / load slot. Press F5 to save the current scene snapshot to
-// localStorage, F9 to load it. A small toast confirms the action.
-export class SaveMenu implements Behavior<SaveMenuProps> {
-  static behaviorName = 'SaveMenu';
-  static defaultProps: SaveMenuProps = {
-    storageKey: 'rpg-2d/save',
-  };
-
-  props: SaveMenuProps;
-
-  constructor(props: SaveMenuProps) {
-    this.props = props;
-  }
-
-  update(actor: ActorData, scene: SceneRuntime): void {
-    const runtime = getSaveMenuRuntime(actor);
-    const savePressed = scene.keys.has('F5');
-    const loadPressed = scene.keys.has('F9');
-    if (savePressed && !runtime.savePressed) this.save(scene, runtime);
-    if (loadPressed && !runtime.loadPressed) this.load(scene, runtime);
-    runtime.savePressed = savePressed;
-    runtime.loadPressed = loadPressed;
-    if (runtime.toast && scene.time > runtime.toastUntil) runtime.toast = '';
-  }
-
-  private save(scene: SceneRuntime, runtime: SaveMenuRuntime): void {
-    try {
-      const snapshot = JSON.stringify(scene.serialize());
-      window.localStorage.setItem(this.props.storageKey, snapshot);
-      flashToast(runtime, scene, 'saved');
-    } catch {
-      flashToast(runtime, scene, 'save failed');
-    }
-  }
-
-  private load(scene: SceneRuntime, runtime: SaveMenuRuntime): void {
-    try {
-      const snapshot = window.localStorage.getItem(this.props.storageKey);
-      if (!snapshot) {
-        flashToast(runtime, scene, 'no save found');
-        return;
-      }
-      scene.load(JSON.parse(snapshot));
-      flashToast(runtime, scene, 'loaded');
-    } catch {
-      flashToast(runtime, scene, 'load failed');
-    }
-  }
-
-  ui(actor: ActorData): React.ReactNode {
-    const runtime = actor.runtime as SaveMenuRuntime | undefined;
-    if (!runtime?.toast) return null;
-    return (
-      <div
-        style={{
-          position: 'absolute',
-          top: 12,
-          left: 12,
-          padding: '6px 10px',
-          background: 'rgba(12, 16, 24, 0.85)',
-          color: '#f4f1de',
-          border: '1px solid rgba(255, 255, 255, 0.35)',
-          borderRadius: 4,
-          font: '11px/1.3 system-ui, sans-serif',
-          pointerEvents: 'none',
-        }}
-      >
-        {runtime.toast} (F5 save / F9 load)
-      </div>
-    );
-  }
-
-  static Inspector({
-    component,
-    setComponent,
-  }: {
-    component: SaveMenuProps;
-    setComponent: (nextProps: Partial<SaveMenuProps>) => void;
-  }) {
-    return (
-      <Panel title="SaveMenu">
-        <AutoFields
-          defaultProps={SaveMenu.defaultProps}
-          component={component}
-          setComponent={setComponent}
-        />
-      </Panel>
-    );
-  }
-}
-
-function getSaveMenuRuntime(actor: ActorData): SaveMenuRuntime {
-  if (!actor.runtime) actor.runtime = {};
-  const runtime = actor.runtime as SaveMenuRuntime;
-  if (typeof runtime.savePressed !== 'boolean') runtime.savePressed = false;
-  if (typeof runtime.loadPressed !== 'boolean') runtime.loadPressed = false;
-  if (typeof runtime.toast !== 'string') runtime.toast = '';
-  if (typeof runtime.toastUntil !== 'number') runtime.toastUntil = 0;
-  return runtime;
-}
-
-function flashToast(runtime: SaveMenuRuntime, scene: SceneRuntime, message: string): void {
-  runtime.toast = message;
-  runtime.toastUntil = scene.time + 1.6;
-}

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

@@ -1,90 +0,0 @@
-import React from 'react';
-import { Panel } from '../engine/ui';
-import { AutoFields } from '../engine/autoInspector';
-import { drawAnimatedDrawing } from './Drawing';
-import { frameIndexAt } from '../engine/drawing';
-import type { ActorData, Behavior, SceneRuntime } from '../engine/scene';
-import type { LayoutProps } from './Layout.tsx';
-
-export interface TilemapLayer {
-  // Single-character grid: each row is a string of chars whose mapping to a
-  // drawing file lives in `tiles`. '.' means empty.
-  rows: string[];
-  // Tile rendering offset from Layout's (x,y) origin in card pixels.
-  offsetZ?: number;
-}
-
-export interface TilemapProps {
-  // Px-size of one tile cell -- tile drawings are scaled to this.
-  tileSize: number;
-  // Char -> drawing file. Use '.' for empty / sky tiles.
-  tiles: Record<string, string>;
-  // Layers render back-to-front in array order, all anchored at the actor's
-  // Layout origin. Each layer is its own char grid so a Tilemap can mix
-  // floor + decoration + roof.
-  layers: TilemapLayer[];
-}
-
-// Multi-layer tile grid. The actor's Layout supplies the origin; each cell
-// renders the drawing keyed by its char. Empty cells ('.') skip drawing.
-export class Tilemap implements Behavior<TilemapProps> {
-  static behaviorName = 'Tilemap';
-  static defaultProps: TilemapProps = {
-    tileSize: 32,
-    tiles: {},
-    layers: [],
-  };
-
-  props: TilemapProps;
-
-  constructor(props: TilemapProps) {
-    this.props = props;
-  }
-
-  draw(actor: ActorData, scene: SceneRuntime, ctx: CanvasRenderingContext2D): void {
-    const layout = actor.components.Layout as LayoutProps | undefined;
-    if (!layout) return;
-    const size = this.props.tileSize;
-    for (const layer of this.props.layers) {
-      for (let row = 0; row < layer.rows.length; row++) {
-        const line = layer.rows[row];
-        for (let col = 0; col < line.length; col++) {
-          const char = line.charAt(col);
-          if (char === '.' || char === ' ') continue;
-          const file = this.props.tiles[char];
-          if (!file) continue;
-          const drawing = scene.drawings[file];
-          if (!drawing) continue;
-          const frameIndex = frameIndexAt(drawing, scene.time);
-          drawAnimatedDrawing(
-            ctx,
-            drawing,
-            frameIndex,
-            layout.x + col * size,
-            layout.y + row * size,
-            size,
-            size
-          );
-        }
-      }
-    }
-  }
-
-  static Inspector({
-    component,
-    setComponent,
-  }: {
-    component: TilemapProps;
-    setComponent: (nextProps: Partial<TilemapProps>) => void;
-  }) {
-    return (
-      <Panel title="Tilemap">
-        <AutoFields
-          defaultProps={Tilemap.defaultProps}
-          component={component}
-          setComponent={setComponent}
-        />
-      </Panel>
-    );
-  }
-}