castle-web-cli 0.4.1 → 0.4.2

package/kits/rpg-2d/editors/App.tsx

@@ -0,0 +1,163 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { writeFile } from 'castle-web-sdk';
+import {
+  flatFileOrder,
+  formatJson,
+  getFileKind,
+  initialFiles,
+  normalizeDrawing,
+  parseJsonFile,
+} from '../engine/files';
+import type { DrawingData, FileMap } from '../engine/files';
+import { AppShell, cx, MainEditor, styles } from '../engine/ui';
+import { CodeEditor } from './CodeEditor';
+import { DrawingEditor } from './DrawingEditor';
+import { FileBrowser } from './FileBrowser';
+import { SceneEditor } from './SceneEditor';
+
+export function App() {
+  const [files, setFiles] = useState<FileMap>(initialFiles);
+  const [selectedPath, setSelectedPath] = useState('scenes/main.scene');
+  const [filesSheetOpen, setFilesSheetOpen] = useState(false);
+  const [selectedActorIds, setSelectedActorIds] = useState<string[]>([]);
+  const [multiSelectMode, setMultiSelectMode] = useState(false);
+  const saveTimersRef = useRef<Record<string, number>>({});
+  const saveVersionsRef = useRef<Record<string, number>>({});
+
+  const drawings: Record<string, DrawingData> = {};
+  for (const [path, text] of Object.entries(files)) {
+    if (!path.endsWith('.drawing')) continue;
+    const parsed = parseJsonFile<unknown>(path, text);
+    if (parsed.value) drawings[path] = normalizeDrawing(parsed.value);
+  }
+
+  function updateSelectedFile(nextText: string): void {
+    const path = selectedPath;
+    setFiles((current) => ({
+      ...current,
+      [path]: nextText,
+    }));
+    scheduleFileWrite(path, nextText);
+  }
+
+  function scheduleFileWrite(path: string, nextText: string): void {
+    const version = (saveVersionsRef.current[path] ?? 0) + 1;
+    saveVersionsRef.current[path] = version;
+    const existingTimer = saveTimersRef.current[path];
+    if (existingTimer) window.clearTimeout(existingTimer);
+    saveTimersRef.current[path] = window.setTimeout(() => {
+      delete saveTimersRef.current[path];
+      writeFile(path, nextText).catch((error: unknown) => {
+        if (saveVersionsRef.current[path] !== version) return;
+        const message = error instanceof Error ? error.message : String(error);
+        console.error(`Failed to save ${path}: ${message}`);
+      });
+    }, 1500);
+  }
+
+  const kind = getFileKind(selectedPath);
+  const text = files[selectedPath] ?? '';
+
+  function selectFile(path: string): void {
+    setSelectedPath(path);
+    setFilesSheetOpen(false);
+    setSelectedActorIds([]);
+    setMultiSelectMode(false);
+  }
+
+  const onToggleFiles = (): void => {
+    setFilesSheetOpen((previous) => !previous);
+    setSelectedActorIds([]);
+    setMultiSelectMode(false);
+  };
+
+  // Alt+Up / Alt+Down steps through files in file-browser sidebar order.
+  useEffect(() => {
+    function onKeyDown(event: KeyboardEvent): void {
+      if (!event.altKey || event.metaKey || event.ctrlKey) return;
+      if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return;
+      const active = document.activeElement as HTMLElement | null;
+      if (
+        active &&
+        (active.tagName === 'INPUT' ||
+          active.tagName === 'TEXTAREA' ||
+          active.tagName === 'SELECT' ||
+          active.isContentEditable ||
+          active.closest('.cm-editor'))
+      ) {
+        return;
+      }
+      const order = flatFileOrder(Object.keys(files));
+      const index = order.indexOf(selectedPath);
+      if (index === -1) return;
+      const nextIndex = event.key === 'ArrowUp' ? index - 1 : index + 1;
+      if (nextIndex < 0 || nextIndex >= order.length) return;
+      event.preventDefault();
+      selectFile(order[nextIndex]);
+    }
+    window.addEventListener('keydown', onKeyDown);
+    return () => window.removeEventListener('keydown', onKeyDown);
+  }, [files, selectedPath]);
+
+  return (
+    <AppShell>
+      <FileBrowser
+        files={files}
+        selectedPath={selectedPath}
+        onSelect={selectFile}
+        sheetOpen={filesSheetOpen}
+        onSheetOpenChange={setFilesSheetOpen}
+      />
+      {filesSheetOpen ? (
+        <div
+          className={cx(styles.sheetBackdrop, styles.mobileOnly)}
+          onClick={() => setFilesSheetOpen(false)}
+        />
+      ) : null}
+      <MainEditor>
+        {kind === 'scene' ? (
+          <SceneEditor
+            path={selectedPath}
+            text={text}
+            files={files}
+            drawings={drawings}
+            onChange={updateSelectedFile}
+            onToggleFiles={onToggleFiles}
+            filesOpen={filesSheetOpen}
+            selectedActorIds={selectedActorIds}
+            onSelectActorIds={setSelectedActorIds}
+            multiSelectMode={multiSelectMode}
+            onSetMultiSelectMode={setMultiSelectMode}
+          />
+        ) : null}
+        {kind === 'drawing' ? (
+          <DrawingEditor
+            path={selectedPath}
+            text={text}
+            onChange={updateSelectedFile}
+            onToggleFiles={onToggleFiles}
+            filesOpen={filesSheetOpen}
+          />
+        ) : null}
+        {kind === 'code' ? (
+          <CodeEditor
+            path={selectedPath}
+            text={text}
+            onChange={updateSelectedFile}
+            onToggleFiles={onToggleFiles}
+            filesOpen={filesSheetOpen}
+          />
+        ) : null}
+        {kind === 'text' ? (
+          <CodeEditor
+            path={selectedPath}
+            text={formatJson(text)}
+            onChange={updateSelectedFile}
+            onToggleFiles={onToggleFiles}
+            filesOpen={filesSheetOpen}
+          />
+        ) : null}
+      </MainEditor>
+    </AppShell>
+  );
+}

