Sig select: caution tooltip, FLIP/FYI stat block, keyword display
- TarotCard.cautions JSONField + cautions_json property; migrations 0027–0029 seed The Schizo (number=1) with 4 rival-interaction cautions (Roman-numeral card refs: I. The Pervert / II. The Occultist, etc.) - Sig-select overlay: FLIP (stat-block toggle) + FYI (caution tooltip) buttons; nav PRV/NXT portaled outside tooltip at bottom corners (z-70); caution tooltip covers stat block (inset:0, z-60, Gaussian blur); tooltip click dismisses; FLIP/FYI fully dead while btn-disabled; nav wraps circularly (4/4 → 1/4, 1/4 → 4/4) - SCSS: btn-disabled specificity fix (!important); btn-nav-left/right classes; sig-caution-* layout; stat-face keyword lists - Jasmine suite expanded: stat block + FLIP (5 specs), caution tooltip (16 specs) including wrap-around and disabled-button behaviour - IT tests: TarotCardCautionsTest (5), SigSelectRenderingTest (8) - Role-card SVG icons added to static/ Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
@@ -290,9 +290,9 @@
|
||||
cursor: default !important;
|
||||
font-size: 1.2rem;
|
||||
padding-bottom: 0.1rem;
|
||||
color: rgba(var(--secUser), 0.25);
|
||||
background-color: rgba(var(--priUser), 1);
|
||||
border-color: rgba(var(--secUser), 0.25);
|
||||
color: rgba(var(--secUser), 0.25) !important;
|
||||
background-color: rgba(var(--priUser), 1) !important;
|
||||
border-color: rgba(var(--secUser), 0.25) !important;
|
||||
box-shadow:
|
||||
0.1rem 0.1rem 0.12rem rgba(var(--priUser), 0.5),
|
||||
0.12rem 0.12rem 0.25rem rgba(0, 0, 0, 0.25),
|
||||
@@ -322,4 +322,144 @@
|
||||
;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-nav-left {
|
||||
color: rgba(var(--priFs), 1);
|
||||
border-color: rgba(var(--priFs), 1);
|
||||
background-color: rgba(var(--terFs), 1);
|
||||
box-shadow:
|
||||
0.1rem 0.1rem 0.12rem rgba(var(--terFs), 0.25),
|
||||
0.12rem 0.12rem 0.25rem rgba(0, 0, 0, 0.25),
|
||||
0.25rem 0.25rem 0.25rem rgba(var(--terFs), 0.12)
|
||||
;
|
||||
|
||||
&:hover {
|
||||
text-shadow:
|
||||
0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25),
|
||||
0 0 1rem rgba(var(--priFs), 1)
|
||||
;
|
||||
box-shadow:
|
||||
0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25),
|
||||
0 0 0.5rem rgba(var(--priFs), 0.12)
|
||||
;
|
||||
}
|
||||
|
||||
&:active {
|
||||
border: 0.18rem solid rgba(var(--priFs), 1);
|
||||
text-shadow:
|
||||
-0.1rem -0.1rem 0.25rem rgba(0, 0, 0, 0.25),
|
||||
0 0 0.12rem rgba(var(--priFs), 1)
|
||||
;
|
||||
box-shadow:
|
||||
-0.1rem -0.1rem 0.12rem rgba(var(--terFs), 0.25),
|
||||
-0.1rem -0.1rem 0.12rem rgba(0, 0, 0, 0.25),
|
||||
0 0 0.5rem rgba(var(--priFs), 0.12)
|
||||
;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-nav-right {
|
||||
color: rgba(var(--priLm), 1);
|
||||
border-color: rgba(var(--priLm), 1);
|
||||
background-color: rgba(var(--terLm), 1);
|
||||
box-shadow:
|
||||
0.1rem 0.1rem 0.12rem rgba(var(--terLm), 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)
|
||||
;
|
||||
|
||||
&:hover {
|
||||
text-shadow:
|
||||
0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25),
|
||||
0 0 1rem rgba(var(--priLm), 1)
|
||||
;
|
||||
box-shadow:
|
||||
0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25),
|
||||
0 0 0.5rem rgba(var(--priLm), 0.12)
|
||||
;
|
||||
}
|
||||
|
||||
&:active {
|
||||
border: 0.18rem solid rgba(var(--priLm), 1);
|
||||
text-shadow:
|
||||
-0.1rem -0.1rem 0.25rem rgba(0, 0, 0, 0.25),
|
||||
0 0 0.12rem rgba(var(--priLm), 1)
|
||||
;
|
||||
box-shadow:
|
||||
-0.1rem -0.1rem 0.12rem rgba(var(--terLm), 0.25),
|
||||
-0.1rem -0.1rem 0.12rem rgba(0, 0, 0, 0.25),
|
||||
0 0 0.5rem rgba(var(--priLm), 0.12)
|
||||
;
|
||||
}
|
||||
}
|
||||
|
||||
&.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(--terCy), 0.25),
|
||||
0.12rem 0.12rem 0.25rem rgba(0, 0, 0, 0.25),
|
||||
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(--priCy), 1)
|
||||
;
|
||||
box-shadow:
|
||||
0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25),
|
||||
0 0 0.5rem rgba(var(--priCy), 0.12)
|
||||
;
|
||||
}
|
||||
|
||||
&:active {
|
||||
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(--priCy), 1)
|
||||
;
|
||||
box-shadow:
|
||||
-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(--priCy), 0.12)
|
||||
;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-tip {
|
||||
color: rgba(var(--priLm), 1);
|
||||
border-color: rgba(var(--priLm), 1);
|
||||
background-color: rgba(var(--terLm), 1);
|
||||
box-shadow:
|
||||
0.1rem 0.1rem 0.12rem rgba(var(--terLm), 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)
|
||||
;
|
||||
|
||||
&:hover {
|
||||
text-shadow:
|
||||
0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25),
|
||||
0 0 1rem rgba(var(--priLm), 1)
|
||||
;
|
||||
box-shadow:
|
||||
0.12rem 0.12rem 0.5rem rgba(0, 0, 0, 0.25),
|
||||
0 0 0.5rem rgba(var(--priLm), 0.12)
|
||||
;
|
||||
}
|
||||
|
||||
&:active {
|
||||
border: 0.18rem solid rgba(var(--priLm), 1);
|
||||
text-shadow:
|
||||
-0.1rem -0.1rem 0.25rem rgba(0, 0, 0, 0.25),
|
||||
0 0 0.12rem rgba(var(--priLm), 1)
|
||||
;
|
||||
box-shadow:
|
||||
-0.1rem -0.1rem 0.12rem rgba(var(--terLm), 0.25),
|
||||
-0.1rem -0.1rem 0.12rem rgba(0, 0, 0, 0.25),
|
||||
0 0 0.5rem rgba(var(--priLm), 0.12)
|
||||
;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -880,6 +880,7 @@ html:has(.sig-backdrop) {
|
||||
.sig-stage {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
@@ -955,9 +956,139 @@ html:has(.sig-backdrop) {
|
||||
border-radius: 0.4rem;
|
||||
border: 0.1rem solid rgba(var(--terUser), 0.15);
|
||||
display: none;
|
||||
position: relative;
|
||||
|
||||
|
||||
.sig-flip-btn {
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
right: -1rem;
|
||||
margin: 0;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.sig-caution-btn {
|
||||
position: absolute;
|
||||
top: 1.25rem;
|
||||
right: -1rem;
|
||||
margin: 0;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
// Caution tooltip — covers the entire stat block (inset: 0), z-index above buttons.
|
||||
.sig-caution-tooltip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 60;
|
||||
background-color: rgba(var(--tooltip-bg), 0.6);
|
||||
backdrop-filter: blur(6px);
|
||||
border-radius: 0.4rem;
|
||||
border: 0.1rem solid rgba(var(--priYl), 0.35);
|
||||
padding: 0.75rem;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sig-caution-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
.sig-caution-title {
|
||||
font-size: calc(var(--sig-card-w, 120px) * 0.093);
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: rgba(var(--priYl), 1);
|
||||
}
|
||||
|
||||
.sig-caution-type {
|
||||
font-size: calc(var(--sig-card-w, 120px) * 0.058);
|
||||
opacity: 0.7;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sig-caution-shoptalk {
|
||||
font-size: calc(var(--sig-card-w, 120px) * 0.063);
|
||||
opacity: 0.55;
|
||||
margin: 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.sig-caution-effect {
|
||||
flex: 1;
|
||||
font-size: calc(var(--sig-card-w, 120px) * 0.075);
|
||||
margin: 0;
|
||||
line-height: 1.55;
|
||||
|
||||
.card-ref {
|
||||
color: rgba(var(--terUser), 1);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.sig-caution-index {
|
||||
font-size: calc(var(--sig-card-w, 120px) * 0.063);
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
// Nav arrows portaled out of tooltip — sit at bottom corners above tooltip (z-70)
|
||||
.sig-caution-prev,
|
||||
.sig-caution-next {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: -1rem;
|
||||
margin: 0;
|
||||
z-index: 70;
|
||||
}
|
||||
.sig-caution-prev { left: -1rem; }
|
||||
.sig-caution-next { right: -1rem; }
|
||||
|
||||
.stat-face {
|
||||
display: none;
|
||||
padding: calc(var(--sig-card-w, 120px) * 0.37) calc(var(--sig-card-w, 120px) * 0.1) calc(var(--sig-card-w, 120px) * 0.08);
|
||||
|
||||
&--upright { display: block; }
|
||||
}
|
||||
|
||||
&.is-reversed {
|
||||
.stat-face--upright { display: none; }
|
||||
.stat-face--reversed { display: block; }
|
||||
}
|
||||
|
||||
.stat-face-label {
|
||||
font-size: calc(var(--sig-card-w, 120px) * 0.063);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.09em;
|
||||
opacity: 0.4;
|
||||
margin: 0 0 calc(var(--sig-card-w, 120px) * 0.07);
|
||||
}
|
||||
|
||||
.stat-keywords {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
font-size: calc(var(--sig-card-w, 120px) * 0.083);
|
||||
padding: calc(var(--sig-card-w, 120px) * 0.042) 0;
|
||||
opacity: 0.85;
|
||||
border-bottom: 0.05rem solid rgba(var(--terUser), 0.12);
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.sig-stage--frozen .sig-stat-block { display: block; }
|
||||
&.sig-caution-open .sig-stat-block {
|
||||
.sig-caution-tooltip { display: flex; }
|
||||
.sig-caution-prev, .sig-caution-next { display: inline-flex; }
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Mini card grid ───────────────────────────────────────────────────────────
|
||||
|
||||
@@ -121,24 +121,29 @@ $handle-r: 1rem;
|
||||
&::before { border-color: rgba(var(--quaUser), 1); }
|
||||
}
|
||||
|
||||
// ─── Role card: arc-in animation (portrait) ─────────────────────────────────
|
||||
// ─── Role card: scrawl fade-in ───────────────────────────────────────────────
|
||||
@keyframes tray-role-arc-in {
|
||||
from { opacity: 0; transform: scale(0.3) translate(-40%, -40%); }
|
||||
to { opacity: 1; transform: scale(1) translate(0, 0); }
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.tray-role-card {
|
||||
background: rgba(var(--quaUser), 0.25);
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
padding: 0.2em;
|
||||
font-size: 0.65rem;
|
||||
color: rgba(var(--quaUser), 1);
|
||||
font-weight: 600;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
|
||||
&.arc-in {
|
||||
animation: tray-role-arc-in 1.0s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
transform: scale(1.4); // crop SVG's internal margins
|
||||
}
|
||||
|
||||
// Cell stays static; only the scrawl image fades in.
|
||||
&.arc-in img {
|
||||
animation: tray-role-arc-in 1s ease forwards;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -301,15 +306,7 @@ $handle-r: 1rem;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
// Role card arc-in for landscape
|
||||
@keyframes tray-role-arc-in-landscape {
|
||||
from { opacity: 0; transform: scale(0.3) translate(-40%, 40%); }
|
||||
to { opacity: 1; transform: scale(1) translate(0, 0); }
|
||||
}
|
||||
|
||||
.tray-role-card.arc-in {
|
||||
animation: tray-role-arc-in-landscape 1.0s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
||||
}
|
||||
// Role card: same fade-in in landscape — no override needed.
|
||||
|
||||
@keyframes tray-wobble-landscape {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
describe("SigSelect", () => {
|
||||
let testDiv, stageCard, card;
|
||||
let testDiv, stageCard, card, statBlock;
|
||||
|
||||
function makeFixture({ reservations = '{}' } = {}) {
|
||||
function makeFixture({ reservations = '{}', cardCautions = '[]' } = {}) {
|
||||
testDiv = document.createElement("div");
|
||||
testDiv.innerHTML = `
|
||||
<div class="sig-overlay"
|
||||
@@ -19,6 +19,29 @@ describe("SigSelect", () => {
|
||||
<p class="fan-card-arcana"></p>
|
||||
<p class="fan-card-correspondence"></p>
|
||||
</div>
|
||||
<div class="sig-stat-block">
|
||||
<button class="btn btn-reverse sig-flip-btn" type="button">FLIP</button>
|
||||
<button class="btn btn-caution sig-caution-btn" type="button">!!</button>
|
||||
<div class="stat-face stat-face--upright">
|
||||
<p class="stat-face-label">Upright</p>
|
||||
<ul class="stat-keywords" id="id_stat_keywords_upright"></ul>
|
||||
</div>
|
||||
<div class="stat-face stat-face--reversed">
|
||||
<p class="stat-face-label">Reversed</p>
|
||||
<ul class="stat-keywords" id="id_stat_keywords_reversed"></ul>
|
||||
</div>
|
||||
<button class="btn btn-nav-left sig-caution-prev" type="button">◀</button>
|
||||
<button class="btn btn-nav-right sig-caution-next" type="button">▶</button>
|
||||
<div class="sig-caution-tooltip" id="id_sig_caution">
|
||||
<div class="sig-caution-header">
|
||||
<h4 class="sig-caution-title">Caution!</h4>
|
||||
<span class="sig-caution-type">Rival Interaction</span>
|
||||
</div>
|
||||
<p class="sig-caution-shoptalk">[Shoptalk forthcoming]</p>
|
||||
<p class="sig-caution-effect"></p>
|
||||
<span class="sig-caution-index"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sig-deck-grid">
|
||||
<div class="sig-card"
|
||||
@@ -28,7 +51,10 @@ describe("SigSelect", () => {
|
||||
data-name-group="Pentacles"
|
||||
data-name-title="King of Pentacles"
|
||||
data-arcana="Minor Arcana"
|
||||
data-correspondence="">
|
||||
data-correspondence=""
|
||||
data-keywords-upright="action,impulsiveness,ambition"
|
||||
data-keywords-reversed="no direction,disregard for consequences"
|
||||
data-cautions="${cardCautions.replace(/"/g, '"')}">
|
||||
<div class="fan-card-corner fan-card-corner--tl">
|
||||
<span class="fan-corner-rank">K</span>
|
||||
</div>
|
||||
@@ -48,6 +74,7 @@ describe("SigSelect", () => {
|
||||
`;
|
||||
document.body.appendChild(testDiv);
|
||||
stageCard = testDiv.querySelector(".sig-stage-card");
|
||||
statBlock = testDiv.querySelector(".sig-stat-block");
|
||||
card = testDiv.querySelector(".sig-card");
|
||||
window.fetch = jasmine.createSpy("fetch").and.returnValue(
|
||||
Promise.resolve({ ok: true })
|
||||
@@ -252,4 +279,222 @@ describe("SigSelect", () => {
|
||||
expect(card.classList.contains("sig-focused")).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
// ── Caution tooltip (!!) ──────────────────────────────────────────── //
|
||||
|
||||
describe("caution tooltip", () => {
|
||||
var cautionTooltip, cautionEffect, cautionPrev, cautionNext, cautionBtn;
|
||||
|
||||
beforeEach(() => {
|
||||
makeFixture();
|
||||
cautionTooltip = testDiv.querySelector(".sig-caution-tooltip");
|
||||
cautionEffect = testDiv.querySelector(".sig-caution-effect");
|
||||
cautionPrev = testDiv.querySelector(".sig-caution-prev");
|
||||
cautionNext = testDiv.querySelector(".sig-caution-next");
|
||||
cautionBtn = testDiv.querySelector(".sig-caution-btn");
|
||||
});
|
||||
|
||||
function hover() {
|
||||
card.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }));
|
||||
}
|
||||
|
||||
function openCaution() {
|
||||
hover();
|
||||
cautionBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
}
|
||||
|
||||
it("!! click adds .sig-caution-open to the stage", () => {
|
||||
openCaution();
|
||||
expect(testDiv.querySelector(".sig-stage").classList.contains("sig-caution-open")).toBe(true);
|
||||
});
|
||||
|
||||
it("second !! click removes .sig-caution-open (toggle)", () => {
|
||||
openCaution();
|
||||
cautionBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(testDiv.querySelector(".sig-stage").classList.contains("sig-caution-open")).toBe(false);
|
||||
});
|
||||
|
||||
it("shows placeholder text when cautions list is empty", () => {
|
||||
card.dataset.cautions = "[]";
|
||||
openCaution();
|
||||
expect(cautionEffect.innerHTML).toContain("pending");
|
||||
});
|
||||
|
||||
it("renders first caution effect HTML including .card-ref spans", () => {
|
||||
card.dataset.cautions = JSON.stringify(['First <span class="card-ref">Card</span> effect.']);
|
||||
openCaution();
|
||||
expect(cautionEffect.querySelector(".card-ref")).not.toBeNull();
|
||||
expect(cautionEffect.querySelector(".card-ref").textContent).toBe("Card");
|
||||
});
|
||||
|
||||
it("with 1 caution both nav arrows are disabled", () => {
|
||||
card.dataset.cautions = JSON.stringify(["Single caution."]);
|
||||
openCaution();
|
||||
expect(cautionPrev.disabled).toBe(true);
|
||||
expect(cautionNext.disabled).toBe(true);
|
||||
});
|
||||
|
||||
it("with multiple cautions both nav arrows are always enabled", () => {
|
||||
card.dataset.cautions = JSON.stringify(["C1", "C2", "C3", "C4"]);
|
||||
openCaution();
|
||||
expect(cautionPrev.disabled).toBe(false);
|
||||
expect(cautionNext.disabled).toBe(false);
|
||||
});
|
||||
|
||||
it("next click advances to second caution", () => {
|
||||
card.dataset.cautions = JSON.stringify(["First", "Second"]);
|
||||
openCaution();
|
||||
cautionNext.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(cautionEffect.innerHTML).toContain("Second");
|
||||
});
|
||||
|
||||
it("next wraps from last caution back to first", () => {
|
||||
card.dataset.cautions = JSON.stringify(["First", "Last"]);
|
||||
openCaution();
|
||||
cautionNext.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
cautionNext.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(cautionEffect.innerHTML).toContain("First");
|
||||
});
|
||||
|
||||
it("prev click goes back to first caution", () => {
|
||||
card.dataset.cautions = JSON.stringify(["First", "Second"]);
|
||||
openCaution();
|
||||
cautionNext.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
cautionPrev.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(cautionEffect.innerHTML).toContain("First");
|
||||
});
|
||||
|
||||
it("prev wraps from first caution to last", () => {
|
||||
card.dataset.cautions = JSON.stringify(["First", "Middle", "Last"]);
|
||||
openCaution();
|
||||
cautionPrev.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(cautionEffect.innerHTML).toContain("Last");
|
||||
});
|
||||
|
||||
it("index label shows n / total when multiple cautions", () => {
|
||||
card.dataset.cautions = JSON.stringify(["C1", "C2", "C3"]);
|
||||
openCaution();
|
||||
expect(testDiv.querySelector(".sig-caution-index").textContent).toBe("1 / 3");
|
||||
});
|
||||
|
||||
it("index label is empty when only 1 caution", () => {
|
||||
card.dataset.cautions = JSON.stringify(["Only one."]);
|
||||
openCaution();
|
||||
expect(testDiv.querySelector(".sig-caution-index").textContent).toBe("");
|
||||
});
|
||||
|
||||
it("card mouseleave closes the caution", () => {
|
||||
openCaution();
|
||||
expect(testDiv.querySelector(".sig-stage").classList.contains("sig-caution-open")).toBe(true);
|
||||
card.dispatchEvent(new MouseEvent("mouseleave", { bubbles: true }));
|
||||
expect(testDiv.querySelector(".sig-stage").classList.contains("sig-caution-open")).toBe(false);
|
||||
});
|
||||
|
||||
it("opening again resets to first caution", () => {
|
||||
card.dataset.cautions = JSON.stringify(["First", "Second"]);
|
||||
openCaution();
|
||||
cautionNext.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
// Close and reopen
|
||||
card.dispatchEvent(new MouseEvent("mouseleave", { bubbles: true }));
|
||||
openCaution();
|
||||
expect(cautionEffect.innerHTML).toContain("First");
|
||||
});
|
||||
|
||||
it("opening caution adds .btn-disabled and swaps labels to ×", () => {
|
||||
openCaution();
|
||||
var flipBtn = testDiv.querySelector(".sig-flip-btn");
|
||||
expect(flipBtn.classList.contains("btn-disabled")).toBe(true);
|
||||
expect(cautionBtn.classList.contains("btn-disabled")).toBe(true);
|
||||
expect(flipBtn.textContent).toBe("\u00D7");
|
||||
expect(cautionBtn.textContent).toBe("\u00D7");
|
||||
});
|
||||
|
||||
it("closing caution removes .btn-disabled and restores original labels", () => {
|
||||
var flipBtn = testDiv.querySelector(".sig-flip-btn");
|
||||
var origFlip = flipBtn.textContent;
|
||||
var origCaution = cautionBtn.textContent;
|
||||
openCaution();
|
||||
card.dispatchEvent(new MouseEvent("mouseleave", { bubbles: true }));
|
||||
expect(flipBtn.classList.contains("btn-disabled")).toBe(false);
|
||||
expect(cautionBtn.classList.contains("btn-disabled")).toBe(false);
|
||||
expect(flipBtn.textContent).toBe(origFlip);
|
||||
expect(cautionBtn.textContent).toBe(origCaution);
|
||||
});
|
||||
|
||||
it("clicking the tooltip closes caution", () => {
|
||||
openCaution();
|
||||
cautionEffect.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(testDiv.querySelector(".sig-stage").classList.contains("sig-caution-open")).toBe(false);
|
||||
});
|
||||
|
||||
it("FLIP click when caution open (btn-disabled) does nothing", () => {
|
||||
openCaution();
|
||||
var flipBtn = testDiv.querySelector(".sig-flip-btn");
|
||||
flipBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(testDiv.querySelector(".sig-stage").classList.contains("sig-caution-open")).toBe(true);
|
||||
expect(statBlock.classList.contains("is-reversed")).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
// ── Stat block: keyword population and FLIP toggle ────────────────── //
|
||||
|
||||
describe("stat block and FLIP", () => {
|
||||
beforeEach(() => makeFixture());
|
||||
|
||||
it("populates upright keywords when a card is hovered", () => {
|
||||
card.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }));
|
||||
var items = statBlock.querySelectorAll("#id_stat_keywords_upright li");
|
||||
expect(items.length).toBe(3);
|
||||
expect(items[0].textContent).toBe("action");
|
||||
expect(items[1].textContent).toBe("impulsiveness");
|
||||
expect(items[2].textContent).toBe("ambition");
|
||||
});
|
||||
|
||||
it("populates reversed keywords when a card is hovered", () => {
|
||||
card.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }));
|
||||
var items = statBlock.querySelectorAll("#id_stat_keywords_reversed li");
|
||||
expect(items.length).toBe(2);
|
||||
expect(items[0].textContent).toBe("no direction");
|
||||
expect(items[1].textContent).toBe("disregard for consequences");
|
||||
});
|
||||
|
||||
it("FLIP click adds .is-reversed to the stat block", () => {
|
||||
card.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }));
|
||||
var flipBtn = statBlock.querySelector(".sig-flip-btn");
|
||||
flipBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(statBlock.classList.contains("is-reversed")).toBe(true);
|
||||
});
|
||||
|
||||
it("second FLIP click removes .is-reversed", () => {
|
||||
card.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }));
|
||||
var flipBtn = statBlock.querySelector(".sig-flip-btn");
|
||||
flipBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
flipBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(statBlock.classList.contains("is-reversed")).toBe(false);
|
||||
});
|
||||
|
||||
it("hovering a new card resets .is-reversed", () => {
|
||||
// Add a second card to the grid so we can hover it
|
||||
var secondCard = card.cloneNode(true);
|
||||
secondCard.dataset.cardId = "99";
|
||||
testDiv.querySelector(".sig-deck-grid").appendChild(secondCard);
|
||||
|
||||
card.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }));
|
||||
statBlock.querySelector(".sig-flip-btn").dispatchEvent(
|
||||
new MouseEvent("click", { bubbles: true })
|
||||
);
|
||||
expect(statBlock.classList.contains("is-reversed")).toBe(true);
|
||||
|
||||
secondCard.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }));
|
||||
expect(statBlock.classList.contains("is-reversed")).toBe(false);
|
||||
});
|
||||
|
||||
it("card with no keywords yields empty lists", () => {
|
||||
card.dataset.keywordsUpright = "";
|
||||
card.dataset.keywordsReversed = "";
|
||||
card.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }));
|
||||
expect(statBlock.querySelectorAll("#id_stat_keywords_upright li").length).toBe(0);
|
||||
expect(statBlock.querySelectorAll("#id_stat_keywords_reversed li").length).toBe(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user