gemma/arcana-fx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add continuous mixer stream and sound sets

Browse Source
This commit is contained in:
Hermes Agent
2026-05-21 00:16:13 +02:00
parent 232e6923e3
commit 23391a2d3e
8 changed files with 680 additions and 570 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
public/index.html
View File

@@ -15,56 +15,80 @@
<span class="sigil">&#x1F52E;</span>
<div>
<h1>Arcana FX</h1>
<p class="tagline">Dungeon Master&rsquo;s Control Room</p>
<p class="tagline">D&D soundboard mixer</p>
</div>
</div>
<div class="status" id="status">
<span class="dot" id="status-dot"></span>
<span id="status-text">Summoning effects&hellip;</span>
<span id="status-text">Loading effects…</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>
<button id="stream-btn" class="primary" title="Start the continuous Home Assistant stream">Start device stream</button>
<button id="now-btn" class="ghost" title="Show currently playing effects">Now Playing <span id="now-count">0</span></button>
<button id="stop-btn" class="danger" title="Stop injected effects">Stop FX</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>
<section class="panel hero-panel">
<div>
<h2>Prepared Sets</h2>
<p class="muted">Main workflow: build encounter sets, then fire sounds from the set during play.</p>
</div>
<div class="set-tools">
<select id="set-select" aria-label="Current set"></select>
<button id="new-set-btn" class="ghost">New set</button>
<button id="rename-set-btn" class="ghost">Rename</button>
<button id="delete-set-btn" class="danger ghost">Delete</button>
</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">
<section class="panel">
<div class="panel-head">
<h2>Light Control</h2>
<span class="badge">Coming soon</span>
<h2 id="set-title">Current Set</h2>
<span class="badge" id="set-count">0 items</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>
<div id="set-grid" class="grid set-grid" aria-live="polite"></div>
<p id="set-empty" class="empty">No effects in this set yet. Search below and use + Set.</p>
</section>
<section class="panel library-panel">
<div class="panel-head">
<h2>Adhoc Library</h2>
<div class="panel-controls">
<input id="search" type="search" placeholder="Search names, categories, tags…" 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 the search.</p>
</section>
</main>
<footer>
<span>Bound to <code id="entity-label">media_player.&hellip;</code></span>
<span class="sep">&middot;</span>
<span>Device: <code id="entity-label">media_player.…</code></span>
<span class="sep">·</span>
<span id="count-label">0 effects</span>
<span class="sep">·</span>
<button id="refresh-btn" class="linkish" title="Rescan share">Rescan library</button>
</footer>
<div id="drawer-backdrop" class="drawer-backdrop" hidden></div>
<aside id="now-drawer" class="drawer" aria-label="Now playing" aria-hidden="true">
<div class="drawer-head">
<h2>Now Playing</h2>
<button id="drawer-close" class="ghost">Close</button>
</div>
<div class="drawer-actions">
<button id="drawer-stop-all" class="danger">Stop all effects</button>
<button id="stream-stop-btn" class="danger ghost">Stop device stream</button>
</div>
<div id="active-list" class="active-list"></div>
<p id="active-empty" class="empty">Nothing is currently injected into the stream.</p>
</aside>
<script src="/app.js"></script>
</body>
</html>