Initial Arcana FX soundboard

public/app.js

@@ -0,0 +1,227 @@
+(() => {
+  'use strict';
+
+  const els = {
+    grid: document.getElementById('grid'),
+    empty: document.getElementById('empty'),
+    search: document.getElementById('search'),
+    categories: document.getElementById('categories'),
+    status: document.getElementById('status'),
+    statusText: document.getElementById('status-text'),
+    refresh: document.getElementById('refresh-btn'),
+    stop: document.getElementById('stop-btn'),
+    entityLabel: document.getElementById('entity-label'),
+    countLabel: document.getElementById('count-label'),
+    lights: document.getElementById('lights'),
+  };
+
+  const state = {
+    effects: [],
+    categories: [],
+    activeCategory: 'all',
+    search: '',
+    playingPath: null,
+    busy: false,
+  };
+
+  const LIGHT_ICONS = {
+    flame: '\u{1F525}',
+    moon: '\u{1F319}',
+    sparkles: '\u{2728}',
+    droplet: '\u{1FA78}',
+  };
+
+  function setStatus(kind, text) {
+    els.status.classList.remove('ok', 'busy', 'err');
+    if (kind) els.status.classList.add(kind);
+    els.statusText.textContent = text;
+  }
+
+  function escapeHtml(str) {
+    return String(str)
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
+  }
+
+  function renderCategories() {
+    const all = ['all', ...state.categories];
+    els.categories.innerHTML = all
+      .map((c) => {
+        const label = c === 'all' ? 'All' : c;
+        const active = state.activeCategory === c ? ' active' : '';
+        return `<button class="chip${active}" data-cat="${escapeHtml(c)}" type="button">${escapeHtml(label)}</button>`;
+      })
+      .join('');
+  }
+
+  function renderGrid() {
+    const q = state.search.trim().toLowerCase();
+    const filtered = state.effects.filter((e) => {
+      if (state.activeCategory !== 'all' && e.category !== state.activeCategory) return false;
+      if (!q) return true;
+      return (
+        e.name.toLowerCase().includes(q) ||
+        e.category.toLowerCase().includes(q) ||
+        e.path.toLowerCase().includes(q)
+      );
+    });
+
+    els.empty.hidden = filtered.length !== 0;
+    els.countLabel.textContent = `${filtered.length} of ${state.effects.length} effects`;
+
+    els.grid.innerHTML = filtered
+      .map((e) => {
+        const playing = state.playingPath === e.path ? ' playing' : '';
+        return `
+          <button class="tile${playing}" type="button" data-path="${escapeHtml(e.path)}">
+            <div class="name">${escapeHtml(e.name)}</div>
+            <div class="meta">
+              <span class="tag">${escapeHtml(e.category)}</span>
+              <span class="tag">${escapeHtml(e.type.toUpperCase())}</span>
+            </div>
+            <div class="path" title="${escapeHtml(e.path)}">${escapeHtml(e.path)}</div>
+          </button>`;
+      })
+      .join('');
+  }
+
+  function renderLights(cfg) {
+    if (!cfg || !Array.isArray(cfg.placeholders)) {
+      els.lights.innerHTML = '';
+      return;
+    }
+    els.lights.innerHTML = cfg.placeholders
+      .map((p) => {
+        const icon = LIGHT_ICONS[p.icon] || '✨';
+        return `
+          <div class="light" aria-disabled="true">
+            <span class="soon">Soon</span>
+            <span class="icon">${icon}</span>
+            <span class="lbl">${escapeHtml(p.name)}</span>
+          </div>`;
+      })
+      .join('');
+  }
+
+  async function fetchJson(url, opts) {
+    const res = await fetch(url, opts);
+    const text = await res.text();
+    let body = null;
+    if (text) {
+      try { body = JSON.parse(text); } catch { body = { error: text }; }
+    }
+    if (!res.ok) {
+      const msg = (body && body.error) || `${res.status} ${res.statusText}`;
+      const err = new Error(msg);
+      err.status = res.status;
+      throw err;
+    }
+    return body || {};
+  }
+
+  async function loadConfig() {
+    try {
+      const cfg = await fetchJson('/api/config');
+      if (cfg.mediaPlayer) {
+        els.entityLabel.textContent = cfg.mediaPlayer;
+      }
+      renderLights(cfg.lightControl);
+    } catch (err) {
+      console.warn('config load failed', err);
+    }
+  }
+
+  async function loadEffects({ force = false } = {}) {
+    setStatus('busy', force ? 'Rescanning the share…' : 'Summoning effects…');
+    try {
+      const url = force ? '/api/effects?refresh=1' : '/api/effects';
+      const data = await fetchJson(url);
+      state.effects = Array.isArray(data.effects) ? data.effects : [];
+      state.categories = Array.isArray(data.categories) ? data.categories : [];
+      if (!state.categories.includes(state.activeCategory) && state.activeCategory !== 'all') {
+        state.activeCategory = 'all';
+      }
+      renderCategories();
+      renderGrid();
+      setStatus('ok', `Ready — ${state.effects.length} effect${state.effects.length === 1 ? '' : 's'} loaded`);
+    } catch (err) {
+      console.error(err);
+      setStatus('err', `Failed to load effects: ${err.message}`);
+    }
+  }
+
+  async function play(effectPath) {
+    if (state.busy) return;
+    state.busy = true;
+    setStatus('busy', `Casting — ${effectPath.split('/').pop()}`);
+    try {
+      const res = await fetchJson('/api/play', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: effectPath }),
+      });
+      state.playingPath = effectPath;
+      renderGrid();
+      const name = (res.played && res.played.name) || effectPath;
+      setStatus('ok', `Playing — ${name}`);
+    } catch (err) {
+      console.error(err);
+      setStatus('err', `Play failed: ${err.message}`);
+    } finally {
+      state.busy = false;
+    }
+  }
+
+  async function stop() {
+    if (state.busy) return;
+    state.busy = true;
+    setStatus('busy', 'Silencing…');
+    try {
+      await fetchJson('/api/stop', { method: 'POST' });
+      state.playingPath = null;
+      renderGrid();
+      setStatus('ok', 'Stopped');
+    } catch (err) {
+      console.error(err);
+      setStatus('err', `Stop failed: ${err.message}`);
+    } finally {
+      state.busy = false;
+    }
+  }
+
+  // --- Event wiring ---
+
+  els.grid.addEventListener('click', (e) => {
+    const btn = e.target.closest('.tile');
+    if (!btn) return;
+    const path = btn.dataset.path;
+    if (path) play(path);
+  });
+
+  els.categories.addEventListener('click', (e) => {
+    const btn = e.target.closest('.chip');
+    if (!btn) return;
+    state.activeCategory = btn.dataset.cat || 'all';
+    renderCategories();
+    renderGrid();
+  });
+
+  let searchTimer = null;
+  els.search.addEventListener('input', () => {
+    clearTimeout(searchTimer);
+    searchTimer = setTimeout(() => {
+      state.search = els.search.value;
+      renderGrid();
+    }, 80);
+  });
+
+  els.refresh.addEventListener('click', () => loadEffects({ force: true }));
+  els.stop.addEventListener('click', stop);
+
+  // --- Boot ---
+  loadConfig();
+  loadEffects();
+})();