discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

PICK SEA slot interaction: cover/cross appear animation; focused glow; card bg fully opaque

Browse Source 
- 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 <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-04-29 11:47:50 -04:00
parent 7712cf1d56
commit 98354fd27b
2 changed files with 27 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/apps/epic/static/apps/epic/sea.js
View File

@@ -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);

30
src/static_src/scss/_card-deck.scss
View File

@@ -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; }