castle-web-cli 0.4.84 → 0.4.86

package/kits/physics-2d/editors/BlueprintLibrary.jsx

@@ -0,0 +1,247 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { renderSpriteFrame } from '../engine/pxart';
+import { screenToCard } from '../engine/scene';
+import { countBlueprintInstances, listBlueprints } from '../engine/blueprint';
+import { ConfirmDialog, ContextMenu, cx, Icon, styles } from '../engine/ui';
+
+const DRAG_THRESHOLD = 4;
+
+// Deck-level blueprint library / hotbar: lists `blueprints/*.scene` (replacing
+// the old scene-local stamp system). Mirrors castle-client's belt: TAP a slot
+// to select the blueprint for editing in the sidebar; DRAG a slot onto the
+// canvas to place a new instance; right-click for a delete option.
+export function BlueprintLibrary({
+  files,
+  sprites,
+  canvasRef,
+  editCameraRef,
+  isPlaying,
+  selectedBlueprintPath,
+  instanceBlueprintPath,
+  onSelectBlueprint,
+  onAddActor,
+  dragPlace,
+  onDeleteBlueprint,
+}) {
+  const blueprints = listBlueprints(files);
+  const dragRef = useRef(null);
+  const suppressClickRef = useRef(false);
+  const [dragPreview, setDragPreview] = useState(null);
+  const [contextMenu, setContextMenu] = useState(null);
+  const [confirmDelete, setConfirmDelete] = useState(null);
+
+  const onSlotContextMenu = (event, blueprint) => {
+    if (isPlaying) return;
+    event.preventDefault();
+    event.stopPropagation();
+    setContextMenu({ blueprint, x: event.clientX, y: event.clientY });
+  };
+
+  const onSlotPointerDown = (event, blueprint) => {
+    if (isPlaying || event.button !== 0) return;
+    event.preventDefault();
+    const drag = {
+      blueprint,
+      pointerId: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      moved: false,
+      onStage: false,
+    };
+    dragRef.current = drag;
+    try {
+      event.currentTarget.setPointerCapture(event.pointerId);
+    } catch {
+      // Window listeners still finish the drag if capture is unavailable.
+    }
+    const onMove = (moveEvent) => {
+      if (moveEvent.pointerId !== drag.pointerId) return;
+      if (!drag.moved && Math.hypot(moveEvent.clientX - drag.startX, moveEvent.clientY - drag.startY) > DRAG_THRESHOLD) {
+        drag.moved = true;
+      }
+      if (!drag.moved) return;
+      const position = eventToStagePoint(moveEvent, canvasRef, editCameraRef);
+      if (position) {
+        // Over the stage: the drag becomes a REAL placed instance immediately,
+        // so it grid-snaps and renders exactly like the actor it is. The
+        // floating thumbnail only exists off-stage.
+        if (drag.onStage) {
+          dragPlace.move(position);
+        } else {
+          drag.onStage = true;
+          setDragPreview(null);
+          dragPlace.enter(blueprint.path, position);
+        }
+      } else {
+        if (drag.onStage) {
+          drag.onStage = false;
+          dragPlace.leave();
+        }
+        setDragPreview({ blueprint, x: moveEvent.clientX, y: moveEvent.clientY, overStage: false });
+      }
+    };
+    const onUp = (upEvent) => {
+      if (upEvent.pointerId !== drag.pointerId) return;
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', onUp);
+      dragRef.current = null;
+      setDragPreview(null);
+      if (!drag.moved) return;
+      suppressClickRef.current = true;
+      // Cancelled drags (pointercancel) count as a release off-stage.
+      if (drag.onStage && upEvent.type !== 'pointercancel') dragPlace.drop();
+      else if (drag.onStage) dragPlace.leave();
+    };
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onUp);
+  };
+
+  return (
+    <div className={styles.bpHotbar} aria-label="Blueprints">
+      <button
+        type="button"
+        className={styles.bpActionSlot}
+        aria-label="Add actor"
+        title="New blueprint"
+        onClick={onAddActor}
+        disabled={isPlaying}>
+        <Icon name="plus" />
+      </button>
+      {blueprints.map((blueprint) => (
+        <button
+          key={blueprint.path}
+          type="button"
+          className={cx(
+            styles.bpSlot,
+            selectedBlueprintPath === blueprint.path && styles.bpSlotSelected,
+            selectedBlueprintPath !== blueprint.path &&
+              instanceBlueprintPath === blueprint.path &&
+              styles.bpSlotInstance
+          )}
+          title={`${blueprint.name} -- click to edit, drag to place`}
+          disabled={isPlaying}
+          onPointerDown={(event) => onSlotPointerDown(event, blueprint)}
+          onContextMenu={(event) => onSlotContextMenu(event, blueprint)}
+          onClick={() => {
+            if (suppressClickRef.current) {
+              suppressClickRef.current = false;
+              return;
+            }
+            onSelectBlueprint(blueprint.path);
+          }}>
+          <BlueprintThumbnail blueprint={blueprint} sprites={sprites} />
+        </button>
+      ))}
+      {dragPreview ? <BlueprintDragPreview preview={dragPreview} sprites={sprites} /> : null}
+      {contextMenu ? (
+        <ContextMenu
+          x={contextMenu.x}
+          y={contextMenu.y}
+          onClose={() => setContextMenu(null)}
+          items={[
+            {
+              key: 'delete',
+              label: `Delete ${contextMenu.blueprint.name}...`,
+              onClick: () => setConfirmDelete(contextMenu.blueprint),
+            },
+          ]}
+        />
+      ) : null}
+      {confirmDelete ? (
+        <DeleteBlueprintConfirm
+          files={files}
+          blueprint={confirmDelete}
+          onCancel={() => setConfirmDelete(null)}
+          onConfirm={() => {
+            onDeleteBlueprint(confirmDelete.path);
+            setConfirmDelete(null);
+          }}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function DeleteBlueprintConfirm({ files, blueprint, onCancel, onConfirm }) {
+  const count = countBlueprintInstances(files, blueprint.path);
+  const instanceText = count === 1 ? '1 placed actor' : `${count} placed actors`;
+  return (
+    <ConfirmDialog
+      title={`Delete ${blueprint.name}?`}
+      message={
+        count > 0
+          ? `This removes ${blueprint.name} and ${instanceText} across every scene in the deck. This can't be undone.`
+          : `${blueprint.name} has no placed actors. This can't be undone.`
+      }
+      confirmLabel="Delete"
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+    />
+  );
+}
+
+function BlueprintDragPreview({ preview, sprites }) {
+  const layout = preview.blueprint.components?.Layout;
+  const width = Math.max(24, Math.min(80, layout?.width ?? 48));
+  const height = Math.max(24, Math.min(80, layout?.height ?? 48));
+  return (
+    <div
+      className={cx(styles.bpDragPreview, preview.overStage && styles.bpDragPreviewOverStage)}
+      style={{
+        left: preview.x,
+        top: preview.y,
+        width,
+        height,
+        transform: `translate(-50%, -50%) rotate(${layout?.rotation ?? 0}deg)`,
+      }}>
+      <BlueprintThumbnail blueprint={preview.blueprint} sprites={sprites} preview />
+    </div>
+  );
+}
+
+export function BlueprintThumbnail({ blueprint, sprites, preview = false }) {
+  const canvasRef = useRef(null);
+  const spritePath = blueprint.components?.Sprite?.file;
+  const sprite = spritePath ? sprites?.[spritePath] : null;
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || !sprite) return;
+    renderSpriteFrame(sprite, 0, canvas);
+  }, [sprite]);
+  if (!sprite) {
+    return (
+      <span className={styles.bpSlotFallback}>
+        <Icon name="clone" />
+      </span>
+    );
+  }
+  return (
+    <canvas
+      ref={canvasRef}
+      className={cx(styles.bpSlotThumb, preview && styles.bpPreviewThumb)}
+      aria-hidden="true"
+    />
+  );
+}
+
+function eventToStagePoint(event, canvasRef, editCameraRef) {
+  const canvas = canvasRef.current;
+  if (!canvas) return null;
+  const rect = canvas.getBoundingClientRect();
+  if (
+    event.clientX < rect.left ||
+    event.clientX > rect.right ||
+    event.clientY < rect.top ||
+    event.clientY > rect.bottom
+  ) {
+    return null;
+  }
+  const raw = screenToCard(canvas, event.clientX, event.clientY);
+  const camera = editCameraRef.current ?? { x: 0, y: 0 };
+  return {
+    x: raw.x + camera.x,
+    y: raw.y + camera.y,
+  };
+}

