app.js

// app.js — Entry point, wires everything together

import { AudioEngine } from './engine/audio.js';
import { Renderer } from './engine/renderer.js';
import { AcidWarpViz } from './vizzes/acidwarp.js';
import { PulsarViz } from './vizzes/pulsar.js';
import { CoralViz } from './vizzes/coral.js';
import { MidasViz } from './vizzes/midas.js';
import { MyceliumViz } from './vizzes/mycelium.js';
import { GeometryViz } from './vizzes/geometry.js';
import { Panel } from './ui/panel.js';
import { DebugOverlay } from './ui/debug.js';

const canvas = document.getElementById('main-canvas');
const permissionScreen = document.getElementById('permission-screen');
const micBlock = document.getElementById('mic-block');
const startBtn = document.getElementById('start-btn');
const startBtnLabel = document.getElementById('start-btn-label');
const permissionHint = document.getElementById('permission-hint');

let audio, renderer, panel, debug;
let activeVizName = 'acidwarp';
let micAlreadyGranted = false;

// ── Check existing mic permission ──
async function checkMicPermission() {
  try {
    if (!navigator.permissions) return false;
    const result = await navigator.permissions.query({ name: 'microphone' });
    return result.state === 'granted';
  } catch {
    return false;
  }
}

// ── Viz factory ──
// renderer.threeRenderer is the single shared WebGL context — passed into every
// viz so they render through it rather than each creating their own context.
function createViz(name) {
  const tr = renderer.threeRenderer;
  switch (name) {
    case 'acidwarp':  return new AcidWarpViz(canvas, tr, null, {});
    case 'midas':     return new MidasViz(canvas, tr, null, {});
    case 'geometry':  return new GeometryViz(canvas, tr, null, {});
    case 'mycelium':  return new MyceliumViz(canvas, tr, null, {});
    case 'pulsar':  return new PulsarViz(canvas, tr, null, {});
    case 'coral':  return new CoralViz(canvas, tr, null, {});
    default:          return new AcidWarpViz(canvas, tr, null, {});
  }
}

// ── Cursor hide ──
let cursorTimeout;
function resetCursorTimer() {
  document.body.classList.remove('hide-cursor');
  clearTimeout(cursorTimeout);
  cursorTimeout = setTimeout(() => {
    document.body.classList.add('hide-cursor');
  }, 2500);
}

// ── Sensitivity controls ──
function wireSensitivityControls(audio) {
  const masterSlider = document.getElementById('master-gain');
  const gainValue    = document.getElementById('gain-value');
  const autoBtn      = document.getElementById('auto-norm-btn');
  const bandTrims    = document.getElementById('band-trims');

  const bassSlider   = document.getElementById('bass-gain');
  const midSlider    = document.getElementById('mid-gain');
  const highSlider   = document.getElementById('high-gain');
  const bassVal      = document.getElementById('bass-gain-val');
  const midVal       = document.getElementById('mid-gain-val');
  const highVal      = document.getElementById('high-gain-val');

  masterSlider.addEventListener('input', () => {
    audio.masterGain = parseFloat(masterSlider.value);
    gainValue.textContent = audio.masterGain.toFixed(1) + '×';
  });

  autoBtn.addEventListener('click', () => {
    audio.autoNormalize = !audio.autoNormalize;
    autoBtn.classList.toggle('active', audio.autoNormalize);
  });

  bassSlider.addEventListener('input', () => {
    audio.bandGain.bass = parseFloat(bassSlider.value);
    bassVal.textContent = audio.bandGain.bass.toFixed(1) + '×';
  });
  midSlider.addEventListener('input', () => {
    audio.bandGain.mid = parseFloat(midSlider.value);
    midVal.textContent = audio.bandGain.mid.toFixed(1) + '×';
  });
  highSlider.addEventListener('input', () => {
    audio.bandGain.high = parseFloat(highSlider.value);
    highVal.textContent = audio.bandGain.high.toFixed(1) + '×';
  });

  return { showBandTrims: (on) => bandTrims.classList.toggle('visible', on) };
}

// ── Interaction → show panel ──
function onInteraction() {
  panel?.show();
  resetCursorTimer();
}

// ── Init after permission resolved ──
async function start() {
  permissionScreen.classList.add('hidden');

  audio = new AudioEngine({ fftSize: 2048 });
  await audio.init();

  renderer = new Renderer(canvas);

  panel = new Panel();
  debug = new DebugOverlay();

  const { showBandTrims } = wireSensitivityControls(audio);

  panel.onVizChange((name) => {
    activeVizName = name;
    renderer.setViz(createViz(name));
  });

  panel.onDebugToggle((on) => {
    debug.toggle(on);
    showBandTrims(on);
  });

  renderer.setViz(createViz('acidwarp'));

  renderer.setFrameCallback((deltaTime) => {
    audio.update();
    const frame = audio.frame;
    renderer.activeViz?.update(frame, deltaTime);
    debug.update(frame, activeVizName);
  });

  renderer.start();

  document.addEventListener('mousemove', onInteraction);
  document.addEventListener('keydown', onInteraction);
  document.addEventListener('touchstart', onInteraction);

  resetCursorTimer();
}

// ── Setup startup screen ──
async function setupStartScreen() {
  micAlreadyGranted = await checkMicPermission();

  if (micAlreadyGranted) {
    micBlock.style.display = 'none';
    permissionHint.style.display = 'none';
    startBtnLabel.textContent = 'continue';
  } else {
    startBtnLabel.textContent = 'enable microphone';
  }

  startBtn.addEventListener('click', async () => {
    try {
      await start();
    } catch (err) {
      console.error('Mic access denied or error:', err);
      startBtnLabel.textContent = 'microphone access denied';
      startBtn.disabled = true;
    }
  });
}

setupStartScreen();