From 98354fd27b92b65d099ddc3a85b706378fc1f2eb Mon Sep 17 00:00:00 2001 From: Disco DeDisco Date: Wed, 29 Apr 2026 11:47:50 -0400 Subject: [PATCH] PICK SEA slot interaction: cover/cross appear animation; focused glow; card bg fully opaque MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - cover/cross card slots animate 0→1→resting opacity (2s) on deposit - cover rests at 0.3; cross rests at 0.15; hover reveals to 1 - first-tap focus adds diffuse --ninUser + tight black box-shadow glow - second tap removes --focused before _showStage() — glow dismisses as modal opens - levity/gravity card backgrounds bumped to rgba alpha 1 (were 0.85) - box-shadow 0.15s ease added to --visible transition for smooth glow out Code architected by Disco DeDisco Git commit message Co-Authored-By: Claude Sonnet 4.6 --- src/apps/epic/static/apps/epic/sea.js | 5 ++++- src/static_src/scss/_card-deck.scss | 30 ++++++++++++++++++++------- 2 files changed, 27 insertions(+), 8 deletions(-) diff --git a/src/apps/epic/static/apps/epic/sea.js b/src/apps/epic/static/apps/epic/sea.js index 51a8dd9..3865b5d 100644 --- a/src/apps/epic/static/apps/epic/sea.js +++ b/src/apps/epic/static/apps/epic/sea.js @@ -269,7 +269,10 @@ var SeaDeal = (function () { if (!pos || !_seaHand[pos]) return; if (slot.classList.contains('sea-card-slot--focused')) { - // Second tap/click — open modal + // Second tap/click — dismiss selection glow, open modal + overlay.querySelectorAll('.sea-card-slot--focused').forEach(function (s) { + s.classList.remove('sea-card-slot--focused'); + }); var h = _seaHand[pos]; _viewingPos = pos; _populate(h.card, h.isLevity); diff --git a/src/static_src/scss/_card-deck.scss b/src/static_src/scss/_card-deck.scss index 5adc783..d6508ad 100644 --- a/src/static_src/scss/_card-deck.scss +++ b/src/static_src/scss/_card-deck.scss @@ -835,28 +835,44 @@ $sea-card-h: 6.5rem; // Levity drawn card — secUser bg, priUser text + border (matches stage card polarity) .sea-card-slot--filled.sea-card-slot--levity { color: rgba(var(--priUser), 0.9); - background: rgba(var(--secUser), 0.85); + background: rgba(var(--secUser), 1); border-color: rgba(var(--priUser), 1); } // Gravity drawn card — priUser bg, secUser text + border .sea-card-slot--filled.sea-card-slot--gravity { color: rgba(var(--secUser), 0.9); - background: rgba(var(--priUser), 0.85); + background: rgba(var(--priUser), 1); border-color: rgba(var(--secUser), 0.6); } // Deposited — fully opaque by default; Cover/Cross are semi-transparent -.sea-card-slot--visible { opacity: 1; transition: opacity 1s ease; } +.sea-card-slot--visible { opacity: 1; transition: opacity 1s ease, box-shadow 0.15s ease; } -.sea-pos-cover .sea-card-slot--visible { opacity: 0.3; } -.sea-pos-cross .sea-card-slot--visible { opacity: 0.15; } +@keyframes sea-cover-appear { + 0% { opacity: 0; } + 50% { opacity: 1; } + 100% { opacity: 0.3; } +} + +@keyframes sea-cross-appear { + 0% { opacity: 0; } + 50% { opacity: 1; } + 100% { opacity: 0.15; } +} + +.sea-pos-cover .sea-card-slot--visible { opacity: 0.3; animation: sea-cover-appear 2s ease; } +.sea-pos-cross .sea-card-slot--visible { opacity: 0.15; animation: sea-cross-appear 2s ease; } // Hover: reveal fully (snappy) .sea-pos-cover .sea-card-slot--visible:hover, .sea-pos-cross .sea-card-slot--visible:hover { opacity: 1; transition: opacity 0.15s ease; } -// Focused (first tap): persist at opacity 1 until clicked outside -.sea-card-slot--focused { opacity: 1 !important; transition: opacity 0.15s ease; } +// Focused (first tap): persist at opacity 1 + selection glow until modal opens +.sea-card-slot--focused { + opacity: 1 !important; + transition: opacity 0.15s ease, box-shadow 0.15s ease; + box-shadow: 0 0 2rem 0.75rem rgba(var(--ninUser), 0.35), 0 0 0.4rem rgba(0, 0, 0, 0.85); +} // Cover + Cross — absolutely overlaid on the Sig card in .sea-pos-center .sea-pos-center { position: relative; }