castle-web-cli 0.4.1 → 0.4.3

package/kits/basic-2d/editors/DrawingEditor.jsx

@@ -0,0 +1,222 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { basename, formatJson, parseJsonFile } from '../engine/files';
+import {
+  cx,
+  EditorBody,
+  EditorHeader,
+  IconButton,
+  NumberField,
+  Panel,
+  SheetGrabHandle,
+  styles,
+  theme,
+  useMobileSheet,
+} from '../engine/ui';
+import { useEditHistory } from './editorHistory';
+const palette = [
+  '#00000000',
+  '#000000FF',
+  '#050505FF',
+  '#111111FF',
+  '#242234FF',
+  '#444444FF',
+  '#777777FF',
+  '#ffffffFF',
+  '#e3e6ffFF',
+  '#8db7ffFF',
+  '#ff5d5dFF',
+  '#ffe17aFF',
+];
+export function DrawingEditor({ path, text, onChange, onToggleFiles, filesOpen }) {
+  const canvasRef = useRef(null);
+  const strokeRef = useRef({ active: false, recorded: false });
+  const [color, setColor] = useState('#ffffffFF');
+  const [inspectorOpen, setInspectorOpen] = useState(true);
+  const history = useEditHistory(text, onChange);
+  const inspectorSheet = useInspectorSheet(inspectorOpen);
+  const { value: drawing, error } = parseJsonFile(path, text);
+  const isWide = drawing ? drawing.width >= drawing.height : true;
+  useEffect(() => {
+    if (!drawing || !canvasRef.current) return;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+    canvas.width = drawing.width;
+    canvas.height = drawing.height;
+    ctx.clearRect(0, 0, drawing.width, drawing.height);
+    for (let y = 0; y < drawing.height; y++) {
+      for (let x = 0; x < drawing.width; x++) {
+        const pixel = drawing.pixels[y * drawing.width + x];
+        if (!pixel || pixel.endsWith('00')) continue;
+        ctx.fillStyle = pixel;
+        ctx.fillRect(x, y, 1, 1);
+      }
+    }
+  }, [drawing, text]);
+  function commitDrawing(nextDrawing) {
+    history.commit(formatJson(nextDrawing));
+  }
+  function resizeDrawing(nextWidth, nextHeight) {
+    if (!drawing) return;
+    const width = clampInteger(nextWidth, 1, 128);
+    const height = clampInteger(nextHeight, 1, 128);
+    if (width === drawing.width && height === drawing.height) return;
+    const pixels = Array(width * height).fill('#00000000');
+    const copiedWidth = Math.min(width, drawing.width);
+    const copiedHeight = Math.min(height, drawing.height);
+    for (let y = 0; y < copiedHeight; y++) {
+      for (let x = 0; x < copiedWidth; x++) {
+        pixels[y * width + x] = drawing.pixels[y * drawing.width + x] ?? '#00000000';
+      }
+    }
+    commitDrawing({ ...drawing, width, height, pixels });
+  }
+  function paintAt(event) {
+    if (!drawing) return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    const x = Math.floor(((event.clientX - rect.left) / rect.width) * drawing.width);
+    const y = Math.floor(((event.clientY - rect.top) / rect.height) * drawing.height);
+    if (x < 0 || y < 0 || x >= drawing.width || y >= drawing.height) return;
+    if (drawing.pixels[y * drawing.width + x] === color) return;
+    const next = structuredClone(drawing);
+    next.pixels[y * next.width + x] = color;
+    // Record one undo snapshot per pointer stroke (not per painted pixel).
+    if (!strokeRef.current.recorded) {
+      history.recordSnapshot();
+      strokeRef.current.recorded = true;
+    }
+    onChange(formatJson(next));
+  }
+  function startPaint(event) {
+    strokeRef.current = { active: true, recorded: false };
+    event.currentTarget.setPointerCapture(event.pointerId);
+    paintAt(event);
+  }
+  function finishPaint() {
+    strokeRef.current = { active: false, recorded: false };
+  }
+  const canvasStyle = drawing
+    ? {
+        width: isWide ? 'min(70vh, 520px)' : 'auto',
+        height: isWide ? 'auto' : 'min(70vh, 520px)',
+      }
+    : undefined;
+  const sharedActionButtons = (
+    <>
+      <IconButton icon="undo" label="Undo" onClick={history.undo} disabled={!history.canUndo} />
+      <IconButton icon="redo" label="Redo" onClick={history.redo} disabled={!history.canRedo} />
+    </>
+  );
+  return (
+    <>
+      <EditorHeader
+        title={basename(path)}
+        subtitle={drawing ? `${drawing.width} x ${drawing.height} pixels` : 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={styles.drawingEditor}>
+          <div className={styles.drawingTools}>{sharedActionButtons}</div>
+          <div className={styles.drawingCanvasWrap}>
+            <canvas
+              ref={canvasRef}
+              className={styles.drawingCanvas}
+              style={canvasStyle}
+              onPointerDown={startPaint}
+              onPointerMove={(event) => {
+                if (strokeRef.current.active && event.buttons === 1) paintAt(event);
+              }}
+              onPointerUp={finishPaint}
+              onPointerCancel={finishPaint}
+            />
+          </div>
+          <DrawingInspector
+            sheet={inspectorSheet}
+            drawing={drawing}
+            color={color}
+            onSelectColor={setColor}
+            onResize={resizeDrawing}
+          />
+        </div>
+      </EditorBody>
+    </>
+  );
+}
+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 DrawingInspector({ sheet, drawing, color, onSelectColor, onResize }) {
+  return (
+    <aside {...sheet.rootProps} className={cx(sheet.rootProps.className, styles.inspectorAuto)}>
+      <div {...sheet.grabProps}>
+        <SheetGrabHandle
+          label="Inspector"
+          hint={drawing ? `${drawing.width}x${drawing.height} · color` : 'drawing tools'}
+        />
+      </div>
+      <div className={cx(styles.sheetBody, styles.inspectorBody)}>
+        <Panel title="Size">
+          <NumberField
+            label="Width"
+            value={drawing?.width ?? 1}
+            min={1}
+            max={128}
+            onChange={(width) => onResize(width, drawing?.height ?? 1)}
+          />
+          <NumberField
+            label="Height"
+            value={drawing?.height ?? 1}
+            min={1}
+            max={128}
+            onChange={(height) => onResize(drawing?.width ?? 1, height)}
+          />
+        </Panel>
+        <Panel title="Palette">
+          <div className={styles.palette}>
+            {palette.map((swatch) => (
+              <button
+                key={swatch}
+                className={cx(styles.swatch, color === swatch && styles.swatchSelected)}
+                title={swatch}
+                style={{
+                  background: swatch.endsWith('00') ? theme.transparentChecker : swatch,
+                }}
+                onClick={() => onSelectColor(swatch)}
+              />
+            ))}
+          </div>
+        </Panel>
+      </div>
+    </aside>
+  );
+}
+function clampInteger(value, min, max) {
+  if (!Number.isFinite(value)) return min;
+  return Math.max(min, Math.min(max, Math.round(value)));
+}

package/kits/basic-2d/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-2d/editors/PlayOnly.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { initialFiles, parseJsonFile } 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 drawings = {};
+  for (const [path, text] of Object.entries(initialFiles)) {
+    if (!path.endsWith('.drawing')) continue;
+    const parsed = parseJsonFile(path, text);
+    if (parsed.value) drawings[path] = parsed.value;
+  }
+  return (
+    <ScenePlayer sceneData={sceneData} drawings={drawings} behaviorClasses={behaviorClasses} />
+  );
+}