← back to Dead Agentabrams
Music room: apply graphic-designer critique fixes (Steve)
cc56eba75f6ef965508ec4c2f5f233068a6506c4 · 2026-09-03 13:05:10 -0700 · Steve Abrams
- BUG: mobile panel collision — Music Room was invisible/unclickable (shared box with
Videos). Now distinct mobile slots (Videos bottom, Music Room above), Music Room z:11
so its header is always tappable, and the two panels are mutually exclusive (opening
one closes the other). Verified: mrToggle now receives the tap and opens.
- BUG: 'Chapter · Departure' caption was hidden behind the Music Room panel on desktop —
moved the panel down (top:182) to clear it.
- Movie screen: cropped the YouTube iframe (scale 1.34) so its title bar/byline/logo/
'More videos' chrome is pushed outside the gold frame — only the footage shows; added a
stage riser/base under the frame so it reads as mounted on the stage; nudged it down
(top:36%) off the title.
- Orb: flattened to a matte material (metalness 0 / roughness 1 — no photoreal specular)
to match the paper-cutout world, and raised its default to high sky (y 3.1) off the riser.
- Polish: mobile title floor bumped (clamp 20/6.5vw/30), kicker 9→10px.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Files touched
Diff
commit cc56eba75f6ef965508ec4c2f5f233068a6506c4
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Thu Sep 3 13:05:10 2026 -0700
Music room: apply graphic-designer critique fixes (Steve)
- BUG: mobile panel collision — Music Room was invisible/unclickable (shared box with
Videos). Now distinct mobile slots (Videos bottom, Music Room above), Music Room z:11
so its header is always tappable, and the two panels are mutually exclusive (opening
one closes the other). Verified: mrToggle now receives the tap and opens.
- BUG: 'Chapter · Departure' caption was hidden behind the Music Room panel on desktop —
moved the panel down (top:182) to clear it.
- Movie screen: cropped the YouTube iframe (scale 1.34) so its title bar/byline/logo/
'More videos' chrome is pushed outside the gold frame — only the footage shows; added a
stage riser/base under the frame so it reads as mounted on the stage; nudged it down
(top:36%) off the title.
- Orb: flattened to a matte material (metalness 0 / roughness 1 — no photoreal specular)
to match the paper-cutout world, and raised its default to high sky (y 3.1) off the riser.
- Polish: mobile title floor bumped (clamp 20/6.5vw/30), kicker 9→10px.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
room/index.html | 34 +++++++++++++++++++++++-----------
1 file changed, 23 insertions(+), 11 deletions(-)
diff --git a/room/index.html b/room/index.html
index 9e684d7..496ff97 100644
--- a/room/index.html
+++ b/room/index.html
@@ -49,16 +49,23 @@
#venueVideo). Shown ONLY while a video is playing (.movie-on). ---- */
#stage.movie-on #venueVideo{
opacity:1; z-index:1;
- left:calc(50% + var(--movie-dx, 0px)); top:calc(33% + var(--movie-dy, 0px));
+ left:calc(50% + var(--movie-dx, 0px)); top:calc(36% + var(--movie-dy, 0px));
transform:translate(-50%,-50%);
width:calc(min(54vw,760px) * var(--movie-scale, 1)); height:auto; aspect-ratio:16/9;
background:#000; border-radius:4px; border:2px solid #0a0304;
box-shadow:0 0 0 8px #17070a, 0 0 0 10px rgba(242,182,74,.45),
0 30px 90px rgba(0,0,0,.75), 0 0 70px rgba(242,182,74,.18);
}
+ /* Crop the YouTube iframe so its own chrome (title bar, byline, logo, "More videos")
+ is pushed outside the gold frame — only the footage shows (graphic-designer #3). */
+ #stage.movie-on #venueVideo iframe{transform:scale(1.34);transform-origin:center center}
+ /* Stage riser/base so the screen reads as MOUNTED on the stage, not floating (designer note). */
+ #stage.movie-on #venueVideo::before{content:"";position:absolute;left:50%;bottom:-8px;
+ transform:translateX(-50%);width:34%;height:26px;background:linear-gradient(#17070a,#0a0304);
+ clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);z-index:-1;box-shadow:0 14px 30px rgba(0,0,0,.6)}
#stage.movie-on #sky{opacity:.5}
#stage.movie-on #scene{opacity:1}
- @media (max-width:820px){ #stage.movie-on #venueVideo{width:calc(86vw * var(--movie-scale,1));top:30%} }
+ @media (max-width:820px){ #stage.movie-on #venueVideo{width:calc(86vw * var(--movie-scale,1));top:32%} }
/* drag-to-move + corner-resize handles on the movie screen (Steve: adjust + scale up/down) */
#venueVideo .mv-move,#venueVideo .mv-size{position:absolute;pointer-events:auto;display:none}
#stage.movie-on #venueVideo .mv-move{display:block;inset:0;cursor:move;z-index:1}
@@ -218,7 +225,7 @@
/* ---- Music Room console ---- */
.musicroom{
- position:fixed;left:26px;top:158px;z-index:9;width:min(84vw,300px);
+ position:fixed;left:26px;top:182px;z-index:11;width:min(84vw,300px);
background:var(--panel);border:1px solid var(--panel-edge);border-radius:14px;
backdrop-filter:blur(9px);box-shadow:0 12px 40px rgba(0,0,0,.5);overflow:hidden;font-size:12px;
}
@@ -320,7 +327,8 @@
.vr-row .ry{color:var(--gold);font-variant-numeric:tabular-nums;min-width:34px;flex:none}
.vr-row .rt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:820px){
- .videoroom{top:auto;bottom:148px;left:12px;right:12px;width:auto}
+ /* distinct slots so Videos no longer sits on top of Music Room (was unclickable) */
+ .videoroom{top:auto;bottom:12px;left:12px;right:12px;width:auto}
}
/* master Controls toggle — panels start collapsed, user opens them */
@@ -346,15 +354,15 @@
.label-toggle{bottom:100px;right:12px}
.museum{bottom:148px;right:12px}
.chapters{top:auto;bottom:100px;right:12px;flex-direction:row}
- .musicroom{top:auto;bottom:148px;left:12px;right:12px;width:auto}
+ .musicroom{top:auto;bottom:70px;left:12px;right:12px;width:auto}
.musicroom .mr-tracks{max-height:96px}
}
/* ---- Phones (Steve: mobile-friendly · shrink text · scale it) — fluid, smaller type;
panels kept inside the viewport; controls reachable. ---- */
@media (max-width:640px){
.titleplate{max-width:76vw;top:14px;left:14px}
- .titleplate .kicker{font-size:9px;letter-spacing:.22em}
- .titleplate h1{font-size:clamp(17px,6vw,28px);line-height:1.02}
+ .titleplate .kicker{font-size:10px;letter-spacing:.22em}
+ .titleplate h1{font-size:clamp(20px,6.5vw,30px);line-height:1.02}
.titleplate .chap{font-size:11px}
.chrome-toggle{top:12px;right:12px;font-size:12px;padding:7px 12px}
.videoroom,.musicroom{left:10px;right:10px;width:auto;font-size:11px}
@@ -373,7 +381,7 @@
}
/* ---- Very small phones — one more step down ---- */
@media (max-width:400px){
- .titleplate h1{font-size:clamp(15px,6.4vw,24px)}
+ .titleplate h1{font-size:clamp(18px,6.6vw,26px)}
.videoroom,.musicroom{font-size:10.5px}
}
@media (prefers-reduced-motion: reduce){
@@ -1764,6 +1772,8 @@ const MR_VIDEOS=[
function setOpen(open){
vr.dataset.open = open ? 'true' : 'false';
vrToggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+ if(open){ const mr=document.getElementById('musicroom'), mt=document.getElementById('mrToggle'); // one panel at a time (no mobile collision)
+ if(mr){ mr.setAttribute('data-open','false'); if(mt) mt.setAttribute('aria-expanded','false'); } }
}
vrToggle.addEventListener('click', () => setOpen(vr.dataset.open !== 'true'));
vrToggle.addEventListener('keydown', e => {
@@ -2390,6 +2400,8 @@ function toggleRoom(){
const open=room.getAttribute('data-open')!=='false';
room.setAttribute('data-open',String(!open));
mrToggle.setAttribute('aria-expanded',String(!open));
+ if(!open){ const vr=document.getElementById('videoroom'), vt=document.getElementById('vrToggle'); // opening Music Room → close Videos (one at a time)
+ if(vr){ vr.dataset.open='false'; if(vt) vt.setAttribute('aria-expanded','false'); } }
}
mrToggle.addEventListener('click',toggleRoom);
mrToggle.addEventListener('keydown',e=>{ if(e.key==='Enter'||e.key===' '){ e.preventDefault(); toggleRoom(); } });
@@ -2493,14 +2505,14 @@ if(_p.endsWith('/room') || /dead\.agentabrams/i.test(location.hostname)){
renderer.setPixelRatio(Math.min(2,devicePixelRatio||1)); renderer.setSize(W,H,false);
const scene=new THREE.Scene();
const camera=new THREE.PerspectiveCamera(50,W/H,0.1,100); camera.position.z=5;
- const group=new THREE.Group(); group.position.y=1.45; scene.add(group); // floats up in the sky over the boat
+ const group=new THREE.Group(); group.position.set(0, 3.1, 0); scene.add(group); // high in the sky, clear of the stage riser (designer #4)
// restore a dragged-around orb position (Steve: "allow orb to move around the room")
- try{ const op=JSON.parse(localStorage.getItem('deadroom.orbpos.v1')); if(op){ group.position.x=op.x||0; group.position.y=(op.y!=null?op.y:1.45); } }catch(_){}
+ try{ const op=JSON.parse(localStorage.getItem('deadroom.orbpos.v1')); if(op){ group.position.x=op.x||0; group.position.y=(op.y!=null?op.y:3.1); } }catch(_){}
// ---- the core orb (its own sub-group so effects can rotate it WITHOUT tilting the world-down beams) ----
const orb=new THREE.Group(); group.add(orb);
const wire=new THREE.Mesh(new THREE.IcosahedronGeometry(0.95,2), new THREE.MeshBasicMaterial({wireframe:true,color:0xf2b64a,transparent:true,opacity:0.8}));
- const core=new THREE.Mesh(new THREE.IcosahedronGeometry(0.76,3), new THREE.MeshStandardMaterial({color:0x2a0810,emissive:0xc9432b,emissiveIntensity:0.7,roughness:0.35,metalness:0.6,transparent:true,opacity:0.85}));
+ const core=new THREE.Mesh(new THREE.IcosahedronGeometry(0.76,3), new THREE.MeshStandardMaterial({color:0x3a0f16,emissive:0xc9432b,emissiveIntensity:0.55,roughness:1,metalness:0,transparent:true,opacity:0.92})); // matte, no photoreal specular — matches the flat paper-cutout world (designer #4)
orb.add(core,wire);
// ---- 5 UFO saucers, each casting a downward light beam (searchlight cone, additive) ----
← 6b22391 Fast onload: cache archive.org's down state, cut timeouts
·
back to Dead Agentabrams
·
(newest)