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

PICK SEA styling: deck backs, card rank+icon display, fa-hand-dots Major Arcana — TDD

Browse Source 
- migration 0010: icon='fa-hand-dots' for all Earthman Major Arcana number >= 2
  (Nomad/Schizo kept empty for distinct icons later)
- sea_deck view: switch from .values() to model instances; serializes corner_rank +
  suit_icon computed properties alongside DB fields
- sea overlay JS: _fillPos() renders <span class=fan-corner-rank> + <i fa-solid> HTML;
  tracks levity/gravity source via sea-card-slot--levity/gravity class; _reset() strips
  polarity classes; _showOk/_hideOk toggle sea-deck-stack--active
- template: gravity deck before levity; OK btn inside .sea-stack-face (absolute center);
  DECKS label (vertical-rl CCW) on stacks left; Gravity/Levity names under each pile
- _card-deck.scss: .sea-stacks-label (vertical-rl); .sea-stack-ok (absolute center on face);
  .sea-stack-name w. --quaUser/--terUser; glow on hover+:active+--active class —
  --ninUser for levity, --quaUser for gravity; sea-sig-card compact rank+icon display
- sea_partial view: ctx['room'] fix carried in from Sprint B

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-28 23:30:07 -04:00
parent 132e60864e
commit 6d75b9541f
4 changed files with 190 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -801,14 +801,29 @@ $sea-card-h: 6.5rem;
.sea-card-slot--filled {
border-style: solid;
border-color: rgba(var(--secUser), 0.6);
flex-direction: column;
gap: 0.2rem;
.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)
.sea-card-slot--filled.sea-card-slot--levity {
background: rgba(var(--priUser), 1);
color: rgba(var(--terUser), 1);
font-size: 0.55rem;
font-weight: 600;
text-align: center;
padding: 0.2rem;
line-height: 1.2;
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);
}
// Cover + Cross — absolutely overlaid on the Sig card in .sea-pos-center
@@ -828,6 +843,23 @@ $sea-card-h: 6.5rem;
.sea-pos-cross .sea-card-slot { transform: rotate(90deg); }
// Sig card in center slot — compact rank + icon display
.sea-sig-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.2rem;
.fan-corner-rank {
font-size: 1.2rem;
font-weight: 700;
line-height: 1;
color: rgba(var(--secUser), 0.85);
}
i { font-size: 1rem; color: rgba(var(--secUser), 0.75); }
}
// .sig-stage-card is normally scoped inside .sig-stage — re-apply the card shell
// here so it renders correctly outside that context.
.sea-cross .sig-stage-card {
@@ -896,40 +928,86 @@ $sea-card-h: 6.5rem;
option { background: rgba(var(--priUser), 1); }
}
// Deck stacks — two face-down piles side by side
// Deck stacks — DECKS label + gravity + levity piles
.sea-stacks {
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
gap: 0.75rem;
margin: 1rem 0;
}
.sea-stacks-label {
writing-mode: vertical-rl;
transform: rotate(180deg);
text-transform: uppercase;
font-size: 0.6rem;
letter-spacing: 0.15em;
opacity: 0.45;
white-space: nowrap;
flex-shrink: 0;
}
.sea-deck-stack {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
gap: 0.35rem;
cursor: pointer;
}
.sea-stack-face {
position: relative;
width: $sea-card-w;
height: $sea-card-h;
border-radius: 0.3rem;
background: rgba(var(--duoUser), 0.8);
border: 0.12rem solid rgba(var(--secUser), 0.5);
box-shadow: 0 2px 0 rgba(0,0,0,0.2), 0 4px 0 rgba(var(--duoUser),0.7), 0 5px 0 rgba(0,0,0,0.15);
border: 0.15rem solid;
display: flex;
align-items: center;
justify-content: center;
transition: box-shadow 0.15s;
.sea-deck-stack:hover & {
box-shadow: 0 2px 0 rgba(0,0,0,0.2), 0 4px 0 rgba(var(--duoUser),0.7), 0 5px 0 rgba(0,0,0,0.15),
0 0 0.5rem rgba(var(--terUser), 0.4);
}
}
.sea-deck-stack--levity .sea-stack-face { border-color: rgba(var(--terUser), 0.5); }
.sea-deck-stack--gravity .sea-stack-face { border-color: rgba(var(--quaUser), 0.5); }
.sea-stack-ok {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 5;
}
.sea-stack-name {
font-size: 0.6rem;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
}
.sea-deck-stack--gravity .sea-stack-name { color: rgba(var(--quaUser), 1); }
.sea-deck-stack--levity .sea-stack-name { color: rgba(var(--terUser), 1); }
// Deck backs — face-down pile colour identifies polarity
$_sea-shadow: 1px 2px 0 rgba(0,0,0,0.7), 0 4px 0 rgba(0,0,0,0.18), 2px 5px 5px rgba(0,0,0,0.5);
$_glow-levity: 0 0 0.8rem 0.15rem rgba(var(--ninUser), 0.6);
$_glow-gravity: 0 0 0.8rem 0.15rem rgba(var(--quaUser), 0.6);
.sea-deck-stack--levity .sea-stack-face {
background: rgba(var(--terUser), 0.88);
border-color: rgba(var(--ninUser), 0.65);
box-shadow: $_sea-shadow;
}
.sea-deck-stack--gravity .sea-stack-face {
background: rgba(var(--quiUser), 0.88);
border-color: rgba(var(--quaUser), 0.65);
box-shadow: $_sea-shadow;
}
// Glow on hover, :active, and while OK is showing (--active class set by JS)
.sea-deck-stack--levity:hover .sea-stack-face,
.sea-deck-stack--levity:active .sea-stack-face,
.sea-deck-stack--levity.sea-deck-stack--active .sea-stack-face { box-shadow: $_sea-shadow, $_glow-levity; }
.sea-deck-stack--gravity:hover .sea-stack-face,
.sea-deck-stack--gravity:active .sea-stack-face,
.sea-deck-stack--gravity.sea-deck-stack--active .sea-stack-face { box-shadow: $_sea-shadow, $_glow-gravity; }
// Form action row — LOCK HAND + DEL side by side at the bottom
.sea-form-actions {