diff --git a/src/functional_tests/test_bill_my_sign.py b/src/functional_tests/test_bill_my_sign.py index f9fa09c..e8fb303 100644 --- a/src/functional_tests/test_bill_my_sign.py +++ b/src/functional_tests/test_bill_my_sign.py @@ -280,21 +280,20 @@ class MySignPickerTest(FunctionalTest): # ── Test 6 ─────────────────────────────────────────────────────────────── def test_landing_previews_saved_sig_on_stage(self): - """If user already has a saved significator, the landing-phase stage - frame should preview the saved card (above/behind the hex).""" + """If user already has a saved significator, the landing collapses to + a read-only stage: the saved card preview + its stat block (no SCAN + SIGN btn, no hex — user must DEL the saved sig to re-enter picker).""" # Pre-save a sig in the DB self.gamer.significator = self.target_card self.gamer.save(update_fields=["significator"]) self.create_pre_authenticated_session(self.email) self.browser.get(self.live_server_url + "/billboard/my-sign/") - # Landing phase still shows hex w. SCAN SIGN - self.wait_for( - lambda: self.browser.find_element(By.ID, "id_scan_sign_btn") - ) # Stage card is visible w. the saved card populated (corner-rank + # name pinned by data-card-id on the stage card wrapper) - stage_card = self.browser.find_element( - By.CSS_SELECTOR, ".my-sign-stage .sig-stage-card" + stage_card = self.wait_for( + lambda: self.browser.find_element( + By.CSS_SELECTOR, ".my-sign-stage .sig-stage-card" + ) ) self.assertTrue( stage_card.is_displayed(), @@ -304,6 +303,28 @@ class MySignPickerTest(FunctionalTest): stage_card.get_attribute("data-card-id"), str(self.target_card.id), ) + # Stage is frozen → stat block visible next to the card + stage = self.browser.find_element(By.CSS_SELECTOR, ".my-sign-stage") + self.assertIn("sig-stage--frozen", stage.get_attribute("class")) + self.assertTrue( + self.browser.find_element( + By.CSS_SELECTOR, ".my-sign-stage .sig-stat-block" + ).is_displayed(), + "Stat block should be visible alongside the saved sig", + ) + # Hex + SCAN SIGN gone — user must DEL to re-enter picker + self.assertEqual( + len(self.browser.find_elements(By.ID, "id_scan_sign_btn")), + 0, + "SCAN SIGN btn should not render when a sig is already saved", + ) + self.assertEqual( + len(self.browser.find_elements( + By.CSS_SELECTOR, ".my-sign-page .table-hex" + )), + 0, + "Table hex should not render when a sig is already saved", + ) # ── Test 3 ─────────────────────────────────────────────────────────────── diff --git a/src/static_src/scss/_billboard.scss b/src/static_src/scss/_billboard.scss index 622f11e..1db9624 100644 --- a/src/static_src/scss/_billboard.scss +++ b/src/static_src/scss/_billboard.scss @@ -431,3 +431,83 @@ body.page-billposts { // My Scrolls now rides the shared `.applet-list` rule above (lifted out of // `.applet-list-page .applet-scroll`). Old `.scroll-list` styling removed. + +// ── My Sign applet (billboard) ──────────────────────────────────────────── +// Saved-sig preview thumbnail. Same 5:8 card shell + corner/name layout as +// `.sig-stage-card` (see `_card-deck.scss`) but scaled down to fit the 4×6 +// applet aperture. Without these rules the markup collapses bg-less to the +// applet's top-left corner. `--applet-card-w` drives all child font sizing +// off a single knob (same calc-fractions as `.sig-stage-card` w. --sig-card-w). +#id_applet_my_sign { + display: flex; + flex-direction: column; + + .my-sign-applet-body { + flex: 1; + min-height: 0; + display: flex; + align-items: center; + justify-content: center; + padding: 0.5rem; + } + + .my-sign-applet-card { + --applet-card-w: 5rem; + width: var(--applet-card-w); + aspect-ratio: 5 / 8; + border-radius: 0.4rem; + background: rgba(var(--priUser), 1); + border: 0.12rem solid rgba(var(--secUser), 0.6); + color: rgba(var(--secUser), 1); + padding: 0.25rem; + position: relative; + display: flex; + flex-direction: column; + overflow: hidden; + transition: transform 0.4s ease; + + .fan-card-corner--tl { + display: flex; + flex-direction: column; + align-items: center; + line-height: 1.1; + gap: 0.05rem; + position: absolute; + top: 0.2rem; + left: 0.2rem; + + .fan-corner-rank { + font-size: calc(var(--applet-card-w) * 0.18); + font-weight: 700; + } + i { font-size: calc(var(--applet-card-w) * 0.14); } + } + + .fan-card-name { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + margin: 0; + text-align: center; + font-size: calc(var(--applet-card-w) * 0.13); + font-weight: 600; + text-wrap: balance; + padding: 0 0.15rem; + color: rgba(var(--quiUser), 1); + } + + &.stage-card--reversed { transform: rotate(180deg); } + } + + .my-sign-applet-empty { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + opacity: 0.6; + font-style: italic; + margin: 0; + } +} diff --git a/src/static_src/scss/_card-deck.scss b/src/static_src/scss/_card-deck.scss index 568456b..4d597a4 100644 --- a/src/static_src/scss/_card-deck.scss +++ b/src/static_src/scss/_card-deck.scss @@ -675,8 +675,6 @@ html:has(.sig-backdrop) { // bumps it down a notch so the 2-line "SCAN/SIGN" label sits cleanly // inside the 4rem circle without crowding the border. #id_scan_sign_btn { - font-size: 0.75rem; - line-height: 1.1; white-space: normal; } diff --git a/src/static_src/scss/_gameboard.scss b/src/static_src/scss/_gameboard.scss index fe5e5e8..b5fcdda 100644 --- a/src/static_src/scss/_gameboard.scss +++ b/src/static_src/scss/_gameboard.scss @@ -65,8 +65,7 @@ body.page-gameboard { flex-direction: row; flex-wrap: wrap; align-items: center; - justify-content: center; - gap: 0.75rem; + justify-content: space-evenly; overflow-x: visible; scrollbar-width: none; &::-webkit-scrollbar { display: none; } diff --git a/src/static_src/scss/_palette-picker.scss b/src/static_src/scss/_palette-picker.scss index 69814b1..c73d3a6 100644 --- a/src/static_src/scss/_palette-picker.scss +++ b/src/static_src/scss/_palette-picker.scss @@ -86,8 +86,15 @@ // ── Palette tooltip portal ──────────────────────────────────────────────────── #id_tooltip_portal { - // Override .tt { display: none } — portal content is shown/hidden by JS - .tt-title, + // Override .tt { display: none } — portal content is shown/hidden by JS. + // `.tt-title` deliberately NOT listed here: the shared `.token-tooltip h4 + // { display: flex }` rule in _tooltips.scss must win so wallet-shop's + // `

