Sea Select glow: defer sea-btn reopen + glow handoff past parse time; pulse the glow-handoff — TDD

room.html includes _sea_overlay.html (~L77) BEFORE _burger.html (~L167, which
holds #id_burger_btn + #id_sea_btn), so the overlay's two inline scripts
captured those btns at parse time → null → both bindings silently no-op'd:
the sea btn (active post-completion) did nothing on click + the burger stayed
stuck --priId because its glow-handoff transfer listener never bound. Defer both
the sea-btn REOPEN binding (_bindSeaReopen) & the burger→sea_btn→.sea-select
GLOW chain (_bindGlowHandoff) to DOMContentLoaded so the burger fan exists first.

Also make the glow-handoff halo PULSE (quick ease-in swell, slow ease-out decay
via per-segment timing fns + a lopsided 22/78 keystop split) instead of a flat
glow — the burger, then the sea btn after the handoff click, keep cueing
"click me to reopen your sea".

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-06-08 00:38:58 -04:00
parent 0a6bfcf6cc
commit 82f4af9bcc
3 changed files with 92 additions and 31 deletions

View File

@@ -482,14 +482,23 @@ via epic:sea_save. `?seat` threads the CARTE-selected seat onto the action URLs.
// ── Sea sub-btn = post-completion REOPEN (active only once the spread is
// complete, like the sky btn). An ACTIVE click re-shows the felt to review the
// saved spread (window.openSeaFelt); inactive clicks fall to burger-btn.js's
// --priRd flash.
var seaSubBtn = document.getElementById('id_sea_btn');
if (seaSubBtn) {
// --priRd flash. DEFERRED to DOMContentLoaded: #id_sea_btn lives in
// _burger.html, which room.html includes AFTER this overlay — a parse-time
// getElementById returns null → the binding would silently no-op (sea btn
// dead). Bind once the burger fan exists.
function _bindSeaReopen() {
var seaSubBtn = document.getElementById('id_sea_btn');
if (!seaSubBtn) return;
seaSubBtn.addEventListener('click', function () {
if (!seaSubBtn.classList.contains('active')) return;
openSea();
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', _bindSeaReopen);
} else {
_bindSeaReopen();
}
// Re-seed SeaDeal's `_seaHand` from the server-rendered saved slots so they
// stay clickable to RE-OPEN the stage after a refresh.
@@ -528,32 +537,44 @@ via epic:sea_save. `?seat` threads the CARTE-selected seat onto the action URLs.
{# .sea-select → end, so the user is led to reopen + review their sea. #}
<script>
(function () {
var burgerBtn = document.getElementById('id_burger_btn');
var seaBtn = document.getElementById('id_sea_btn');
var seaSelect = document.querySelector('#id_sea_overlay .sea-select');
if (!burgerBtn || !seaBtn || !seaSelect) return;
// DEFERRED to DOMContentLoaded: #id_burger_btn + #id_sea_btn live in
// _burger.html, which room.html includes AFTER this overlay — capturing them at
// parse time yields null and the early-return below would skip every listener
// (burger never sheds .glow-handoff → stuck --priId; the chain never advances).
// Bind once the burger fan exists.
function _bindGlowHandoff() {
var burgerBtn = document.getElementById('id_burger_btn');
var seaBtn = document.getElementById('id_sea_btn');
var seaSelect = document.querySelector('#id_sea_overlay .sea-select');
if (!burgerBtn || !seaBtn || !seaSelect) return;
var glowDone = false;
function endGlow() {
glowDone = true;
burgerBtn.classList.remove('glow-handoff');
seaBtn.classList.remove('glow-handoff');
seaSelect.classList.remove('glow-handoff');
var glowDone = false;
function endGlow() {
glowDone = true;
burgerBtn.classList.remove('glow-handoff');
seaBtn.classList.remove('glow-handoff');
seaSelect.classList.remove('glow-handoff');
}
burgerBtn.addEventListener('click', function () {
if (glowDone || !burgerBtn.classList.contains('glow-handoff')) return;
burgerBtn.classList.remove('glow-handoff');
seaBtn.classList.add('glow-handoff');
});
seaBtn.addEventListener('click', function () {
if (glowDone || !seaBtn.classList.contains('glow-handoff')) return;
seaBtn.classList.remove('glow-handoff');
seaSelect.classList.add('glow-handoff');
});
seaSelect.addEventListener('click', function () {
if (glowDone) return;
endGlow();
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', _bindGlowHandoff);
} else {
_bindGlowHandoff();
}
burgerBtn.addEventListener('click', function () {
if (glowDone || !burgerBtn.classList.contains('glow-handoff')) return;
burgerBtn.classList.remove('glow-handoff');
seaBtn.classList.add('glow-handoff');
});
seaBtn.addEventListener('click', function () {
if (glowDone || !seaBtn.classList.contains('glow-handoff')) return;
seaBtn.classList.remove('glow-handoff');
seaSelect.classList.add('glow-handoff');
});
seaSelect.addEventListener('click', function () {
if (glowDone) return;
endGlow();
});
}());
</script>