SIG SELECT sprint 1+2: SPIN animation; Emanation/Reversal; Ally Interaction FYI — TDD

Sprint 1 (template + SCSS):
- Stage card gains .fan-card-reversal-name + .fan-card-reversal-qualifier elements
  (pre-rotated 180° so they read forward after card spins); sig cards gain data-reversal attr
- _card-deck.scss: Z-axis rotate(180deg) spin on .stage-card--reversed; reversed elements
  dim @ opacity 0.25 normally, flip to 1 when card is spun; upright content dims in return
- Stat face labels: Upright→Emanation, Reversed→Reversal
- Fixture updated: Emanation/Reversal labels; reversal elements + data-reversal attr

Sprint 2 (FYI from mechanisms + articulations):
- sig-select.js: _openCaution() now parses data-mechanisms + data-articulations (concat)
  instead of data-cautions; _renderCaution() sets .sig-caution-title from entry.category,
  .sig-caution-effect.innerHTML from entry.effect; empty fallback: "No ally interactions"
- TarotCard model: mechanisms_json + articulations_json @property (parallel to cautions_json)
- Template: data-cautions→data-mechanisms+data-articulations; "Caution!"→"" title (set by JS);
  "Rival Interaction"→"Ally Interaction"; shoptalk <p> removed
- SigSelectSpec.js: all old caution tests migrated to {category,effect} dict format +
  data-mechanisms; 7-spec "FYI from mechanisms + articulations" describe block; 242 specs green

Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>

src/apps/epic/models.py

@@ -341,6 +341,16 @@ class TarotCard(models.Model):
         import json
         return json.dumps(self.cautions)
 
+    @property
+    def mechanisms_json(self):
+        import json
+        return json.dumps(self.mechanisms)
+
+    @property
+    def articulations_json(self):
+        import json
+        return json.dumps(self.articulations)
+
     def __str__(self):
         return self.name
 

src/apps/epic/static/apps/epic/sig-select.js

@@ -6,7 +6,7 @@ var SigSelect = (function () {
     };
 
     var overlay, deckGrid, stage, stageCard, statBlock;
-    var cautionEl, cautionEffect, cautionPrev, cautionNext, cautionIndexEl;
+    var cautionEl, cautionEffect, cautionTitle, cautionPrev, cautionNext, cautionIndexEl;
     var _flipBtn, _cautionBtn, _flipOrigLabel, _cautionOrigLabel;
     var reserveUrl, readyUrl, userRole, userPolarity;
 
@@ -47,13 +47,16 @@ var SigSelect = (function () {
 
     function _renderCaution() {
         if (_cautionData.length === 0) {
-            cautionEffect.innerHTML = '<em>Rival interactions pending.</em>';
+            if (cautionTitle) cautionTitle.textContent = 'Ally Interaction';
+            cautionEffect.innerHTML = '<em>No ally interactions defined.</em>';
             cautionPrev.disabled = true;
             cautionNext.disabled = true;
             cautionIndexEl.textContent = '';
             return;
         }
-        cautionEffect.innerHTML = _cautionData[_cautionIdx];
+        var entry = _cautionData[_cautionIdx];
+        if (cautionTitle) cautionTitle.textContent = entry.category || '';
+        cautionEffect.innerHTML = entry.effect || '';
         cautionPrev.disabled = (_cautionData.length <= 1);
         cautionNext.disabled = (_cautionData.length <= 1);
         cautionIndexEl.textContent = _cautionData.length > 1
@@ -64,7 +67,9 @@ var SigSelect = (function () {
     function _openCaution() {
         if (!_focusedCardEl) return;
         try {
-            _cautionData = JSON.parse(_focusedCardEl.dataset.cautions || '[]');
+            var mechanisms    = JSON.parse(_focusedCardEl.dataset.mechanisms    || '[]');
+            var articulations = JSON.parse(_focusedCardEl.dataset.articulations || '[]');
+            _cautionData = mechanisms.concat(articulations);
         } catch (e) {
             _cautionData = [];
         }
@@ -623,6 +628,7 @@ var SigSelect = (function () {
 
         cautionEl       = stage.querySelector('.sig-caution-tooltip');
         cautionEffect   = cautionEl.querySelector('.sig-caution-effect');
+        cautionTitle    = cautionEl.querySelector('.sig-caution-title');
         cautionPrev     = statBlock.querySelector('.sig-caution-prev');
         cautionNext     = statBlock.querySelector('.sig-caution-next');
         cautionIndexEl  = cautionEl.querySelector('.sig-caution-index');