my-sea voice: voice-btn glow/pulse state machine (sea-precedence, pulse-while-alone, 2x on 2nd party) — TDD
Phase 3 of the my-sea voice batch (user-spec 2026-05-29). A --quaUser/--ninUser
glow + pulse machine for the burger btn + its voice sub-btn, driven by the
voice sub-btn availability (voice_active) + the live mesh state.
- voice-mesh.js: VoiceRoom gains a state-change hook — setOnStateChange(cb) +
peerCount() + _notify({inCall, peerCount, muted}), fired on join, every peer
add/drop, mute toggle, and teardown. No behaviour change without a subscriber
(VoiceMeshSpec stays green).
- voice-glow.js (new): the glow machine. PRE-JOIN nudge — burger glows when the
fan is closed (sea draw-nudge keeps burger precedence; voice reclaims it once
the sea glow clears), voice sub-btn glows when the fan opens. LIVE — the glow
PULSES on whichever surface shows (voice sub-btn fan-open, burger fan-closed):
base 2s cadence while alone, doubled (.voice-pulse--fast) once a 2nd party
connects (equalizer stand-in; a true volume-reactive equalizer is a live-only
enhancement). Class writes are reconciled (idempotent) so the burger-class
MutationObserver doesn't feed back on itself.
- _burger.scss: .voice-glow + @keyframes voice-pulse + .voice-pulse(--fast).
- loaded on my_sea.html + my_sea_visit.html (after burger-btn.js).
- VoiceGlowSpec.js (18 specs) + registered in SpecRunner; MySeaSeatsSpec flare
window updated 1.5s → 2s (Phase 2 bump). 428 Jasmine specs green.
Live-verify on staging: the actual glow colours/cadence + the equalizer
upgrade (item 5) and disconnect states (item 7) land in later phases.
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -189,6 +189,47 @@
|
||||
0 0 1.2rem 0.3rem rgba(var(--ninUser), 0.35);
|
||||
}
|
||||
|
||||
// ── Voice affordance glow + pulse (Phase 3, my-sea voice) ─────────────
|
||||
//
|
||||
// Distinct from the sea-btn's --priYl `.glow-handoff` draw nudge: voice uses
|
||||
// a --quaUser tint + --ninUser halo. voice-glow.js owns the class transitions
|
||||
// (sea takes burger precedence; the voice glow surfaces on the voice sub-btn
|
||||
// when the fan is open, or on the burger once the sea nudge clears). Once the
|
||||
// mic is live the glow PULSES — base cadence while alone, doubled once a 2nd
|
||||
// party connects (equalizer stand-in).
|
||||
#id_voice_btn.voice-glow,
|
||||
#id_burger_btn.voice-glow {
|
||||
color: rgba(var(--quaUser), 1);
|
||||
border-color: rgba(var(--quaUser), 1);
|
||||
box-shadow:
|
||||
0 0 0.5rem 0.1rem rgba(var(--ninUser), 0.75),
|
||||
0 0 1.2rem 0.3rem rgba(var(--ninUser), 0.35);
|
||||
}
|
||||
|
||||
@keyframes voice-pulse {
|
||||
0%, 100% {
|
||||
box-shadow:
|
||||
0 0 0.35rem 0.05rem rgba(var(--ninUser), 0.35),
|
||||
0 0 0.7rem 0.1rem rgba(var(--ninUser), 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
0 0 0.7rem 0.2rem rgba(var(--ninUser), 0.9),
|
||||
0 0 1.5rem 0.5rem rgba(var(--ninUser), 0.45);
|
||||
}
|
||||
}
|
||||
// Base cadence — one full ease in+out per 2s (1s each way) while the visiting
|
||||
// user is alone in the voice room.
|
||||
#id_voice_btn.voice-pulse,
|
||||
#id_burger_btn.voice-pulse {
|
||||
animation: voice-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
// Doubled cadence once a 2nd party is connected.
|
||||
#id_voice_btn.voice-pulse--fast,
|
||||
#id_burger_btn.voice-pulse--fast {
|
||||
animation: voice-pulse 1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
// Burger hides when bud_panel is open — LANDSCAPE only. In portrait the
|
||||
// burger sits ABOVE the bud panel (bottom:4.2rem vs panel at bottom:0.5
|
||||
// + height:3rem); no visual conflict. In landscape they share the
|
||||
|
||||
Reference in New Issue
Block a user