package/kits/physics-2d/editors/ErrorBoundary.jsx

@@ -0,0 +1,59 @@
+// Deck-side error boundary for the panel routes. A throwing editor (these are
+// agent-edited deck files -- they will throw) shows a small muted message inside
+// its panel iframe instead of a blank / loud crash. Inline styles so it doesn't
+// depend on whatever module may have failed.
+
+import React from 'react';
+
+export class ErrorBoundary extends React.Component {
+  state = { error: null };
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error) {
+    console.error('[deck panel error]', error);
+  }
+  render() {
+    if (!this.state.error) return this.props.children;
+    return (
+      <div
+        style={{
+          height: '100vh',
+          padding: '14px 16px',
+          overflow: 'auto',
+          color: '#6e7781',
+          font: '13px ui-sans-serif, system-ui, -apple-system, sans-serif',
+          background: '#ffffff',
+        }}>
+        <div style={{ color: '#57606a' }}>this panel hit an error</div>
+        <pre
+          style={{
+            margin: '8px 0 0',
+            whiteSpace: 'pre-wrap',
+            wordBreak: 'break-word',
+            fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+            fontSize: 12,
+            color: '#8c959f',
+          }}>
+          {String((this.state.error && this.state.error.message) || this.state.error)}
+        </pre>
+        <button
+          type="button"
+          onClick={() => this.setState({ error: null })}
+          style={{
+            marginTop: 8,
+            font: 'inherit',
+            fontSize: 12,
+            padding: '3px 10px',
+            border: '1px solid #cccccc',
+            borderRadius: 4,
+            background: '#ffffff',
+            color: '#57606a',
+            cursor: 'pointer',
+          }}>
+          retry
+        </button>
+      </div>
+    );
+  }
+}

