SIG SELECT: FLIP→SPIN rename; stage-card reversal JS — TDD

- Template: FLIP btn label → SPIN; .btn-reverse class + .sig-flip-btn kept
- _button-pad.scss: .btn-reverse restyled w. cyan (--priCy/--terCy); .btn-tip
  removed; button section comments added (BIG, BYE, FYI, OK, SPIN etc.)
- sig-select.js: SPIN/FLIP handler also toggles .stage-card--reversed on
  stageCard; updateStage() populates .fan-card-reversal-name (data-reversal)
  + .fan-card-reversal-qualifier (polarity qualifier); resets .stage-card--reversed
  on each new hover — TDD
- SigSelectSpec.js: SPIN card animation describe block (7 specs); spec
  descriptions updated FLIP→SPIN; fixture gains reversal elements +
  data-reversal attr; 235 Jasmine specs green

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 16:51:53 -04:00
parent 759ce8d3e4
commit 0522b5c126
5 changed files with 196 additions and 32 deletions

View File

@@ -24,6 +24,7 @@
border: 0.18rem solid rgba(var(--priUser), 1);
}
// BIG btn
&.btn-primary {
width: 4rem;
height: 4rem;
@@ -70,6 +71,7 @@
}
}
// BYE btn
&.btn-abandon {
color: rgba(var(--priBl), 1);
border-color: rgba(var(--priBl), 1);
@@ -105,6 +107,7 @@
}
}
// DEL btn
&.btn-cancel {
color: rgba(var(--priOr), 1);
border-color: rgba(var(--priOr), 1);
@@ -139,6 +142,7 @@
}
}
// FYI btn
&.btn-caution {
color: rgba(var(--priYl), 1);
border-color: rgba(var(--priYl), 1);
@@ -174,6 +178,7 @@
}
}
// OK btn
&.btn-confirm {
color: rgba(var(--priGn), 1);
border-color: rgba(var(--priGn), 1);
@@ -209,6 +214,7 @@
}
}
// DEL btn
&.btn-danger {
color: rgba(var(--priRd), 1);
background-color: rgba(var(--terRd), 1);
@@ -286,6 +292,7 @@
font-size: 0.75rem; // 0.63rem × 1.2
}
// PRV btn
&.btn-nav-left {
color: rgba(var(--priFs), 1);
border-color: rgba(var(--priFs), 1);
@@ -321,6 +328,7 @@
}
}
// NXT btn
&.btn-nav-right {
color: rgba(var(--priLm), 1);
border-color: rgba(var(--priLm), 1);
@@ -356,6 +364,7 @@
}
}
// DON btn
&.btn-equip {
color: rgba(var(--priTk), 1);
border-color: rgba(var(--priTk), 1);
@@ -391,6 +400,7 @@
}
}
// DOFF btn
&.btn-unequip {
color: rgba(var(--priMe), 1);
border-color: rgba(var(--priMe), 1);
@@ -426,7 +436,8 @@
}
}
&.btn-reverse {
// FLIP btn
&.btn-reveal {
color: rgba(var(--priCy), 1);
border-color: rgba(var(--priCy), 1);
background-color: rgba(var(--terCy), 1);
@@ -461,37 +472,38 @@
}
}
&.btn-tip {
color: rgba(var(--priLm), 1);
border-color: rgba(var(--priLm), 1);
background-color: rgba(var(--terLm), 1);
// SPIN btn
&.btn-reverse {
color: rgba(var(--priCy), 1);
border-color: rgba(var(--priCy), 1);
background-color: rgba(var(--terCy), 1);
box-shadow:
0.1rem 0.1rem 0.12rem rgba(var(--terLm), 0.25),
0.1rem 0.1rem 0.12rem rgba(var(--terCy), 0.25),
0.12rem 0.12rem 0.25rem rgba(0, 0, 0, 0.25),
0.25rem 0.25rem 0.25rem rgba(var(--terLm), 0.12)
0.25rem 0.25rem 0.25rem rgba(var(--terCy), 0.12)
;
&:hover {
text-shadow:
0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25),
0 0 1rem rgba(var(--priLm), 1)
0 0 1rem rgba(var(--priCy), 1)
;
box-shadow:
0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25),
0 0 0.5rem rgba(var(--priLm), 0.12)
0 0 0.5rem rgba(var(--priCy), 0.12)
;
}
&:active {
border: 0.18rem solid rgba(var(--priLm), 1);
border: 0.18rem solid rgba(var(--priCy), 1);
text-shadow:
-0.1rem -0.1rem 0.25rem rgba(0, 0, 0, 0.25),
0 0 0.12rem rgba(var(--priLm), 1)
0 0 0.12rem rgba(var(--priCy), 1)
;
box-shadow:
-0.1rem -0.1rem 0.12rem rgba(var(--terLm), 0.25),
-0.1rem -0.1rem 0.12rem rgba(var(--terCy), 0.25),
-0.1rem -0.1rem 0.12rem rgba(0, 0, 0, 0.25),
0 0 0.5rem rgba(var(--priLm), 0.12)
0 0 0.5rem rgba(var(--priCy), 0.12)
;
}
}