Sea Select: refactor to scroll-snap options→cross (mirror Sky Select), drop the modal — TDD
The Gaussian spread modal couldn't hang off the burger #id_sea_btn anymore (that button now also opens the felt). Mirror Sky Select's form→wheel scroll-snap instead: the felt starts with the spread OPTIONS on the --duoUser felt; clicking OK confirms the spread → the options shunt DOWN and the spread CROSS takes page 1 (scroll down to find the options again). No modal, no corner NVM. - `_sea_overlay.html` restructured into `.sea-options-col` (the .sea-select combobox + mini preview + OK .btn-confirm + AUTO DRAW + DEL — NO deck stacks) and `.sea-cross-col` (the real .my-sea-cross + the Gravity/Levity deck stacks + the portaled stage). `#id_sea_overlay` is a `display:contents` passthrough so the two cols are the scroll-snap sections. - OK (`#id_sea_confirm_spread`) → `_chooseSpread()`: adds `sea-spread-chosen` to the felt → SCSS engages `scroll-snap-type:y mandatory`, the cross-col gets `order:-1` (page 1), options shunt to page 2; locks the combobox; eases the scroller to the cross. AUTO DRAW also confirms first. A reload of an in-progress sea renders `sea-spread-chosen` (cross revealed) server-side. - SCSS (`_sky.scss`): the sea felt is now a column scroller; `.sea-cross-col` `display:none` pre-confirm; the `sea-spread-chosen` scroll-snap block mirrors `body.sky-saved`. The options `.sea-form-col` goes transparent/content-sized (blends onto the felt, not the modal's --priUser card). - Sea sub-btn: no longer activated by openSea; it's the POST-COMPLETION reopen affordance (cascade activates it + `sea_btn_active = hand_complete` ctx flag), an active click → `window.openSeaFelt()` (review the saved spread), like the sky btn. Removed the sea_btn open-modal IIFE + the corner NVM. - IT: options-on-felt (combobox + OK + AUTO DRAW + DEL + preview) w. NO modal / NVM. 952 epic+gameboard ITs + Jasmine + PickSeaAsyncTransitionTest(3) green. my_sea.html keeps its modal (untouched) — the gameroom intentionally diverges. [[project-character-creation-spec]] Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -85,6 +85,8 @@ html.sea-open {
|
||||
inset: 0;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto; // the felt is the scroller (options ⇄ cross)
|
||||
background: rgba(var(--duoUser), 1);
|
||||
// Hidden until opened — pointer-events off so the hidden felt can't eat the
|
||||
// DRAW SEA btn click beneath it.
|
||||
@@ -97,6 +99,48 @@ html.sea-open .sea-page.sea-page--room {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
// ── Sea felt sections — mirror Sky Select's form→wheel scroll-snap ────────────
|
||||
// #id_sea_overlay is a layout passthrough so the two sections become direct flex
|
||||
// children of the scroller for scroll-snap (like `.sky-modal-body{display:contents}`).
|
||||
.sea-page--room .sea-overlay-content { display: contents; }
|
||||
|
||||
.sea-page--room .sea-options-col,
|
||||
.sea-page--room .sea-cross-col {
|
||||
flex: 1 0 auto;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative; // pins the deck stacks to the cross section
|
||||
}
|
||||
|
||||
// The options form blends onto the --duoUser felt (transparent, content-sized) —
|
||||
// "the modal contents on green felt", not the modal's purple --priUser card.
|
||||
.sea-page--room .sea-options-col .sea-form-col {
|
||||
background: transparent;
|
||||
width: auto;
|
||||
min-width: 14rem;
|
||||
}
|
||||
|
||||
// Pre-confirm: only the options show (the cross is hidden), filling the aperture
|
||||
// (mirrors `body:not(.sky-saved) .sky-wheel-col{display:none}`).
|
||||
.sea-page--room:not(.sea-spread-chosen) .sea-cross-col { display: none; }
|
||||
|
||||
// OK → the aperture flips into scroll-snap: the cross takes page 1 (order:-1) +
|
||||
// the options shunt to page 2. Mirrors the `body.sky-saved` block.
|
||||
.sea-page--room.sea-spread-chosen {
|
||||
scroll-snap-type: y mandatory;
|
||||
|
||||
.sea-options-col,
|
||||
.sea-cross-col {
|
||||
scroll-snap-align: start;
|
||||
scroll-snap-stop: always;
|
||||
height: 100%;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.sea-cross-col { order: -1; }
|
||||
}
|
||||
|
||||
// Hide the position strip while the sea felt is up (same as the sky felt) so the
|
||||
// felt reads as a clean homogeneous surface.
|
||||
html.sea-open .position-strip {
|
||||
|
||||
Reference in New Issue
Block a user