From c745d2453faa93802cc7d2bb0e5f73585a603546 Mon Sep 17 00:00:00 2001 From: Disco DeDisco Date: Tue, 26 May 2026 16:40:35 -0400 Subject: [PATCH] =?UTF-8?q?my=5Fsign=20main:=20extend=20sea=5Fstage=20FLIP?= =?UTF-8?q?=20corner-swap=20fix=20=E2=80=94=20SPIN-click=20now=20hides=20+?= =?UTF-8?q?=20reanchors=20FLIP=20to=20visual=20bottom-left?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Whack-a-mole follow-up to de9c97a (sea_stage reversed-card auto-rotate + FLIP corner-swap). User flagged 2026-05-26 PM: "Looks like the FLIP .btn-reveal in my_sign.html suffered from the change we applied to stop my_sea.html from letting FLIP rotate to top-right when the SPIN .btn-reverse is clicked (whack-a-mole). Since they have unified templates, for the most part, I bet squashing one bug caused the other (They should both be bottom-left)". Actually my sea_stage scoping was correct — `.sea-stage-card.stage-card--reversed .sea-stage-flip-btn` only touched sea_stage. But my_sign main always had the same latent bug: SPIN rotates `.sig-stage-card` 180°, the in-card `.my-sign-flip-btn` (anchored bottom-left) rides along to visual top-right + reads upside-down. User caught the inconsistency post-fix on sea_stage + asked to extend the fix. Changes mirror sea_stage exactly: - `_card-deck.scss` counter-position rule extended w. a second selector — `.sig-stage-card.stage-card--reversed .my-sign-flip-btn` joins the existing `.sea-stage-card.stage-card--reversed .sea-stage-flip-btn`. Same `bottom:auto; left:auto; top:0.6rem; right:0.6rem; transform: rotate(180deg)` — visually re-anchors to bottom-left after the card flip + counter-rotates so the label reads upright. - `_card-deck.scss` hide-during-rotate chain adds `.sig-stage-card[data-spinning] .my-sign-flip-btn` alongside the existing `.sea-stage-card[data-spinning] .sea-stage-flip-btn`. - `templates/apps/billboard/my_sign.html`: `_toggleOrientation` now stamps `stageCard.dataset.spinning = "1"` + clears after `SIG_SPIN_MS = 400`. Same pattern as sea.js's SPIN handler. My_sign-applet stays untouched — the applet renders the sig in its persisted polarity but never SPIN-rotates, so `.stage-card--reversed` never lands on `.my-sign-applet-card`. Comments updated to call out the carve-out. All 25 affected tests green; Jasmine FT green. Code architected by Disco DeDisco Git commit message Co-Authored-By: Claude Sonnet 4.6 --- src/static_src/scss/_card-deck.scss | 13 +++++++++++-- src/templates/apps/billboard/my_sign.html | 14 +++++++++++++- 2 files changed, 24 insertions(+), 3 deletions(-) diff --git a/src/static_src/scss/_card-deck.scss b/src/static_src/scss/_card-deck.scss index 82e7a6b..052f942 100644 --- a/src/static_src/scss/_card-deck.scss +++ b/src/static_src/scss/_card-deck.scss @@ -1017,7 +1017,13 @@ html:has(.sig-backdrop) { // the user never sees the btn jump between the two corners; it // disappears mid-spin + reappears at bottom-left after the rotation // lands. Spec 2026-05-26. -.sea-stage-card.stage-card--reversed .sea-stage-flip-btn { +// Companion my_sign main fix landed 2026-05-26 PM — same in-card FLIP-btn +// DOM contract as sea_stage, so the same .stage-card--reversed whack-a-mole +// applies. (My_sign-applet is NOT covered — the applet renders the sig in +// its polarity but never SPIN-rotates; no `.stage-card--reversed` ever +// lands on `.my-sign-applet-card`.) +.sea-stage-card.stage-card--reversed .sea-stage-flip-btn, +.sig-stage-card.stage-card--reversed .my-sign-flip-btn { bottom: auto; left: auto; top: 0.6rem; @@ -1056,6 +1062,7 @@ html:has(.sig-backdrop) { // (rotated) top-right mid-rotate. Btn reappears at the post-rotation visual // bottom-left via the counter-positioning rule above. .sig-stage-card[data-flipping] .my-sign-flip-btn, +.sig-stage-card[data-spinning] .my-sign-flip-btn, .my-sign-applet-card[data-flipping] .my-sign-applet-flip-btn, .sea-stage-card[data-flipping] .sea-stage-flip-btn, .sea-stage-card[data-spinning] .sea-stage-flip-btn, @@ -2023,7 +2030,7 @@ $_glow-gravity: 0 0 0.8rem 0.15rem rgba(var(--quaUser), 0.6); // FLIP btn on top still sits center). .sea-deck-stack--single .sea-stack-face { background: rgba(var(--priUser), 0.88); - border-color: rgba(var(--terUser), 0.65); + border-color: rgba(var(--secUser), 1) !important; box-shadow: $_sea-shadow; overflow: hidden; // clip the back-img to the rounded-rect face } @@ -2063,6 +2070,8 @@ $_glow-gravity: 0 0 0.8rem 0.15rem rgba(var(--quaUser), 0.6); .sea-deck-stack--single:active .sea-stack-face, .sea-deck-stack--single.sea-deck-stack--active .sea-stack-face { box-shadow: $_sea-shadow, 0 0 0.8rem 0.15rem rgba(var(--terUser), 0.6); + border-color: rgba(var(--terUser), 1) !important; + } // Form action row — LOCK HAND + DEL side by side at the bottom diff --git a/src/templates/apps/billboard/my_sign.html b/src/templates/apps/billboard/my_sign.html index b6c30ce..9ad7bd8 100644 --- a/src/templates/apps/billboard/my_sign.html +++ b/src/templates/apps/billboard/my_sign.html @@ -336,12 +336,24 @@ this billboard surface re-brands to "Sign". setTimeout(function () { delete stageCard.dataset.flipping; }, 500); } - // SPIN — 180° rotation + stat-block face swap (preview-only) + // SPIN — 180° rotation + stat-block face swap (preview-only). + // `data-spinning="1"` is set for the rotation window so the SCSS + // hide-during-rotate rule (joined w. `[data-flipping]`) suppresses + // the in-card FLIP btn while the card spins — the btn would + // otherwise visibly jump from bottom-left to (rotated) top-right + // mid-rotate. Counter-positioning rule on `.sig-stage-card.stage- + // card--reversed .my-sign-flip-btn` re-anchors the btn to card- + // local top-right + counter-rotates 180° so it visually lands at + // bottom-left after the rotation. Mirrors sea_stage's SPIN-click + // pattern landed in `de9c97a`. User-spec 2026-05-26 PM. + var SIG_SPIN_MS = 400; function _toggleOrientation() { var on = !stageCard.classList.contains('stage-card--reversed'); + stageCard.dataset.spinning = '1'; stageCard.classList.toggle('stage-card--reversed', on); statBlock.classList.toggle('is-reversed', on); if (spinBtn) spinBtn.classList.toggle('is-reversed', on); + setTimeout(function () { delete stageCard.dataset.spinning; }, SIG_SPIN_MS); } // Grid hover preview (only when nothing is locked)