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

my_sign main: extend sea_stage FLIP corner-swap fix — SPIN-click now hides + reanchors FLIP to visual bottom-left

Browse Source 
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 <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-05-26 16:40:35 -04:00
parent bf79963fec
commit c745d2453f
2 changed files with 24 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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

14
src/templates/apps/billboard/my_sign.html
View File

@@ -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)