feuerwerk/tools/e2e/34-sound.mjs

import { edge, node } from '../lib/builders.mjs';
import { LANES, MAKE_OBJECT, pickAssetType } from './lib/scaffold.mjs';

/**
 * Sound assets (#45): uploaded like a typeface – picked from what the server holds through
 * "+ → Sound", or dropped onto the editor – and played by a graph through `Play sound`. Nothing
 * wears a sound and nothing places it; the asset says how loud it is and whether it loops, and the
 * node scales the one and can overrule the other in either direction.
 *
 * Nothing is ever *heard* here: CI runs the browser muted (see tools/lib/browser.mjs). The witness
 * is `__gm.sound.stats()` – voices started, stopped and in flight – the way `renderStats` is the
 * witness for a repaint that did not happen. No pixel check could see any of this.
 *
 * The seed puts two generated WAVs on the server without making assets of them: a 0.25 s blip and
 * a 0.75 s drone, told apart by their exact size rather than by their name.
 */
const LANE = LANES.sound;
const BLIP_BYTES = 4044;
const DRONE_BYTES = 12044;

export async function sound(t) {
  const { check, sleep, json, evaluate, mutate, click, clickText, press, play, stop, shot } = t;
  const { select } = t;
  const assetsOfType = (type) =>
    json(`__gm.state.project.assets.filter((a) => a.type === ${JSON.stringify(type)})
      .map((a) => ({ id: a.id, name: a.name, file: a.file, props: a.props }))`);
  const stats = () => json('__gm.sound.stats()');
  /** A voice starts only once its bytes have been decoded, so what it changes is awaited. */
  const waitFor = async (read, done, tries = 25) => {
    let value = await read();
    for (let i = 0; i < tries && !done(value); i++) {
      await sleep(150);
      value = await read();
    }
    return value;
  };

  await press('Escape');
  await evaluate('document.activeElement instanceof HTMLElement && document.activeElement.blur()');
  await evaluate('__gm.state.select(null)');
  await evaluate("__gm.showTab('scene')");
  await sleep(200);

  // 34a. What the server holds, straight from the API: the two files the seed put there.
  const stored = await evaluate(`fetch('/game-maker/api/index.php?r=sounds').then((r) => r.json())`);
  const blip = stored.find((item) => item.bytes === BLIP_BYTES);
  const drone = stored.find((item) => item.bytes === DRONE_BYTES);
  check(
    'the server holds the two seeded sounds, named by their content',
    Boolean(blip && drone) && /^[a-f0-9]{64}\.wav$/.test(blip.file),
    JSON.stringify({ blip: blip?.file, drone: drone?.file, count: stored.length }),
  );
  if (!blip || !drone) return;
  check(
    'the listing carries the name each file was uploaded under',
    blip.name === 'blip.wav' && drone.name === 'drone.wav',
    JSON.stringify({ blip: blip.name, drone: drone.name }),
  );

  // 34b. "+ → Sound" offers them; a sound is picked rather than created empty, like a typeface.
  await clickText('+');
  await sleep(200);
  await pickAssetType(t, 'Sound');
  await sleep(500);
  const picker = await json('__gm.soundPicker()');
  check(
    'the + menu opens the sound picker on what the server holds, none of it in the project yet',
    Boolean(picker) && picker.files.includes(blip.file) && picker.used.length === 0,
    JSON.stringify(picker),
  );
  check(
    'a row nobody uses yet is captioned with the name the file was uploaded under',
    picker.captions[picker.files.indexOf(blip.file)] === 'blip.wav',
    JSON.stringify(picker.captions),
  );
  await shot('34-sound-picker');

  // 34c. The ▶ at a row's left is a preview: it plays that file without choosing it.
  const playAt = await json(`__gm.soundPickerPlay(${JSON.stringify(drone.file)})`);
  await click(playAt.x, playAt.y);
  const previewed = await waitFor(stats, (s) => s.started > 0);
  const afterPreview = await json('__gm.soundPicker()');
  check(
    'pressing a row’s ▶ plays that file and picks nothing',
    previewed.started === 1 &&
      previewed.last?.file === drone.file &&
      afterPreview.played === drone.file &&
      afterPreview.selected === null,
    JSON.stringify({ previewed, selected: afterPreview.selected, played: afterPreview.played }),
  );

  const row = await json(`__gm.soundPickerRow(${JSON.stringify(blip.file)})`);
  await click(row.x, row.y);
  await sleep(200);
  await clickText('Use sound');
  await sleep(400);
  const sounds = await assetsOfType('sound');
  check(
    'picking a row makes a sound asset of that file, named after the file rather than "Sound"',
    sounds.length === 1 && sounds[0].file === blip.file && sounds[0].name === 'blip',
    JSON.stringify(sounds),
  );
  if (sounds.length !== 1) return;
  const soundId = sounds[0].id;
  check(
    'a fresh sound asset is full volume and one-shot',
    sounds[0].props.volume === 1 && sounds[0].props.loop === false,
    JSON.stringify(sounds[0].props),
  );
  // Closing the picker silences its preview; nothing it started may outlive the dialog.
  check(
    'closing the picker leaves nothing playing',
    (await stats()).playing === 0,
    JSON.stringify(await stats()),
  );

  // 34d. Its inspector: the two rows, and the preview that is the only way to tell which sound it is.
  await select({ kind: 'asset', assetId: soundId });
  await sleep(300);
  const volumeRow = await json("__gm.inspectorField('Volume', true)");
  const loopRow = await json("__gm.inspectorField('Loop', true)");
  check(
    'a sound asset has a Volume row and a Loop row',
    Boolean(volumeRow) && Boolean(loopRow),
    JSON.stringify({ volumeRow, loopRow }),
  );
  await shot('34-sound-asset');

  // 34e. A graph plays it. The behavior sits in its own lane; the node's volume is a factor on the
  //      asset's, so 0.5 × 0.4 has to reach the library as 0.2 rather than as either of the two.
  await mutate(`
    const p = __gm.state.project;
    const scene = __gm.state.activeScene;
    p.assets.find((a) => a.id === ${JSON.stringify(soundId)}).props.volume = 0.4;
    const asset = structuredClone(p.assets.find((a) => a.id === 'mover'));
    Object.assign(asset, {
      id: 'sn-logic',
      name: 'Noisy',
      props: { enabled: true, runInEditor: false },
      variables: [],
      graph: ${JSON.stringify({
        nodes: [
          node('sn-start', 'OnStart', 0, 0),
          node('sn-play', 'PlaySound', 260, 0, { sound: soundId, volume: 0.5, loop: '' }),
        ],
        edges: [edge('sn-e1', 'sn-start', 'exec', 'sn-play', 'exec')],
      })},
    });
    p.assets.unshift(asset);
    ${MAKE_OBJECT}
    scene.objects.push(
      make('sn-box', 'crate', '', ${LANE}, 'Noisy box'),
      make('sn-brain', 'sn-logic', 'sn-box', 0, 'Noisy'),
    );
    __gm.lookAt(0, ${LANE});`);
  await sleep(400);

  await evaluate('__gm.sound.stopAll()');
  const before = await stats();
  await play();
  const played = await waitFor(stats, (s) => s.started > before.started);
  check(
    'a graph playing a sound reaches the library, at the asset volume scaled by the node’s',
    played.started === before.started + 1 &&
      played.last?.file === blip.file &&
      Math.abs(played.last.volume - 0.2) < 0.001 &&
      played.last.loop === false,
    JSON.stringify(played),
  );
  await stop();
  await sleep(300);

  // 34f. A looping sound is music: it plays on, and ending the run ends it – nothing may outlive
  //      the world that started it.
  await mutate(`
    const p = __gm.state.project;
    p.assets.find((a) => a.id === ${JSON.stringify(soundId)}).props.loop = true;`);
  await sleep(300);
  await play();
  const looping = await waitFor(stats, (s) => s.playing > 0 && s.last?.loop === true);
  check(
    'the asset’s own loop flag reaches the library even though the node never asked for one',
    looping.playing >= 1 && looping.last?.loop === true,
    JSON.stringify(looping),
  );
  // Well past the blip's own 0.25 s, so a one-shot would have ended by itself here.
  await sleep(700);
  const stillLooping = await stats();
  await stop();
  await sleep(400);
  const afterStop = await stats();
  check(
    'a loop keeps playing while the run is on and ends with it',
    stillLooping.playing >= 1 && afterStop.playing === 0,
    JSON.stringify({ stillLooping, afterStop }),
  );

  // 34f-2. The node overrules the asset in both directions – the reason `loop` is a choice of three
  //        and not a checkbox: music has to be playable as a one-shot.
  const setNodeLoop = (value) =>
    mutate(`
      const p = __gm.state.project;
      const graph = p.assets.find((a) => a.id === 'sn-logic').graph;
      graph.nodes.find((n) => n.id === 'sn-play').params.loop = ${JSON.stringify(value)};`);
  await setNodeLoop('false');
  await sleep(300);
  const beforeOnce = await stats();
  await play();
  const once = await waitFor(stats, (s) => s.started > beforeOnce.started);
  check('a node saying "off" plays a looping asset once', once.last?.loop === false, JSON.stringify(once));
  await stop();
  await sleep(300);
  await setNodeLoop('');
  await sleep(300);

  // 34g. `Stop sound` silences it from inside the graph, without ending the run.
  await mutate(`
    const p = __gm.state.project;
    const graph = p.assets.find((a) => a.id === 'sn-logic').graph;
    graph.nodes.push(${JSON.stringify(node('sn-stop', 'StopSound', 520, 0, { sound: soundId }))});
    graph.nodes.push(${JSON.stringify(node('sn-key', 'OnKeyDown', 260, 220, { key: 's' }))});
    graph.edges.push(${JSON.stringify(edge('sn-e2', 'sn-key', 'exec', 'sn-stop', 'exec'))});`);
  await sleep(300);
  await play();
  await waitFor(stats, (s) => s.playing > 0);
  await press('s');
  const silenced = await waitFor(stats, (s) => s.playing === 0);
  check(
    'Stop sound silences a looping sound while the run carries on',
    silenced.playing === 0 && (await json('__gm.playInfo()')).playing === true,
    JSON.stringify(silenced),
  );
  await stop();
  await sleep(300);

  // 34g-2. A voice belongs to the behavior playing it: destroy the object and its sounds go with it,
  //        without any `Stop sound` in the graph. `detached` is the one way out, for the death
  //        sound of an object that destroys itself.
  await mutate(`
    const p = __gm.state.project;
    const graph = p.assets.find((a) => a.id === 'sn-logic').graph;
    graph.nodes.push(
      ${JSON.stringify(node('sn-key2', 'OnKeyDown', 260, 440, { key: 'd' }))},
      ${JSON.stringify(node('sn-owner', 'Owner', 260, 620))},
      ${JSON.stringify(node('sn-destroy', 'Destroy', 520, 440))},
    );
    graph.edges.push(
      ${JSON.stringify(edge('sn-e3', 'sn-key2', 'exec', 'sn-destroy', 'exec'))},
      ${JSON.stringify(edge('sn-e4', 'sn-owner', 'object', 'sn-destroy', 'object'))},
    );`);
  await sleep(300);
  await play();
  await waitFor(stats, (s) => s.playing > 0);
  await press('d');
  const destroyed = await waitFor(stats, (s) => s.playing === 0);
  check(
    'destroying the object silences the looping sound its behavior was playing',
    destroyed.playing === 0 && (await json('__gm.playInfo()')).playing === true,
    JSON.stringify(destroyed),
  );
  await stop();
  await sleep(300);

  const setDetached = (value) =>
    mutate(`
      const p = __gm.state.project;
      const graph = p.assets.find((a) => a.id === 'sn-logic').graph;
      graph.nodes.find((n) => n.id === 'sn-play').params.detached = ${JSON.stringify(value)};`);
  await setDetached(true);
  await sleep(300);
  await play();
  await waitFor(stats, (s) => s.playing > 0);
  await press('d');
  // Long enough that the reaping frame has been and gone – a voice still here now is here on purpose.
  await sleep(600);
  const detached = await stats();
  check(
    'a detached voice is nobody’s and plays on after the object that started it is gone',
    detached.playing >= 1,
    JSON.stringify(detached),
  );
  await stop();
  await sleep(300);
  check(
    'ending the run silences a detached voice too',
    (await stats()).playing === 0,
    JSON.stringify(await stats()),
  );
  await setDetached(false);
  await sleep(300);

  // 34h. Dropping a sound file onto the editor uploads it and makes an asset named after the file.
  const dropped = await evaluate(`
    (async () => {
      const bytes = await fetch('/game-maker/data/sounds/${drone.file}').then((r) => r.arrayBuffer());
      const file = new File([bytes], 'drone.wav', { type: 'audio/wav' });
      const data = new DataTransfer();
      data.items.add(file);
      const canvas = document.querySelector('canvas');
      canvas.dispatchEvent(new DragEvent('drop', { dataTransfer: data, bubbles: true, cancelable: true }));
      return file.size;
    })()`);
  await waitFor(
    () => assetsOfType('sound'),
    (list) => list.length === 2,
  );
  const both = await assetsOfType('sound');
  check(
    'a dropped sound is uploaded and becomes an asset named after the file',
    dropped === DRONE_BYTES &&
      both.length === 2 &&
      both.some((a) => a.file === drone.file && a.name === 'drone'),
    JSON.stringify({ dropped, both, notice: await json('__gm.state.notice') }),
  );

  // 34i. The step takes back everything it made, so the steps after it see the fixture again.
  await mutate(`
    const gone = new Set(['sn-logic', ...${JSON.stringify(both.map((a) => a.id))}]);
    const project = __gm.state.project;
    project.assets = project.assets.filter((a) => !gone.has(a.id));
    __gm.state.activeScene.objects = __gm.state.activeScene.objects.filter(
      (o) => !['sn-box', 'sn-brain'].includes(o.id));
    __gm.state.select(null);
    __gm.lookAt(0, 0);`);
  await sleep(300);
  check(
    'the step leaves nothing of its own behind',
    (await assetsOfType('sound')).length === 0 && (await stats()).playing === 0,
    JSON.stringify(await assetsOfType('sound')),
  );
}