castle-web-cli 0.4.71 → 0.4.73

package/kits/basic-2d/editors/useArtboardFit.js

@@ -0,0 +1,102 @@
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react';
+
+const MAX_ART = 460;
+const STACK_GAP = 10;
+
+// Matches @container editor (max-width) in ui.module.css.
+export const PXART_COMPACT_MAX_WIDTH = 620;
+
+// True when .editorBody is at or below the compact-layout container threshold.
+export function useEditorCompactLayout(bodyRef, maxWidth = PXART_COMPACT_MAX_WIDTH) {
+  const [compact, setCompact] = useState(false);
+
+  useEffect(() => {
+    const body = bodyRef.current;
+    if (!body || typeof ResizeObserver === 'undefined') return undefined;
+
+    const update = () => setCompact(body.clientWidth <= maxWidth);
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(body);
+    return () => observer.disconnect();
+  }, [bodyRef, maxWidth]);
+
+  return compact;
+}
+
+// Fit the artboard canvas inside its wrap region, accounting for padding, the
+// canvas-size bar above the art, and the sprite's aspect ratio. Re-runs when the
+// wrap resizes (timeline drag, window resize, compact layout flip).
+export function useArtboardFit({ wrapRef, sizeBarRef, resolution }) {
+  const { width, height } = resolution;
+  const isWide = width >= height;
+  const [displaySize, setDisplaySize] = useState(null);
+
+  const fit = useCallback(() => {
+    const wrap = wrapRef.current;
+    if (!wrap) return;
+    const wrapStyle = getComputedStyle(wrap);
+    const padX = parseFloat(wrapStyle.paddingLeft) + parseFloat(wrapStyle.paddingRight);
+    const padY = parseFloat(wrapStyle.paddingTop) + parseFloat(wrapStyle.paddingBottom);
+    const barHeight = sizeBarRef.current?.offsetHeight ?? 0;
+    const maxW = wrap.clientWidth - padX;
+    const maxH = wrap.clientHeight - padY - barHeight - (barHeight ? STACK_GAP : 0);
+    if (maxW <= 0 || maxH <= 0) {
+      setDisplaySize(null);
+      return;
+    }
+
+    let displayW;
+    let displayH;
+    if (width === height) {
+      const size = Math.floor(Math.min(maxW, maxH, MAX_ART));
+      displayW = size;
+      displayH = size;
+    } else if (isWide) {
+      displayW = Math.floor(Math.min(maxW, MAX_ART));
+      displayH = Math.floor((displayW * height) / width);
+      if (displayH > maxH) {
+        displayH = Math.floor(maxH);
+        displayW = Math.floor((displayH * width) / height);
+      }
+    } else {
+      displayH = Math.floor(Math.min(maxH, MAX_ART));
+      displayW = Math.floor((displayH * width) / height);
+      if (displayW > maxW) {
+        displayW = Math.floor(maxW);
+        displayH = Math.floor((displayW * height) / width);
+      }
+    }
+
+    if (!Number.isFinite(displayW) || !Number.isFinite(displayH) || displayW <= 0 || displayH <= 0) {
+      setDisplaySize(null);
+      return;
+    }
+    setDisplaySize({ width: displayW, height: displayH });
+  }, [width, height, isWide, wrapRef, sizeBarRef]);
+
+  useLayoutEffect(() => {
+    fit();
+  }, [fit]);
+
+  useEffect(() => {
+    const wrap = wrapRef.current;
+    if (!wrap) return undefined;
+    window.addEventListener('resize', fit);
+    if (typeof ResizeObserver === 'undefined') {
+      return () => window.removeEventListener('resize', fit);
+    }
+    const observer = new ResizeObserver(fit);
+    observer.observe(wrap);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('resize', fit);
+    };
+  }, [fit, wrapRef]);
+
+  const canvasStyle = displaySize
+    ? { width: `${displaySize.width}px`, height: `${displaySize.height}px` }
+    : undefined;
+
+  return { canvasStyle, refit: fit };
+}

package/kits/basic-2d/engine/ScenePlayer.jsx

