diff --git a/src/static_src/scss/_card-deck.scss b/src/static_src/scss/_card-deck.scss index 4d597a4..f176116 100644 --- a/src/static_src/scss/_card-deck.scss +++ b/src/static_src/scss/_card-deck.scss @@ -636,6 +636,65 @@ html:has(.sig-backdrop) { position: relative; } +// Saved-sig read-only state — page bg shifts to --duoUser so the now- +// hexless aperture reads as a distinct mode (mirrors how `.my-sea-page +// [data-phase="picker"]` swaps bg in `_gameboard.scss`). Keyed on the +// presence of `data-current-card-id` since that attribute renders only +// when the user has a saved significator. Stage card + stat block also +// center in the now-empty page aperture (default landing keeps stage +// natural-sized at the top above the hex; here there's no hex so the +// stage gets to grow + middle itself). +.my-sign-page[data-current-card-id] { + background-color: rgba(var(--duoUser), 1); + + // Stage grows to fill the available column space + centres its card + // row both horizontally + vertically. Override `.sig-stage`'s default + // `align-items: flex-end` + `padding-left: 1.5rem` so card + stat + // block land truly centred. + .my-sign-stage { + flex: 1; + min-height: 0; + justify-content: center; + align-items: center; + padding-left: 0; + } + + // `.sig-stat-block`'s default `align-self: flex-end` (line 599) + // overrides the parent's `align-items: center` on the cross axis, + // so the stat block was floating to the bottom of the stage while + // the card sat at vertical-centre. Force `center` here to keep the + // pair aligned in the centred row. + .sig-stat-block { align-self: center; } + + // FLIP was positioned via `left: calc(1.5rem + 0.4rem)` (default + // rule below) assuming the card sat flush against the stage's + // padded-left edge — true on the picker's left-anchored layout but + // wrong here w. `justify-content: center` (the card moves to + // wherever the group's left edge lands). + // Re-derive FLIP's offsets from the centred geometry: + // group width = card + gap + stat = 2 * --sig-card-w + 0.75rem + // card's left edge (in stage) = (100% - group width) / 2 + // card's bottom edge (in stage) = 50% - (cardHeight / 2) + // = 50% - --sig-card-w * 0.8 + // (cardHeight = w × 8/5 = w × 1.6) + // The +0.4rem on each lands FLIP just inside the card's bottom-left + // corner, matching the picker-side positioning intent. + .my-sign-flip-btn { + left: calc((100% - 2 * var(--sig-card-w) - 0.75rem) / 2 + 0.4rem); + bottom: calc(50% - var(--sig-card-w) * 0.8 + 0.4rem); + } + + // Landing collapses since the hex is server-side gone — just DEL is + // left + that's `position: absolute`. `position: static` here drops + // landing's positioning context so DEL walks up to `.my-sign-page` + // (already `position: relative`) + pins to the page corner. + .my-sign-landing { + flex: 0 0 auto; + min-height: 0; + position: static; + } +} + // Stage frame — fixed slice in picker phase, natural-sized on landing. // The picker min-height reserves real estate so hover-preview cards don't // shift adjacent layout; on landing the stage shrinks to its actual content diff --git a/src/templates/apps/billboard/my_sign.html b/src/templates/apps/billboard/my_sign.html index f699f16..6572983 100644 --- a/src/templates/apps/billboard/my_sign.html +++ b/src/templates/apps/billboard/my_sign.html @@ -384,6 +384,17 @@ // hidden, DEL is the only action). The picker grid stays hidden // until SCAN SIGN — but SCAN SIGN itself is gone in this state, so // the user must DEL → reload to ever re-enter picker phase. + // + // If the saved sig is reversed, also call _toggleOrientation() once + // so the stage card visually rotates 180° + the stat block swaps to + // its reversal face. The server-side `data-polarity` attribute on + // .my-sign-page already reflects the reversed flag (drives polarity- + // themed colors via the [data-polarity=...] CSS rules) but the + // visual rotation lives in the `stage-card--reversed` class which + // is JS-applied. Without this call the stage card lied: saved- + // reversed sigs rendered upright on landing while the My Sign + // applet (template-driven, reads significator_reversed directly) + // correctly rotated them — surfaces disagreed. var savedId = pageEl.dataset.currentCardId; if (savedId && grid) { var savedCardEl = grid.querySelector( @@ -391,6 +402,9 @@ if (savedCardEl) { _populateStage(savedCardEl); stage.classList.add('sig-stage--frozen'); + if (revInput.value === '1') { + _toggleOrientation(); + } } }