castle-web-cli 0.4.128 → 0.4.129

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

@@ -627,15 +627,35 @@ export function CheckboxField({ label, checked, onChange, overridden, defaultVal
     <FieldRow label={label} overridden={overridden} defaultValue={defaultValue} onReset={onReset}>
       <button
         type="button"
-        className={cx(styles.toggle, checked && styles.toggleOn)}
-        role="switch"
+        className={cx(styles.checkbox, checked && styles.checkboxOn)}
+        role="checkbox"
         aria-checked={!!checked}
         onClick={() => onChange(!checked)}>
-        <span className={styles.toggleKnob} />
+        <svg className={styles.checkboxMark} viewBox="0 0 12 12" aria-hidden="true">
+          <path
+            d="M2 6.2L4.8 9 10 3"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.8"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
       </button>
     </FieldRow>
   );
 }
+// Explanatory text under a field, for a prop whose name doesn't carry its
+// meaning. Rendered inside the panel's field grid, so it lands under the control
+// rather than under the label.
+export function FieldNote({ children }) {
+  if (!children) return null;
+  return (
+    <div className={styles.fieldNote}>
+      <div className={styles.fieldNoteInner}>{children}</div>
+    </div>
+  );
+}
 export function ColorField({ label, value, onChange, overridden, defaultValue, onReset }) {
   const hex = normalizeHex(value);
   const alpha = hex.length === 9 ? hex.slice(7) : '';
@@ -947,3 +967,252 @@ export function SelectField({ label, value, onChange, options, overridden, defau
     </FieldRow>
   );
 }
+
+function basenameOf(path) {
+  if (!path) return '';
+  return path.slice(path.lastIndexOf('/') + 1);
+}
+
+let measureCanvasCtx;
+function measureTextWidth(text, font) {
+  if (!measureCanvasCtx) {
+    measureCanvasCtx = document.createElement('canvas').getContext('2d');
+  }
+  measureCanvasCtx.font = font;
+  return measureCanvasCtx.measureText(text).width;
+}
+
+// Keep the filename intact; the directory is what yields. Binary-search the
+// prefix of the directory until `{prefix}…/{basename}` fits `maxWidth`.
+function fitPathKeepBasename(path, maxWidth, font) {
+  const measure = (text) => measureTextWidth(text, font);
+  if (maxWidth <= 0 || measure(path) <= maxWidth) return path;
+  const slash = path.lastIndexOf('/');
+  const dir = slash > 0 ? path.slice(0, slash) : '';
+  const base = slash > 0 ? path.slice(slash + 1) : path;
+  const ellipsed = `…/${base}`;
+  if (!dir || measure(ellipsed) > maxWidth) return fitKeepEnd(base, maxWidth, measure);
+  let lo = 0;
+  let hi = dir.length;
+  let best = ellipsed;
+  while (lo <= hi) {
+    const mid = (lo + hi) >> 1;
+    const candidate = `${dir.slice(0, mid)}…/${base}`;
+    if (measure(candidate) <= maxWidth) {
+      best = candidate;
+      lo = mid + 1;
+    } else {
+      hi = mid - 1;
+    }
+  }
+  return best;
+}
+
+function fitKeepEnd(text, maxWidth, measure) {
+  if (measure(text) <= maxWidth) return text;
+  if (measure('…') > maxWidth) return '';
+  let lo = 0;
+  let hi = text.length;
+  let best = '…';
+  while (lo <= hi) {
+    const mid = (lo + hi) >> 1;
+    const candidate = `…${text.slice(text.length - mid)}`;
+    if (measure(candidate) <= maxWidth) {
+      best = candidate;
+      lo = mid + 1;
+    } else {
+      hi = mid - 1;
+    }
+  }
+  return best;
+}
+
+function FilePathLabel({ path }) {
+  const ref = useRef(null);
+  const [shown, setShown] = useState(path);
+  useLayoutEffect(() => {
+    const node = ref.current;
+    if (!node) return undefined;
+    function fit() {
+      const max = node.clientWidth;
+      if (max <= 0) return;
+      const cs = getComputedStyle(node);
+      const font = cs.font && cs.font !== '0px' ? cs.font : `${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;
+      setShown(fitPathKeepBasename(path, max, font));
+    }
+    fit();
+    const observer = new ResizeObserver(fit);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [path]);
+  return (
+    <span ref={ref} className={styles.filePickerPath} title={path}>
+      {shown}
+    </span>
+  );
+}
+
+function pickerRowChrome(list) {
+  if (!list) return 26;
+  const box = getComputedStyle(list);
+  const opt = list.querySelector('button');
+  const op = opt ? getComputedStyle(opt) : null;
+  return (
+    (parseFloat(box.paddingLeft) || 0) +
+    (parseFloat(box.paddingRight) || 0) +
+    (parseFloat(box.borderLeftWidth) || 0) +
+    (parseFloat(box.borderRightWidth) || 0) +
+    (op ? (parseFloat(op.paddingLeft) || 0) + (parseFloat(op.paddingRight) || 0) : 16)
+  );
+}
+
+function longestPathWidth(list, paths) {
+  if (!list || !paths.length) return 0;
+  const probe = document.createElement('span');
+  probe.style.cssText = 'position:absolute;left:-9999px;white-space:nowrap;pointer-events:none;';
+  const opt = list.querySelector('button');
+  if (opt) {
+    const s = getComputedStyle(opt);
+    probe.style.font = s.font && s.font !== '0px' ? s.font : `${s.fontWeight} ${s.fontSize} ${s.fontFamily}`;
+  }
+  list.appendChild(probe);
+  let max = 0;
+  for (const path of paths) {
+    probe.textContent = path || 'None';
+    max = Math.max(max, probe.offsetWidth);
+  }
+  probe.remove();
+  return max;
+}
+
+// File path field. Closed chrome shows the basename; the open list shows full
+// paths. Callers pass the candidate paths — this does not decide what a sprite
+// or sound is. `allowEmpty` adds a None row that writes ''.
+export function FileField({
+  label,
+  value,
+  onChange,
+  files = [],
+  allowEmpty = false,
+  overridden,
+  defaultValue,
+  onReset,
+}) {
+  const current = value ?? '';
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef(null);
+  const listRef = useRef(null);
+  const [pos, setPos] = useState(null);
+
+  const paths = [];
+  if (allowEmpty) paths.push('');
+  for (const path of files) {
+    if (path && !paths.includes(path)) paths.push(path);
+  }
+  if (current && !paths.includes(current)) paths.splice(allowEmpty ? 1 : 0, 0, current);
+
+  useLayoutEffect(() => {
+    if (!open || !buttonRef.current) return undefined;
+    function place() {
+      const anchor = buttonRef.current.getBoundingClientRect();
+      const list = listRef.current;
+      const margin = 8;
+      const maxWidth = window.innerWidth - margin * 2;
+      const needed = longestPathWidth(list, paths) + pickerRowChrome(list) + 4;
+      const width = Math.min(Math.max(needed, anchor.width), maxWidth);
+      // Grow left from the field if the paths need more than the control width.
+      let left = anchor.right - width;
+      if (left < margin) left = margin;
+      if (left + width > window.innerWidth - margin) {
+        left = Math.max(margin, window.innerWidth - width - margin);
+      }
+      const gap = 4;
+      const height = list?.getBoundingClientRect().height ?? 0;
+      let top = anchor.bottom + gap;
+      if (height && top + height > window.innerHeight - margin) {
+        top = Math.max(margin, anchor.top - gap - height);
+      }
+      setPos({ top, left, width });
+    }
+    place();
+    window.addEventListener('resize', place);
+    window.addEventListener('scroll', place, true);
+    return () => {
+      window.removeEventListener('resize', place);
+      window.removeEventListener('scroll', place, true);
+    };
+  }, [open, paths.length]);
+
+  useEffect(() => {
+    if (!open) return undefined;
+    function onKeyDown(event) {
+      if (event.key === 'Escape') setOpen(false);
+    }
+    function onPointerDown(event) {
+      if (listRef.current?.contains(event.target) || buttonRef.current?.contains(event.target)) {
+        return;
+      }
+      setOpen(false);
+    }
+    window.addEventListener('keydown', onKeyDown);
+    window.addEventListener('pointerdown', onPointerDown);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+      window.removeEventListener('pointerdown', onPointerDown);
+    };
+  }, [open]);
+
+  return (
+    <FieldRow
+      label={label}
+      overridden={overridden}
+      defaultValue={defaultValue ? basenameOf(defaultValue) : defaultValue}
+      onReset={onReset}>
+      <button
+        ref={buttonRef}
+        type="button"
+        className={cx(styles.select, styles.fileField)}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        onClick={() => setOpen((next) => !next)}>
+        <span className={cx(styles.fileFieldLabel, !current && styles.fileFieldEmpty)}>
+          {current ? basenameOf(current) : 'None'}
+        </span>
+      </button>
+      {open
+        ? createPortal(
+            <div
+              ref={listRef}
+              className={styles.filePicker}
+              role="listbox"
+              aria-label={label}
+              style={pos ?? { visibility: 'hidden' }}>
+              {paths.map((path) => {
+                const selected = path === current;
+                return (
+                  <button
+                    key={path || '__none'}
+                    type="button"
+                    role="option"
+                    aria-selected={selected}
+                    className={cx(
+                      styles.filePickerOption,
+                      selected && styles.filePickerOptionSelected,
+                      !path && styles.fileFieldEmpty
+                    )}
+                    title={path || 'None'}
+                    onClick={() => {
+                      onChange(path);
+                      setOpen(false);
+                    }}>
+                    {path ? <FilePathLabel path={path} /> : 'None'}
+                  </button>
+                );
+              })}
+            </div>,
+            document.body
+          )
+        : null}
+    </FieldRow>
+  );
+}

package/kits/physics-2d/engine/ui.module.css

@@ -1072,7 +1072,8 @@
 
 .fieldRowOverridden .input,
 .fieldRowOverridden .select,
-.fieldRowOverridden .colorInput {
+.fieldRowOverridden .colorInput,
+.fieldRowOverridden .checkbox {
   border-color: var(--castle-override-border);
 }
 
@@ -1084,6 +1085,25 @@
   padding-bottom: 4px;
 }
 
+/* A muted line of explanation under a field, sitting in the control column the
+   same way the override sub-line above does. For a prop whose name can't carry
+   its own meaning -- see `hint` in a behavior's propertyMeta. */
+.fieldNote {
+  display: grid;
+  grid-template-columns: minmax(82px, 0.5fr) minmax(0, 1fr);
+  gap: 12px;
+  margin-top: -6px;
+  padding-bottom: 12px;
+}
+
+.fieldNoteInner {
+  grid-column: 2;
+  min-width: 0;
+  font-size: 12px;
+  line-height: 1.35;
+  color: var(--castle-inspector-muted);
+}
+
 .fieldDefault {
   display: grid;
   grid-template-columns: minmax(82px, 0.5fr) minmax(0, 1fr);
@@ -1143,6 +1163,64 @@
   text-overflow: ellipsis;
 }
 
+.fileField {
+  display: flex;
+  align-items: center;
+  font: inherit;
+  box-shadow: none;
+  cursor: pointer;
+}
+
+.fileFieldLabel {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fileFieldEmpty {
+  color: var(--castle-inspector-muted);
+}
+
+.filePicker {
+  position: fixed;
+  z-index: 200;
+  box-sizing: border-box;
+  max-height: min(240px, calc(100vh - 16px));
+  overflow: auto;
+  padding: 4px;
+  border: 1px solid var(--castle-inspector-border);
+  border-radius: var(--castle-radius);
+  background: var(--castle-workspace-bg);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
+}
+
+.filePickerOption {
+  display: block;
+  width: 100%;
+  overflow: hidden;
+  text-align: left;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--castle-inspector-text);
+  font: inherit;
+  font-size: 13px;
+  padding: 6px 8px;
+  cursor: pointer;
+}
+
+.filePickerPath {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.filePickerOption:hover,
+.filePickerOptionSelected {
+  background: var(--castle-inspector-input-bg);
+}
+
 .numberField {
   position: relative;
   width: 100%;
@@ -1383,34 +1461,35 @@
   cursor: pointer;
 }
 
-.toggle {
-  width: 44px;
-  height: 24px;
+.checkbox {
+  width: 20px;
+  height: 20px;
+  flex: 0 0 auto;
+  justify-self: end;
   border: 1px solid var(--castle-inspector-border);
-  border-radius: 999px;
+  border-radius: var(--castle-radius);
   background: var(--castle-inspector-input-bg);
-  padding: 2px;
+  padding: 0;
   cursor: pointer;
   display: flex;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: center;
   box-shadow: none;
+  color: var(--castle-text);
 }
 
-.toggleOn {
+.checkboxOn {
   background: var(--castle-black);
-  justify-content: flex-end;
 }
 
-.toggleKnob {
-  width: 18px;
-  height: 18px;
-  border-radius: 999px;
-  background: var(--castle-inspector-muted);
+.checkboxMark {
+  display: none;
+  width: 12px;
+  height: 12px;
 }
 
-.toggleOn .toggleKnob {
-  background: var(--castle-text);
+.checkboxOn .checkboxMark {
+  display: block;
 }
 
 .textarea {

package/kits/physics-2d/scripts/testsounds.mjs

@@ -0,0 +1,84 @@
+#!/usr/bin/env node
+// Generate audio to develop the sound library against, so the kit can be
+// exercised without committing binaries to it.
+//
+//   node scripts/testsounds.mjs            # into this kit
+//   node scripts/testsounds.mjs ../../some-deck
+//   node scripts/testsounds.mjs . --dup    # also a clashing stem, to see the warning
+//   node scripts/testsounds.mjs . --long   # also a 20s file INSIDE assets/sounds/
+//
+// Writes 16-bit mono PCM wavs. The cases are chosen to be awkward on purpose: a
+// 10ms click is shorter than a frame, and the drone is long enough that decoding
+// it into memory is the wrong thing -- which is what `assets/music/` is for.
+
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+
+const RATE = 22050;
+
+function wav(samples) {
+  const data = Buffer.alloc(samples.length * 2);
+  for (let i = 0; i < samples.length; i++) {
+    const clamped = Math.max(-1, Math.min(1, samples[i]));
+    data.writeInt16LE(Math.round(clamped * 32767), i * 2);
+  }
+  const header = Buffer.alloc(44);
+  header.write('RIFF', 0);
+  header.writeUInt32LE(36 + data.length, 4);
+  header.write('WAVE', 8);
+  header.write('fmt ', 12);
+  header.writeUInt32LE(16, 16);
+  header.writeUInt16LE(1, 20); // PCM
+  header.writeUInt16LE(1, 22); // mono
+  header.writeUInt32LE(RATE, 24);
+  header.writeUInt32LE(RATE * 2, 28);
+  header.writeUInt16LE(2, 32);
+  header.writeUInt16LE(16, 34);
+  header.write('data', 36);
+  header.writeUInt32LE(data.length, 40);
+  return Buffer.concat([header, data]);
+}
+
+// `shape(t, i)` gets seconds elapsed and the sample index, and returns -1..1.
+function render(seconds, shape) {
+  const total = Math.max(1, Math.round(seconds * RATE));
+  const samples = new Float32Array(total);
+  for (let i = 0; i < total; i++) samples[i] = shape(i / RATE, i);
+  return samples;
+}
+
+const decay = (t, seconds) => Math.max(0, 1 - t / seconds);
+const tone = (t, hz) => Math.sin(2 * Math.PI * hz * t);
+const noise = () => Math.random() * 2 - 1;
+
+const SOUNDS = {
+  // A rising blip: the ordinary pickup / UI confirmation.
+  'assets/sounds/blip.wav': render(0.12, (t) => tone(t, 660 + t * 1800) * decay(t, 0.12) * 0.7),
+  // A low thump with a noise transient, for an impact.
+  'assets/sounds/thud.wav': render(0.2, (t) => (tone(t, 90) * 0.8 + noise() * 0.25) * decay(t, 0.2) ** 2),
+  // 10ms -- shorter than a frame at 60fps, and shorter than most scheduling
+  // slop. If anything in the pipeline rounds or defers, this is what shows it.
+  'assets/sounds/click.wav': render(0.01, (t) => noise() * decay(t, 0.01)),
+  // Long, and deliberately OUTSIDE assets/sounds/: 20s decoded is ~3.5MB here and
+  // would be ~70MB as 44.1kHz stereo float. This is the streaming case.
+  'assets/music/drone.wav': render(20, (t) => (tone(t, 110) * 0.5 + tone(t, 165) * 0.3) * 0.5),
+};
+
+const args = process.argv.slice(2);
+const target = resolve(args.find((a) => !a.startsWith('--')) ?? '.');
+const extras = {};
+if (args.includes('--dup')) {
+  // Same stem as assets/sounds/click.wav, so `play('click')` becomes ambiguous.
+  extras['assets/sounds/ui/click.wav'] = render(0.03, (t) => tone(t, 1200) * decay(t, 0.03) * 0.5);
+}
+if (args.includes('--long')) {
+  extras['assets/sounds/toolong.wav'] = render(20, (t) => tone(t, 220) * 0.4 * decay(t, 20));
+}
+
+for (const [relative, samples] of Object.entries({ ...SOUNDS, ...extras })) {
+  const path = join(target, relative);
+  mkdirSync(dirname(path), { recursive: true });
+  const bytes = wav(samples);
+  writeFileSync(path, bytes);
+  console.log(`${relative}  ${(bytes.length / 1024).toFixed(1)}KB  ${(samples.length / RATE).toFixed(2)}s`);
+}

package/kits/physics-2d/systems/media.js

@@ -1,29 +1,45 @@
-// Registers sound / video playback as a runtime system. Auto-discovered by
+// Registers audio / video playback as a runtime system. Auto-discovered by
 // engine/systemRegistry.js (`systems/*.js`) and invoked by makeScene, so the
-// media pool plugs in without the shared engine referencing it.
+// playback machinery plugs in without the shared engine referencing it.
 //
-// The system owns the LIFECYCLE only -- behaviors decide what plays. It reaps
-// idle elements once a frame (a despawned actor's sound stops), and silences
-// everything on `reset` (a scene load / restart / transition) and on `dispose`
-// (the player unmounting, i.e. pressing Stop).
+// Two things play sound in this kit and this is the one place that knows about
+// both: `engine/media.js` streams an `<audio>` / `<video>` element (long tracks,
+// video), and `engine/sound.js` fires decoded buffers (sound effects). They share
+// one AudioContext and are silenced together.
 //
-// It also puts `scene.sound` on the runtime: the scene-wide controls, which
-// belong to nobody's actor.
+// The system owns the LIFECYCLE only -- behaviors and game code decide what
+// plays. It reaps idle elements once a frame (a despawned actor's sound stops),
+// and silences everything on `reset` (a scene load / restart / transition) and on
+// `dispose` (the player unmounting, i.e. pressing Stop).
+//
+// It also puts `scene.sound` on the runtime: the sound library itself, so a
+// behavior can `scene.sound.play('hit')` with no import, plus the scene-wide
+// controls, which belong to nobody's actor.
 
+import { initialMedia, mediaFilesOfKind } from '../engine/files';
 import { reapUnusedMedia, stopAllMedia } from '../engine/media';
-import { stopAllTones } from '../engine/tone';
+import { Sound, initSounds, stopAllSounds } from '../engine/sound';
+
+// Preloading is the DECK's, not a scene's, so it starts here at module load
+// rather than per-runtime -- the editor builds a throwaway runtime every frame
+// to draw its preview, and decoding the deck's sounds sixty times a second is
+// not a thing to do. Vite evaluates a module once, which is exactly the scope
+// wanted.
+initSounds(
+  Object.fromEntries(mediaFilesOfKind('audio').map((path) => [path, initialMedia[path]]))
+);
 
 function silence() {
   stopAllMedia();
-  stopAllTones();
+  stopAllSounds();
 }
 
 export function installSystem(runtime) {
-  runtime.sound = {
-    // Everything this scene is playing, off. The blunt instrument for a game
-    // over, a pause, or leaving a level: individual actors need not be found.
-    stopAll: silence,
-  };
+  // The library itself, with `stopAll` widened to mean everything the scene is
+  // playing rather than just its sound effects. Delegating through the prototype
+  // rather than copying keeps `isLoaded` a live getter (a spread would snapshot
+  // it as false forever) and keeps the two in step as the library grows.
+  runtime.sound = Object.create(Sound, { stopAll: { value: silence, enumerable: true } });
   runtime.registerSystem({
     afterBehaviors(scene) {
       reapUnusedMedia(new Set(scene.actors.keys()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "castle-web-cli",
-  "version": "0.4.128",
+  "version": "0.4.129",
   "type": "module",
   "bin": {
     "castle-web": "./dist/index.js"