package/kits/rpg-2d/editors/CodeEditor.tsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useRef } from 'react';
+import { javascript } from '@codemirror/lang-javascript';
+import { HighlightStyle, indentUnit, syntaxHighlighting } from '@codemirror/language';
+import { EditorState } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { tags } from '@lezer/highlight';
+import { basicSetup } from 'codemirror';
+import { basename } from '../engine/files';
+import { EditorBody, EditorHeader, styles } from '../engine/ui';
+import type { FileEditorProps } from './editorProps';
+
+const castleHighlightStyle = HighlightStyle.define([
+  { tag: tags.strong, color: '#285CC4' },
+  { tag: tags.namespace, color: '#BB7547' },
+  { tag: tags.keyword, color: '#BC4A9B' },
+  { tag: [tags.literal, tags.inserted], color: '#5DAF8D' },
+  { tag: [tags.string, tags.deleted], color: '#E86A73' },
+  { tag: tags.comment, color: '#8B93AF', fontStyle: 'italic' },
+]);
+
+const castleCodeTheme = EditorView.theme({
+  '&': {
+    height: '100%',
+    fontSize: '9pt',
+    backgroundColor: '#fff',
+  },
+  '&.cm-editor.cm-focused': {
+    outline: 'none',
+  },
+  '.cm-scroller': {
+    overflow: 'auto',
+    fontFamily: 'Menlo, Monaco, Lucida Console, monospace',
+  },
+  '.cm-content': {
+    minHeight: '100%',
+    color: '#322b28',
+    paddingBottom: '400px',
+    paddingRight: '80px',
+  },
+  '.cm-gutters': {
+    display: 'none',
+  },
+  '.cm-activeLine': {
+    backgroundColor: '#eeeeeea0',
+  },
+  '.cm-activeLineGutter': {
+    color: '#000',
+    backgroundColor: '#ddd',
+  },
+});
+
+export function CodeEditor({ path, text, onChange, onToggleFiles, filesOpen }: FileEditorProps) {
+  const editorRef = useRef<HTMLDivElement | null>(null);
+  const viewRef = useRef<EditorView | null>(null);
+  const onChangeRef = useRef(onChange);
+  const initialTextRef = useRef(text);
+  const applyingExternalTextRef = useRef(false);
+
+  useEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+
+  // The editor is created once per `path`; the initial doc comes from a ref
+  // so `text` is not a dep of this effect (subsequent `text` updates flow
+  // through the second effect below). On `path` change we read whatever the
+  // latest `text` is at the moment of mount.
+  initialTextRef.current = text;
+  useEffect(() => {
+    if (!editorRef.current) return undefined;
+    const view = new EditorView({
+      parent: editorRef.current,
+      state: EditorState.create({
+        doc: initialTextRef.current,
+        extensions: [
+          basicSetup,
+          javascript({ jsx: true, typescript: true }),
+          indentUnit.of('  '),
+          castleCodeTheme,
+          syntaxHighlighting(castleHighlightStyle),
+          EditorView.updateListener.of((update) => {
+            if (!update.docChanged || applyingExternalTextRef.current) return;
+            onChangeRef.current(update.state.doc.toString());
+          }),
+        ],
+      }),
+    });
+    viewRef.current = view;
+    return () => {
+      view.destroy();
+      viewRef.current = null;
+    };
+  }, [path]);
+
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    const currentText = view.state.doc.toString();
+    if (currentText === text) return;
+    applyingExternalTextRef.current = true;
+    view.dispatch({
+      changes: {
+        from: 0,
+        to: currentText.length,
+        insert: text,
+      },
+    });
+    applyingExternalTextRef.current = false;
+  }, [text]);
+
+  return (
+    <>
+      <EditorHeader title={basename(path)} onToggleFiles={onToggleFiles} filesOpen={filesOpen} />
+      <EditorBody>
+        <div className={styles.codeEditor}>
+          <div ref={editorRef} className={styles.codeMirrorHost} />
+        </div>
+      </EditorBody>
+    </>
+  );
+}

package/kits/rpg-2d/editors/DrawingEditor.tsx

