castle-web-cli 0.4.0 → 0.4.2

package/kits/rpg-2d/engine/ui.tsx

@@ -0,0 +1,483 @@
+import React, { useRef, useState } from 'react';
+import type { ButtonHTMLAttributes, PointerEvent, ReactNode } from 'react';
+import {
+  faBars,
+  faChevronDown,
+  faChevronRight,
+  faChevronUp,
+  faClone,
+  faObjectGroup,
+  faPalette,
+  faPlay,
+  faPlus,
+  faRedo,
+  faStop,
+  faTimes,
+  faTrash,
+  faUndo,
+  faVideo,
+} from '@fortawesome/free-solid-svg-icons';
+import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import styles from './ui.module.css';
+
+export { styles };
+
+export const theme = {
+  transparentChecker:
+    'repeating-linear-gradient(45deg, #050505, #050505 4px, #252525 4px, #252525 8px)',
+};
+
+export function cx(...parts: Array<string | false | null | undefined>): string {
+  return parts.filter(Boolean).join(' ');
+}
+
+export function AppShell({ children }: { children: ReactNode }) {
+  return <div className={styles.appShell}>{children}</div>;
+}
+
+export function MainEditor({ children }: { children: ReactNode }) {
+  return <main className={styles.mainEditor}>{children}</main>;
+}
+
+export function EditorHeader({
+  title,
+  subtitle,
+  right,
+  onToggleFiles,
+  filesOpen,
+}: {
+  title: ReactNode;
+  subtitle?: ReactNode;
+  right?: ReactNode;
+  onToggleFiles?: () => void;
+  filesOpen?: boolean;
+}) {
+  const hasRight = !!right || !!onToggleFiles;
+  return (
+    <header className={styles.editorHeader}>
+      <div className={styles.editorHeaderLeft}>
+        <div>
+          <div className={styles.editorTitle}>{title}</div>
+          {subtitle ? <div className={styles.muted}>{subtitle}</div> : null}
+        </div>
+      </div>
+      {hasRight ? (
+        <div className={styles.editorHeaderRight}>
+          {right}
+          {onToggleFiles ? (
+            <button
+              type="button"
+              className={cx(styles.headerFilesButton, styles.mobileOnly)}
+              onClick={onToggleFiles}
+              aria-label="Files"
+              aria-pressed={filesOpen ? 'true' : 'false'}>
+              <Icon name="bars" />
+            </button>
+          ) : null}
+        </div>
+      ) : null}
+    </header>
+  );
+}
+
+export function EditorBody({ children }: { children: ReactNode }) {
+  return <div className={styles.editorBody}>{children}</div>;
+}
+
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  active?: boolean;
+  variant?: '' | 'primary' | 'danger';
+}
+
+export function Button({
+  children,
+  active = false,
+  variant = '',
+  className = '',
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      className={cx(
+        styles.button,
+        active && styles.buttonActive,
+        variant === 'primary' && styles.buttonPrimary,
+        variant === 'danger' && styles.buttonDanger,
+        className
+      )}
+      {...props}>
+      {children}
+    </button>
+  );
+}
+
+export interface IconButtonProps extends Omit<ButtonProps, 'children'> {
+  icon: string;
+  label: string;
+}
+
+export function IconButton({
+  icon,
+  label,
+  active = false,
+  variant = '',
+  ...props
+}: IconButtonProps) {
+  return (
+    <Button
+      active={active}
+      variant={variant}
+      className={styles.iconButton}
+      aria-label={label}
+      title={label}
+      {...props}>
+      <Icon name={icon} />
+    </Button>
+  );
+}
+
+const icons: Record<string, IconDefinition> = {
+  bars: faBars,
+  camera: faVideo,
+  'chevron-down': faChevronDown,
+  'chevron-right': faChevronRight,
+  'chevron-up': faChevronUp,
+  clone: faClone,
+  'object-group': faObjectGroup,
+  palette: faPalette,
+  play: faPlay,
+  plus: faPlus,
+  redo: faRedo,
+  stop: faStop,
+  times: faTimes,
+  trash: faTrash,
+  undo: faUndo,
+};
+
+export function Icon({ name }: { name: string }) {
+  const def = icons[name];
+  if (!def) return null;
+  const [width, height, , , path] = def.icon;
+  const d = Array.isArray(path) ? path.join(' ') : path;
+  return (
+    <svg
+      viewBox={`0 0 ${width} ${height}`}
+      aria-hidden="true"
+      style={{ width: '1em', height: '1em', display: 'inline-block', fill: 'currentColor' }}>
+      <path d={d} />
+    </svg>
+  );
+}
+
+export function Panel({ title, children }: { title?: ReactNode; children: ReactNode }) {
+  return (
+    <section className={styles.panel}>
+      {title ? <div className={styles.panelHeader}>{title}</div> : null}
+      <div className={styles.panelBody}>{children}</div>
+    </section>
+  );
+}
+
+export function FieldRow({ label, children }: { label: ReactNode; children: ReactNode }) {
+  return (
+    <label className={styles.fieldRow}>
+      <span className={styles.fieldLabel}>{label}</span>
+      {children}
+    </label>
+  );
+}
+
+export function TextField({
+  label,
+  value,
+  onChange,
+}: {
+  label: ReactNode;
+  value: string | null | undefined;
+  onChange: (value: string) => void;
+}) {
+  return (
+    <FieldRow label={label}>
+      <input
+        className={styles.input}
+        value={value ?? ''}
+        onChange={(event) => onChange(event.target.value)}
+      />
+    </FieldRow>
+  );
+}
+
+export function NumberField({
+  label,
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+}: {
+  label: ReactNode;
+  value: number | null | undefined;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+}) {
+  const current = Number.isFinite(value) ? (value ?? 0) : 0;
+  const [draft, setDraft] = useState(String(current));
+  const editingRef = useRef(false);
+  const cancelRef = useRef(false);
+
+  // keep the draft in sync with the committed value while not editing
+  if (!editingRef.current && draft !== String(current)) {
+    setDraft(String(current));
+  }
+
+  function commit(raw: string): void {
+    let next = Number(raw);
+    if (!Number.isFinite(next)) next = current;
+    if (min != null && next < min) next = min;
+    if (max != null && next > max) next = max;
+    setDraft(String(next));
+    onChange(next);
+  }
+
+  function stepBy(delta: number): void {
+    let next = current + delta;
+    if (min != null && next < min) next = min;
+    if (max != null && next > max) next = max;
+    setDraft(String(next));
+    onChange(next);
+  }
+
+  return (
+    <FieldRow label={label}>
+      <div className={styles.numberField}>
+        <input
+          className={cx(styles.input, styles.numberInput)}
+          type="number"
+          min={min}
+          max={max}
+          step={step}
+          value={draft}
+          onFocus={() => {
+            editingRef.current = true;
+          }}
+          onChange={(event) => setDraft(event.target.value)}
+          onBlur={(event) => {
+            editingRef.current = false;
+            if (cancelRef.current) {
+              cancelRef.current = false;
+              setDraft(String(current));
+              return;
+            }
+            commit(event.target.value);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault();
+              commit(event.currentTarget.value);
+              event.currentTarget.blur();
+            } else if (event.key === 'Escape') {
+              event.preventDefault();
+              cancelRef.current = true;
+              setDraft(String(current));
+              event.currentTarget.blur();
+            }
+          }}
+        />
+        <div className={styles.numberSteppers}>
+          <button
+            type="button"
+            className={styles.numberStepper}
+            tabIndex={-1}
+            aria-label="Increment"
+            disabled={max != null && current >= max}
+            onClick={() => stepBy(step)}>
+            <Icon name="chevron-up" />
+          </button>
+          <button
+            type="button"
+            className={styles.numberStepper}
+            tabIndex={-1}
+            aria-label="Decrement"
+            disabled={min != null && current <= min}
+            onClick={() => stepBy(-step)}>
+            <Icon name="chevron-down" />
+          </button>
+        </div>
+      </div>
+    </FieldRow>
+  );
+}
+
+export function CheckboxField({
+  label,
+  checked,
+  onChange,
+}: {
+  label: ReactNode;
+  checked: boolean | null | undefined;
+  onChange: (checked: boolean) => void;
+}) {
+  return (
+    <FieldRow label={label}>
+      <button
+        type="button"
+        className={cx(styles.toggle, checked && styles.toggleOn)}
+        role="switch"
+        aria-checked={!!checked}
+        onClick={() => onChange(!checked)}>
+        <span className={styles.toggleKnob} />
+      </button>
+    </FieldRow>
+  );
+}
+
+export function ColorField({
+  label,
+  value,
+  onChange,
+}: {
+  label: ReactNode;
+  value: string | null | undefined;
+  onChange: (value: string) => void;
+}) {
+  const hex = normalizeHex(value);
+  const alpha = hex.length === 9 ? hex.slice(7) : '';
+  const rgb = hex.slice(0, 7);
+  return (
+    <FieldRow label={label}>
+      <input
+        className={styles.colorInput}
+        type="color"
+        value={rgb}
+        onChange={(event) => onChange(event.target.value + alpha)}
+      />
+    </FieldRow>
+  );
+}
+
+function normalizeHex(value: string | null | undefined): string {
+  const raw = (value ?? '').trim();
+  if (/^#[0-9a-fA-F]{3}$/.test(raw)) {
+    return '#' + raw.slice(1).replace(/./g, (c) => c + c);
+  }
+  if (/^#[0-9a-fA-F]{6}([0-9a-fA-F]{2})?$/.test(raw)) return raw;
+  return '#000000';
+}
+
+export function isHexColor(value: unknown): value is string {
+  return (
+    typeof value === 'string' && /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3}([0-9a-fA-F]{2})?)?$/.test(value)
+  );
+}
+
+export type SheetSnap = 'high' | 'low' | 'hidden';
+
+export type SheetTransition = 'up' | 'down' | 'tap';
+
+export interface MobileSheetController {
+  rootProps: { className: string; 'data-sheet-snap': SheetSnap };
+  grabProps: {
+    className: string;
+    onPointerDown: (event: PointerEvent<HTMLDivElement>) => void;
+    onPointerMove: (event: PointerEvent<HTMLDivElement>) => void;
+    onPointerUp: (event: PointerEvent<HTMLDivElement>) => void;
+    onPointerCancel: (event: PointerEvent<HTMLDivElement>) => void;
+  };
+}
+
+export function useMobileSheet({
+  snap,
+  baseClassName,
+  onTransition,
+}: {
+  snap: SheetSnap;
+  baseClassName: string;
+  onTransition: (direction: SheetTransition) => void;
+}): MobileSheetController {
+  const startY = useRef(0);
+  const lastDy = useRef(0);
+  const dragging = useRef(false);
+
+  function onPointerDown(event: PointerEvent<HTMLDivElement>): void {
+    startY.current = event.clientY;
+    lastDy.current = 0;
+    dragging.current = true;
+    event.currentTarget.setPointerCapture(event.pointerId);
+  }
+
+  function onPointerMove(event: PointerEvent<HTMLDivElement>): void {
+    if (!dragging.current) return;
+    lastDy.current = event.clientY - startY.current;
+  }
+
+  function endDrag(): void {
+    if (!dragging.current) return;
+    dragging.current = false;
+    const dy = lastDy.current;
+    lastDy.current = 0;
+    if (Math.abs(dy) < 6) onTransition('tap');
+    else if (dy > 30) onTransition('down');
+    else if (dy < -30) onTransition('up');
+  }
+
+  return {
+    rootProps: {
+      className: baseClassName,
+      'data-sheet-snap': snap,
+    },
+    grabProps: {
+      className: cx(styles.sheetGrab, styles.mobileOnly),
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: endDrag,
+      onPointerCancel: endDrag,
+    },
+  };
+}
+
+export function SheetGrabHandle({ label, hint }: { label: ReactNode; hint?: ReactNode }) {
+  return (
+    <>
+      <div className={styles.sheetGrabBar} />
+      <div className={styles.sheetGrabLabelRow}>
+        <span className={styles.sheetGrabLabel}>{label}</span>
+        {hint ? <span className={styles.sheetGrabHint}>{hint}</span> : null}
+      </div>
+    </>
+  );
+}
+
+type SelectOption = string | { value: string; label: string };
+
+export function SelectField({
+  label,
+  value,
+  onChange,
+  options,
+}: {
+  label: ReactNode;
+  value: string | null | undefined;
+  onChange: (value: string) => void;
+  options: SelectOption[];
+}) {
+  return (
+    <FieldRow label={label}>
+      <select
+        className={styles.select}
+        value={value ?? ''}
+        onChange={(event) => onChange(event.target.value)}>
+        {options.map((option) => {
+          const value = typeof option === 'string' ? option : option.value;
+          const label = typeof option === 'string' ? option : option.label;
+          return (
+            <option key={value} value={value}>
+              {label}
+            </option>
+          );
+        })}
+      </select>
+    </FieldRow>
+  );
+}

