castle-web-cli 0.4.1 → 0.4.2

package/kits/basic-2d/behaviors/Drawing.jsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { Panel, SelectField } from '../engine/ui';
+import { AutoFields } from '../engine/autoInspector';
+
+export class Drawing {
+  static behaviorName = 'Drawing';
+
+  static defaultProps = {
+    file: 'drawings/floor.drawing',
+    tint: '#ffffffff',
+  };
+
+  constructor(props) {
+    this.props = props;
+  }
+
+  draw(actor, scene, ctx) {
+    if (actor.runtime?.collected) return;
+    const layout = actor.components.Layout;
+    if (!layout) return;
+    const drawing = scene.drawings[this.props.file];
+    if (!drawing) return;
+    drawPixelDrawing(
+      ctx,
+      drawing,
+      layout.x,
+      layout.y,
+      layout.width,
+      layout.height,
+      this.props.tint
+    );
+  }
+
+  static Inspector({ component, setComponent, files }) {
+    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>
+    );
+  }
+}
+
+export function drawPixelDrawing(ctx, drawing, x, y, width, height, tint) {
+  if (drawing.width <= 0 || drawing.height <= 0) return;
+  // Blit the cached native-resolution canvas as a single image. Painting each
+  // pixel as its own `fillRect` left hairline anti-aliased seams under a
+  // rotation transform; one `drawImage` has no inter-pixel edges.
+  const canvas = getDrawingCanvas(drawing, 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 data and
+// tint. A drawing edit produces a fresh `DrawingData` object (see
+// DrawingEditor's `structuredClone`), so a new object naturally misses the
+// WeakMap and rebuilds.
+const drawingCanvasCache = new WeakMap();
+
+// Render the pixel art once, unrotated, at 1px per pixel into an offscreen
+// canvas, applying the tint. Cached so the per-frame draw is a single blit.
+function getDrawingCanvas(drawing, tint) {
+  const tintKey = tint ?? '';
+  let byTint = drawingCanvasCache.get(drawing);
+  if (!byTint) {
+    byTint = new Map();
+    drawingCanvasCache.set(drawing, byTint);
+  }
+  const cached = byTint.get(tintKey);
+  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 tintRgba = parseTint(tint);
+    for (let py = 0; py < drawing.height; py++) {
+      for (let px = 0; px < drawing.width; px++) {
+        const color = drawing.pixels[py * drawing.width + px];
+        if (!color || color === 'transparent' || color.endsWith('00')) continue;
+        octx.fillStyle = tintRgba ? applyTint(color, tintRgba) : color;
+        octx.fillRect(px, py, 1, 1);
+      }
+    }
+  }
+  byTint.set(tintKey, canvas);
+  return canvas;
+}
+
+// Parse a hex color into [r, g, b, a] channels (0-255). Returns null when the
+// string is not a hex color so callers can fall back to the raw color.
+function parseHexColor(color) {
+  const hex = color.trim().replace(/^#/, '');
+  if (hex.length !== 6 && hex.length !== 8) return null;
+  if (!/^[0-9a-fA-F]+$/.test(hex)) return null;
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) : 255;
+  return [r, g, b, a];
+}
+
+// Returns the tint as [r, g, b, a] channels, or null when there is no tint or
+// the tint is white (#ffffffff) -- both meaning "no change".
+function parseTint(tint) {
+  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;
+}
+
+// Multiply each channel of a pixel color by the tint color (both 0-255).
+function applyTint(color, tint) {
+  const rgba = parseHexColor(color);
+  if (!rgba) return color;
+  const out = rgba.map((channel, i) => Math.round((channel * tint[i]) / 255));
+  return '#' + out.map((channel) => channel.toString(16).padStart(2, '0')).join('');
+}
+
+function getDrawingFiles(files) {
+  return Object.keys(files).filter((path) => path.endsWith('.drawing'));
+}

package/kits/basic-2d/behaviors/Layout.jsx

@@ -0,0 +1,16 @@
+export class Layout {
+  static behaviorName = 'Layout';
+
+  static defaultProps = {
+    x: 0,
+    y: 0,
+    width: 32,
+    height: 32,
+    z: 0,
+    rotation: 0,
+  };
+
+  constructor(props) {
+    this.props = props;
+  }
+}

package/kits/basic-2d/drawings/floor.drawing

@@ -0,0 +1,70 @@
+{
+  "width": 8,
+  "height": 8,
+  "pixels": [
+    "#ffffffff",
+    "#ffffffff",
+    "#ffffffff",
+    "#ffffffff",
+    "#ffffffff",
+    "#ffffffff",
+    "#ffffffff",
+    "#ffffffff",
+    "#ffffffff",
+    "#d8d8d8ff",
+    "#d8d8d8ff",
+    "#d8d8d8ff",
+    "#d8d8d8ff",
+    "#d8d8d8ff",
+    "#d8d8d8ff",
+    "#ffffffff",
+    "#ffffffff",
+    "#d8d8d8ff",
+    "#ffffffff",
+    "#ffffffff",
+    "#ffffffff",
+    "#ffffffff",
+    "#d8d8d8ff",
+    "#ffffffff",
+    "#ffffffff",
+    "#d8d8d8ff",
+    "#ffffffff",
+    "#ffffffff",
+    "#ffffffff",
+    "#ffffffff",
+    "#d8d8d8ff",
+    "#ffffffff",
+    "#ffffffff",
+    "#d8d8d8ff",
+    "#ffffffff",
+    "#ffffffff",
+    "#ffffffff",
+    "#ffffffff",
+    "#d8d8d8ff",
+    "#ffffffff",
+    "#ffffffff",
+    "#d8d8d8ff",
+    "#ffffffff",
+    "#ffffffff",
+    "#ffffffff",
+    "#ffffffff",
+    "#d8d8d8ff",
+    "#ffffffff",
+    "#ffffffff",
+    "#d8d8d8ff",
+    "#d8d8d8ff",
+    "#d8d8d8ff",
+    "#d8d8d8ff",
+    "#d8d8d8ff",
+    "#d8d8d8ff",
+    "#ffffffff",
+    "#ffffffff",
+    "#ffffffff",
+    "#ffffffff",
+    "#ffffffff",
+    "#ffffffff",
+    "#ffffffff",
+    "#ffffffff",
+    "#ffffffff"
+  ]
+}

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

@@ -0,0 +1,152 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { writeFile } from 'castle-web-sdk';
+import {
+  flatFileOrder,
+  formatJson,
+  getFileKind,
+  initialFiles,
+  parseJsonFile,
+} 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(initialFiles);
+  const [selectedPath, setSelectedPath] = useState('scenes/main.scene');
+  const [filesSheetOpen, setFilesSheetOpen] = useState(false);
+  const [selectedActorIds, setSelectedActorIds] = useState([]);
+  const [multiSelectMode, setMultiSelectMode] = useState(false);
+  const saveTimersRef = useRef({});
+  const saveVersionsRef = useRef({});
+  const drawings = {};
+  for (const [path, text] of Object.entries(files)) {
+    if (!path.endsWith('.drawing')) continue;
+    const parsed = parseJsonFile(path, text);
+    if (parsed.value) drawings[path] = parsed.value;
+  }
+  function updateSelectedFile(nextText) {
+    const path = selectedPath;
+    setFiles((current) => ({
+      ...current,
+      [path]: nextText,
+    }));
+    scheduleFileWrite(path, nextText);
+  }
+  function scheduleFileWrite(path, nextText) {
+    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) => {
+        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) {
+    setSelectedPath(path);
+    setFilesSheetOpen(false);
+    setSelectedActorIds([]);
+    setMultiSelectMode(false);
+  }
+  const onToggleFiles = () => {
+    setFilesSheetOpen((previous) => !previous);
+    setSelectedActorIds([]);
+    setMultiSelectMode(false);
+  };
+  // Alt+Up / Alt+Down steps through files in file-browser sidebar order.
+  useEffect(() => {
+    function onKeyDown(event) {
+      if (!event.altKey || event.metaKey || event.ctrlKey) return;
+      if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return;
+      const active = document.activeElement;
+      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/basic-2d/editors/CodeEditor.jsx

@@ -0,0 +1,112 @@
+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';
+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 }) {
+  const editorRef = useRef(null);
+  const viewRef = useRef(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>
+    </>
+  );
+}