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

PICK SEA slot interaction: polarity card bg/border, cross-slot opacity fix, two-step tap; _hideOk ReferenceError removed from sea.js; Jasmine spec updated for two-step; migration 0012 PENTACLES cleanup — TDD
Some checks failed
ci/woodpecker/push/pyswiss Pipeline was successful
Details
ci/woodpecker/push/main Pipeline failed
Details

Browse Source 
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 02:30:59 -04:00
parent 08aa4dc819
commit e084bcc2d5
9 changed files with 186 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -813,36 +813,50 @@ $sea-card-h: 6.5rem;
}
.sea-card-slot--crossing {
width: $sea-card-h; // rotated — swap w/h
height: $sea-card-w;
// Keep portrait dimensions; rotate(90deg) in .sea-pos-cross supplies the landscape visual.
// Swapping w/h here caused flex-shrink to squish the longer edge to fit the 4rem container.
width: $sea-card-w;
height: $sea-card-h;
}
.sea-card-slot--filled {
border-style: solid;
// Start invisible; transition to .sea-card-slot--visible on deposit
opacity: 0;
transition: opacity 1s ease;
border: 0.15rem solid transparent;
border-radius: 0.3rem;
flex-direction: column;
gap: 0.2rem;
gap: 0.15rem;
.fan-corner-rank {
font-size: 1.15rem;
font-weight: 700;
line-height: 1;
}
.fan-corner-rank { font-size: 1.15rem; font-weight: 700; line-height: 1; }
i { font-size: 0.9rem; }
}
// Levity drawn card — standard polarity (priUser bg, secUser text)
// Levity drawn card — secUser bg, priUser text + border (matches stage card polarity)
.sea-card-slot--filled.sea-card-slot--levity {
background: rgba(var(--priUser), 1);
color: rgba(var(--priUser), 0.9);
background: rgba(var(--secUser), 0.85);
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);
border-color: rgba(var(--secUser), 0.6);
color: rgba(var(--secUser), 0.85);
}
// Gravity drawn card — inverted polarity (secUser bg, priUser text)
.sea-card-slot--filled.sea-card-slot--gravity {
background: rgba(var(--secUser), 0.9);
border-color: rgba(var(--priUser), 0.4);
color: rgba(var(--priUser), 0.9);
}
// Deposited — fully opaque by default; Cover/Cross are semi-transparent
.sea-card-slot--visible { opacity: 1; transition: opacity 1s ease; }
.sea-pos-cover .sea-card-slot--visible { opacity: 0.3; }
.sea-pos-cross .sea-card-slot--visible { opacity: 0.15; }
// 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; }
// Cover + Cross — absolutely overlaid on the Sig card in .sea-pos-center
.sea-pos-center { position: relative; }
@@ -855,10 +869,16 @@ $sea-card-h: 6.5rem;
align-items: center;
justify-content: center;
pointer-events: none;
.sea-card-slot { pointer-events: auto; }
}
.sea-pos-cover { z-index: 3; } // above sig (z-index: 2)
.sea-pos-cross { z-index: 4; } // above cover
// Empty Cover/Cross slots are invisible — they reveal only once a card is deposited
.sea-pos-cover .sea-card-slot--empty,
.sea-pos-cross .sea-card-slot--empty { opacity: 0; pointer-events: none; }
.sea-pos-cross .sea-card-slot { transform: rotate(90deg); }
// Sig card in center slot — compact rank + icon display; tilted CCW so Cover slot peeks through
@@ -1076,6 +1096,8 @@ $_glow-gravity: 0 0 0.8rem 0.15rem rgba(var(--quaUser), 0.6);
position: absolute;
inset: 0;
cursor: pointer;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(4px);
}
.sea-stage-content {
@@ -1103,6 +1125,7 @@ $_glow-gravity: 0 0 0.8rem 0.15rem rgba(var(--quaUser), 0.6);
padding: 0.25rem;
overflow: hidden;
transform-style: preserve-3d;
transition: transform 0.4s ease;
// Flip-in animation when stage opens
&--shown {
@@ -1159,6 +1182,32 @@ $_glow-gravity: 0 0 0.8rem 0.15rem rgba(var(--quaUser), 0.6);
100% { transform: perspective(600px) rotateY(0deg) scale(1); opacity: 1; }
}
// Sea stage card title — polarity-specific colour + shared glow
$_sea-title-shadow: 1px 1px 0 rgba(0,0,0,1), 0 0 0.25rem rgba(var(--ninUser), 0.25);
$_sea-title-els: '.fan-card-name, .sig-qualifier-above, .sig-qualifier-below, .fan-card-reversal-name, .fan-card-reversal-qualifier';
.sea-stage--levity .sea-stage-card {
background: rgba(var(--secUser), 1);
border-color: rgba(var(--priUser), 1);
color: rgba(var(--priUser), 1);
.fan-card-arcana,
.fan-card-corner {
color: rgba(var(--priUser), 1);
}
.fan-card-name, .sig-qualifier-above, .sig-qualifier-below,
.fan-card-reversal-name, .fan-card-reversal-qualifier {
color: rgba(var(--quiUser), 1);
text-shadow: $_sea-title-shadow;
}
}
.sea-stage--gravity .sea-stage-card {
.fan-card-name, .sig-qualifier-above, .sig-qualifier-below,
.fan-card-reversal-name, .fan-card-reversal-qualifier {
color: rgba(var(--terUser), 1);
text-shadow: $_sea-title-shadow;
}
}
// Sea stat block — reuses sig-select stat-block sizing, scoped to sea-stage
.sea-stage-content .sea-stat-block {
flex: 0 0 auto;
@@ -1195,7 +1244,6 @@ $_glow-gravity: 0 0 0.8rem 0.15rem rgba(var(--quaUser), 0.6);
gap: 0.4rem;
overflow-y: auto;
display: none;
&[style*="display"]:not([style*="none"]) { display: flex; }
}
.sea-fyi-prev,