my-sea deck-stack + spread-card glow: unify hover-reveal / click-persist + --ninUser halo — TDD

Unify the glow/FLIP interaction across the owner picker (my_sea) + the read-only
spectator (my_sea_visit), then carry the same selection halo onto the spread
cards + deck-stack faces.

DECK STACK (user-spec 2026-05-30) — the owner revealed the FLIP only on click
(persisted) but never on hover; the spectator revealed it on hover but never
persisted. Now BOTH do both:
- `.sea-stack-ok` reveal is a single shared rule in _card-deck.scss — opacity
  fades in on hover/focus (ephemeral) OR via the JS-set `.sea-deck-stack--active`
  class (click-persist, same class the face-glow rides). The owner's inline
  `display` toggling is gone (`_showOk`/`_hideOk` just flip `--active`); the
  spectator's hover-only override in _gameboard.scss is removed.
- Interactivity stays gated on `--active`, NOT hover: hover is a purely VISUAL
  preview (matching the spectator's disabled FLIP). This preserves the owner's
  two-step deal — were the FLIP click-through on hover, a single stack-click
  would land on the centred FLIP + deal early (caught by the draw FT).
- Spectator persist wired in my_sea_visit.html (click a stack → `--active`,
  click elsewhere clears); its FLIP stays `.btn-disabled` (read-only).

SPREAD CARDS — the same hover-glow + active-persist now on EVERY spread card,
building on the cover/cross rules. The prior `.sea-card-slot--focused` glow
(0-1-0) was silently overridden by the filled-card drop-shadow ladder (up to
0-4-0) and never rendered (verified live); `!important` (consistent w. the
existing `opacity:1 !important` there) makes the halo win on hover + focus. The
halo is symmetric (rotation-invariant). No colour change — box-shadow only.

DECK FACE HALO — the levity + gravity stack glows now mirror the card halo's
tuned geometry (0.5rem blur / 0.5rem spread / 0.3 alpha), each in its own
polarity colour (--ninUser / --quaUser); single keeps its own tone.

Verified live in Firefox: deck FLIP persists on click + fades on hover; the card
halo wins over the drop-shadow on hover/focus across crown/cover/(reversed-)cross;
levity/gravity deck glows match the card halo. Draw FTs green (single-draw, hand-
completion, AUTO DRAW, auto-drawn-slot reopen) — the two-step deal + card focus
survive the display→opacity switch.

Code architected by Disco DeDisco <discodedisco@outlook.com>
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-05-30 01:11:39 -04:00
parent 7e876557aa
commit b7d871388e
4 changed files with 89 additions and 26 deletions

View File

@@ -357,10 +357,12 @@
return DRAW_ORDER[hidden.value] || [];
}
// FLIP visibility is now CSS-driven (opacity on hover/focus +
// the `.sea-deck-stack--active` persist class — unified w. the
// spectator page, user-spec 2026-05-30). `_showOk`/`_hideOk` just
// toggle `--active`; no more inline `display` juggling.
function _hideOk() {
if (_activeStack) {
var ok = _activeStack.querySelector('.sea-stack-ok');
if (ok) ok.style.display = 'none';
_activeStack.classList.remove('sea-deck-stack--active');
_activeStack = null;
}
@@ -369,8 +371,6 @@
_hideOk();
_activeStack = stack;
stack.classList.add('sea-deck-stack--active');
var ok = stack.querySelector('.sea-stack-ok');
if (ok) ok.style.display = '';
}
function _fillSlot(positionName, card, isLevity) {
@@ -529,7 +529,6 @@
});
var ok = stack.querySelector('.sea-stack-ok');
if (ok) {
ok.style.display = 'none';
ok.addEventListener('click', function (e) {
e.stopPropagation();
// Hand complete → FLIP is disabled. No draw.

View File

@@ -137,6 +137,34 @@
}
}());
</script>
{# Deck-stack persist — the spectator's FLIP is disabled (read-only), but #}
{# clicking a stack PERSISTS its glow + the revealed × via the shared #}
{# `.sea-deck-stack--active` class (same persist the owner picker uses, #}
{# user-spec 2026-05-30). Hover-reveal + the fade are the shared CSS; this #}
{# only adds the click-to-lock. Clicking another stack / elsewhere clears. #}
<script>
(function () {
var overlay = document.getElementById('id_sea_overlay');
if (!overlay) return;
var stacks = overlay.querySelectorAll('.sea-deck-stack');
if (!stacks.length) return;
function clearAll(except) {
stacks.forEach(function (s) {
if (s !== except) s.classList.remove('sea-deck-stack--active');
});
}
stacks.forEach(function (stack) {
stack.addEventListener('click', function (e) {
e.stopPropagation(); // don't let the overlay handler clear it
var on = stack.classList.contains('sea-deck-stack--active');
clearAll(stack);
stack.classList.toggle('sea-deck-stack--active', !on);
});
});
// A click anywhere else on the cross drops the persisted reveal.
overlay.addEventListener('click', function () { clearAll(null); });
}());
</script>
{# Async witness — a WS to `mysea_<owner>` pushes the owner's hand as each #}
{# card lands; SeaDeal.register fills the cross slot (+ seeds it clickable) #}
{# live, no refresh. A DEL (empty hand) re-empties the cleared slots. #}