Sea Select options: disabled-btn contrast + AUTO DRAW scrolls back to the cross
- A disabled OK/DEL × inside a --priUser option chunk blended into it (the global `.btn-disabled` bg is also --priUser → no visible circle). Drop the disabled btns in `.sea-options-col` to the felt --duoUser so they read as a distinct disabled circle, like the deck-stack FLIP ×. - AUTO DRAW now eases the felt back UP to the cross even when the user already OK'd the spread + scrolled DOWN to the options page — so he watches the cards land one-by-one. `_chooseSpread(slideIn)`: the OK reveal pins to the options (slide-in from above); AUTO DRAW (already chosen) skips the pin + just eases up to the cross. `_scrollToCross` now eases from the current scroll position. - 12 PickSeaUnifiedFeltTest render ITs green. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -162,6 +162,15 @@ html.sea-open .sea-page.sea-page--room {
|
|||||||
gap: 0.75rem;
|
gap: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// A disabled btn (OK × / DEL ×) inside a --priUser chunk would BLEND into it —
|
||||||
|
// the global `.btn-disabled` bg is also --priUser → no visible circle. Drop them
|
||||||
|
// to the felt --duoUser so they read as a distinct disabled circle (like the
|
||||||
|
// deck-stack FLIP ×, user-spec 2026-06-08). The active/depress treatment is
|
||||||
|
// irrelevant here (the btns are inert).
|
||||||
|
.sea-page--room .sea-options-col .btn-disabled {
|
||||||
|
background-color: rgba(var(--duoUser), 1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
// Pre-confirm: only the options show (the cross is hidden), filling the aperture
|
// Pre-confirm: only the options show (the cross is hidden), filling the aperture
|
||||||
// (mirrors `body:not(.sky-saved) .sky-wheel-col{display:none}`).
|
// (mirrors `body:not(.sky-saved) .sky-wheel-col{display:none}`).
|
||||||
.sea-page--room:not(.sea-spread-chosen) .sea-cross-col { display: none; }
|
.sea-page--room:not(.sea-spread-chosen) .sea-cross-col { display: none; }
|
||||||
|
|||||||
@@ -214,20 +214,26 @@ via epic:sea_save. `?seat` threads the CARTE-selected seat onto the action URLs.
|
|||||||
// shunt to page 2); lock the combobox; ease the scroller up to the cross.
|
// shunt to page 2); lock the combobox; ease the scroller up to the cross.
|
||||||
// Idempotent. Triggered by OK and (defensively) by AUTO DRAW.
|
// Idempotent. Triggered by OK and (defensively) by AUTO DRAW.
|
||||||
var _spreadChosen = page.classList.contains('sea-spread-chosen');
|
var _spreadChosen = page.classList.contains('sea-spread-chosen');
|
||||||
function _chooseSpread() {
|
function _chooseSpread(slideIn) {
|
||||||
if (_spreadChosen) return;
|
if (!_spreadChosen) {
|
||||||
_spreadChosen = true;
|
_spreadChosen = true;
|
||||||
page.classList.add('sea-spread-chosen');
|
page.classList.add('sea-spread-chosen');
|
||||||
|
slideIn = true; // the first reveal always slides in from below
|
||||||
|
}
|
||||||
// NB: the combobox is NOT locked here — the spread stays changeable (scroll
|
// NB: the combobox is NOT locked here — the spread stays changeable (scroll
|
||||||
// up) until the FIRST card is drawn, when _lockSpread() + _setHasDrawn(true)
|
// up) until the FIRST card is drawn, when _lockSpread() + _setHasDrawn(true)
|
||||||
// disable the select + OK together (user-spec 2026-06-07).
|
// disable the select + OK together (user-spec 2026-06-07).
|
||||||
|
// `slideIn` (OK reveal) pins to the options (page 2) first so the cross
|
||||||
|
// slides in from above. AUTO DRAW fired from a scrolled-down options page
|
||||||
|
// skips the pin + just eases UP to the cross (so the user watches the draw).
|
||||||
|
if (slideIn) {
|
||||||
|
var opts = overlay.querySelector('.sea-options-col');
|
||||||
|
if (opts) page.scrollTop = opts.offsetTop;
|
||||||
|
}
|
||||||
_scrollToCross();
|
_scrollToCross();
|
||||||
}
|
}
|
||||||
function _scrollToCross() {
|
function _scrollToCross() {
|
||||||
// Pin to the options (now page 2) so the cross slides in from above, then ease
|
// Ease the scroller UP to the cross (page 1, scrollTop 0) from wherever it is.
|
||||||
// up to the cross (page 1) — mirrors the sky felt's form-shunt reveal.
|
|
||||||
var opts = overlay.querySelector('.sea-options-col');
|
|
||||||
if (opts) page.scrollTop = opts.offsetTop;
|
|
||||||
if (page.scrollTop === 0) return;
|
if (page.scrollTop === 0) return;
|
||||||
var start = page.scrollTop, t0 = null, DUR = 320;
|
var start = page.scrollTop, t0 = null, DUR = 320;
|
||||||
function step(now) {
|
function step(now) {
|
||||||
@@ -241,7 +247,7 @@ via epic:sea_save. `?seat` threads the CARTE-selected seat onto the action URLs.
|
|||||||
}
|
}
|
||||||
if (okBtn) okBtn.addEventListener('click', function () {
|
if (okBtn) okBtn.addEventListener('click', function () {
|
||||||
if (okBtn.classList.contains('btn-disabled')) return;
|
if (okBtn.classList.contains('btn-disabled')) return;
|
||||||
_chooseSpread();
|
_chooseSpread(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
// First card drawn → DEL un-disables ("DEL") + OK disables ("×"), simultaneous
|
// First card drawn → DEL un-disables ("DEL") + OK disables ("×"), simultaneous
|
||||||
@@ -359,7 +365,11 @@ via epic:sea_save. `?seat` threads the CARTE-selected seat onto the action URLs.
|
|||||||
|
|
||||||
// ── AUTO DRAW — confirm the spread (reveal the cross) then commit + animate.
|
// ── AUTO DRAW — confirm the spread (reveal the cross) then commit + animate.
|
||||||
function _autoDraw() {
|
function _autoDraw() {
|
||||||
_chooseSpread(); // ensure the cross is revealed before dealing onto it
|
// Reveal the cross if not yet, AND scroll back UP to it even when the user
|
||||||
|
// already OK'd + scrolled down to the options page — so he watches the cards
|
||||||
|
// land one-by-one (user-spec 2026-06-08). `_chooseSpread(false)` skips the
|
||||||
|
// slide-in pin when already chosen, just easing up to the cross.
|
||||||
|
_chooseSpread(false);
|
||||||
var order = _currentOrder();
|
var order = _currentOrder();
|
||||||
var remaining = order.length - _filled;
|
var remaining = order.length - _filled;
|
||||||
if (remaining <= 0) return;
|
if (remaining <= 0) return;
|
||||||
|
|||||||
Reference in New Issue
Block a user