Sig select: _card-deck.scss extract, WS cursor fixes, own-role indicators, role icon refresh
- New _card-deck.scss: sig select styles moved out of _room.scss + _game-kit.scss - sig-select.js: 3 WS bug fixes — thumbs-up deferred to window.load (layout settled before getBoundingClientRect), hover cursor cleared for all cards on reservation (not just the reserved card), applyHover guards against already-reserved roles - Own-role indicators: gamer now sees their own role-coloured card outline + thumbs-up - Reservation glow: replaced blurry role+ninUser double-shadow with crisp 2px outline - Gravity qualifier: Graven text set to --terUser (matches Leavened/--quiUser pattern) - Role card SVGs refreshed; starter-role-Blank removed - FTs + Jasmine specs extended for sig select WS behaviour - setup_sig_session management command for multi-browser manual testing Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
@@ -801,11 +801,18 @@ $card-h: 60px;
|
||||
|
||||
// Landscape mobile — aggressively scale down to fit short viewport
|
||||
@media (orientation: landscape) {
|
||||
// Sink navbar below gate/role-select overlays when a modal is open.
|
||||
// Landscape navbar z-index is 100 (_base.scss); gate-backdrop/overlay are
|
||||
// 100/120 — same level causes paint-order ties so we drop it to 50.
|
||||
// Sink navbar + footer sidebar below any modal backdrop when open.
|
||||
// Landscape navbar and footer sidebar are both z-index:100 (_base.scss).
|
||||
// Gate/role-select/sig backdrops are also z-index:100 — DOM paint-order ties
|
||||
// let the footer (later in DOM) bleed through. Drop both to 50.
|
||||
html:has(.gate-backdrop) body .container .navbar,
|
||||
html:has(.role-select-backdrop) body .container .navbar {
|
||||
html:has(.role-select-backdrop) body .container .navbar,
|
||||
html:has(.sig-backdrop) body .container .navbar {
|
||||
z-index: 50;
|
||||
}
|
||||
html:has(.gate-backdrop) body #id_footer,
|
||||
html:has(.role-select-backdrop) body #id_footer,
|
||||
html:has(.sig-backdrop) body #id_footer {
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
@@ -832,431 +839,4 @@ $card-h: 60px;
|
||||
}
|
||||
|
||||
|
||||
// ─── Sig Select overlay (SIG_SELECT phase) ────────────────────────────────────
|
||||
//
|
||||
// Two overlays (levity / gravity) run in parallel, one per polarity group.
|
||||
// Layout mirrors the gatekeeper: dark Gaussian backdrop + centred modal.
|
||||
// Inside the modal: upper stage (card preview) + lower mini card grid (no scroll).
|
||||
|
||||
html:has(.sig-backdrop) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sig-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
backdrop-filter: blur(5px);
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sig-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
z-index: 120;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.sig-modal {
|
||||
pointer-events: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%; // respects overlay padding-right set by JS
|
||||
max-width: 420px;
|
||||
max-height: 100%; // respects overlay padding-bottom set by JS
|
||||
}
|
||||
|
||||
// ─── Stage ────────────────────────────────────────────────────────────────────
|
||||
// flex: 1 — fills all space above the card grid; no background (backdrop blur).
|
||||
// Row layout: preview card bottom-left, stat block fills the right.
|
||||
// Card width is set by sizeSigCard() in room.js (smaller of 40% stage width or
|
||||
// 80% stage height × 5/8) via --sig-card-w CSS variable — libsass can't handle
|
||||
// container query units inside min().
|
||||
|
||||
.sig-stage {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
padding-left: 1.5rem;
|
||||
gap: 0.75rem;
|
||||
|
||||
// Preview card — width driven by JS via --sig-card-w; aspect-ratio derives height.
|
||||
.sig-stage-card {
|
||||
flex-shrink: 0;
|
||||
width: var(--sig-card-w, 120px);
|
||||
height: auto;
|
||||
aspect-ratio: 5 / 8;
|
||||
border-radius: 0.5rem;
|
||||
background: rgba(var(--priUser), 1);
|
||||
border: 0.15rem solid rgba(var(--secUser), 0.6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
padding: 0.25rem;
|
||||
overflow: hidden;
|
||||
|
||||
// game-kit sets .fan-card-corner { position: absolute; top/left offsets }
|
||||
// so these just need display/font overrides; the corners land at the card edges.
|
||||
// All font-sizes scale with --sig-card-w (ratio = original-rem × 16 / 120).
|
||||
.fan-card-corner--tl {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
line-height: 1.1;
|
||||
gap: 0.1rem;
|
||||
|
||||
.fan-corner-rank { font-size: calc(var(--sig-card-w, 120px) * 0.133); font-weight: 700; }
|
||||
i { font-size: calc(var(--sig-card-w, 120px) * 0.1); }
|
||||
}
|
||||
|
||||
.fan-card-corner--br {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
line-height: 1.1;
|
||||
gap: 0.1rem;
|
||||
|
||||
.fan-corner-rank { font-size: calc(var(--sig-card-w, 120px) * 0.12); font-weight: 700; }
|
||||
i { font-size: calc(var(--sig-card-w, 120px) * 0.1); }
|
||||
}
|
||||
|
||||
.fan-card-face {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: 0.25rem 0.15rem;
|
||||
gap: 0.2rem;
|
||||
|
||||
.fan-card-name-group { font-size: calc(var(--sig-card-w, 120px) * 0.073); opacity: 0.6; }
|
||||
.fan-card-name { font-size: calc(var(--sig-card-w, 120px) * 0.093); font-weight: 600; }
|
||||
.fan-card-arcana { font-size: calc(var(--sig-card-w, 120px) * 0.067); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.5; }
|
||||
.fan-card-correspondence{ font-size: calc(var(--sig-card-w, 120px) * 0.067); opacity: 0.5; }
|
||||
}
|
||||
}
|
||||
|
||||
// Stat block — same dimensions as the preview card (width × 5:8 aspect).
|
||||
// flex: 0 0 auto so it doesn't stretch to fill the stage; the rest of the
|
||||
// stage row is simply empty, giving the card room to breathe.
|
||||
.sig-stat-block {
|
||||
flex: 0 0 auto;
|
||||
width: var(--sig-card-w, 120px);
|
||||
height: calc(var(--sig-card-w, 120px) * 8 / 5);
|
||||
align-self: flex-end;
|
||||
background: rgba(var(--priUser), 0.5);
|
||||
border-radius: 0.4rem;
|
||||
border: 0.1rem solid rgba(var(--terUser), 0.15);
|
||||
display: none;
|
||||
position: relative;
|
||||
|
||||
|
||||
.sig-flip-btn {
|
||||
position: absolute;
|
||||
top: -1rem;
|
||||
right: -1rem;
|
||||
margin: 0;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
.sig-caution-btn {
|
||||
position: absolute;
|
||||
top: 1.25rem;
|
||||
right: -1rem;
|
||||
margin: 0;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
// Caution tooltip — covers the entire stat block (inset: 0), z-index above buttons.
|
||||
.sig-caution-tooltip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 60;
|
||||
background-color: rgba(var(--tooltip-bg), 0.6);
|
||||
backdrop-filter: blur(6px);
|
||||
border-radius: 0.4rem;
|
||||
border: 0.1rem solid rgba(var(--priYl), 0.35);
|
||||
padding: 0.75rem;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sig-caution-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.1rem;
|
||||
}
|
||||
|
||||
.sig-caution-title {
|
||||
font-size: calc(var(--sig-card-w, 120px) * 0.093);
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
color: rgba(var(--priYl), 1);
|
||||
}
|
||||
|
||||
.sig-caution-type {
|
||||
font-size: calc(var(--sig-card-w, 120px) * 0.058);
|
||||
opacity: 0.7;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sig-caution-shoptalk {
|
||||
font-size: calc(var(--sig-card-w, 120px) * 0.063);
|
||||
opacity: 0.55;
|
||||
margin: 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.sig-caution-effect {
|
||||
flex: 1;
|
||||
font-size: calc(var(--sig-card-w, 120px) * 0.075);
|
||||
margin: 0;
|
||||
line-height: 1.55;
|
||||
|
||||
.card-ref {
|
||||
color: rgba(var(--terUser), 1);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.sig-caution-index {
|
||||
font-size: calc(var(--sig-card-w, 120px) * 0.063);
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
// Nav arrows portaled out of tooltip — sit at bottom corners above tooltip (z-70)
|
||||
.sig-caution-prev,
|
||||
.sig-caution-next {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: -1rem;
|
||||
margin: 0;
|
||||
z-index: 70;
|
||||
}
|
||||
.sig-caution-prev { left: -1rem; }
|
||||
.sig-caution-next { right: -1rem; }
|
||||
|
||||
.stat-face {
|
||||
display: none;
|
||||
padding: calc(var(--sig-card-w, 120px) * 0.37) calc(var(--sig-card-w, 120px) * 0.1) calc(var(--sig-card-w, 120px) * 0.08);
|
||||
|
||||
&--upright { display: block; }
|
||||
}
|
||||
|
||||
&.is-reversed {
|
||||
.stat-face--upright { display: none; }
|
||||
.stat-face--reversed { display: block; }
|
||||
}
|
||||
|
||||
.stat-face-label {
|
||||
font-size: calc(var(--sig-card-w, 120px) * 0.063);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.09em;
|
||||
opacity: 0.4;
|
||||
margin: 0 0 calc(var(--sig-card-w, 120px) * 0.07);
|
||||
}
|
||||
|
||||
.stat-keywords {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
font-size: calc(var(--sig-card-w, 120px) * 0.083);
|
||||
padding: calc(var(--sig-card-w, 120px) * 0.042) 0;
|
||||
opacity: 0.85;
|
||||
border-bottom: 0.05rem solid rgba(var(--terUser), 0.12);
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.sig-stage--frozen .sig-stat-block { display: block; }
|
||||
&.sig-caution-open .sig-stat-block {
|
||||
.sig-caution-tooltip { display: flex; }
|
||||
.sig-caution-prev, .sig-caution-next { display: inline-flex; }
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Mini card grid ───────────────────────────────────────────────────────────
|
||||
// flex: 0 0 auto — shrinks to card content; no background (backdrop blur).
|
||||
// align-content: start prevents CSS grid from distributing extra height between rows.
|
||||
|
||||
.sig-deck-grid {
|
||||
flex: 0 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
align-content: start;
|
||||
gap: 2px;
|
||||
padding: 4px;
|
||||
overflow: hidden;
|
||||
margin: 0 1rem 5rem 4rem;
|
||||
}
|
||||
|
||||
.sig-card {
|
||||
aspect-ratio: 5 / 8;
|
||||
border-radius: 0.4rem;
|
||||
background: rgba(var(--priUser), 0.97);
|
||||
border: 1px solid rgba(var(--secUser), 0.3);
|
||||
position: relative;
|
||||
cursor: grab;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
overflow: hidden;
|
||||
|
||||
// game-kit sets .fan-card-corner { position:absolute; top:0.4rem; left:0.4rem }
|
||||
// Override: center the element within the card instead.
|
||||
.fan-card-corner--tl {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
gap: 0; // game-kit has gap:0.15rem — too large at 0.5rem font-size
|
||||
|
||||
.fan-corner-rank { font-size: 1rem; font-weight: 700; }
|
||||
i { font-size: 0.75rem; }
|
||||
}
|
||||
|
||||
// OK / NVM overlay — appears on click (focused) or own reservation
|
||||
.sig-card-actions {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 3px;
|
||||
background: rgba(var(--priUser), 0.92);
|
||||
border-radius: inherit;
|
||||
|
||||
.sig-nvm-btn { display: none; }
|
||||
}
|
||||
|
||||
&.sig-focused .sig-card-actions { display: flex; }
|
||||
&.sig-reserved--own .sig-card-actions {
|
||||
display: flex;
|
||||
.sig-ok-btn { display: none; }
|
||||
.sig-nvm-btn { display: flex; }
|
||||
}
|
||||
|
||||
// Cursor anchors strip — bottom of card
|
||||
.sig-card-cursors {
|
||||
position: absolute;
|
||||
bottom: 2px;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&:hover:not([data-reserved-by]) {
|
||||
border-color: rgba(var(--secUser), 0.8);
|
||||
box-shadow: 0 0 4px rgba(var(--secUser), 0.25);
|
||||
}
|
||||
|
||||
&.sig-reserved {
|
||||
border-color: rgba(var(--terUser), 1);
|
||||
box-shadow:
|
||||
0 0 0.4rem rgba(var(--terUser), 0.7),
|
||||
0 0 1rem rgba(var(--ninUser), 0.4);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&.sig-reserved--own {
|
||||
border-color: rgba(var(--secUser), 1);
|
||||
box-shadow:
|
||||
0 0 0.4rem rgba(var(--secUser), 0.7),
|
||||
0 0 1rem rgba(var(--ninUser), 0.5);
|
||||
cursor: grabbing;
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Cursor anchors ───────────────────────────────────────────────────────────
|
||||
//
|
||||
// Three tiny dots along the bottom of each mini card, one per role in the group.
|
||||
// Inactive: invisible. Active (another gamer is hovering): coloured dot.
|
||||
|
||||
.sig-cursor {
|
||||
display: block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
transition: background 0.1s;
|
||||
|
||||
&.active {
|
||||
background: rgba(var(--terUser), 1);
|
||||
box-shadow: 0 0 3px rgba(var(--ninUser), 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Sig select: landscape overrides ─────────────────────────────────────────
|
||||
// Landscape base: 9×2 grid of 3rem cards. At ≥992px (wide enough for 18 cards
|
||||
// at 3rem + 4rem left + ~4rem right): collapse to a single 18×1 row so the
|
||||
// stage preview gets maximum vertical real-estate.
|
||||
// padding-left clears the fixed left navbar (JS sets right/bottom but not left).
|
||||
// Grid margins reset to 0 — overlay padding handles all edge clearance.
|
||||
|
||||
@media (orientation: landscape) {
|
||||
.sig-modal {
|
||||
max-width: none;
|
||||
flex-direction: row; // grid to the right, stage + card preview to the left
|
||||
margin-left: 4rem;
|
||||
margin-right: 3rem;
|
||||
}
|
||||
.sig-stage {
|
||||
min-width: 0; // allow shrinking in row layout; align-items:flex-end already set
|
||||
}
|
||||
.sig-deck-grid {
|
||||
grid-template-columns: repeat(6, 2.5rem);
|
||||
margin: 0;
|
||||
align-self: flex-end; // sit at the bottom of the modal row
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (min-width: 900px) {
|
||||
// Wide landscape: revert to stacked layout (stage top, 18-card row grid bottom).
|
||||
.sig-modal {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
.sig-stage {
|
||||
min-width: auto;
|
||||
align-self: stretch; // fill full modal width so JS sizeSigCard() gets correct stageWidth
|
||||
margin-left: 3rem;
|
||||
}
|
||||
.sig-deck-grid {
|
||||
grid-template-columns: repeat(18, 3rem);
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (min-width: 1800px) {
|
||||
// Sig overlay: clear doubled sidebars (8rem each instead of 4rem/6rem)
|
||||
.sig-overlay { padding-left: 8rem; padding-right: 8rem; }
|
||||
.sig-stage {
|
||||
align-self: stretch; // fill full modal width so JS sizeSigCard() gets correct stageWidth
|
||||
margin-left: 3rem;
|
||||
}
|
||||
.sig-deck-grid {
|
||||
grid-template-columns: repeat(18, 5rem);
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
// Room menu: base right: 0.5rem (same-specificity ID rule) overrides _applets.scss
|
||||
// XL block because _room.scss is imported later. Re-declare here to win the cascade.
|
||||
#id_room_menu { right: 2.5rem; }
|
||||
}
|
||||
|
||||
// ─── Seat tray — see _tray.scss ─────────────────────────────────────────────
|
||||
|
||||
Reference in New Issue
Block a user