name$X

` + // can `justify-content: space-between` + `margin-left: auto` the price to + // the right edge. ID-scoped `display: block` here used to silently clobber + // that (1,1,0 beats 0,1,1) — bug caught 2026-05-22. The palette tooltip's + // h4 has only a text child, so leaving it flex is visually identical for + // palette while unblocking the wallet-shop layout. .tt-description, .tt-date, .tt-lock { diff --git a/src/static_src/scss/_tooltips.scss b/src/static_src/scss/_tooltips.scss index d7ef600..1406c5c 100644 --- a/src/static_src/scss/_tooltips.scss +++ b/src/static_src/scss/_tooltips.scss @@ -13,9 +13,11 @@ .tt-date { font-size: 1rem; color: rgba(var(--priGn), 1); } // `.tt-price` — wallet Shop tooltip. Same shape as .tt-expiry (size + // semantics) but --priGn for the "in the green" payment cue. Lives - // inside the `.tt-title` h4 (which is `display: flex; justify-content: - // space-between`) so the price floats top-right opposite the name. - .tt-price { font-size: 1rem; color: rgba(var(--priGn), 1); } + // inside the `.tt-title` h4 (which is `display: flex`) — `margin-left: + // auto` pushes the price to the far-right edge of the title row + // regardless of whether justify-content cascade reaches this far + // (belt + suspenders for the space-between we want). + .tt-price { font-size: 1rem; color: rgba(var(--priGn), 1); margin-left: auto !important; } } .token-tooltip, diff --git a/src/static_src/scss/_wallet-tokens.scss b/src/static_src/scss/_wallet-tokens.scss index 2a567f9..4fb4b84 100644 --- a/src/static_src/scss/_wallet-tokens.scss +++ b/src/static_src/scss/_wallet-tokens.scss @@ -156,7 +156,6 @@ padding: 0.25rem 0.75rem; white-space: normal; word-break: normal; - line-height: 1.1; } // `.tt-already-owned` text — match Game Kit's "Equipped" / "In-Use: X" diff --git a/src/templates/apps/billboard/my_sign.html b/src/templates/apps/billboard/my_sign.html index 9c80a63..f699f16 100644 --- a/src/templates/apps/billboard/my_sign.html +++ b/src/templates/apps/billboard/my_sign.html @@ -84,6 +84,11 @@ {# > .room-table-scene > .table-hex-border > .table-hex > #} {# .table-center) + room.js's scaleTable() for viewport-fluid sizing. #}
+ {# Hex + chair only when the user has no saved sig — once a sig is #} + {# locked in, the stage-card preview + stat block above are the page #} + {# content; the user must DEL their saved sig before drawing a new #} + {# one. SCAN SIGN has no meaning while a sig is committed. #} + {% if not current_significator %}
@@ -102,6 +107,7 @@
+ {% endif %} {# CLEAR SIGN — only when a sig is already saved. POST to clear_sign #} {# wipes User.significator + significator_reversed + reloads back to #} {# the no-sig landing. Sprint 4b-adjacent. #} @@ -371,16 +377,20 @@ }); } - // On-load: if user has a saved sig, populate the stage preview so - // the saved card is visible above the landing hex. The picker grid - // stays hidden until SCAN SIGN is clicked. The saved card is NOT - // auto-locked — that happens on entering picker phase if desired. + // On-load: if user has a saved sig, populate the stage preview AND + // reveal the stat block (via .sig-stage--frozen) so the saved card + // appears alongside its emanation/reversal keywords — the page is + // read-only on landing while a sig is committed (hex is server-side + // 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. var savedId = pageEl.dataset.currentCardId; if (savedId && grid) { var savedCardEl = grid.querySelector( '.sig-card[data-card-id="' + savedId + '"]'); if (savedCardEl) { _populateStage(savedCardEl); + stage.classList.add('sig-stage--frozen'); } }