Show merged rooms inside the host's card

Two cards side by side said nothing about whether the rooms were playing together; now a room that joins the AVR moves into its card, under the input it is playing, and leaving puts the card back in its own slot. The button changes with it: Join Home Cinema when it stands alone, Leave when it is in the group, since the card's position already says which it is. Also fixes Separate everything, which sent a GET to a POST-only route and so failed with a 405 and snapped the rooms straight back. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-14 21:50:02 +02:00
parent aa1b734b3a
commit 6213bcf23f
4 changed files with 64 additions and 5 deletions
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" data-step="{{ step }}">
+<html lang="en" data-step="{{ step }}" data-host="{{ host.label }}">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no">
@@ -37,9 +37,15 @@
      <span class="value" data-role="input-name">—</span>
      <svg class="chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg>
    </button>
+
+    <div class="joined" data-role="joined" hidden>
+      <p class="joined-title">Playing together</p>
+      <div class="joined-rooms" data-role="joined-rooms"></div>
+    </div>
  </section>

  {% for room in rooms %}
+  <div class="room-slot" data-slot="{{ room.key }}">
  <section class="card room" data-room="{{ room.key }}">
    <div class="card-head">
      <h2>{{ room.label }}</h2>
@@ -57,9 +63,10 @@
      <span data-role="group-label">Separate</span>
    </button>
  </section>
+  </div>
  {% endfor %}

-  <button class="wide ghost" data-role="split-all">Separate everything</button>
+  <button class="wide ghost" data-role="split-all" hidden>Separate everything</button>
  <p class="foot" data-role="foot"></p>
 </div>