SIG SELECT: fix major arcana reversed face slot order — title first, qualifier second after spin — TDD

DOM-second flex child appears first after card rotates 180°; swap qualifier/name slot
assignments for major arcana so reversed face reads "The Schizo, / Enlightened" not
"Enlightened / The Schizo"; spec updated to document the slot-swap invariant

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

src/apps/epic/migrations/0008_rename_energies_operations_seed_schizo.py

@@ -3,18 +3,20 @@ seed The Schizo (Earthman major arcana card 1) with Energy and Operation entries
 """
 from django.db import migrations
 
+CR = '<span class="card-ref">{}</span>'
+
 SCHIZO_ENERGIES = [
-    {"type": "LIBIDO",   "effect": "When encountering territorial Libido, may convert Emanation into 1. The Priest."},
-    {"type": "NUMEN",    "effect": "When encountering despotic Numen, may convert Emanation into 1. The Powerful."},
-    {"type": "VOLUPTAS", "effect": "When encountering axiomatic Voluptas, may convert Emanation into 1. The Normal."},
-    {"type": "VOLUPTAS", "effect": "When encountering annihilating Voluptas, may convert Emanation into 1. The Surrendered."},
+    {"type": "LIBIDO",   "effect": f'When encountering territorial Libido, may convert Emanation into {CR.format("1. The Priest")}.'},
+    {"type": "NUMEN",    "effect": f'When encountering despotic Numen, may convert Emanation into {CR.format("1. The Powerful")}.'},
+    {"type": "VOLUPTAS", "effect": f'When encountering axiomatic Voluptas, may convert Emanation into {CR.format("1. The Normal")}.'},
+    {"type": "VOLUPTAS", "effect": f'When encountering annihilating Voluptas, may convert Emanation into {CR.format("1. The Surrendered")}.'},
 ]
 
 SCHIZO_OPERATIONS = [
-    {"type": "COVER",  "effect": "When covering 2. The Occultist she may choose, by converting her own Reversal into 2. Pestilence, to convert this Reversal into 1. The Pervert."},
-    {"type": "CROWN",  "effect": "When crowning 3. The Despot she may choose, by converting her own Reversal into 3. War, to convert this Reversal into 1. The Paranoiac."},
-    {"type": "BEHIND", "effect": "When behind 4. The Capitalist he may choose, by converting his own Reversal into 4. Famine, to convert this Reversal into 1. The Neurotic."},
-    {"type": "BEFORE", "effect": "When before 5. The Fascist he may choose, by converting his own Reversal into 5. Death, to convert this Reversal into 1. The Suicidal."},
+    {"type": "COVER",  "effect": f'When covering {CR.format("2. The Occultist")} she may choose, by converting her own Reversal into {CR.format("2. Pestilence")}, to convert this Reversal into {CR.format("1. The Pervert")}.'},
+    {"type": "CROWN",  "effect": f'When crowning {CR.format("3. The Despot")} she may choose, by converting her own Reversal into {CR.format("3. War")}, to convert this Reversal into {CR.format("1. The Paranoiac")}.'},
+    {"type": "BEHIND", "effect": f'When behind {CR.format("4. The Capitalist")} he may choose, by converting his own Reversal into {CR.format("4. Famine")}, to convert this Reversal into {CR.format("1. The Neurotic")}.'},
+    {"type": "BEFORE", "effect": f'When before {CR.format("5. The Fascist")} he may choose, by converting his own Reversal into {CR.format("5. Death")}, to convert this Reversal into {CR.format("1. The Suicidal")}.'},
 ]
 
 

src/apps/epic/migrations/0009_schizo_card_ref_spans.py

@@ -0,0 +1,53 @@
+"""Re-seed The Schizo's energies and operations with .card-ref HTML spans."""
+from django.db import migrations
+
+CR = '<span class="card-ref">{}</span>'
+
+SCHIZO_ENERGIES = [
+    {"type": "LIBIDO",   "effect": f'When encountering territorial Libido, may convert Emanation into {CR.format("1. The Priest")}.'},
+    {"type": "NUMEN",    "effect": f'When encountering despotic Numen, may convert Emanation into {CR.format("1. The Powerful")}.'},
+    {"type": "VOLUPTAS", "effect": f'When encountering axiomatic Voluptas, may convert Emanation into {CR.format("1. The Normal")}.'},
+    {"type": "VOLUPTAS", "effect": f'When encountering annihilating Voluptas, may convert Emanation into {CR.format("1. The Surrendered")}.'},
+]
+
+SCHIZO_OPERATIONS = [
+    {"type": "COVER",  "effect": f'When covering {CR.format("2. The Occultist")} she may choose, by converting her own Reversal into {CR.format("2. Pestilence")}, to convert this Reversal into {CR.format("1. The Pervert")}.'},
+    {"type": "CROWN",  "effect": f'When crowning {CR.format("3. The Despot")} she may choose, by converting her own Reversal into {CR.format("3. War")}, to convert this Reversal into {CR.format("1. The Paranoiac")}.'},
+    {"type": "BEHIND", "effect": f'When behind {CR.format("4. The Capitalist")} he may choose, by converting his own Reversal into {CR.format("4. Famine")}, to convert this Reversal into {CR.format("1. The Neurotic")}.'},
+    {"type": "BEFORE", "effect": f'When before {CR.format("5. The Fascist")} he may choose, by converting his own Reversal into {CR.format("5. Death")}, to convert this Reversal into {CR.format("1. The Suicidal")}.'},
+]
+
+
+def seed_schizo(apps, schema_editor):
+    TarotCard = apps.get_model("epic", "TarotCard")
+    DeckVariant = apps.get_model("epic", "DeckVariant")
+    try:
+        earthman = DeckVariant.objects.get(slug="earthman")
+    except DeckVariant.DoesNotExist:
+        return
+    TarotCard.objects.filter(
+        deck_variant=earthman, arcana="MAJOR", number=1,
+    ).update(energies=SCHIZO_ENERGIES, operations=SCHIZO_OPERATIONS)
+
+
+def clear_schizo(apps, schema_editor):
+    TarotCard = apps.get_model("epic", "TarotCard")
+    DeckVariant = apps.get_model("epic", "DeckVariant")
+    try:
+        earthman = DeckVariant.objects.get(slug="earthman")
+    except DeckVariant.DoesNotExist:
+        return
+    TarotCard.objects.filter(
+        deck_variant=earthman, arcana="MAJOR", number=1,
+    ).update(energies=[], operations=[])
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("epic", "0008_rename_energies_operations_seed_schizo"),
+    ]
+
+    operations = [
+        migrations.RunPython(seed_schizo, reverse_code=clear_schizo),
+    ]

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

