A.7.5-polish-6 FLIP btn everywhere — applet gate dropped + sea_stage modal gets FLIP. User-spec 2026-05-25 PM ("If it's interfering to have bespoke rules, just allow the FLIP btn everywhere, including in my_sea.html") follow-up to polish-5 (1e2041e).
**(1) `_applet-my-sign.html`** — FLIP btn moved OUTSIDE the `{% if card.deck_variant.has_card_images %}` + nested `{% if not card.deck_variant.is_polarized %}` gates. Now renders as a direct child of `.my-sign-applet-card` for ALL cards regardless of mode/polarity. Back-img element stays gated (back-img is meaningless for polarized decks or text-mode — would render an empty src). JS handler in the same template ungated too (was wrapped in matching `{% if %}` blocks); now always wires + gracefully no-ops on click when no `.sig-stage-card-back-img` sibling exists. Card-element selector broadened from `.my-sign-applet-card--image` (image-mode only) to `.my-sign-applet-card` (any mode).
**(2) `_sea_stage.html`** — added `<img class="sig-stage-card-back-img">` (gated on `request.user.equipped_deck.has_card_images and not is_polarized` — same condition as my_sign.html's main page back-img) + `<button class="sea-stage-flip-btn">` (unconditional). Both nested INSIDE the `.sig-stage-card.sea-stage-card` for card-relative positioning. Multi-user gameroom is a known limitation here — the back-img src is the room viewer's deck-back, not the drawing gamer's, which is wrong when different gamers' decks have different backs. Parked for a future multi-user polish pass (called out in template comment).
**(3) `_card-deck.scss`** — extended the polish-5 shared FLIP-btn rule trio (positioning + hover-reveal + mid-flip-hide) to include `.sea-stage-flip-btn` across all 3 declarations. Now all 4 surfaces (my_sign main / applet / sea_stage / fan carousel) share the same opacity-0-default + hover-reveal + display:none-mid-flip behavior — single source of truth.
**(4) `sea.js`** — added FLIP btn click handler in the init() function next to the existing SPIN/FYI handlers. Mirrors the `_flipToBackAnimated` shape from my_sign.html / _applet-my-sign.html: rotateY 0→90→0 over 500ms, toggle `.is-flipped-to-back` at midpoint, `[data-flipping]` attr for SCSS mid-flip-hide. Same defensive no-op pattern as the applet — bails when no `.sig-stage-card-back-img` sibling exists. Behavior for polarized text-mode decks (no back-img rendered): click is a no-op. Polarized image-mode (future Earthman art): also no-op since back-img is server-gated to non-polarized. Non-polarized image-mode (Minchiate today): flips between front + back.
**Why ungate the FLIP btn rendering rather than render it conditionally per surface:** user-spec was "just allow the FLIP btn everywhere" + the prior bespoke per-surface gating was causing both visual quirks (missing FLIP btn in applet earlier) + maintenance complexity. The unified "always render, JS picks behavior by sibling existence" pattern eliminates the per-surface conditional templates. The btn is always visible-on-hover, always click-handles cleanly, gracefully no-ops where it has nothing to flip to — minimal surprise, maximal consistency.
**JS handlers not unified into a shared module** (yet): each of the 3 surfaces (my_sign main inline script, applet inline script, sea.js init()) carries its own copy of the ~15-line FLIP-to-back animate-and-toggle dance. Could be DRY'd into a `StageCard.flipToBack(card, btn)` helper at some point, but the call sites differ enough in setup (different parent DOM selectors, different surrounding state — frozen-gate for my_sign, no gate for applet/sea_stage) that the helper would mostly be the animate+setTimeout block. Deferred — flagged in [[project-image-based-deck-face-rendering]] follow-ups if it accretes.
Tests: 1314/1314 IT+UT total green (71s). No new tests — JS handler change is pure DOM augmentation; template changes just relax server-side gates (no new conditionals to test). Visual verify 2026-05-25 PM via Claudezilla on /billboard/: applet FLIP btn present (opacity:0 at rest, hover-reveals); shared `.my-sign-applet-card:hover .my-sign-applet-flip-btn` CSS rule confirmed in computed stylesheet; my_sign main page FLIP behavior unchanged (still works per user 2026-05-25 PM "Works well in my_sign.html tho").
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -989,12 +989,15 @@ html:has(.sig-backdrop) {
|
||||
background: rgba(var(--duoUser), 1);
|
||||
}
|
||||
|
||||
// Polish-5: my_sign main + applet FLIP btns share one positioning rule.
|
||||
// Both live INSIDE their card (`.sig-stage-card` / `.my-sign-applet-card`,
|
||||
// both `position: relative`) so `bottom: 0.6rem; left: 0.6rem` anchors
|
||||
// universally to card-bottom-left w/o needing surface-specific calc().
|
||||
// Polish-5: my_sign main + applet + sea_stage FLIP btns share one positioning
|
||||
// rule. All live INSIDE their card (`.sig-stage-card` / `.my-sign-applet-card`
|
||||
// / `.sig-stage-card.sea-stage-card`, all `position: relative`) so `bottom:
|
||||
// 0.6rem; left: 0.6rem` anchors universally to card-bottom-left w/o needing
|
||||
// surface-specific calc(). Polish-6 added sea-stage-flip-btn for the sea_stage
|
||||
// modal per user-spec "allow the FLIP btn everywhere".
|
||||
.my-sign-flip-btn,
|
||||
.my-sign-applet-flip-btn {
|
||||
.my-sign-applet-flip-btn,
|
||||
.sea-stage-flip-btn {
|
||||
@include flip-btn-base;
|
||||
z-index: 25;
|
||||
bottom: 0.6rem;
|
||||
@@ -1012,19 +1015,22 @@ html:has(.sig-backdrop) {
|
||||
.my-sign-stage.sig-stage--frozen .sig-stage-card:hover .my-sign-flip-btn,
|
||||
.my-sign-stage.sig-stage--frozen .sig-stage-card:has(.my-sign-flip-btn:hover) .my-sign-flip-btn,
|
||||
.my-sign-applet-card:hover .my-sign-applet-flip-btn,
|
||||
.my-sign-applet-card:has(.my-sign-applet-flip-btn:hover) .my-sign-applet-flip-btn {
|
||||
.my-sign-applet-card:has(.my-sign-applet-flip-btn:hover) .my-sign-applet-flip-btn,
|
||||
.sea-stage-card:hover .sea-stage-flip-btn,
|
||||
.sea-stage-card:has(.sea-stage-flip-btn:hover) .sea-stage-flip-btn {
|
||||
@extend %flip-btn-revealed;
|
||||
}
|
||||
|
||||
// Unified mid-flip-hide across all 3 surfaces. `[data-flipping]="1"` is set on
|
||||
// Unified mid-flip-hide across all 4 surfaces. `[data-flipping]="1"` is set on
|
||||
// the card by each surface's FLIP handler for the 500ms rotation duration;
|
||||
// `%flip-btn-mid-flip`'s `display: none` makes the btn vanish INSTANTLY (per
|
||||
// user spec — no ease-out logic competing w. the click). Selector chains
|
||||
// differ per surface because the btn-to-card DOM relationship varies (btn is
|
||||
// INSIDE the card on my_sign + applet post-polish-5; sibling under .tarot-
|
||||
// fan-wrap for the fan).
|
||||
// INSIDE the card on my_sign + applet + sea_stage; sibling under .tarot-fan-
|
||||
// wrap for the fan carousel).
|
||||
.sig-stage-card[data-flipping] .my-sign-flip-btn,
|
||||
.my-sign-applet-card[data-flipping] .my-sign-applet-flip-btn,
|
||||
.sea-stage-card[data-flipping] .sea-stage-flip-btn,
|
||||
.tarot-fan-wrap:has(.fan-card[data-flipping]) .fan-flip-btn {
|
||||
@extend %flip-btn-mid-flip;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user