@@ -0,0 +1,278 @@
+import type { CSSProperties, PointerEvent } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { basename, formatJson, normalizeDrawing, parseJsonFile } from '../engine/files';
+import type { DrawingData } from '../engine/files';
+
+// The editor treats layer 0, frame 0 as the editable surface -- multi-layer +
+// multi-frame authoring is a future feature. Helpers below shim between that
+// flat-pixel mental model and the layered DrawingData on disk.
+function getEditPixels(drawing: DrawingData): string[] {
+  return drawing.layers[0]?.frames[0] ?? [];
+}
+function withEditPixels(drawing: DrawingData, pixels: string[]): DrawingData {
+  const layers = drawing.layers.map((layer, layerIndex) =>
+    layerIndex === 0
+      ? { ...layer, frames: layer.frames.map((frame, frameIndex) => (frameIndex === 0 ? pixels : frame)) }
+      : layer
+  );
+  return { ...drawing, layers };
+}
+import {
+  cx,
+  EditorBody,
+  EditorHeader,
+  IconButton,
+  NumberField,
+  Panel,
+  SheetGrabHandle,
+  styles,
+  theme,
+  useMobileSheet,
+} from '../engine/ui';
+import type { SheetSnap } from '../engine/ui';
+import type { FileEditorProps } from './editorProps';
+import { useEditHistory } from './editorHistory';
+
+const palette = [
+  '#00000000',
+  '#000000FF',
+  '#050505FF',
+  '#111111FF',
+  '#242234FF',
+  '#444444FF',
+  '#777777FF',
+  '#ffffffFF',
+  '#e3e6ffFF',
+  '#8db7ffFF',
+  '#ff5d5dFF',
+  '#ffe17aFF',
+];
+
+interface StrokeState {
+  active: boolean;
+  recorded: boolean;
+}
+
+export function DrawingEditor({ path, text, onChange, onToggleFiles, filesOpen }: FileEditorProps) {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const strokeRef = useRef<StrokeState>({ active: false, recorded: false });
+  const [color, setColor] = useState('#ffffffFF');
+  const [inspectorOpen, setInspectorOpen] = useState(true);
+  const history = useEditHistory(text, onChange);
+  const inspectorSheet = useInspectorSheet(inspectorOpen);
+  const parsed = parseJsonFile<unknown>(path, text);
+  const drawing: DrawingData | null = parsed.value ? normalizeDrawing(parsed.value) : null;
+  const error = parsed.error;
+  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);
+    const editPixels = getEditPixels(drawing);
+    for (let y = 0; y < drawing.height; y++) {
+      for (let x = 0; x < drawing.width; x++) {
+        const pixel = editPixels[y * drawing.width + x];
+        if (!pixel || pixel.endsWith('00')) continue;
+        ctx.fillStyle = pixel;
+        ctx.fillRect(x, y, 1, 1);
+      }
+    }
+  }, [drawing, text]);
+
+  function commitDrawing(nextDrawing: DrawingData): void {
+    history.commit(formatJson(nextDrawing));
+  }
+
+  function resizeDrawing(nextWidth: number, nextHeight: number): void {
+    if (!drawing) return;
+    const width = clampInteger(nextWidth, 1, 128);
+    const height = clampInteger(nextHeight, 1, 128);
+    if (width === drawing.width && height === drawing.height) return;
+    const oldPixels = getEditPixels(drawing);
+    const pixels = Array<string>(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] = oldPixels[y * drawing.width + x] ?? '#00000000';
+      }
+    }
+    commitDrawing(withEditPixels({ ...drawing, width, height }, pixels));
+  }
+
+  function paintAt(event: PointerEvent<HTMLCanvasElement>): void {
+    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;
+    const editPixels = getEditPixels(drawing);
+    if (editPixels[y * drawing.width + x] === color) return;
+    const nextPixels = editPixels.slice();
+    nextPixels[y * drawing.width + x] = color;
+    const next = withEditPixels(drawing, nextPixels);
+    // 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: PointerEvent<HTMLCanvasElement>): void {
+    strokeRef.current = { active: true, recorded: false };
+    event.currentTarget.setPointerCapture(event.pointerId);
+    paintAt(event);
+  }
+
+  function finishPaint(): void {
+    strokeRef.current = { active: false, recorded: false };
+  }
+
+  const canvasStyle: CSSProperties | undefined = 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: boolean): ReturnType<typeof useMobileSheet> {
+  const [snap, setSnap] = useState<'high' | 'low'>('high');
+  useEffect(() => {
+    if (inspectorOpen) setSnap('high');
+  }, [inspectorOpen]);
+  const effectiveSnap: SheetSnap = 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,
+}: {
+  sheet: ReturnType<typeof useMobileSheet>;
+  drawing: DrawingData | null;
+  color: string;
+  onSelectColor: (color: string) => void;
+  onResize: (width: number, height: number) => void;
+}) {
+  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: number, min: number, max: number): number {
+  if (!Number.isFinite(value)) return min;
+  return Math.max(min, Math.min(max, Math.round(value)));
+}