burger sub-btns: opacity-0.6 inactive default + 2-pulse --priRd flash w. fa-ban swap on click — TDD
Adds the active/inactive distinction to the 5 burger fan sub-btns. Default state is INACTIVE (opacity 0.6, real icon visible); active conditions get wired one-by-one in later sprints as each surface matures.
## Markup (templates/apps/gameboard/_partials/_burger.html)
Each sub-btn now renders BOTH icons:
- `<i class="fa-solid fa-<real> burger-fan-icon--on">` (sky/earth/sea/voice/text)
- `<i class="fa-solid fa-ban burger-fan-icon--off">`
CSS keeps the real icon visible by default in both .active + inactive states. The fa-ban only surfaces during the .flash-inactive pulse below (icon swap is tied to the pulse class, not to inactive state per se — user-spec'd).
## SCSS (static_src/scss/_burger.scss)
- `#id_burger_btn.active ~ ... .burger-fan-btn.active { opacity: 1 }` — active sub-btn fully visible.
- `#id_burger_btn.active ~ ... .burger-fan-btn:not(.active) { opacity: 0.6 }` — inactive default.
- `.burger-fan-icon--on / --off` stacked absolute-position so the swap doesn't shift the layout box.
- `.burger-fan-btn.flash-inactive` — adds --priRd border + glow (box-shadow modeled on sig-select's SAVE SIG countdown but lighter), AND swaps to fa-ban via `.burger-fan-icon--on { display: none } / --off { display: inline-block }`.
The `#id_burger_btn` itself (the trigger btn) is explicitly NOT subject to inactive/active opacity treatment — only the sub-btns.
## JS (apps/epic/static/apps/epic/burger-btn.js)
Delegated click handler on `#id_burger_fan`: any `.burger-fan-btn` click that DOESN'T carry `.active` runs `_flashInactive(subBtn)` — 2 pulses, 180ms ON / 120ms OFF (tighter than sig-select's 600ms cadence per user spec). Active sub-btns will route to their per-feature handlers in later sprints; for now they no-op.
## Tests
- `apps/epic/tests/integrated/test_views.py::RoomBurgerBtnRenderTest::test_each_sub_btn_renders_dual_icon_for_inactive_flash_swap` — asserts `burger-fan-icon--on` + `--off` appear 5 times each (one per sub-btn). fa-ban itself isn't counted directly — `_table_positions.html` also renders fa-ban for non-starter seats — but the burger-fan-icon classes are unique to the fan.
- `static_src/tests/BurgerSpec.js` — 5 new specs under `describe("inactive sub-btn flash")`:
- adds .flash-inactive on click
- removes after ~180ms (first ON window)
- re-adds after ~480ms (second ON window during the 2nd pulse)
- settles back to default after ~800ms (full 2-pulse cycle)
- does NOT flash when sub-btn carries .active
Uses `jasmine.clock()` for deterministic timing. Mirror-copied to `static/tests/BurgerSpec.js` for the Jasmine FT runner.
## Verification
1358 IT+UT green. Jasmine FT runs all specs (incl. the 5 new flash specs) green.
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
@@ -1,24 +1,35 @@
|
||||
{# Burger btn + fan of 5 sub-btns for room.html. Renders unconditionally #}
|
||||
{# above #id_bud_btn (portrait: bottom-left; landscape: right sidebar #}
|
||||
{# bottom). Sub-btns are pure scaffolding for now — no click handlers. #}
|
||||
{# Click handlers + targets land in later sprints as each surface matures. #}
|
||||
{# Burger btn + fan of 5 sub-btns. Sub-btns default to INACTIVE #}
|
||||
{# (opacity 0.6, fa-ban icon). When a condition flips a sub-btn to #}
|
||||
{# .active, the real icon (sky/earth/sea/voice/text) shows + opacity #}
|
||||
{# goes to 1. Each sub-btn renders BOTH icons; CSS hides one based on #}
|
||||
{# the .active class. #}
|
||||
{# #}
|
||||
{# Active conditions are wired one-by-one in later sprints. For now all #}
|
||||
{# sub-btns are inactive; clicking an inactive sub-btn flashes a brief #}
|
||||
{# --priRd glow (twice, fast cadence) — burger-btn.js owns the delegated #}
|
||||
{# click + flash. #}
|
||||
<button id="id_burger_btn" type="button" aria-label="Open burger menu" aria-expanded="false">
|
||||
<i class="fa-solid fa-burger"></i>
|
||||
</button>
|
||||
<div id="id_burger_fan" aria-hidden="true">
|
||||
<button id="id_voice_btn" type="button" class="burger-fan-btn" aria-label="Voice">
|
||||
<i class="fa-solid fa-headset burger-fan-icon--on"></i>
|
||||
<i class="fa-solid fa-ban burger-fan-icon--off"></i>
|
||||
</button>
|
||||
<button id="id_sky_btn" type="button" class="burger-fan-btn" aria-label="Sky">
|
||||
<i class="fa-solid fa-cloud"></i>
|
||||
<i class="fa-solid fa-cloud burger-fan-icon--on"></i>
|
||||
<i class="fa-solid fa-ban burger-fan-icon--off"></i>
|
||||
</button>
|
||||
<button id="id_earth_btn" type="button" class="burger-fan-btn" aria-label="Earth">
|
||||
<i class="fa-solid fa-earth-americas"></i>
|
||||
<i class="fa-solid fa-earth-americas burger-fan-icon--on"></i>
|
||||
<i class="fa-solid fa-ban burger-fan-icon--off"></i>
|
||||
</button>
|
||||
<button id="id_sea_btn" type="button" class="burger-fan-btn" aria-label="Sea">
|
||||
<i class="fa-solid fa-bridge-water"></i>
|
||||
</button>
|
||||
<button id="id_voice_btn" type="button" class="burger-fan-btn" aria-label="Voice">
|
||||
<i class="fa-solid fa-headset"></i>
|
||||
<i class="fa-solid fa-bridge-water burger-fan-icon--on"></i>
|
||||
<i class="fa-solid fa-ban burger-fan-icon--off"></i>
|
||||
</button>
|
||||
<button id="id_text_btn" type="button" class="burger-fan-btn" aria-label="Text">
|
||||
<i class="fa-solid fa-keyboard"></i>
|
||||
<i class="fa-solid fa-keyboard burger-fan-icon--on"></i>
|
||||
<i class="fa-solid fa-ban burger-fan-icon--off"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user