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:
Disco DeDisco
2026-06-07 23:53:43 -04:00
parent cf84fdc992
commit edc9a49f06
4 changed files with 254 additions and 232 deletions

View File

@@ -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 {