package/kits/rpg-2d/eslint.config.js

@@ -0,0 +1,46 @@
+import js from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import reactHooks from 'eslint-plugin-react-hooks';
+
+export default tseslint.config(
+  {
+    ignores: ['node_modules/**', 'dist/**', '.castle/**', '*.config.js'],
+  },
+  js.configs.recommended,
+  ...tseslint.configs.recommendedTypeChecked,
+  {
+    files: ['engine/**/*.{ts,tsx}', 'editors/**/*.{ts,tsx}', 'behaviors/**/*.{ts,tsx}', '*.ts', '*.tsx'],
+    languageOptions: {
+      parserOptions: {
+        project: './tsconfig.json',
+        tsconfigRootDir: import.meta.dirname,
+        ecmaFeatures: { jsx: true },
+      },
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+    },
+    rules: {
+      // disable noisy rules per spec
+      '@typescript-eslint/no-unsafe-assignment': 'off',
+      '@typescript-eslint/no-unsafe-member-access': 'off',
+      '@typescript-eslint/no-unsafe-call': 'off',
+      '@typescript-eslint/no-unsafe-return': 'off',
+      '@typescript-eslint/no-unsafe-argument': 'off',
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+
+      // enabled rules per spec
+      complexity: ['error', 70],
+      'max-lines-per-function': ['error', 200],
+      '@typescript-eslint/no-explicit-any': 'error',
+      '@typescript-eslint/no-unused-vars': 'error',
+      '@typescript-eslint/no-floating-promises': 'error',
+      'prefer-const': 'error',
+      'no-var': 'error',
+      eqeqeq: 'warn',
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+    },
+  },
+);

package/kits/rpg-2d/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
+    <title>Castle Basic 2D Kit</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/main.tsx"></script>
+  </body>
+</html>

package/kits/rpg-2d/main.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { isEdit, setup } from 'castle-web-sdk';
+import { App } from './editors/App';
+import { PlayOnly } from './editors/PlayOnly';
+
+document.body.dataset.castleScreenshotTarget = 'viewport';
+
+setup();
+
+const root = document.getElementById('root');
+if (!root) throw new Error('Missing root element');
+
+createRoot(root).render(isEdit() ? <App /> : <PlayOnly />);