discoman/python-tdd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Game Kit fan stage + FLIP/SPIN; sig/sea/fan refactor — TDD
All checks were successful
ci/woodpecker/push/pyswiss Pipeline was successful
Details
ci/woodpecker/push/main Pipeline was successful
Details

Browse Source 
- fan modal: stage block w. idle-reveal/careen-out; carousel shifts left so focused card sits left-of-center; SPIN rotates whole card via Element.animate(); FLIP toggles polarity (Levity ↔ Gravity) via perspective rotateY w. mid-flip repaint; SPIN state retained across FLIP; FLIP btn hover-revealed only when focused card or btn is hovered (:has)
- mobile breakpoints: --fan-card-w / --fan-card-h / --fan-stage-shift / --fan-carousel-step lifted to CSS vars on .tarot-fan-wrap; portrait ≤ 480px @ 150×230, landscape ≤ 500h @ 150×235; corners + face text/padding scale w. card width
- shared StageCard JS module (apps/epic/stage-card.js): fromDataset, populateCard, populateKeywords, buildInfoData, renderFyi — sig/sea/fan all delegate; ~150 lines de-duplicated
- shared @mixin stat-block-shared (SCSS) lifts duplicated stat-face / stat-keywords / sig-info rules; @mixin stage-card-polarity unifies sea-stage--levity/--gravity + fan[data-polarity] coloring
- model rename: TarotCard.reversal → reversal_qualifier (migration 0014); render-time fallback to current polarity's qualifier when blank
- class unification: .sig-info-open / .sea-info-open / .fyi-open → .fyi-open (on stat block); .sig-flip-btn / .sea-spin-btn / .fan-spin-btn → .spin-btn; same for .fyi-btn / .fyi-prev / .fyi-next
- custom combobox (apps/epic/combobox.js) replaces native <select> for PICK SEA spread picker — keyboard nav, click-outside-close, aria roles; Firefox/Chrome OS-rendered <option> ignored CSS
- Jasmine: FanStageSpec.js w. idle-reveal / population / SPIN / FYI / FLIP specs; sig + sea fixtures + IT view assertions updated for renamed classes
- 748 ITs + Jasmine 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-30 21:01:52 -04:00
parent 61162e36da
commit 2f039559e6
23 changed files with 1916 additions and 571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

605
src/static_src/scss/_card-deck.scss
View File

