Initial Arcana FX soundboard

2026-05-20 23:51:18 +02:00
commit 232e6923e3
19 changed files with 2520 additions and 0 deletions
--- a/public/app.js
+++ b/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, '&amp;')
+      .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();
+})();
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Arcana FX — Soundboard</title>
+    <link rel="stylesheet" href="/styles.css" />
+    <link rel="icon" href="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><text y='52' font-size='52'>%F0%9F%94%AE</text></svg>" />
+  </head>
+  <body>
+    <div class="aurora"></div>
+
+    <header class="topbar">
+      <div class="brand">
+        <span class="sigil">&#x1F52E;</span>
+        <div>
+          <h1>Arcana FX</h1>
+          <p class="tagline">Dungeon Master&rsquo;s Control Room</p>
+        </div>
+      </div>
+
+      <div class="status" id="status">
+        <span class="dot" id="status-dot"></span>
+        <span id="status-text">Summoning effects&hellip;</span>
+      </div>
+
+      <div class="actions">
+        <button id="refresh-btn" class="ghost" title="Rescan share">Rescan</button>
+        <button id="stop-btn" class="danger" title="Stop current playback">&#x25A0; Stop</button>
+      </div>
+    </header>
+
+    <main>
+      <section class="panel">
+        <div class="panel-head">
+          <h2>Sound Effects</h2>
+          <div class="panel-controls">
+            <input id="search" type="search" placeholder="Search the grimoire&hellip;" autocomplete="off" />
+          </div>
+        </div>
+
+        <div id="categories" class="categories" role="tablist" aria-label="Categories"></div>
+
+        <div id="grid" class="grid" aria-live="polite"></div>
+
+        <p id="empty" class="empty" hidden>No effects match your incantation.</p>
+      </section>
+
+      <section class="panel future">
+        <div class="panel-head">
+          <h2>Light Control</h2>
+          <span class="badge">Coming soon</span>
+        </div>
+        <p class="muted">
+          A scrying mirror for the lantern circuits. Coloured washes, flicker spells, and
+          power runes will appear here once the relays are bound.
+        </p>
+        <div id="lights" class="lights"></div>
+      </section>
+    </main>
+
+    <footer>
+      <span>Bound to <code id="entity-label">media_player.&hellip;</code></span>
+      <span class="sep">&middot;</span>
+      <span id="count-label">0 effects</span>
+    </footer>
+
+    <script src="/app.js"></script>
+  </body>
+</html>
--- a/public/styles.css
+++ b/public/styles.css
@@ -0,0 +1,368 @@
+:root {
+  --bg: #0b0a14;
+  --bg-2: #131127;
+  --panel: rgba(20, 18, 40, 0.72);
+  --panel-border: rgba(140, 110, 220, 0.25);
+  --ink: #e8e3ff;
+  --ink-dim: #9c95c4;
+  --accent: #b388ff;
+  --accent-2: #6effc8;
+  --warn: #ffb454;
+  --danger: #ff5b6e;
+  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
+  --radius: 14px;
+  --rune: "Cinzel", "Cormorant Garamond", "Trajan Pro", serif;
+  --body: "Inter", "Segoe UI", system-ui, sans-serif;
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  background: radial-gradient(1200px 700px at 20% -10%, #1d1640 0%, transparent 60%),
+              radial-gradient(900px 600px at 90% 0%, #1a2a44 0%, transparent 55%),
+              linear-gradient(180deg, var(--bg) 0%, #07060f 100%);
+  color: var(--ink);
+  font-family: var(--body);
+  -webkit-font-smoothing: antialiased;
+}
+
+.aurora {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  background:
+    radial-gradient(600px 240px at 12% 30%, rgba(110, 255, 200, 0.10), transparent 70%),
+    radial-gradient(600px 240px at 88% 70%, rgba(179, 136, 255, 0.10), transparent 70%);
+  filter: blur(20px);
+  animation: drift 22s ease-in-out infinite alternate;
+}
+
+@keyframes drift {
+  from { transform: translate3d(-15px, -10px, 0); }
+  to   { transform: translate3d(15px, 10px, 0); }
+}
+
+.topbar {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 18px 28px;
+  border-bottom: 1px solid var(--panel-border);
+  backdrop-filter: blur(8px);
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex: 1;
+}
+
+.brand .sigil {
+  font-size: 34px;
+  filter: drop-shadow(0 0 12px rgba(179, 136, 255, 0.55));
+}
+
+.brand h1 {
+  margin: 0;
+  font-family: var(--rune);
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  font-size: 22px;
+  color: var(--ink);
+}
+
+.brand .tagline {
+  margin: 2px 0 0;
+  color: var(--ink-dim);
+  font-size: 12px;
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+}
+
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--panel-border);
+  font-size: 13px;
+  color: var(--ink-dim);
+  max-width: 50%;
+}
+
+.status .dot {
+  width: 8px; height: 8px; border-radius: 50%;
+  background: var(--ink-dim);
+  box-shadow: 0 0 0 0 currentColor;
+}
+
+.status.ok    .dot { background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); }
+.status.busy  .dot { background: var(--warn);     box-shadow: 0 0 10px var(--warn); animation: pulse 1.4s infinite; }
+.status.err   .dot { background: var(--danger);   box-shadow: 0 0 10px var(--danger); }
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); opacity: 0.95; }
+  50%      { transform: scale(1.3); opacity: 0.6; }
+}
+
+.actions { display: flex; gap: 8px; }
+
+button {
+  appearance: none;
+  border: 1px solid var(--panel-border);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--ink);
+  padding: 8px 14px;
+  border-radius: 10px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 13px;
+  letter-spacing: 0.04em;
+  transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease;
+}
+
+button:hover  { background: rgba(179, 136, 255, 0.12); border-color: rgba(179, 136, 255, 0.55); }
+button:active { transform: translateY(1px); }
+button.ghost  { color: var(--ink-dim); }
+button.danger { color: var(--danger); border-color: rgba(255, 91, 110, 0.4); }
+button.danger:hover { background: rgba(255, 91, 110, 0.10); border-color: rgba(255, 91, 110, 0.7); }
+
+button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  filter: grayscale(0.3);
+}
+
+main {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 24px 28px 80px;
+}
+
+.panel {
+  background: var(--panel);
+  border: 1px solid var(--panel-border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 18px 20px 22px;
+  backdrop-filter: blur(10px);
+}
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 14px;
+}
+
+.panel-head h2 {
+  margin: 0;
+  font-family: var(--rune);
+  font-size: 16px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--ink);
+}
+
+.panel-controls { margin-left: auto; }
+
+input[type="search"] {
+  background: rgba(0, 0, 0, 0.25);
+  border: 1px solid var(--panel-border);
+  border-radius: 10px;
+  color: var(--ink);
+  padding: 8px 12px;
+  width: 280px;
+  font-family: inherit;
+  font-size: 13px;
+  outline: none;
+}
+input[type="search"]:focus { border-color: var(--accent); }
+
+.badge {
+  margin-left: 10px;
+  padding: 3px 8px;
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  border-radius: 999px;
+  background: rgba(255, 180, 84, 0.12);
+  color: var(--warn);
+  border: 1px solid rgba(255, 180, 84, 0.35);
+}
+
+.categories {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 14px;
+}
+
+.chip {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid var(--panel-border);
+  color: var(--ink-dim);
+  border-radius: 999px;
+  padding: 5px 12px;
+  font-size: 12px;
+  cursor: pointer;
+  letter-spacing: 0.04em;
+  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+}
+.chip:hover { color: var(--ink); border-color: rgba(179, 136, 255, 0.6); }
+.chip.active {
+  background: rgba(179, 136, 255, 0.15);
+  border-color: var(--accent);
+  color: var(--ink);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 12px;
+}
+
+.tile {
+  position: relative;
+  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
+  border: 1px solid var(--panel-border);
+  border-radius: 12px;
+  padding: 14px 14px 12px;
+  cursor: pointer;
+  overflow: hidden;
+  text-align: left;
+  color: var(--ink);
+  transition: transform 0.08s ease, border-color 0.15s ease, background 0.15s ease;
+}
+
+.tile::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(220px 80px at 30% 0%, rgba(179, 136, 255, 0.18), transparent 60%);
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  pointer-events: none;
+}
+.tile:hover::before { opacity: 1; }
+.tile:hover { border-color: rgba(179, 136, 255, 0.6); }
+.tile:active { transform: translateY(1px); }
+
+.tile.playing {
+  border-color: var(--accent-2);
+  box-shadow: 0 0 0 1px var(--accent-2), 0 0 22px rgba(110, 255, 200, 0.25);
+}
+
+.tile .name {
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 1.3;
+  margin-bottom: 6px;
+  word-break: break-word;
+}
+
+.tile .meta {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  font-size: 11px;
+  color: var(--ink-dim);
+  letter-spacing: 0.04em;
+}
+
+.tile .meta .tag {
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--panel-border);
+  border-radius: 999px;
+  padding: 2px 8px;
+  text-transform: uppercase;
+}
+
+.tile .path {
+  margin-top: 8px;
+  font-size: 10.5px;
+  color: rgba(156, 149, 196, 0.7);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.empty {
+  margin: 20px 4px 0;
+  color: var(--ink-dim);
+  font-style: italic;
+}
+
+.future .muted {
+  margin: 0 0 14px;
+  color: var(--ink-dim);
+  font-size: 13px;
+  max-width: 60ch;
+}
+
+.lights {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+  gap: 10px;
+}
+
+.light {
+  border: 1px dashed rgba(140, 110, 220, 0.35);
+  border-radius: 12px;
+  padding: 16px;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.02);
+  color: var(--ink-dim);
+  cursor: not-allowed;
+  position: relative;
+  user-select: none;
+}
+
+.light .icon { font-size: 22px; display: block; margin-bottom: 6px; }
+.light .lbl  { font-size: 13px; letter-spacing: 0.04em; }
+.light .soon {
+  position: absolute; top: 8px; right: 10px;
+  font-size: 9.5px;
+  text-transform: uppercase;
+  color: var(--warn);
+  letter-spacing: 0.18em;
+}
+
+footer {
+  position: relative;
+  z-index: 1;
+  padding: 14px 28px 26px;
+  color: var(--ink-dim);
+  font-size: 12px;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+footer .sep { opacity: 0.5; }
+footer code {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 6px;
+  padding: 2px 6px;
+  font-size: 11.5px;
+}
+
+@media (max-width: 760px) {
+  .topbar { flex-wrap: wrap; }
+  .status { max-width: 100%; order: 3; }
+  input[type="search"] { width: 100%; }
+  .panel-head { flex-direction: column; align-items: flex-start; gap: 10px; }
+  .panel-controls { margin-left: 0; width: 100%; }
+}