castle-web-cli 0.4.0 → 0.4.2

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

@@ -0,0 +1,344 @@
+import React, { useRef, useState } 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 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) {
+  return parts.filter(Boolean).join(' ');
+}
+export function AppShell({ children }) {
+  return <div className={styles.appShell}>{children}</div>;
+}
+export function MainEditor({ children }) {
+  return <main className={styles.mainEditor}>{children}</main>;
+}
+export function EditorHeader({ title, subtitle, right, onToggleFiles, filesOpen }) {
+  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 }) {
+  return <div className={styles.editorBody}>{children}</div>;
+}
+export function Button({ children, active = false, variant = '', className = '', ...props }) {
+  return (
+    <button
+      className={cx(
+        styles.button,
+        active && styles.buttonActive,
+        variant === 'primary' && styles.buttonPrimary,
+        variant === 'danger' && styles.buttonDanger,
+        className
+      )}
+      {...props}>
+      {children}
+    </button>
+  );
+}
+export function IconButton({ icon, label, active = false, variant = '', ...props }) {
+  return (
+    <Button
+      active={active}
+      variant={variant}
+      className={styles.iconButton}
+      aria-label={label}
+      title={label}
+      {...props}>
+      <Icon name={icon} />
+    </Button>
+  );
+}
+const icons = {
+  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 }) {
+  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 }) {
+  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 }) {
+  return (
+    <label className={styles.fieldRow}>
+      <span className={styles.fieldLabel}>{label}</span>
+      {children}
+    </label>
+  );
+}
+export function TextField({ label, value, onChange }) {
+  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 }) {
+  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) {
+    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) {
+    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 }) {
+  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 }) {
+  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) {
+  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) {
+  return (
+    typeof value === 'string' && /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3}([0-9a-fA-F]{2})?)?$/.test(value)
+  );
+}
+export function useMobileSheet({ snap, baseClassName, onTransition }) {
+  const startY = useRef(0);
+  const lastDy = useRef(0);
+  const dragging = useRef(false);
+  function onPointerDown(event) {
+    startY.current = event.clientY;
+    lastDy.current = 0;
+    dragging.current = true;
+    event.currentTarget.setPointerCapture(event.pointerId);
+  }
+  function onPointerMove(event) {
+    if (!dragging.current) return;
+    lastDy.current = event.clientY - startY.current;
+  }
+  function endDrag() {
+    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 }) {
+  return (
+    <>
+      <div className={styles.sheetGrabBar} />
+      <div className={styles.sheetGrabLabelRow}>
+        <span className={styles.sheetGrabLabel}>{label}</span>
+        {hint ? <span className={styles.sheetGrabHint}>{hint}</span> : null}
+      </div>
+    </>
+  );
+}
+export function SelectField({ label, value, onChange, options }) {
+  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>
+  );
+}