@@ -6,7 +6,7 @@ import { TouchControls } from './TouchControls';
 // keyboard / pointer input, run the update+draw loop, and render the
 // behavior-driven UI overlay. No game logic lives here -- behaviors and
 // scenes are the place for that.
-export function ScenePlayer({ sceneData, drawings, behaviorClasses }) {
+export function ScenePlayer({ sceneData, sprites, behaviorClasses, onFirstFrame }) {
   const canvasRef = useRef(null);
   const runtimeRef = useRef(null);
   const getKeys = useCallback(() => runtimeRef.current?.keys ?? null, []);
@@ -17,7 +17,7 @@ export function ScenePlayer({ sceneData, drawings, behaviorClasses }) {
     const ctx = canvas.getContext('2d');
     if (!ctx) return undefined;
     configureSceneCanvas(canvas, ctx);
-    const runtime = makeScene(sceneData, behaviorClasses, drawings).clone();
+    const runtime = makeScene(sceneData, behaviorClasses, sprites).clone();
     runtimeRef.current = runtime;
     // Store BOTH the physical code ('KeyX', 'ArrowLeft', 'Space') and the
     // logical key ('x', 'ArrowLeft', ' ') so behaviors can match either. Codes
@@ -56,7 +56,7 @@ export function ScenePlayer({ sceneData, drawings, behaviorClasses }) {
     canvas.addEventListener('pointerup', onPointerUp);
     canvas.addEventListener('pointercancel', onPointerUp);
     canvas.focus();
-    const stopLoop = startPlayerLoop(canvas, ctx, runtime);
+    const stopLoop = startPlayerLoop(canvas, ctx, runtime, onFirstFrame);
     return () => {
       stopLoop();
       window.removeEventListener('keydown', onKeyDown);
@@ -81,15 +81,21 @@ export function ScenePlayer({ sceneData, drawings, behaviorClasses }) {
     </div>
   );
 }
-function startPlayerLoop(canvas, ctx, runtime) {
+function startPlayerLoop(canvas, ctx, runtime, onFirstFrame) {
   let raf = 0;
   let previousTime = performance.now();
+  let firstFrameSignaled = false;
   const tick = (now) => {
     const dt = Math.min(0.033, (now - previousTime) / 1000);
     previousTime = now;
     runtime.update(dt);
     configureSceneCanvas(canvas, ctx);
     runtime.draw(ctx, { useCamera: true });
+    if (!firstFrameSignaled) {
+      firstFrameSignaled = true;
+      // Wait one frame so the draw composites before reveal, avoiding a blank flash.
+      requestAnimationFrame(() => onFirstFrame?.());
+    }
     raf = requestAnimationFrame(tick);
   };
   raf = requestAnimationFrame(tick);

package/kits/basic-2d/engine/SceneUI.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import styles from './ui.module.css';
+import { useElementSize } from './ui';
 import { cardSize } from './scene';
 // Game-time UI overlay.
 //
@@ -11,18 +12,9 @@ import { cardSize } from './scene';
 // hidden`, so deck UI can never render outside the card.
 export function SceneUI({ getRuntime }) {
   const rootRef = useRef(null);
-  const [box, setBox] = useState({ width: 0, height: 0 });
-  const [, forceRender] = useState(0);
   // Track the canvas-sized overlay box so the card-unit layer scales onto it.
-  useEffect(() => {
-    const root = rootRef.current;
-    if (!root) return undefined;
-    const measure = () => setBox({ width: root.clientWidth, height: root.clientHeight });
-    const observer = new ResizeObserver(measure);
-    observer.observe(root);
-    measure();
-    return () => observer.disconnect();
-  }, []);
+  const box = useElementSize(rootRef);
+  const [, forceRender] = useState(0);
   // Re-render every frame so behavior UI reflects live runtime state.
   useEffect(() => {
     let raf = 0;

package/kits/basic-2d/engine/assets.js

@@ -0,0 +1,15 @@
+import { parseFull } from './pxart';
+
+// Build the runtime asset map from a path->text file map: parsed `.pxart`
+// Sprites keyed by file path (nulls skipped). Shared by the editor App and the
+// play-only entry point so both hand the SceneRuntime the same map.
+export function collectAssets(files) {
+  const sprites = {};
+  for (const [path, text] of Object.entries(files)) {
+    if (path.endsWith('.pxart')) {
+      const sprite = parseFull(text);
+      if (sprite) sprites[path] = sprite;
+    }
+  }
+  return { sprites };
+}

package/kits/basic-2d/engine/files.js

@@ -1,7 +1,7 @@
 // Seed the file map by scanning the deck dir. Vite module-cache is invalidated
 // on restart, so a newly-created file just shows up on the next reload.
 const rawModules = import.meta.glob(
-  ['../scenes/*.scene', '../drawings/*.drawing', '../behaviors/*.jsx'],
+  ['../scenes/*.scene', '../drawings/*.pxart', '../behaviors/*.jsx'],
   { query: '?raw', import: 'default', eager: true }
 );
 export const initialFiles = Object.fromEntries(
@@ -11,7 +11,7 @@ export const initialFiles = Object.fromEntries(
 );
 export function getFileKind(path) {
   if (path.endsWith('.scene')) return 'scene';
-  if (path.endsWith('.drawing')) return 'drawing';
+  if (path.endsWith('.pxart')) return 'pxart';
   if (path.endsWith('.js') || path.endsWith('.jsx')) return 'code';
   return 'text';
 }
@@ -29,6 +29,61 @@ export function formatJson(value) {
 export function basename(path) {
   return path.split('/').pop() ?? path;
 }
+// Parent directory of a path ('' for a root-level path).
+export function dirname(path) {
+  const index = path.lastIndexOf('/');
+  return index === -1 ? '' : path.slice(0, index);
+}
+// Join a directory and a name, tolerating a '' (root) directory.
+export function joinPath(dir, name) {
+  return dir ? `${dir}/${name}` : name;
+}
+// Split a filename into stem + extension (the extension includes the leading
+// dot). Leading-dot names (e.g. '.gitignore') count as all-stem.
+export function splitFileName(name) {
+  const dot = name.lastIndexOf('.');
+  if (dot <= 0) return { stem: name, ext: '' };
+  return { stem: name.slice(0, dot), ext: name.slice(dot) };
+}
+// A filename in `dir` that doesn't collide with any existing path. If
+// `desiredName` is free it's returned as-is; otherwise '-2', '-3', ... is
+// inserted before the extension until a free name is found.
+export function uniqueFileName(existingPaths, dir, desiredName) {
+  const taken = new Set(existingPaths);
+  if (!taken.has(joinPath(dir, desiredName))) return desiredName;
+  const { stem, ext } = splitFileName(desiredName);
+  for (let n = 2; ; n++) {
+    const candidate = `${stem}-${n}${ext}`;
+    if (!taken.has(joinPath(dir, candidate))) return candidate;
+  }
+}
+// Top-level child segment names (files and virtual folders) directly inside
+// `parentDir`. Used to keep new sibling folder names collision-free.
+export function childNamesIn(existingPaths, parentDir) {
+  const prefix = parentDir ? `${parentDir}/` : '';
+  const names = new Set();
+  for (const path of existingPaths) {
+    if (prefix && !path.startsWith(prefix)) continue;
+    const segment = path.slice(prefix.length).split('/')[0];
+    if (segment) names.add(segment);
+  }
+  return names;
+}
+// A folder name inside `parentDir` that doesn't collide with an existing
+// sibling file or folder. Appends '-2', '-3', ... until free.
+export function uniqueFolderName(existingPaths, parentDir, desiredName) {
+  const taken = childNamesIn(existingPaths, parentDir);
+  if (!taken.has(desiredName)) return desiredName;
+  for (let n = 2; ; n++) {
+    const candidate = `${desiredName}-${n}`;
+    if (!taken.has(candidate)) return candidate;
+  }
+}
+// All file paths under a virtual folder (paths prefixed with `dirPath/`).
+export function filesUnder(existingPaths, dirPath) {
+  const prefix = `${dirPath}/`;
+  return existingPaths.filter((path) => path.startsWith(prefix));
+}
 // Flat list of file paths in the order FileBrowser renders them: a
 // depth-first walk of the directory tree, mirroring buildFileTree there.
 export function flatFileOrder(paths) {