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

@@ -127,8 +127,13 @@ var SigSelect = (function () {
stageCard.querySelector('.sig-qualifier-above').textContent = isMajor ? '' : qualifier;
stageCard.querySelector('.sig-qualifier-below').textContent = isMajor ? qualifier : '';
// Reversed face — same qualifier, polarity-resolved reversal title
stageCard.querySelector('.fan-card-reversal-qualifier').textContent = qualifier;
stageCard.querySelector('.fan-card-reversal-name').textContent = cardEl.dataset.reversal || '';
// Populate stat block keyword faces and reset to upright
statBlock.classList.remove('is-reversed');
stageCard.classList.remove('stage-card--reversed');
_populateKeywordList(
statBlock.querySelector('#id_stat_keywords_upright'),
cardEl.dataset.keywordsUpright
@@ -613,6 +618,7 @@ var SigSelect = (function () {
_flipBtn.addEventListener('click', function () {
if (_flipBtn.classList.contains('btn-disabled')) return;
statBlock.classList.toggle('is-reversed');
stageCard.classList.toggle('stage-card--reversed');
});
cautionEl = stage.querySelector('.sig-caution-tooltip');