@@ -47,7 +47,7 @@ var SigSelect = (function () {
 
     function _renderCaution() {
         if (_cautionData.length === 0) {
-            cautionTitle.textContent = 'Energies';
+            cautionTitle.textContent = 'Energy';
             cautionTitle.className = 'sig-info-title sig-info-title--energies';
             if (cautionTypeEl) cautionTypeEl.textContent = '';
             cautionEffect.innerHTML = '<em>No interactions defined.</em>';
@@ -58,7 +58,7 @@ var SigSelect = (function () {
         }
         var entry = _cautionData[_cautionIdx];
         var isEnergies = entry.category === 'energies';
-        cautionTitle.textContent = isEnergies ? 'Energies' : 'Operations';
+        cautionTitle.textContent = isEnergies ? 'Energy' : 'Operation';
         cautionTitle.className = 'sig-info-title sig-info-title--' + entry.category;
         if (cautionTypeEl) cautionTypeEl.textContent = entry.type || '';
         cautionEffect.innerHTML = entry.effect || '';
@@ -148,8 +148,10 @@ var SigSelect = (function () {
         // - Non-major w/o reversal:  fall back to mirroring the polarity qualifier
         var reversal = cardEl.dataset.reversal || '';
         if (isMajor) {
-            stageCard.querySelector('.fan-card-reversal-qualifier').textContent = qualifier;
-            stageCard.querySelector('.fan-card-reversal-name').textContent = title;
+            // Slots are swapped vs. non-major: spin reverses DOM order visually,
+            // so qualifier-slot (DOM-second) appears first and name-slot (DOM-first) appears second.
+            stageCard.querySelector('.fan-card-reversal-qualifier').textContent = title + ',';
+            stageCard.querySelector('.fan-card-reversal-name').textContent = qualifier;
         } else if (reversal) {
             stageCard.querySelector('.fan-card-reversal-qualifier').textContent = reversal;
             stageCard.querySelector('.fan-card-reversal-name').textContent = title;

src/static/tests/SigSelectSpec.js

@@ -247,21 +247,21 @@ describe("SigSelect", () => {
             expect(infoEffect.querySelector(".card-ref").textContent).toBe("Card");
         });
 
-        it("energy entry sets title to 'Energies' with --energies modifier class", () => {
+        it("energy entry sets title to 'Energy' with --energies modifier class", () => {
             card.dataset.energies = JSON.stringify([
                 { type: "NUMEN", effect: "An energy entry." }
             ]);
             openFYI();
-            expect(infoTitle.textContent).toBe("Energies");
+            expect(infoTitle.textContent).toBe("Energy");
             expect(infoTitle.classList.contains("sig-info-title--energies")).toBe(true);
         });
 
-        it("operation entry sets title to 'Operations' with --operations modifier class", () => {
+        it("operation entry sets title to 'Operation' with --operations modifier class", () => {
             card.dataset.operations = JSON.stringify([
                 { type: "COVER", effect: "An operation entry." }
             ]);
             openFYI();
-            expect(infoTitle.textContent).toBe("Operations");
+            expect(infoTitle.textContent).toBe("Operation");
             expect(infoTitle.classList.contains("sig-info-title--operations")).toBe(true);
         });
 
@@ -285,7 +285,7 @@ describe("SigSelect", () => {
             card.dataset.operations  = JSON.stringify([{ type: "COVER",  effect: "O1" }]);
             openFYI();
             infoNext.dispatchEvent(new MouseEvent("click", { bubbles: true }));
-            expect(infoTitle.textContent).toBe("Operations");
+            expect(infoTitle.textContent).toBe("Operation");
             expect(infoTitle.classList.contains("sig-info-title--operations")).toBe(true);
             expect(infoTitle.classList.contains("sig-info-title--energies")).toBe(false);
         });
@@ -548,13 +548,14 @@ describe("SigSelect", () => {
                 .toBe(card.dataset.nameTitle);
         });
 
-        it("major arcana reversed face: polarity qualifier + card title (concept name in FYI)", () => {
+        it("major arcana reversed face: title, in qualifier slot (first after spin); qualifier in name slot (second)", () => {
             makeFixture({ polarity: "levity", userRole: "PC" });
             card.dataset.arcana = "Major Arcana";
             card.dataset.nameTitle = "The Schizo";
             hover();
-            expect(stageCard.querySelector(".fan-card-reversal-qualifier").textContent).toBe("Elevated");
-            expect(stageCard.querySelector(".fan-card-reversal-name").textContent).toBe("The Schizo");
+            // DOM-second element appears first after card spins — so title goes in qualifier slot
+            expect(stageCard.querySelector(".fan-card-reversal-qualifier").textContent).toBe("The Schizo,");
+            expect(stageCard.querySelector(".fan-card-reversal-name").textContent).toBe("Elevated");
         });
 
         it("non-major without data-reversal: reversal-name empty, qualifier mirrors polarity", () => {

src/static_src/scss/_card-deck.scss

@@ -286,7 +286,7 @@ html:has(.sig-backdrop) {
         }
 
         // Caution tooltip — covers the entire stat block (inset: 0), z-index above buttons.
-        .sig-info-tooltip {
+        .sig-info {
             display: none;
             position: absolute;
             inset: 0;
@@ -311,7 +311,7 @@ html:has(.sig-backdrop) {
             font-size: calc(var(--sig-card-w, 120px) * 0.093);
             font-weight: 700;
             margin: 0;
-            &--energies   { color: rgba(var(--terUser), 1); }
+            &--energies   { color: rgba(var(--quaUser), 1); }
             &--operations { color: rgba(var(--quaUser), 1); }
         }
 
@@ -390,7 +390,7 @@ html:has(.sig-backdrop) {
 
     &.sig-stage--frozen .sig-stat-block { display: block; }
     &.sig-info-open .sig-stat-block {
-        .sig-info-tooltip { display: flex; }
+        .sig-info { display: flex; }
         .sig-info-prev, .sig-info-next { display: inline-flex; }
     }
 }
@@ -620,7 +620,7 @@ html:has(.sig-backdrop) {
     }
     // Caution tooltip: --tooltip-bg is black so priUser text (dark) would be invisible —
     // override to secUser (light) so body text reads against the dark backdrop.
-    .sig-info-tooltip { color: rgba(var(--secUser), 1); }
+    .sig-info { color: rgba(var(--secUser), 1); }
     // Polarity qualifier: terUser for gravity (quiUser is levity's equivalent)
     .sig-qualifier-above,
     .sig-qualifier-below { color: rgba(var(--terUser), 1); }

src/static_src/tests/SigSelectSpec.js

@@ -247,21 +247,21 @@ describe("SigSelect", () => {
             expect(infoEffect.querySelector(".card-ref").textContent).toBe("Card");
         });
 
-        it("energy entry sets title to 'Energies' with --energies modifier class", () => {
+        it("energy entry sets title to 'Energy' with --energies modifier class", () => {
             card.dataset.energies = JSON.stringify([
                 { type: "NUMEN", effect: "An energy entry." }
             ]);
             openFYI();
-            expect(infoTitle.textContent).toBe("Energies");
+            expect(infoTitle.textContent).toBe("Energy");
             expect(infoTitle.classList.contains("sig-info-title--energies")).toBe(true);
         });
 
-        it("operation entry sets title to 'Operations' with --operations modifier class", () => {
+        it("operation entry sets title to 'Operation' with --operations modifier class", () => {
             card.dataset.operations = JSON.stringify([
                 { type: "COVER", effect: "An operation entry." }
             ]);
             openFYI();
-            expect(infoTitle.textContent).toBe("Operations");
+            expect(infoTitle.textContent).toBe("Operation");
             expect(infoTitle.classList.contains("sig-info-title--operations")).toBe(true);
         });
 
@@ -285,7 +285,7 @@ describe("SigSelect", () => {
             card.dataset.operations  = JSON.stringify([{ type: "COVER",  effect: "O1" }]);
             openFYI();
             infoNext.dispatchEvent(new MouseEvent("click", { bubbles: true }));
-            expect(infoTitle.textContent).toBe("Operations");
+            expect(infoTitle.textContent).toBe("Operation");
             expect(infoTitle.classList.contains("sig-info-title--operations")).toBe(true);
             expect(infoTitle.classList.contains("sig-info-title--energies")).toBe(false);
         });
@@ -548,13 +548,14 @@ describe("SigSelect", () => {
                 .toBe(card.dataset.nameTitle);
         });
 
-        it("major arcana reversed face: polarity qualifier + card title (concept name in FYI)", () => {
+        it("major arcana reversed face: title, in qualifier slot (first after spin); qualifier in name slot (second)", () => {
             makeFixture({ polarity: "levity", userRole: "PC" });
             card.dataset.arcana = "Major Arcana";
             card.dataset.nameTitle = "The Schizo";
             hover();
-            expect(stageCard.querySelector(".fan-card-reversal-qualifier").textContent).toBe("Elevated");
-            expect(stageCard.querySelector(".fan-card-reversal-name").textContent).toBe("The Schizo");
+            // DOM-second element appears first after card spins — so title goes in qualifier slot
+            expect(stageCard.querySelector(".fan-card-reversal-qualifier").textContent).toBe("The Schizo,");
+            expect(stageCard.querySelector(".fan-card-reversal-name").textContent).toBe("Elevated");
         });
 
         it("non-major without data-reversal: reversal-name empty, qualifier mirrors polarity", () => {