arcana-fx/public/app.js

(() => {
  '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();
})();