PICK SEA Sprint C: sea stage card viewer — FLIP in, SPIN/FYI, deposit/re-expand — TDD
- sea.js: SeaDeal module — openStage() shows big card viewer w. flip-in animation; SPIN toggles stage-card--reversed; FYI shows energies/operations (Energy/Operation titles, PRV/NXT nav); backdrop click deposits card to slot; click deposited slot re-opens stage; resetHand() clears hand on DEL - sea_deck view: adds name_group/name_title/reversal/keywords_upright/keywords_reversed/ energies/operations to each card dict (full sig-select stage data set) - _sea_overlay.html: data-sea-user-polarity attr; sea stage HTML (sig-stage-card shell + fan-card-face-upright/reversal structure + sea-stat-block w. SPIN/FYI/PRV/NXT); FLIP click calls SeaDeal.openStage(); _fillPos removed (sea.js handles slot fill); _reset calls SeaDeal.resetHand() - room.html: sea.js included alongside sig-select.js - _card-deck.scss: sea-stage layout (fixed overlay, backdrop, content row); sea-stage-card w. @keyframes sea-flip-in (3D rotateY perspective); sea-stat-block scoped styles incl. SPIN/FYI btns, stat faces, sig-info FYI panel - SeaDealSpec.js: 20 Jasmine specs — openStage, SPIN, FYI, backdrop dismiss, slot re-expand 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
292
src/static/tests/SeaDealSpec.js
Normal file
292
src/static/tests/SeaDealSpec.js
Normal file
@@ -0,0 +1,292 @@
|
||||
describe("SeaDeal", () => {
|
||||
let testDiv, overlay, stage, stageCard, statBlock;
|
||||
|
||||
const CARD = {
|
||||
id: 99, name: "Queen of Crowns",
|
||||
arcana: "MIDDLE", suit: "CROWNS", number: 13,
|
||||
corner_rank: "Q", suit_icon: "fa-crown",
|
||||
name_group: "", name_title: "Queen of Crowns",
|
||||
levity_qualifier: "Elevated", gravity_qualifier: "Graven",
|
||||
reversal: "Vacant",
|
||||
keywords_upright: ["nurturing", "practical", "abundance"],
|
||||
keywords_reversed: ["financial dependence", "smothering"],
|
||||
energies: [{ type: "LIBIDO", effect: "Energy entry." }],
|
||||
operations: [{ type: "COVER", effect: "Operation entry." }],
|
||||
};
|
||||
|
||||
function makeFixture({ polarity = "levity" } = {}) {
|
||||
testDiv = document.createElement("div");
|
||||
testDiv.innerHTML = `
|
||||
<div id="id_sea_overlay" data-sea-user-polarity="${polarity}">
|
||||
|
||||
<!-- Cross grid (simplified) -->
|
||||
<div class="sea-cross">
|
||||
<div class="sea-cross-cell sea-pos-crown">
|
||||
<div class="sea-card-slot sea-card-slot--empty"></div>
|
||||
</div>
|
||||
<div class="sea-cross-cell sea-pos-past">
|
||||
<div class="sea-card-slot sea-card-slot--empty"></div>
|
||||
</div>
|
||||
<div class="sea-cross-cell sea-pos-center">
|
||||
<div class="sea-sig-card"></div>
|
||||
<div class="sea-pos-cover">
|
||||
<div class="sea-card-slot sea-card-slot--empty"></div>
|
||||
</div>
|
||||
<div class="sea-pos-cross">
|
||||
<div class="sea-card-slot sea-card-slot--empty"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sea-cross-cell sea-pos-future">
|
||||
<div class="sea-card-slot sea-card-slot--empty"></div>
|
||||
</div>
|
||||
<div class="sea-cross-cell sea-pos-root">
|
||||
<div class="sea-card-slot sea-card-slot--empty"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sea stage (big card viewer) -->
|
||||
<div class="sea-stage" id="id_sea_stage" style="display:none">
|
||||
<div class="sea-stage-backdrop"></div>
|
||||
<div class="sea-stage-content">
|
||||
<div class="sig-stage-card sea-stage-card" style="--sig-card-w:140px">
|
||||
<div class="fan-card-corner fan-card-corner--tl">
|
||||
<span class="fan-corner-rank"></span>
|
||||
<i class="fa-solid stage-suit-icon" style="display:none"></i>
|
||||
</div>
|
||||
<div class="fan-card-face">
|
||||
<div class="fan-card-face-upright">
|
||||
<p class="fan-card-name-group"></p>
|
||||
<p class="sig-qualifier-above"></p>
|
||||
<h3 class="fan-card-name"></h3>
|
||||
<p class="sig-qualifier-below"></p>
|
||||
</div>
|
||||
<p class="fan-card-arcana"></p>
|
||||
<div class="fan-card-face-reversal">
|
||||
<p class="fan-card-reversal-name"></p>
|
||||
<p class="fan-card-reversal-qualifier"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fan-card-corner fan-card-corner--br">
|
||||
<span class="fan-corner-rank"></span>
|
||||
<i class="fa-solid stage-suit-icon" style="display:none"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sig-stat-block sea-stat-block">
|
||||
<button class="btn btn-reverse sea-spin-btn" type="button">SPIN</button>
|
||||
<button class="btn btn-info sea-fyi-btn" type="button">FYI</button>
|
||||
<div class="stat-face stat-face--upright">
|
||||
<p class="stat-face-label">Emanation</p>
|
||||
<ul class="stat-keywords" id="id_sea_stat_upright"></ul>
|
||||
</div>
|
||||
<div class="stat-face stat-face--reversed">
|
||||
<p class="stat-face-label">Reversal</p>
|
||||
<ul class="stat-keywords" id="id_sea_stat_reversed"></ul>
|
||||
</div>
|
||||
<div class="sig-info" id="id_sea_fyi_panel" style="display:none">
|
||||
<div class="sig-info-header">
|
||||
<h4 class="sig-info-title"></h4>
|
||||
<p class="sig-info-type"></p>
|
||||
</div>
|
||||
<p class="sig-info-effect"></p>
|
||||
<span class="sig-info-index"></span>
|
||||
</div>
|
||||
<button class="btn btn-nav-left sea-fyi-prev" type="button">PRV</button>
|
||||
<button class="btn btn-nav-right sea-fyi-next" type="button">NXT</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
`;
|
||||
document.body.appendChild(testDiv);
|
||||
overlay = testDiv.querySelector("#id_sea_overlay");
|
||||
stage = testDiv.querySelector("#id_sea_stage");
|
||||
stageCard = testDiv.querySelector(".sea-stage-card");
|
||||
statBlock = testDiv.querySelector(".sea-stat-block");
|
||||
SeaDeal._testInit();
|
||||
}
|
||||
|
||||
afterEach(() => {
|
||||
if (testDiv) testDiv.remove();
|
||||
// Purge any stale overlays left by tests that called makeFixture() twice
|
||||
document.querySelectorAll('#id_sea_overlay').forEach(el => el.remove());
|
||||
});
|
||||
|
||||
// ── openStage ────────────────────────────────────────────────────────── //
|
||||
|
||||
describe("openStage()", () => {
|
||||
beforeEach(() => makeFixture());
|
||||
|
||||
it("makes #id_sea_stage visible", () => {
|
||||
SeaDeal.openStage(CARD, ".sea-pos-cover", true);
|
||||
expect(stage.style.display).not.toBe("none");
|
||||
});
|
||||
|
||||
it("populates corner rank on stage card", () => {
|
||||
SeaDeal.openStage(CARD, ".sea-pos-cover", true);
|
||||
const rank = stageCard.querySelector(".fan-card-corner--tl .fan-corner-rank");
|
||||
expect(rank.textContent).toBe("Q");
|
||||
});
|
||||
|
||||
it("shows suit icon on stage card", () => {
|
||||
SeaDeal.openStage(CARD, ".sea-pos-cover", true);
|
||||
const icon = stageCard.querySelector(".fan-card-corner--tl .stage-suit-icon");
|
||||
expect(icon.style.display).not.toBe("none");
|
||||
expect(icon.classList.contains("fa-crown")).toBe(true);
|
||||
});
|
||||
|
||||
it("populates upright card name for non-major", () => {
|
||||
SeaDeal.openStage(CARD, ".sea-pos-cover", true);
|
||||
expect(stageCard.querySelector(".fan-card-name").textContent).toBe("Queen of Crowns");
|
||||
});
|
||||
|
||||
it("puts levity qualifier in qualifier-above for non-major", () => {
|
||||
SeaDeal.openStage(CARD, ".sea-pos-cover", true);
|
||||
expect(stageCard.querySelector(".sig-qualifier-above").textContent).toBe("Elevated");
|
||||
});
|
||||
|
||||
it("puts gravity qualifier in qualifier-above for non-major gravity", () => {
|
||||
// Re-init with gravity polarity (no double-append; beforeEach already ran)
|
||||
overlay.dataset.seaUserPolarity = "gravity";
|
||||
SeaDeal._testInit();
|
||||
stageCard = testDiv.querySelector(".sea-stage-card");
|
||||
SeaDeal.openStage(CARD, ".sea-pos-cover", false);
|
||||
expect(stageCard.querySelector(".sig-qualifier-above").textContent).toBe("Graven");
|
||||
});
|
||||
|
||||
it("puts reversal word in reversal-qualifier slot", () => {
|
||||
SeaDeal.openStage(CARD, ".sea-pos-cover", true);
|
||||
expect(stageCard.querySelector(".fan-card-reversal-qualifier").textContent).toBe("Vacant");
|
||||
});
|
||||
|
||||
it("populates upright keywords in stat block", () => {
|
||||
SeaDeal.openStage(CARD, ".sea-pos-cover", true);
|
||||
const items = testDiv.querySelectorAll("#id_sea_stat_upright li");
|
||||
expect(items.length).toBe(3);
|
||||
expect(items[0].textContent).toBe("nurturing");
|
||||
});
|
||||
|
||||
it("populates reversed keywords in stat block", () => {
|
||||
SeaDeal.openStage(CARD, ".sea-pos-cover", true);
|
||||
const items = testDiv.querySelectorAll("#id_sea_stat_reversed li");
|
||||
expect(items.length).toBe(2);
|
||||
});
|
||||
|
||||
it("fills the target position slot", () => {
|
||||
SeaDeal.openStage(CARD, ".sea-pos-cover", true);
|
||||
const slot = testDiv.querySelector(".sea-pos-cover .sea-card-slot");
|
||||
expect(slot.classList.contains("sea-card-slot--filled")).toBe(true);
|
||||
});
|
||||
|
||||
it("resets SPIN to upright when opening a new card", () => {
|
||||
SeaDeal.openStage(CARD, ".sea-pos-cover", true);
|
||||
stageCard.classList.add("stage-card--reversed");
|
||||
statBlock.classList.add("is-reversed");
|
||||
SeaDeal.openStage(CARD, ".sea-pos-cross", true);
|
||||
expect(stageCard.classList.contains("stage-card--reversed")).toBe(false);
|
||||
expect(statBlock.classList.contains("is-reversed")).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
// ── SPIN in sea stage ─────────────────────────────────────────────────── //
|
||||
|
||||
describe("SPIN btn in sea stage", () => {
|
||||
beforeEach(() => {
|
||||
makeFixture();
|
||||
SeaDeal.openStage(CARD, ".sea-pos-cover", true);
|
||||
});
|
||||
|
||||
it("toggles is-reversed on stat block", () => {
|
||||
testDiv.querySelector(".sea-spin-btn").dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(statBlock.classList.contains("is-reversed")).toBe(true);
|
||||
});
|
||||
|
||||
it("toggles stage-card--reversed on stage card", () => {
|
||||
testDiv.querySelector(".sea-spin-btn").dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(stageCard.classList.contains("stage-card--reversed")).toBe(true);
|
||||
});
|
||||
|
||||
it("second SPIN click restores upright", () => {
|
||||
const btn = testDiv.querySelector(".sea-spin-btn");
|
||||
btn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
btn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(statBlock.classList.contains("is-reversed")).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
// ── FYI in sea stage ──────────────────────────────────────────────────── //
|
||||
|
||||
describe("FYI btn in sea stage", () => {
|
||||
beforeEach(() => {
|
||||
makeFixture();
|
||||
SeaDeal.openStage(CARD, ".sea-pos-cover", true);
|
||||
});
|
||||
|
||||
it("FYI click shows the info panel", () => {
|
||||
testDiv.querySelector(".sea-fyi-btn").dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(testDiv.querySelector("#id_sea_fyi_panel").style.display).not.toBe("none");
|
||||
});
|
||||
|
||||
it("shows first energy entry title as 'Energy'", () => {
|
||||
testDiv.querySelector(".sea-fyi-btn").dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(testDiv.querySelector(".sig-info-title").textContent).toBe("Energy");
|
||||
});
|
||||
|
||||
it("shows first entry type", () => {
|
||||
testDiv.querySelector(".sea-fyi-btn").dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(testDiv.querySelector(".sig-info-type").textContent).toBe("LIBIDO");
|
||||
});
|
||||
|
||||
it("NXT advances to operation entry", () => {
|
||||
testDiv.querySelector(".sea-fyi-btn").dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
testDiv.querySelector(".sea-fyi-next").dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(testDiv.querySelector(".sig-info-title").textContent).toBe("Operation");
|
||||
expect(testDiv.querySelector(".sig-info-type").textContent).toBe("COVER");
|
||||
});
|
||||
});
|
||||
|
||||
// ── Backdrop dismiss ──────────────────────────────────────────────────── //
|
||||
|
||||
describe("stage backdrop click", () => {
|
||||
beforeEach(() => {
|
||||
makeFixture();
|
||||
SeaDeal.openStage(CARD, ".sea-pos-cover", true);
|
||||
});
|
||||
|
||||
it("hides the sea stage", () => {
|
||||
testDiv.querySelector(".sea-stage-backdrop").dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(stage.style.display).toBe("none");
|
||||
});
|
||||
|
||||
it("leaves the slot filled after dismiss", () => {
|
||||
testDiv.querySelector(".sea-stage-backdrop").dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
const slot = testDiv.querySelector(".sea-pos-cover .sea-card-slot");
|
||||
expect(slot.classList.contains("sea-card-slot--filled")).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
// ── Re-open from deposited slot ───────────────────────────────────────── //
|
||||
|
||||
describe("clicking a deposited slot", () => {
|
||||
beforeEach(() => {
|
||||
makeFixture();
|
||||
SeaDeal.openStage(CARD, ".sea-pos-cover", true);
|
||||
// Dismiss first
|
||||
testDiv.querySelector(".sea-stage-backdrop").dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
});
|
||||
|
||||
it("re-opens the sea stage", () => {
|
||||
expect(stage.style.display).toBe("none");
|
||||
const slot = testDiv.querySelector(".sea-pos-cover .sea-card-slot");
|
||||
slot.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
expect(stage.style.display).not.toBe("none");
|
||||
});
|
||||
|
||||
it("re-populates stage with the same card rank", () => {
|
||||
const slot = testDiv.querySelector(".sea-pos-cover .sea-card-slot");
|
||||
slot.dispatchEvent(new MouseEvent("click", { bubbles: true }));
|
||||
const rank = stageCard.querySelector(".fan-card-corner--tl .fan-corner-rank");
|
||||
expect(rank.textContent).toBe("Q");
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -22,6 +22,7 @@
|
||||
<script src="RoleSelectSpec.js"></script>
|
||||
<script src="TraySpec.js"></script>
|
||||
<script src="SigSelectSpec.js"></script>
|
||||
<script src="SeaDealSpec.js"></script>
|
||||
<script src="NatusWheelSpec.js"></script>
|
||||
<script src="NoteSpec.js"></script>
|
||||
<script src="NotePageSpec.js"></script>
|
||||
@@ -32,6 +33,7 @@
|
||||
<script src="/static/apps/epic/role-select.js"></script>
|
||||
<script src="/static/apps/epic/tray.js"></script>
|
||||
<script src="/static/apps/epic/sig-select.js"></script>
|
||||
<script src="/static/apps/epic/sea.js"></script>
|
||||
<script src="/static/apps/gameboard/d3.min.js"></script>
|
||||
<script src="/static/apps/gameboard/natus-wheel.js"></script>
|
||||
<!-- Jasmine env config (optional) -->
|
||||
|
||||
Reference in New Issue
Block a user