diff --git a/Dockerfile b/Dockerfile
index adede0d..5ac34fa 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -4,7 +4,7 @@ ENV NODE_ENV=production
WORKDIR /app
COPY package.json package-lock.json* ./
-RUN npm install --omit=dev --no-audit --no-fund
+RUN apk add --no-cache ffmpeg && npm install --omit=dev --no-audit --no-fund
COPY src ./src
COPY public ./public
diff --git a/package.json b/package.json
index d148256..7bed1b9 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
"scripts": {
"start": "node src/server.js",
"dev": "node --watch src/server.js",
- "check": "node --check src/server.js && node --check src/filestash.js && node --check src/effects.js && node --check src/homeassistant.js && node --check src/routes.js"
+ "check": "node --check src/server.js && node --check src/filestash.js && node --check src/effects.js && node --check src/homeassistant.js && node --check src/streamMixer.js && node --check src/routes.js"
},
"engines": {
"node": ">=20"
diff --git a/public/app.js b/public/app.js
index 2fea6fe..48f6c24 100644
--- a/public/app.js
+++ b/public/app.js
@@ -1,8 +1,12 @@
(() => {
'use strict';
+ const STORAGE_KEY = 'arcana-fx-sets-v2';
+
const els = {
grid: document.getElementById('grid'),
+ setGrid: document.getElementById('set-grid'),
+ setEmpty: document.getElementById('set-empty'),
empty: document.getElementById('empty'),
search: document.getElementById('search'),
categories: document.getElementById('categories'),
@@ -10,26 +14,44 @@
statusText: document.getElementById('status-text'),
refresh: document.getElementById('refresh-btn'),
stop: document.getElementById('stop-btn'),
+ stream: document.getElementById('stream-btn'),
+ streamStop: document.getElementById('stream-stop-btn'),
+ now: document.getElementById('now-btn'),
+ nowCount: document.getElementById('now-count'),
entityLabel: document.getElementById('entity-label'),
countLabel: document.getElementById('count-label'),
- lights: document.getElementById('lights'),
+ setSelect: document.getElementById('set-select'),
+ newSet: document.getElementById('new-set-btn'),
+ renameSet: document.getElementById('rename-set-btn'),
+ deleteSet: document.getElementById('delete-set-btn'),
+ setTitle: document.getElementById('set-title'),
+ setCount: document.getElementById('set-count'),
+ drawer: document.getElementById('now-drawer'),
+ backdrop: document.getElementById('drawer-backdrop'),
+ drawerClose: document.getElementById('drawer-close'),
+ drawerStopAll: document.getElementById('drawer-stop-all'),
+ activeList: document.getElementById('active-list'),
+ activeEmpty: document.getElementById('active-empty'),
};
const state = {
effects: [],
+ byPath: new Map(),
categories: [],
activeCategory: 'all',
search: '',
- playingPath: null,
busy: false,
+ streamOn: false,
+ active: [],
+ sets: loadSets(),
+ currentSetId: null,
};
- const LIGHT_ICONS = {
- flame: '\u{1F525}',
- moon: '\u{1F319}',
- sparkles: '\u{2728}',
- droplet: '\u{1FA78}',
- };
+ if (!state.sets.length) state.sets = [{ id: uid(), name: 'Session Favorites', paths: [] }];
+ state.currentSetId = state.sets[0].id;
+
+ function uid() { return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`; }
+ function currentSet() { return state.sets.find((s) => s.id === state.currentSetId) || state.sets[0]; }
function setStatus(kind, text) {
els.status.classList.remove('ok', 'busy', 'err');
@@ -38,190 +60,277 @@
}
function escapeHtml(str) {
- return String(str)
- .replace(/&/g, '&')
- .replace(//g, '>')
- .replace(/"/g, '"')
- .replace(/'/g, ''');
+ return String(str).replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"').replace(/'/g, ''');
}
- 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 ``;
- })
- .join('');
+ function loadSets() {
+ try {
+ const parsed = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]');
+ return Array.isArray(parsed) ? parsed.filter((s) => s && s.id && s.name && Array.isArray(s.paths)) : [];
+ } catch { return []; }
}
- 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 `
- `;
- })
- .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 `
-
- Soon
- ${icon}
- ${escapeHtml(p.name)}
-
`;
- })
- .join('');
- }
+ function saveSets() { localStorage.setItem(STORAGE_KEY, JSON.stringify(state.sets)); }
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 (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);
+ const err = new Error((body && body.error) || `${res.status} ${res.statusText}`);
err.status = res.status;
throw err;
}
return body || {};
}
+ function renderCategories() {
+ const all = ['all', ...state.categories];
+ els.categories.innerHTML = all.map((c) => {
+ const active = state.activeCategory === c ? ' active' : '';
+ const label = c === 'all' ? 'All' : c;
+ return ``;
+ }).join('');
+ }
+
+ function visibleEffects() {
+ const q = state.search.trim().toLowerCase();
+ return state.effects.filter((e) => {
+ if (state.activeCategory !== 'all' && e.category !== state.activeCategory) return false;
+ if (!q) return true;
+ const haystack = `${e.name} ${e.category} ${e.type} ${e.path.replace(/[/.\\_-]+/g, ' ')}`.toLowerCase();
+ return haystack.includes(q);
+ }).slice(0, 240);
+ }
+
+ function tile(effect, { inSetView = false } = {}) {
+ const set = currentSet();
+ const inSet = set.paths.includes(effect.path);
+ return `
+
+
+
+ ${inSetView ? `` : ``}
+
+ `;
+ }
+
+ function renderGrid() {
+ const filtered = visibleEffects();
+ els.empty.hidden = filtered.length !== 0;
+ els.countLabel.textContent = `${state.effects.length} effects · showing ${filtered.length}`;
+ els.grid.innerHTML = filtered.map((e) => tile(e)).join('');
+ renderSet();
+ }
+
+ function renderSetsSelect() {
+ els.setSelect.innerHTML = state.sets.map((s) => ``).join('');
+ els.setSelect.value = state.currentSetId;
+ }
+
+ function renderSet() {
+ renderSetsSelect();
+ const set = currentSet();
+ const effects = set.paths.map((p) => state.byPath.get(p)).filter(Boolean);
+ els.setTitle.textContent = set.name;
+ els.setCount.textContent = `${effects.length} item${effects.length === 1 ? '' : 's'}`;
+ els.setEmpty.hidden = effects.length > 0;
+ els.setGrid.innerHTML = effects.map((e) => tile(e, { inSetView: true })).join('');
+ }
+
+ function renderActive() {
+ els.nowCount.textContent = String(state.active.length);
+ els.activeEmpty.hidden = state.active.length > 0;
+ els.activeList.innerHTML = state.active.map((a) => `
+
+
+ ${escapeHtml(a.name)}
+ ${escapeHtml(a.category)} · ${Math.round((a.ageMs || 0) / 1000)}s
+ ${a.error ? `${escapeHtml(a.error)}` : ''}
+
+
+
Arcana FX
-
Dungeon Master’s Control Room
+
D&D soundboard mixer
- Summoning effects…
+ Loading effects…
-
-
+
+
+
-
-
-
Sound Effects
-
-
-
+
+
+
Prepared Sets
+
Main workflow: build encounter sets, then fire sounds from the set during play.
+
+
+
+
+
-
-
-
-
-
- No effects match your incantation.
-
+
-
Light Control
- Coming soon
+ Current Set
+ 0 items
-
- A scrying mirror for the lantern circuits. Coloured washes, flicker spells, and
- power runes will appear here once the relays are bound.
-
-
+
+ No effects in this set yet. Search below and use + Set.
+
+
+
+
+
+
+ No effects match the search.
+
+
+