@@ -3,6 +3,132 @@
// Shared card display classes (.fan-card, .fan-card-corner, .fan-card-face, .fan-nav)
// extracted from _game-kit.scss; sig-select overlay extracted from _room.scss.
// ── Shared stage-card polarity rules ─────────────────────────────────────────
//
// Used by .sea-stage-card (Sea Select polarity is fixed by the deck-stack the
// gamer drew from) and .fan-card[data-polarity="..."] (Game Kit fan, FLIP-able).
// Sets title/qualifier color uniformly across both upright and reversal slots;
// optionally inverts the card frame (bg ⇄ border) for levity polarity, and
// applies an optional text-shadow (Sea uses one for the deeper card-art look;
// Fan does not).
@mixin stage-card-polarity($titles-color, $text-shadow: null, $invert-frame: false) {
@if $invert-frame {
background: rgba(var(--secUser), 1);
border-color: rgba(var(--priUser), 1);
}
.fan-card-name,
.sig-qualifier-above,
.sig-qualifier-below,
.fan-card-reversal-name,
.fan-card-reversal-qualifier {
color: $titles-color;
@if $text-shadow { text-shadow: $text-shadow; }
}
}
// ── Shared stat-block contents ───────────────────────────────────────────────
//
// Used by .sig-stat-block (Sig Select), .sea-stat-block (Sea Select), and
// .fan-stage-block (Game Kit fan). The mixin emits the *inner* rules — stat-face
// padding/swap, stat-keywords, sig-info tooltip + header/title/type/effect/index.
// Each call site keeps its own outer rule (background, border, animation, button
// positioning + class hooks, visibility triggers).
@mixin stat-block-shared {
// SPIN / FYI buttons — pinned to the top-right edge
.spin-btn { position: absolute; top: -1rem; right: -1rem; margin: 0; z-index: 50; }
.fyi-btn { position: absolute; top: 1.25rem; right: -1rem; margin: 0; z-index: 50; }
// PRV / NXT — pinned to bottom corners; hidden by default. Sig + fan reveal
// them on .fyi-open (see each site's outer rule). Sea overrides to always
// visible (its FYI panel is permanent, not hover-toggled).
.fyi-prev, .fyi-next {
display: none;
position: absolute;
bottom: -1rem;
margin: 0;
z-index: 70;
}
.fyi-prev { left: -1rem; }
.fyi-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);
}
.stat-face--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.7;
color: rgba(var(--terUser), 1);
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: 1;
border-bottom: 0.05rem solid rgba(var(--terUser), 0.18);
&:last-child { border-bottom: none; }
}
}
// FYI tooltip — covers the entire stat block when open
.sig-info {
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-info-header { display: flex; flex-direction: column; gap: 0.1rem; }
.sig-info-title {
font-size: calc(var(--sig-card-w, 120px) * 0.093);
font-weight: 700;
margin: 0;
&--energies, &--operations { color: rgba(var(--quaUser), 1); }
}
.sig-info-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-info-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-info-index {
font-size: calc(var(--sig-card-w, 120px) * 0.063);
opacity: 0.55;
}
}
// ── Tarot fan modal ──────────────────────────────────────────────────────────
#id_tarot_fan_dialog {
@@ -22,6 +148,14 @@
}
.tarot-fan-wrap {
// Fan card dimensions + carousel layout — overrideable per breakpoint via
// @media rules. game-kit.js reads --fan-carousel-step at runtime so the JS
// transform stack stays in sync with the CSS-driven sizing.
--fan-card-w: 220px;
--fan-card-h: 340px;
--fan-stage-shift: 130px;
--fan-carousel-step: 200px;
position: relative;
width: 100%;
height: 100%;
@@ -41,15 +175,93 @@
.tarot-fan {
position: relative;
width: 220px;
height: 340px;
width: var(--fan-card-w);
height: var(--fan-card-h);
// Shift the whole carousel left so the focused card sits left-of-center,
// making symmetric room on the right for .fan-stage-block.
transform: translateX(calc(-1 * var(--fan-stage-shift)));
transition: transform 0.3s ease;
}
// ── Mobile breakpoints ───────────────────────────────────────────────────────
// Override the four geometry vars on .tarot-fan-wrap; everything downstream
// (.tarot-fan size, .fan-card size, carousel stride read by JS, .fan-stage-block
// width via --sig-card-w, stat-face / stat-keywords typography) scales from them.
// Portrait mobile — true phone widths (≤ 480px). Narrow desktop windows in
// portrait orientation stay on the desktop default.
@media (orientation: portrait) and (max-width: 480px) {
.tarot-fan-wrap {
--fan-card-w: 150px;
--fan-card-h: 230px;
--fan-stage-shift: 90px;
--fan-carousel-step: 130px;
}
}
// Landscape mobile — short viewport, fan needs to stay above the fold
@media (orientation: landscape) and (max-height: 500px) {
.tarot-fan-wrap {
--fan-card-w: 150px;
--fan-card-h: 235px;
--fan-stage-shift: 90px;
--fan-carousel-step: 130px;
}
}
// ── Fan stage block — symmetric right-of-focused-card stat panel ───────────
//
// Visual styling mirrors .sig-stat-block / .sea-stat-block (see Step-6 DRY note).
// Uses --sig-card-w: 220px so the cascaded font-size / padding calc() rules in
// the sea-stat-block block (which key off --sig-card-w) produce fan-card-sized
// typography. Animation/positioning is fan-specific (carousel symmetric slot,
// careen-out on nav, idle-reveal).
.fan-stage-block {
--sig-card-w: var(--fan-card-w);
position: absolute;
top: 50%;
left: 50%;
width: var(--sig-card-w);
height: calc(var(--sig-card-w) * 8 / 5);
background: rgba(var(--priUser), 1);
border-radius: 0.4rem;
border: 0.1rem solid rgba(var(--terUser), 0.15);
color: rgba(var(--secUser), 1);
z-index: 15;
// Symmetric counterpart to the carousel shift: stat block lives at +stage-shift
// from screen-center, mirroring the focused card at -stage-shift.
transform: translate(calc(-50% + var(--fan-stage-shift)), -50%) translateX(120vw);
opacity: 0;
pointer-events: none;
// Careen-out (default → no .is-revealed): swift exit, fade trails the slide
transition: transform 0.2s cubic-bezier(.5,0,.75,0),
opacity 0.2s ease 0.1s;
&.is-revealed {
transform: translate(calc(-50% + var(--fan-stage-shift)), -50%) translateX(0);
opacity: 1;
pointer-events: auto;
// Reveal: gentler ease-out, opacity leads slightly
transition: transform 0.6s ease-out,
opacity 0.5s ease-out 0.1s;
}
@include stat-block-shared;
&.fyi-open {
.sig-info { display: flex; }
.fyi-prev,
.fyi-next { display: inline-flex; }
}
}
.fan-card {
position: absolute;
inset: 0;
width: 220px;
height: 340px;
width: var(--fan-card-w);
height: var(--fan-card-h);
border-radius: 0.75rem;
background: rgba(var(--priUser), 1);
border: 0.1rem solid rgba(var(--secUser), 0.4);
@@ -64,6 +276,34 @@
box-shadow: 0 0 2rem rgba(var(--secUser), 0.3);
}
// SPIN — whole card rotates (carousel transform + rotate(180deg) is combined
// in JS via updateFan/spinBtn handler, since the inline transform owns the
// carousel layout). Inner spans swap opacity so the upright fades and the
// reversal pops — matches sig/sea pattern.
&.stage-card--reversed {
.fan-card-reversal-qualifier,
.fan-card-reversal-name { opacity: 1; }
.fan-card-name,
.sig-qualifier-above,
.sig-qualifier-below { opacity: 0.25; }
}
// FLIP — polarity-aware coloring. Default (no data-polarity) is gravity:
// priUser bg, secUser border. Levity inverts to secUser bg + priUser border.
&[data-polarity="levity"] {
@include stage-card-polarity(
$titles-color: rgba(var(--quiUser), 1),
$invert-frame: true,
);
.fan-card-corner { color: rgba(var(--priUser), 0.75); }
.fan-card-arcana,
.fan-card-name-group { color: rgba(var(--priUser), 0.85); }
}
// FLIP — animation runs via Element.animate() in JS (game-kit.js _flipActive)
// so the rotateY layer stacks on top of the carousel inline transform
// (translateX/rotateY/scale + optional SPIN rotate(180deg)).
.fan-card-corner { padding-top: 0.25rem; }
}
@@ -80,27 +320,101 @@
&--tl { top: 0.4rem; left: 0.4rem; }
&--br { bottom: 0.4rem; right: 0.4rem; transform: rotate(180deg); }
// Corner rank + suit icon scale with the card so they shrink on mobile
// breakpoints alongside .fan-card. 0.109 of card-width ≈ 24px @ 220px (the
// original 1.5rem default).
.fan-corner-rank {
font-size: 1.5rem;
font-size: calc(var(--fan-card-w, 220px) * 0.109);
font-weight: bold;
padding: 0.18rem 0;
}
// Icon always at the outer card edge regardless of rank width
i { font-size: 1.5rem; align-self: flex-start; }
i {
font-size: calc(var(--fan-card-w, 220px) * 0.109);
align-self: flex-start;
}
}
.fan-card-face {
padding: 1.25rem;
// Padding + gaps scale with card width so they stay proportional on mobile.
padding: calc(var(--fan-card-w) * 0.057);
text-align: center;
display: flex;
flex-direction: column;
gap: 0.5rem;
gap: calc(var(--fan-card-w) * 0.023);
// Face flips on SPIN; corners stay put because they live outside .fan-card-face
transition: transform 0.4s ease;
.fan-card-number { font-size: 0.65rem; }
.fan-card-name-group { font-size: 0.65rem; margin: 0; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(var(--secUser), 1); }
.fan-card-name { font-size: 0.95rem; font-weight: bold; margin: 0; color: rgba(var(--terUser), 1); }
.fan-card-arcana { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(var(--secUser), 1); }
.fan-card-correspondence { font-size: 0.6rem; font-style: italic; color: rgba(var(--secUser), 0.5); }
.fan-card-face-upright,
.fan-card-face-reversal {
display: flex;
flex-direction: column;
align-items: center;
gap: calc(var(--fan-card-w) * 0.007);
}
// Qualifier shares the name's typography — same line, different content.
// Sizes scale with --fan-card-w so they stay proportional on mobile.
.sig-qualifier-above,
.sig-qualifier-below,
.fan-card-reversal-qualifier,
.fan-card-reversal-name,
.fan-card-name {
font-size: calc(var(--fan-card-w) * 0.1);
font-weight: bold;
margin: 0;
color: rgba(var(--terUser), 1);
transition: opacity 0.2s;
}
// Reversal-face spans pre-rotated so they read forward once the card spins
// 180deg via .stage-card--reversed. Matches sig/sea convention (rotation +
// base opacity live on the inner spans, NOT the wrapping .fan-card-face-reversal
// div — otherwise the outer div's transform stacks with sig/sea's scoped rule
// and double-rotates back to upright).
.fan-card-reversal-qualifier,
.fan-card-reversal-name {
transform: rotate(180deg);
opacity: 0.25;
}
.fan-card-number { font-size: calc(var(--fan-card-w) * 0.043); }
.fan-card-name-group { font-size: calc(var(--fan-card-w) * 0.043); margin: 0; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(var(--secUser), 1); }
.fan-card-arcana { font-size: calc(var(--fan-card-w) * 0.043); text-transform: uppercase; letter-spacing: 0.1em; color: rgba(var(--secUser), 1); }
.fan-card-correspondence { font-size: calc(var(--fan-card-w) * 0.04); font-style: italic; color: rgba(var(--secUser), 0.5); }
}
// FLIP button — invisible at rest, fades in when the user hovers/taps the wrap.
// Positioned at bottom-left of the focused card slot (carousel-shifted, so its
// translateX matches .tarot-fan's leftward shift).
.fan-flip-btn {
position: absolute;
z-index: 25;
top: 50%;
left: 50%;
transform: translate(calc(-50% - var(--fan-stage-shift) - var(--fan-card-w) / 2 + 1.5rem),
calc(-50% + var(--fan-card-h) / 2 - 1.5rem));
margin: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
// Reveal when the focused card OR the FLIP button itself is hovered. Without
// the `.fan-flip-btn:hover` clause the button (z-index 25, sitting on top of
// the card) steals :hover from the card the moment the cursor moves onto it,
// flipping :has() false, fading the button to opacity:0 + pointer-events:none,
// and letting the in-flight click pass through to the dialog backdrop (which
// closes the modal). Keeping the button in the trigger list pins it visible
// while the cursor is on it.
.tarot-fan-wrap:has(.fan-card--active:hover) .fan-flip-btn,
.tarot-fan-wrap:has(.fan-flip-btn:hover) .fan-flip-btn,
.tarot-fan-wrap.fan-touch-revealed .fan-flip-btn {
opacity: 1;
pointer-events: auto;
}
.tarot-fan-wrap:has(.fan-card[data-flipping]) .fan-flip-btn {
opacity: 0;
pointer-events: none;
}
.fan-nav {
@@ -272,130 +586,15 @@ html:has(.sig-backdrop) {
display: none;
position: relative;
.sig-flip-btn {
position: absolute;
top: -1rem;
right: -1rem;
margin: 0;
z-index: 50;
}
.sig-info-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-info {
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-info-header {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.sig-info-title {
font-size: calc(var(--sig-card-w, 120px) * 0.093);
font-weight: 700;
margin: 0;
&--energies { color: rgba(var(--quaUser), 1); }
&--operations { color: rgba(var(--quaUser), 1); }
}
.sig-info-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-info-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-info-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-info-prev,
.sig-info-next {
display: none;
position: absolute;
bottom: -1rem;
margin: 0;
z-index: 70;
}
.sig-info-prev { left: -1rem; }
.sig-info-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; }
}
}
@include stat-block-shared;
}
&.sig-stage--frozen .sig-stat-block { display: block; }
&.sig-info-open .sig-stat-block {
.sig-info { display: flex; }
.sig-info-prev, .sig-info-next { display: inline-flex; }
// Unified .fyi-open class — opens the FYI panel + reveals PRV/NXT nav.
.sig-stat-block.fyi-open {
.sig-info { display: flex; }
.fyi-prev, .fyi-next { display: inline-flex; }
}
}
@@ -424,12 +623,16 @@ html:has(.sig-backdrop) {
transition: border-color 0.15s, box-shadow 0.15s;
overflow: hidden;
// game-kit sets .fan-card-corner { position:absolute; top:0.4rem; left:0.4rem }
// Override: center the element within the card instead.
// game-kit sets .fan-card-corner { position:absolute; top:0.4rem; left:0.4rem;
// padding-left:0.5rem }. Sig thumbnails reset position to dead-center; we
// also zero the inherited padding-left (it's there for game-kit fan corners
// that need outer-edge breathing room — at thumb size it nudges the rank +
// icon visibly off-center after the translate).
.fan-card-corner--tl {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding-left: 0;
gap: 0; // game-kit has gap:0.15rem — too large at 0.5rem font-size
.fan-corner-rank { font-size: 1rem; font-weight: 700; }
@@ -962,6 +1165,13 @@ $sea-card-h: 6.5rem;
background: rgba(var(--priUser), 1);
}
// Mobile: stack crucifix on top, form (select / stacks / LOCK HAND / DEL) below
@media (max-width: 600px) {
.sea-modal-body { flex-direction: column; }
.sea-cards-col { flex: 0 0 auto; padding: 1.25rem 1rem; }
.sea-form-col { width: 100%; }
}
.sea-form-main {
flex: 1;
overflow-y: auto;
@@ -976,7 +1186,13 @@ $sea-card-h: 6.5rem;
label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.7; }
}
// Custom combobox replacement for native <select>. See combobox.js for the
// expected markup; SCSS owns all visuals because the OS-native dropdown ignored
// option background/color anyway.
.sea-select {
position: relative;
cursor: pointer;
user-select: none;
background: rgba(var(--duoUser), 0.6);
border: 1px solid rgba(var(--terUser), 0.3);
border-radius: 0.3rem;
@@ -984,8 +1200,64 @@ $sea-card-h: 6.5rem;
padding: 0.4rem 0.5rem;
font-size: 0.85rem;
width: 100%;
max-width: 12.5rem;
outline: none;
option { background: rgba(var(--priUser), 1); }
&:focus-visible { box-shadow: 0 0 0 2px rgba(var(--terUser), 0.5); }
.sea-select-current {
display: block;
padding-right: 1.1rem; // room for the arrow
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sea-select-arrow {
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
opacity: 0.6;
pointer-events: none;
font-size: 0.75rem;
}
.sea-select-list {
display: none;
list-style: none;
margin: 0.2rem 0 0;
padding: 0.15rem;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 100;
background: rgba(var(--undUser), 1);
border: 1px solid rgba(var(--terUser), 0.5);
border-radius: 0.3rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
li[role="option"] {
padding: 0.4rem 0.5rem;
border-radius: 0.2rem;
color: rgba(var(--priUser), 1);
cursor: pointer;
transition: background 0.1s, color 0.1s;
}
// Hover + keyboard-focus + selected all share the inverted scheme so
// the visual feedback stays consistent regardless of input device.
li[role="option"]:hover,
li[role="option"].sea-select-option--focus,
li[role="option"][aria-selected="true"] {
background: rgba(var(--priUser), 1);
color: rgba(var(--secUser), 1);
}
}
&[aria-expanded="true"] {
.sea-select-list { display: block; }
.sea-select-arrow { transform: translateY(-50%) rotate(180deg); }
}
}
// Deck stacks — DECKS label + gravity + levity piles
@@ -1206,25 +1478,20 @@ $_sea-title-shadow: 1px 1px 0 rgba(0,0,0,1), 0 0 0.25rem rgba(var(--ninUser), 0.
$_sea-title-els: '.fan-card-name, .sig-qualifier-above, .sig-qualifier-below, .fan-card-reversal-name, .fan-card-reversal-qualifier';
.sea-stage--levity .sea-stage-card {
background: rgba(var(--secUser), 1);
border-color: rgba(var(--priUser), 1);
@include stage-card-polarity(
$titles-color: rgba(var(--quiUser), 1),
$text-shadow: $_sea-title-shadow,
$invert-frame: true,
);
color: rgba(var(--priUser), 1);
.fan-card-arcana,
.fan-card-corner {
color: rgba(var(--priUser), 1);
}
.fan-card-name, .sig-qualifier-above, .sig-qualifier-below,
.fan-card-reversal-name, .fan-card-reversal-qualifier {
color: rgba(var(--quiUser), 1);
text-shadow: $_sea-title-shadow;
}
.fan-card-corner { color: rgba(var(--priUser), 1); }
}
.sea-stage--gravity .sea-stage-card {
.fan-card-name, .sig-qualifier-above, .sig-qualifier-below,
.fan-card-reversal-name, .fan-card-reversal-qualifier {
color: rgba(var(--terUser), 1);
text-shadow: $_sea-title-shadow;
}
@include stage-card-polarity(
$titles-color: rgba(var(--terUser), 1),
$text-shadow: $_sea-title-shadow,
);
}
// Sea stat block — reuses sig-select stat-block sizing, scoped to sea-stage
@@ -1238,37 +1505,11 @@ $_sea-title-els: '.fan-card-name, .sig-qualifier-above, .sig-qualifier-below, .f
position: relative;
display: block;
.sea-spin-btn { position: absolute; top: -1rem; right: -1rem; margin: 0; z-index: 50; }
.sea-fyi-btn { position: absolute; top: 1.25rem; right: -1rem; margin: 0; z-index: 50; }
@include stat-block-shared;
.stat-face { display: none; padding: calc(var(--sig-card-w, 140px) * 0.37) calc(var(--sig-card-w, 140px) * 0.1) calc(var(--sig-card-w, 140px) * 0.08); }
.stat-face--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, 140px) * 0.063); text-transform: uppercase; letter-spacing: 0.09em; opacity: 0.4; margin: 0 0 calc(var(--sig-card-w, 140px) * 0.07); }
.stat-keywords { list-style: none; padding: 0; margin: 0;
li { font-size: calc(var(--sig-card-w, 140px) * 0.083); padding: calc(var(--sig-card-w, 140px) * 0.042) 0; opacity: 0.85; border-bottom: 0.05rem solid rgba(var(--terUser), 0.12); &:last-child { border-bottom: none; } }
}
.sig-info {
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;
display: none;
}
.sea-fyi-prev,
.sea-fyi-next { display: inline-flex; position: absolute; bottom: -1rem; margin: 0; z-index: 70; }
.sea-fyi-prev { left: -1rem; }
.sea-fyi-next { right: -1rem; }
// Sea's FYI panel is permanent (not hover-toggled), so its PRV/NXT nav
// buttons are always visible — overrides the mixin's hidden-by-default.
.fyi-prev, .fyi-next { display: inline-flex; }
}
@media (orientation: landscape) {

308
src/static_src/tests/FanStageSpec.js Normal file
View File

@@ -0,0 +1,308 @@
describe("FanStage", () => {
let testDiv, dialog, fanContent, stageBlock, stageCard;
function makeCardEl({ id, suit_icon = '', corner_rank = 'I', name_group = '',
name_title = 'The Magician', arcana = 'Major Arcana',
correspondence = '', keywords_upright = 'will,focus,manifestation',
keywords_reversed = 'manipulation,illusion',
energies = '[]', operations = '[]',
levity_qualifier = '', gravity_qualifier = '',
reversal_qualifier = '' } = {}) {
return `<div class="fan-card"
data-index="${id}"
data-suit-icon="${suit_icon}"
data-corner-rank="${corner_rank}"
data-name-group="${name_group}"
data-name-title="${name_title}"
data-arcana="${arcana}"
data-correspondence="${correspondence}"
data-keywords-upright="${keywords_upright}"
data-keywords-reversed="${keywords_reversed}"
data-energies='${energies}'
data-operations='${operations}'
data-levity-qualifier="${levity_qualifier}"
data-gravity-qualifier="${gravity_qualifier}"
data-reversal-qualifier="${reversal_qualifier}">
<div class="fan-card-corner fan-card-corner--tl">
<span class="fan-corner-rank">${corner_rank}</span>
</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">${name_title}</h3>
<p class="sig-qualifier-below"></p>
</div>
<p class="fan-card-arcana">${arcana}</p>
<div class="fan-card-face-reversal">
<p class="fan-card-reversal-qualifier"></p>
<p class="fan-card-reversal-name"></p>
</div>
</div>
<div class="fan-card-corner fan-card-corner--br">
<span class="fan-corner-rank">${corner_rank}</span>
</div>
</div>`;
}
function makeFixture() {
testDiv = document.createElement("div");
testDiv.innerHTML = `
<dialog id="id_tarot_fan_dialog">
<div class="tarot-fan-wrap">
<button id="id_fan_prev" class="fan-nav fan-nav--prev">&#8249;</button>
<div id="id_fan_content" class="tarot-fan"></div>
<div class="fan-stage-block sig-stat-block" id="id_fan_stage_block">
<button class="btn btn-reverse spin-btn" type="button">SPIN</button>
<button class="btn btn-info 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_fan_stat_upright"></ul>
</div>
<div class="stat-face stat-face--reversed">
<p class="stat-face-label">Reversal</p>
<ul class="stat-keywords" id="id_fan_stat_reversed"></ul>
</div>
<div class="sig-info" id="id_fan_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 fyi-prev" type="button">PRV</button>
<button class="btn btn-nav-right fyi-next" type="button">NXT</button>
</div>
<button id="id_fan_flip" class="btn btn-reveal fan-flip-btn" type="button">FLIP</button>
<button id="id_fan_next" class="fan-nav fan-nav--next">&#8250;</button>
</div>
</dialog>
<button class="gk-deck-card" data-deck-id="1">Earthman</button>
`;
document.body.appendChild(testDiv);
dialog = testDiv.querySelector("#id_tarot_fan_dialog");
fanContent = testDiv.querySelector("#id_fan_content");
stageBlock = testDiv.querySelector("#id_fan_stage_block");
// Pre-render two cards into fanContent so openFan's fetch can be skipped via _testOpen
fanContent.innerHTML =
makeCardEl({ id: 0, name_title: 'The Magician', corner_rank: 'I',
levity_qualifier: 'Enlightened',
gravity_qualifier: 'Engraven',
keywords_upright: 'will,focus',
keywords_reversed: 'manipulation',
energies: '[{"type":"LIBIDO","effect":"Drive."}]',
operations: '[{"type":"COVER","effect":"Shield."}]' }) +
makeCardEl({ id: 1, name_title: 'The High Priestess', corner_rank: 'II',
levity_qualifier: 'Enlightened',
gravity_qualifier: 'Engraven',
keywords_upright: 'intuition,subconscious',
keywords_reversed: 'secrets,disconnect' });
jasmine.clock().install();
GameKit._testInit();
}
afterEach(() => {
jasmine.clock().uninstall();
if (testDiv) testDiv.remove();
});
// ── Stage block reveal / hide ────────────────────────────────────────── //
describe("idle reveal", () => {
beforeEach(() => makeFixture());
it("starts with the stage block hidden (no .is-revealed)", () => {
GameKit._testOpen();
expect(stageBlock.classList.contains("is-revealed")).toBe(false);
});
it("adds .is-revealed after 500ms of idle", () => {
GameKit._testOpen();
jasmine.clock().tick(500);
expect(stageBlock.classList.contains("is-revealed")).toBe(true);
});
it("does NOT reveal before 500ms have elapsed", () => {
GameKit._testOpen();
jasmine.clock().tick(400);
expect(stageBlock.classList.contains("is-revealed")).toBe(false);
});
it("re-hides immediately on navigation, even after reveal", () => {
GameKit._testOpen();
jasmine.clock().tick(500);
expect(stageBlock.classList.contains("is-revealed")).toBe(true);
GameKit._testNavigate(1);
expect(stageBlock.classList.contains("is-revealed")).toBe(false);
});
it("restarts the idle timer after navigation", () => {
GameKit._testOpen();
jasmine.clock().tick(500);
GameKit._testNavigate(1);
jasmine.clock().tick(400);
expect(stageBlock.classList.contains("is-revealed")).toBe(false);
jasmine.clock().tick(100);
expect(stageBlock.classList.contains("is-revealed")).toBe(true);
});
});
// ── Stat block population from focused fan-card ──────────────────────── //
describe("stat block population", () => {
beforeEach(() => makeFixture());
it("populates upright keywords from data-keywords-upright of focused card", () => {
GameKit._testOpen();
const list = stageBlock.querySelector("#id_fan_stat_upright");
const items = list.querySelectorAll("li");
expect(items.length).toBe(2);
expect(items[0].textContent).toBe("will");
expect(items[1].textContent).toBe("focus");
});
it("populates reversed keywords from data-keywords-reversed of focused card", () => {
GameKit._testOpen();
const list = stageBlock.querySelector("#id_fan_stat_reversed");
const items = list.querySelectorAll("li");
expect(items.length).toBe(1);
expect(items[0].textContent).toBe("manipulation");
});
it("re-populates from the new focused card on navigation", () => {
GameKit._testOpen();
GameKit._testNavigate(1);
const items = stageBlock.querySelectorAll("#id_fan_stat_upright li");
expect(items.length).toBe(2);
expect(items[0].textContent).toBe("intuition");
expect(items[1].textContent).toBe("subconscious");
});
});
// ── SPIN button (.btn-reverse) ──────────────────────────────────────── //
describe("SPIN", () => {
beforeEach(() => makeFixture());
it("toggles .is-reversed on the stat block", () => {
GameKit._testOpen();
stageBlock.querySelector(".spin-btn").click();
expect(stageBlock.classList.contains("is-reversed")).toBe(true);
});
it("toggles back when clicked twice", () => {
GameKit._testOpen();
const spin = stageBlock.querySelector(".spin-btn");
spin.click(); spin.click();
expect(stageBlock.classList.contains("is-reversed")).toBe(false);
});
it("resets .is-reversed when navigating to a new card", () => {
GameKit._testOpen();
stageBlock.querySelector(".spin-btn").click();
expect(stageBlock.classList.contains("is-reversed")).toBe(true);
GameKit._testNavigate(1);
expect(stageBlock.classList.contains("is-reversed")).toBe(false);
});
});
// ── FYI button (.btn-info) ──────────────────────────────────────────── //
describe("FYI", () => {
beforeEach(() => makeFixture());
it("opens the FYI panel and disables SPIN+FYI buttons", () => {
GameKit._testOpen();
stageBlock.querySelector(".fyi-btn").click();
const panel = stageBlock.querySelector("#id_fan_fyi_panel");
expect(panel.style.display).toBe("flex");
expect(stageBlock.querySelector(".spin-btn").classList.contains("btn-disabled")).toBe(true);
expect(stageBlock.querySelector(".fyi-btn").classList.contains("btn-disabled")).toBe(true);
});
it("populates the panel with the first energy entry from data-energies", () => {
GameKit._testOpen();
stageBlock.querySelector(".fyi-btn").click();
const panel = stageBlock.querySelector("#id_fan_fyi_panel");
expect(panel.querySelector(".sig-info-type").textContent).toBe("LIBIDO");
expect(panel.querySelector(".sig-info-effect").innerHTML).toBe("Drive.");
});
it("PRV/NXT cycle through energies + operations", () => {
GameKit._testOpen();
stageBlock.querySelector(".fyi-btn").click();
stageBlock.querySelector(".fyi-next").click();
const panel = stageBlock.querySelector("#id_fan_fyi_panel");
expect(panel.querySelector(".sig-info-type").textContent).toBe("COVER");
expect(panel.querySelector(".sig-info-effect").innerHTML).toBe("Shield.");
});
});
// ── FLIP — polarity toggle (Levity ↔ Gravity) ──────────────────────────── //
//
// FLIP swaps polarity on the focused card with a perspective rotateY animation.
// The repaint fires at the 250ms midpoint via setTimeout (jasmine.clock fakes
// it). Element.animate() is called too — but tests assert side effects (the
// dataset.polarity attr + the qualifier text content), not the animation.
describe("FLIP", () => {
beforeEach(() => makeFixture());
function flipBtn() { return testDiv.querySelector("#id_fan_flip"); }
function activeCard() { return testDiv.querySelector(".fan-card--active"); }
it("starts with polarity = levity (the server-rendered default)", () => {
GameKit._testOpen();
jasmine.clock().tick(250);
expect(activeCard().dataset.polarity).toBe("levity");
});
it("toggles dataset.polarity to gravity at the midpoint after click", () => {
GameKit._testOpen();
flipBtn().click();
jasmine.clock().tick(250);
expect(activeCard().dataset.polarity).toBe("gravity");
});
it("repaints the upright qualifier slot with the gravity qualifier", () => {
GameKit._testOpen();
flipBtn().click();
jasmine.clock().tick(250);
const card = activeCard();
// Major arcana places qualifier in the BELOW slot.
expect(card.querySelector(".sig-qualifier-below").textContent).toBe("Engraven");
});
it("FLIPs back to levity on a second click", () => {
GameKit._testOpen();
flipBtn().click();
jasmine.clock().tick(500);
flipBtn().click();
jasmine.clock().tick(250);
expect(activeCard().dataset.polarity).toBe("levity");
});
it("retains SPIN state across a FLIP (.stage-card--reversed survives)", () => {
GameKit._testOpen();
stageBlock.querySelector(".spin-btn").click(); // SPIN first
expect(activeCard().classList.contains("stage-card--reversed")).toBe(true);
flipBtn().click();
jasmine.clock().tick(500);
expect(activeCard().classList.contains("stage-card--reversed")).toBe(true);
});
it("ignores a second click while a flip is in flight", () => {
GameKit._testOpen();
flipBtn().click();
// Mid-animation second click — should be ignored
jasmine.clock().tick(100);
flipBtn().click();
jasmine.clock().tick(150); // total = 250ms (one repaint window)
// Only one polarity swap happened (levity → gravity), not two.
expect(activeCard().dataset.polarity).toBe("gravity");
});
});
});

26
src/static_src/tests/SeaDealSpec.js
View File

@@ -7,7 +7,7 @@ describe("SeaDeal", () => {
corner_rank: "Q", suit_icon: "fa-crown",
name_group: "", name_title: "Queen of Crowns",
levity_qualifier: "Elevated", gravity_qualifier: "Graven",
reversal: "Vacant",
reversal_qualifier: "Vacant",
keywords_upright: ["nurturing", "practical", "abundance"],
keywords_reversed: ["financial dependence", "smothering"],
energies: [{ type: "LIBIDO", effect: "Energy entry." }],
@@ -72,8 +72,8 @@ describe("SeaDeal", () => {
</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>
<button class="btn btn-reverse spin-btn" type="button">SPIN</button>
<button class="btn btn-info 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>
@@ -90,8 +90,8 @@ describe("SeaDeal", () => {
<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>
<button class="btn btn-nav-left fyi-prev" type="button">PRV</button>
<button class="btn btn-nav-right fyi-next" type="button">NXT</button>
</div>
</div>
</div>
@@ -197,17 +197,17 @@ describe("SeaDeal", () => {
});
it("toggles is-reversed on stat block", () => {
testDiv.querySelector(".sea-spin-btn").dispatchEvent(new MouseEvent("click", { bubbles: true }));
testDiv.querySelector(".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 }));
testDiv.querySelector(".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");
const btn = testDiv.querySelector(".spin-btn");
btn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
btn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(statBlock.classList.contains("is-reversed")).toBe(false);
@@ -223,23 +223,23 @@ describe("SeaDeal", () => {
});
it("FYI click shows the info panel", () => {
testDiv.querySelector(".sea-fyi-btn").dispatchEvent(new MouseEvent("click", { bubbles: true }));
testDiv.querySelector(".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 }));
testDiv.querySelector(".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 }));
testDiv.querySelector(".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 }));
testDiv.querySelector(".fyi-btn").dispatchEvent(new MouseEvent("click", { bubbles: true }));
testDiv.querySelector(".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");
});

58
src/static_src/tests/SigSelectSpec.js
View File

@@ -30,8 +30,8 @@ describe("SigSelect", () => {
</div>
</div>
<div class="sig-stat-block">
<button class="btn btn-reverse sig-flip-btn" type="button">SPIN</button>
<button class="btn btn-info sig-info-btn" type="button">FYI</button>
<button class="btn btn-reverse spin-btn" type="button">SPIN</button>
<button class="btn btn-info 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_stat_keywords_upright"></ul>
@@ -40,8 +40,8 @@ describe("SigSelect", () => {
<p class="stat-face-label">Reversal</p>
<ul class="stat-keywords" id="id_stat_keywords_reversed"></ul>
</div>
<button class="btn btn-nav-left sig-info-prev" type="button">&#9664;</button>
<button class="btn btn-nav-right sig-info-next" type="button">&#9654;</button>
<button class="btn btn-nav-left fyi-prev" type="button">&#9664;</button>
<button class="btn btn-nav-right fyi-next" type="button">&#9654;</button>
<div class="sig-info" id="id_sig_info">
<div class="sig-info-header">
<h4 class="sig-info-title"></h4>
@@ -67,7 +67,7 @@ describe("SigSelect", () => {
data-operations="[]"
data-levity-qualifier="Elevated"
data-gravity-qualifier="Graven"
data-reversal="">
data-reversal-qualifier="">
<div class="fan-card-corner fan-card-corner--tl">
<span class="fan-corner-rank">K</span>
</div>
@@ -211,24 +211,24 @@ describe("SigSelect", () => {
infoTitle = testDiv.querySelector(".sig-info-title");
infoType = testDiv.querySelector(".sig-info-type");
infoIndex = testDiv.querySelector(".sig-info-index");
infoPrev = testDiv.querySelector(".sig-info-prev");
infoNext = testDiv.querySelector(".sig-info-next");
infoBtn = testDiv.querySelector(".sig-info-btn");
infoPrev = testDiv.querySelector(".fyi-prev");
infoNext = testDiv.querySelector(".fyi-next");
infoBtn = testDiv.querySelector(".fyi-btn");
});
function hover() { card.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true })); }
function openFYI() { hover(); infoBtn.dispatchEvent(new MouseEvent("click", { bubbles: true })); }
it("FYI click adds .sig-info-open to the stage", () => {
it("FYI click adds .fyi-open to the stat block", () => {
openFYI();
expect(testDiv.querySelector(".sig-stage").classList.contains("sig-info-open")).toBe(true);
expect(testDiv.querySelector(".sig-stat-block").classList.contains("fyi-open")).toBe(true);
});
it("FYI click when btn-disabled does not toggle", () => {
openFYI();
expect(infoBtn.classList.contains("btn-disabled")).toBe(true);
infoBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(testDiv.querySelector(".sig-stage").classList.contains("sig-info-open")).toBe(true);
expect(testDiv.querySelector(".sig-stat-block").classList.contains("fyi-open")).toBe(true);
});
it("shows placeholder when both energies and operations are empty", () => {
@@ -370,9 +370,9 @@ describe("SigSelect", () => {
it("card mouseleave closes the info panel", () => {
openFYI();
expect(testDiv.querySelector(".sig-stage").classList.contains("sig-info-open")).toBe(true);
expect(testDiv.querySelector(".sig-stat-block").classList.contains("fyi-open")).toBe(true);
card.dispatchEvent(new MouseEvent("mouseleave", { bubbles: true }));
expect(testDiv.querySelector(".sig-stage").classList.contains("sig-info-open")).toBe(false);
expect(testDiv.querySelector(".sig-stat-block").classList.contains("fyi-open")).toBe(false);
});
it("opening again resets to first entry", () => {
@@ -389,7 +389,7 @@ describe("SigSelect", () => {
it("opening info panel adds .btn-disabled and swaps SPIN/FYI labels to ×", () => {
openFYI();
var flipBtn = testDiv.querySelector(".sig-flip-btn");
var flipBtn = testDiv.querySelector(".spin-btn");
expect(flipBtn.classList.contains("btn-disabled")).toBe(true);
expect(infoBtn.classList.contains("btn-disabled")).toBe(true);
expect(flipBtn.textContent).toBe("×");
@@ -397,7 +397,7 @@ describe("SigSelect", () => {
});
it("closing info panel removes .btn-disabled and restores SPIN/FYI labels", () => {
var flipBtn = testDiv.querySelector(".sig-flip-btn");
var flipBtn = testDiv.querySelector(".spin-btn");
var origFlip = flipBtn.textContent;
var origInfo = infoBtn.textContent;
openFYI();
@@ -411,14 +411,14 @@ describe("SigSelect", () => {
it("clicking the info panel closes it", () => {
openFYI();
infoEffect.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(testDiv.querySelector(".sig-stage").classList.contains("sig-info-open")).toBe(false);
expect(testDiv.querySelector(".sig-stat-block").classList.contains("fyi-open")).toBe(false);
});
it("SPIN click when info open (btn-disabled) does nothing", () => {
openFYI();
var flipBtn = testDiv.querySelector(".sig-flip-btn");
var flipBtn = testDiv.querySelector(".spin-btn");
flipBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(testDiv.querySelector(".sig-stage").classList.contains("sig-info-open")).toBe(true);
expect(testDiv.querySelector(".sig-stat-block").classList.contains("fyi-open")).toBe(true);
expect(statBlock.classList.contains("is-reversed")).toBe(false);
});
});
@@ -447,14 +447,14 @@ describe("SigSelect", () => {
it("SPIN click adds .is-reversed to the stat block", () => {
card.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }));
var flipBtn = statBlock.querySelector(".sig-flip-btn");
var flipBtn = statBlock.querySelector(".spin-btn");
flipBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(statBlock.classList.contains("is-reversed")).toBe(true);
});
it("second SPIN click removes .is-reversed", () => {
card.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }));
var flipBtn = statBlock.querySelector(".sig-flip-btn");
var flipBtn = statBlock.querySelector(".spin-btn");
flipBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
flipBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(statBlock.classList.contains("is-reversed")).toBe(false);
@@ -462,7 +462,7 @@ describe("SigSelect", () => {
it("hovering a new card resets .is-reversed", () => {
card.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }));
statBlock.querySelector(".sig-flip-btn").dispatchEvent(
statBlock.querySelector(".spin-btn").dispatchEvent(
new MouseEvent("click", { bubbles: true })
);
expect(statBlock.classList.contains("is-reversed")).toBe(true);
@@ -491,7 +491,7 @@ describe("SigSelect", () => {
it("SPIN click adds .stage-card--reversed to the stage card", () => {
makeFixture();
hover();
statBlock.querySelector(".sig-flip-btn")
statBlock.querySelector(".spin-btn")
.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(stageCard.classList.contains("stage-card--reversed")).toBe(true);
});
@@ -499,7 +499,7 @@ describe("SigSelect", () => {
it("second SPIN click removes .stage-card--reversed", () => {
makeFixture();
hover();
var flipBtn = statBlock.querySelector(".sig-flip-btn");
var flipBtn = statBlock.querySelector(".spin-btn");
flipBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
flipBtn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(stageCard.classList.contains("stage-card--reversed")).toBe(false);
@@ -508,7 +508,7 @@ describe("SigSelect", () => {
it("hovering a new card resets .stage-card--reversed", () => {
makeFixture();
hover();
statBlock.querySelector(".sig-flip-btn")
statBlock.querySelector(".spin-btn")
.dispatchEvent(new MouseEvent("click", { bubbles: true }));
expect(stageCard.classList.contains("stage-card--reversed")).toBe(true);
card.dispatchEvent(new MouseEvent("mouseleave", { bubbles: true }));
@@ -516,9 +516,9 @@ describe("SigSelect", () => {
expect(stageCard.classList.contains("stage-card--reversed")).toBe(false);
});
it("non-major with data-reversal: reversal-qualifier = suit word, reversal-name = card name", () => {
it("non-major with data-reversal-qualifier: reversal-qualifier = suit word, reversal-name = card name", () => {
makeFixture();
card.dataset.reversal = "Nervous";
card.dataset.reversalQualifier = "Nervous";
hover();
expect(stageCard.querySelector(".fan-card-reversal-qualifier").textContent).toBe("Nervous");
expect(stageCard.querySelector(".fan-card-reversal-name").textContent)
@@ -539,9 +539,9 @@ describe("SigSelect", () => {
.toBe("Graven");
});
it("non-major with data-reversal: suit qualifier on own line, upright name repeated below", () => {
it("non-major with data-reversal-qualifier: suit qualifier on own line, upright name repeated below", () => {
makeFixture({ polarity: "levity", userRole: "PC" });
card.dataset.reversal = "Vacant";
card.dataset.reversalQualifier = "Vacant";
hover();
expect(stageCard.querySelector(".fan-card-reversal-qualifier").textContent).toBe("Vacant");
expect(stageCard.querySelector(".fan-card-reversal-name").textContent)
@@ -558,7 +558,7 @@ describe("SigSelect", () => {
expect(stageCard.querySelector(".fan-card-reversal-name").textContent).toBe("Elevated");
});
it("non-major without data-reversal: qualifier mirrors polarity, name repeats card title", () => {
it("non-major without data-reversal-qualifier: qualifier mirrors polarity, name repeats card title", () => {
makeFixture({ polarity: "levity", userRole: "PC" });
// fixture default: Minor Arcana, no reversal word
hover();

3
src/static_src/tests/SpecRunner.html
View File

@@ -23,6 +23,7 @@
<script src="TraySpec.js"></script>
<script src="SigSelectSpec.js"></script>
<script src="SeaDealSpec.js"></script>
<script src="FanStageSpec.js"></script>
<script src="NatusWheelSpec.js"></script>
<script src="NoteSpec.js"></script>
<script src="NotePageSpec.js"></script>
@@ -30,10 +31,12 @@
<script src="/static/apps/dashboard/dashboard.js"></script>
<script src="/static/apps/dashboard/note.js"></script>
<script src="/static/apps/billboard/note-page.js"></script>
<script src="/static/apps/epic/stage-card.js"></script>
<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/game-kit.js"></script>
<script src="/static/apps/gameboard/d3.min.js"></script>
<script src="/static/apps/gameboard/natus-wheel.js"></script>
<!-- Jasmine env config (optional) -->