Sync ROOM 01: panels collapsed on load + Controls toggle

71c704d3b8d25fa61bfdbd282cf9c19b53fd850c · 2026-09-01 22:12:19 -0700 · Steve Abrams
Files touched

M room/index.html
Diff

commit 71c704d3b8d25fa61bfdbd282cf9c19b53fd850c
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue Sep 1 22:12:19 2026 -0700

    Sync ROOM 01: panels collapsed on load + Controls toggle
---
 room/index.html | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/room/index.html b/room/index.html
index 1b76ebd..137f2f3 100644
--- a/room/index.html
+++ b/room/index.html
@@ -64,7 +64,7 @@
 
   /* ---- Chapter rail ---- */
   .chapters{
-    position:fixed;top:22px;right:26px;z-index:6;display:flex;gap:8px;flex-direction:column;align-items:flex-end;
+    position:fixed;top:64px;right:26px;z-index:6;display:flex;gap:8px;flex-direction:column;align-items:flex-end;
   }
   .chapters button{
     font-family:var(--serif);font-size:13px;font-style:italic;
@@ -175,6 +175,15 @@
   .mr-foot a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(242,182,74,.4)}
   .mr-msg{margin-top:9px;font-size:11px;line-height:1.5;color:var(--ink-dim)}
 
+  /* master Controls toggle — panels start collapsed, user opens them */
+  .chrome-toggle{position:fixed;top:22px;right:26px;z-index:12}
+  #stage.hide-chrome .dock,
+  #stage.hide-chrome .cams,
+  #stage.hide-chrome .chapters,
+  #stage.hide-chrome .musicroom,
+  #stage.hide-chrome .label-toggle,
+  #stage.hide-chrome .museum{display:none!important}
+
   :focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
   .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 
@@ -199,7 +208,7 @@
 <body>
 <a href="#dock" class="skip">Skip to controls</a>
 <a href="/" class="backlink" id="backlink" aria-label="Back to DEAD, the listening exhibition">◆ DEAD · A Listening Exhibition</a>
-<main id="stage" aria-label="Scarlet Riverboat Masquerade — an animated visual gallery you can steer with the controls and keyboard">
+<main id="stage" class="hide-chrome" aria-label="Scarlet Riverboat Masquerade — an animated visual gallery you can steer with the controls and keyboard">
   <h1 class="sr">Scarlet Riverboat Masquerade — an animated generative gallery</h1>
   <!-- role removed from <main>: role="application" suppressed normal screen-reader navigation over the native controls + prose -->
 
@@ -238,6 +247,8 @@
     <audio id="mrAudio" preload="none"></audio>
   </section>
 
+  <button class="btn chrome-toggle" id="chromeBtn" aria-pressed="false">☰ Controls</button>
+
   <nav class="chapters" aria-label="Chapters">
     <button data-chapter="0" aria-current="true"><span class="dot" aria-hidden="true"></span>I · Departure</button>
     <button data-chapter="1"><span class="dot" aria-hidden="true"></span>II · Moon Bend</button>
@@ -1231,6 +1242,17 @@ labelBtn.addEventListener('click',()=>{
 
 function announce(msg){ live.textContent=msg; }
 
+// master Controls toggle — everything starts collapsed; click to reveal / hide the panels
+const stageEl=document.getElementById('stage');
+const chromeBtn=document.getElementById('chromeBtn');
+function toggleChrome(){
+  const hidden=stageEl.classList.toggle('hide-chrome');
+  chromeBtn.setAttribute('aria-pressed', String(!hidden));
+  chromeBtn.textContent = hidden ? '☰ Controls' : '✕ Close';
+  announce(hidden ? 'Controls hidden.' : 'Controls shown.');
+}
+chromeBtn.addEventListener('click', toggleChrome);
+
 // keyboard shortcuts
 window.addEventListener('keydown',e=>{
   const t=e.target;
@@ -1245,6 +1267,7 @@ window.addEventListener('keydown',e=>{
     case 't': trailBtn.click(); break;
     case 'a': { const rb=document.getElementById('reactBtn'); if(rb) rb.click(); } break;
     case 'p': launchPtero(); break;
+    case 'c': toggleChrome(); break;
     case '1': document.querySelector('[data-cam="wide"]').click(); break;
     case '2': document.querySelector('[data-cam="deck"]').click(); break;
     case '3': document.querySelector('[data-cam="over"]').click(); break;
← 8f3ddb3 Sync ROOM 01: dancing bears on the boat decks · back to Dead Agentabrams · Sync ROOM 01: livelier beat-synced bear dance c6068c0 →