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

role-select.js ensures Role select card stack disappears via WS upon conclusion of Role selection, w. if-conditional support from apps.epic.views; ensured border present on card-stack when .active in _room.scss; changed default #id_tray to unhidden, only hidden during Role select until Role selected; polished & unified Role .card-front, .card.back & .card-stack styling

Browse Source
This commit is contained in:
Disco DeDisco
2026-04-05 01:14:31 -04:00
parent c00288e256
commit bd3d7fc7bd
7 changed files with 87 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/static_src/scss/_room.scss
View File

@@ -624,12 +624,25 @@ html:has(.gate-backdrop) .position-strip .gate-slot button { pointer-events: aut
background: rgba(var(--terUser), 1);
cursor: default;
transition: box-shadow 0.2s ease;
position: relative;
&::before {
content: "ROLE";
font-size: 0.6rem;
letter-spacing: 0.14em;
color: rgba(var(--quiUser), 1);
}
.fa-ban {
position: absolute;
font-size: 1.4rem;
}
&[data-state="eligible"] {
cursor: pointer;
border-color: rgba(var(--terUser), 1);
border: 2px solid rgba(var(--quiUser), 1);
box-shadow:
0 0 0.6rem rgba(var(--ninUser), 0.6),
0 0 0.6rem rgba(var(--ninUser), 1),
0 0 1.6rem rgba(var(--secUser), 0.25);
}
@@ -640,10 +653,11 @@ html:has(.gate-backdrop) .position-strip .gate-slot button { pointer-events: aut
}
// ─── Card dimensions ───────────────────────────────────────────────────────
// Role cards are landscape format — wider than tall — and the largest card type.
// Sig cards (half this size) will be layered on top during SIG_SELECT.
$card-w: 160px;
$card-h: 110px;
// Base size matches the card-stack footprint; --table-scale (set by scaleTable()
// in room.js) stretches both the grid and individual cards to stay in sync with
// the scene transform. Fallback of 1 keeps the fan functional if JS hasn't run.
$card-w: 90px;
$card-h: 60px;
// ─── Role select modal ─────────────────────────────────────────────────────
@@ -662,27 +676,17 @@ $card-h: 110px;
#id_role_select {
// Always a 3×2 grid — 6 landscape cards in a row would overflow any viewport.
display: grid;
grid-template-columns: repeat(3, $card-w);
grid-template-columns: repeat(3, calc(#{$card-w} * var(--table-scale, 1)));
gap: 1rem;
pointer-events: none;
// Narrow portrait: scale cards down so the 3-col grid still fits
@media (max-width: 600px) {
grid-template-columns: repeat(3, 110px);
gap: 0.75rem;
.card {
width: 110px;
height: 75px;
}
}
}
// ─── Card component ────────────────────────────────────────────────────────
.card {
width: $card-w;
height: $card-h;
width: calc(#{$card-w} * var(--table-scale, 1));
height: calc(#{$card-h} * var(--table-scale, 1));
border-radius: 6px;
cursor: pointer;
pointer-events: auto;
@@ -707,7 +711,8 @@ $card-h: 110px;
.card-back {
transform: rotateY(0deg);
font-size: 1.5rem;
font-size: calc(0.66rem * var(--table-scale, 1));
letter-spacing: 0.14em;
color: rgba(var(--quiUser), 1);
background: rgba(var(--terUser), 1);
border: 2px solid rgba(var(--quiUser), 1);
@@ -719,7 +724,7 @@ $card-h: 110px;
text-align: center;
.card-role-name {
font-size: 0.75rem;
font-size: calc(0.66rem * var(--table-scale, 1));
color: rgba(var(--quaUser), 1);
text-transform: uppercase;
letter-spacing: 0.05em;