discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

room scroll-of-events: applet-box card styling + scroll-driven gear menu (Frame/Redact filter) — TDD

Browse Source 
The room scroll pane now matches scroll.html: the feed sits in a .applet-scroll %applet-box card with the rotated room-name title; dropped the special --duoUser pane bg (the dark card sits on the room-page bg).

Gear menu is now view-aware. #id_room_menu carries two panes: .room-menu-default (the existing NVM/DEL/BYE) + .room-menu-scroll (a Frame/Redact #id_scroll_filter_form, rendered only when the gear include gets scroll_filter — room.html passes scroll_filter=room.table_status). room-scroll.js (NEW) runs an IntersectionObserver on .room-scroll-pane (root=#id_room_aperture): scrolled to the feed -> show the filter pane; back on the hex -> show the default. The filter mirrors scroll.html (per-room localStorage, toggles .drama-event[data-label] display). Buffer-dots animation moved from the inline partial script into room-scroll.js.

Other views keep their own menus, as asked: GATE VIEW (room_gate.html) includes _room_gear.html with nvm_url only (no scroll_filter, no room-scroll.js) -> NVM(->hex)/DEL/BYE; the cross/spread phase is a modal over the hex (scrollTop 0) -> default pane.

Traps: applets.js caches gear.dataset.menuTarget at bind time, so you can't swap a gear's target to a 2nd menu — both panes live in ONE #id_room_menu and JS toggles visibility. .room-menu-default is display:contents so wrapping the existing controls doesn't change their layout (JS toggles none<->contents, not '').

Tests: +3 ITs (RoomScrollOfEventsTest — .applet-scroll card + room-name title, filter pane renders in table phase, filter absent in gate phase); +2 FTs (test_game_room_scroll — gear swaps to filter when scrolled to feed, unchecking Redact+OK hides struck rows). 8 scroll ITs + 4 scroll FTs green; 554 epic ITs/UTs green; gatekeeper DEL+BYE gear FTs green (the .room-menu-default wrap is layout-neutral).

[[project-room-scroll-of-events]]

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-06-01 20:03:48 -04:00
parent a4adf9664b
commit 4a4e60f668
7 changed files with 256 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/static_src/scss/_room.scss
View File

@@ -95,39 +95,57 @@ html.sea-open #id_aperture_fill {
display: flex;
flex-direction: column;
padding: 0.75rem;
background: rgba(var(--duoUser), 1); // matches the aperture / billscroll bg
#id_drama_scroll {
// Same %applet-box card chrome + rotated room-name title (`> h2`) as the
// Billscroll page's .applet-scroll. No --duoUser pane bg — the dark card
// sits straight on the room-page background, matching scroll.html.
.applet-scroll {
@extend %applet-box;
flex: 1;
min-height: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
// Pin the "What happens next…?" buffer to the bottom when the feed is
// short (pure-CSS equivalent of billscroll's rAF marginTop nudge).
.scroll-buffer {
margin-top: auto;
#id_drama_scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
display: flex;
justify-content: center;
align-items: baseline;
padding: 2rem 0 1rem;
opacity: 0.4;
font-size: 0.8rem;
text-transform: uppercase;
flex-direction: column;
.scroll-buffer-text { letter-spacing: 0.33em; }
// Pin the "What happens next…?" buffer to the bottom when the feed
// is short (pure-CSS equivalent of billscroll's rAF marginTop nudge).
.scroll-buffer {
margin-top: auto;
display: flex;
justify-content: center;
align-items: baseline;
padding: 2rem 0 1rem;
opacity: 0.4;
font-size: 0.8rem;
text-transform: uppercase;
.scroll-buffer-dots {
display: inline-flex;
letter-spacing: 0;
.scroll-buffer-text { letter-spacing: 0.33em; }
span { display: inline-block; width: 0.7em; text-align: center; }
.scroll-buffer-dots {
display: inline-flex;
letter-spacing: 0;
span { display: inline-block; width: 0.7em; text-align: center; }
}
}
}
}
}
// The gear menu's default pane (NVM/DEL/BYE) is `display:contents` so wrapping
// the existing controls in `.room-menu-default` (for the scroll-view swap)
// leaves their layout untouched. room-scroll.js toggles it to `none` while the
// Frame/Redact filter pane shows, and back to `contents` on the hex.
.room-menu-default {
display: contents;
}
.gate-backdrop {
position: fixed;
inset: 0;