castle-web-cli 0.4.0 → 0.4.2

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

@@ -0,0 +1,191 @@
+import type { CSSProperties } from 'react';
+import React, { useState } from 'react';
+import { basename } from '../engine/files';
+import type { FileMap } from '../engine/files';
+import { cx, Icon, SheetGrabHandle, styles, useMobileSheet } from '../engine/ui';
+
+type FileNodeData = {
+  type: 'file';
+  name: string;
+  path: string;
+};
+
+type DirectoryNodeData = {
+  type: 'directory';
+  name: string;
+  path: string;
+  children: TreeNode[];
+  childMap?: Map<string, TreeNode>;
+};
+
+type TreeNode = FileNodeData | DirectoryNodeData;
+
+export function FileBrowser({
+  files,
+  selectedPath,
+  onSelect,
+  sheetOpen = false,
+  onSheetOpenChange,
+}: {
+  files: FileMap;
+  selectedPath: string;
+  onSelect: (path: string) => void;
+  sheetOpen?: boolean;
+  onSheetOpenChange?: (next: boolean) => void;
+}) {
+  const tree = buildFileTree(Object.keys(files));
+  const [expanded, setExpanded] = useState<Set<string>>(() => new Set(collectDirectoryPaths(tree)));
+  const sheet = useMobileSheet({
+    snap: sheetOpen ? 'high' : 'hidden',
+    baseClassName: styles.fileBrowser,
+    onTransition: (direction) => {
+      if (direction !== 'up') onSheetOpenChange?.(false);
+    },
+  });
+
+  function toggle(path: string): void {
+    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,
+}: {
+  node: TreeNode;
+  depth: number;
+  expanded: Set<string>;
+  selectedPath: string;
+  onSelect: (path: string) => void;
+  onToggle: (path: string) => void;
+}) {
+  const depthStyle = { '--file-depth': depth } as CSSProperties;
+
+  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: CSSProperties = {
+    ...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: string[]): DirectoryNodeData {
+  const root: DirectoryNodeData = {
+    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: TreeNode = 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: TreeNode): void {
+  if (node.type !== 'directory') return;
+  for (const child of node.children) pruneChildMaps(child);
+  delete node.childMap;
+}
+
+function collectDirectoryPaths(node: TreeNode): string[] {
+  if (node.type !== 'directory') return [];
+  return [
+    ...(node.path ? [node.path] : []),
+    ...node.children.flatMap((child) => collectDirectoryPaths(child)),
+  ];
+}

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { initialFiles, normalizeDrawing, parseJsonFile } from '../engine/files';
+import type { DrawingData } from '../engine/files';
+import type { SceneData } from '../engine/scene';
+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<SceneData>('scenes/main.scene', sceneText);
+  if (!sceneData) return null;
+
+  const drawings: Record<string, DrawingData> = {};
+  for (const [path, text] of Object.entries(initialFiles)) {
+    if (!path.endsWith('.drawing')) continue;
+    const parsed = parseJsonFile<unknown>(path, text);
+    if (parsed.value) drawings[path] = normalizeDrawing(parsed.value);
+  }
+
+  return (
+    <ScenePlayer sceneData={sceneData} drawings={drawings} behaviorClasses={behaviorClasses} />
+  );
+}