package/kits/physics-2d/editors/PlayOnly.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Lifecycle } from 'castle-web-sdk';
+import { parseJsonFile } from '../engine/files';
+import { useLiveDeckFiles } from '../engine/liveReload';
+import { collectAssets } from '../engine/assets';
+import { ScenePlayer } from '../engine/ScenePlayer';
+import { behaviorClasses } from './behaviorRegistry';
+// Play-mode entry point. Plays the scene named by `?scene=<path>` (the shell's
+// Play panel sets this), defaulting to `scenes/main.scene`. It renders ONLY the
+// game — the scene picker lives in the Play panel chrome (the shell), not here,
+// so nothing floats over the game surface and steals input. Files are live:
+// scene/drawing edits re-key the player against fresh data.
+const DEFAULT_SCENE = 'scenes/main.scene';
+
+export function PlayOnly({ initialScene } = {}) {
+  const { files, dataVersion } = useLiveDeckFiles();
+  const scenePath = initialScene && files[initialScene] !== undefined ? initialScene : DEFAULT_SCENE;
+  const { value: sceneData } = parseJsonFile(scenePath, files[scenePath] ?? '');
+  if (!sceneData) return null;
+  const { sprites } = collectAssets(files);
+  return (
+    <ScenePlayer
+      key={`${scenePath}:${dataVersion}`}
+      sceneData={sceneData}
+      sprites={sprites}
+      files={files}
+      behaviorClasses={behaviorClasses}
+      onFirstFrame={Lifecycle.ready}
+    />
+  );
+}