diff --git a/src/apps/epic/views.py b/src/apps/epic/views.py index 91735e2..5af7e78 100644 --- a/src/apps/epic/views.py +++ b/src/apps/epic/views.py @@ -219,6 +219,7 @@ def gatekeeper(request, room_id): else: ctx = _gate_context(room, request.user) ctx["room"] = room + ctx["page_class"] = "page-gameboard" return render(request, "apps/gameboard/room.html", ctx) diff --git a/src/static_src/scss/_room.scss b/src/static_src/scss/_room.scss index 1bab87d..7bd02a8 100644 --- a/src/static_src/scss/_room.scss +++ b/src/static_src/scss/_room.scss @@ -7,7 +7,9 @@ $gate-line: 2px; display: flex; align-items: center; justify-content: center; - min-height: 60vh; + flex: 1; + min-height: 0; + overflow: hidden; } @@ -677,3 +679,71 @@ $inv-strip: 30px; // visible height of each stacked card after the first } } } + +// ─── Significator deck (SIG_SELECT phase) ────────────────────────────────── + +// When the sig deck is present, switch room-page from centred to column layout +.room-page:has(#id_sig_deck) { + flex-direction: column; + align-items: stretch; + justify-content: flex-start; + gap: 1rem; + + .room-shell { + max-height: 50vh; + } +} + +#id_sig_deck { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + padding: 0.75rem; + overflow-y: auto; + align-content: flex-start; + max-height: 45vh; + scrollbar-width: thin; + scrollbar-color: rgba(var(--terUser), 0.3) transparent; +} + +.sig-card { + width: 70px; + height: 108px; + border-radius: 0.4rem; + background: rgba(var(--priUser), 1); + border: 0.1rem solid rgba(var(--secUser), 0.4); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + padding: 0.25rem; + cursor: pointer; + transition: transform 0.15s, border-color 0.15s; + position: relative; + + &:hover { + border-color: rgba(var(--secUser), 1); + transform: translateY(-2px); + box-shadow: 0 0 0.5rem rgba(var(--secUser), 0.3); + } + + // Bottom corner is redundant at this size + .fan-card-corner--br { display: none; } + + // Top corner — override game-kit's 1.5rem defaults with deeper nesting + .fan-card-corner--tl { + .fan-corner-rank { font-size: 0.65rem; padding: 0; } + i { font-size: 0.55rem; } + } + + // Face — deeper nesting to beat game-kit specificity + .fan-card-face { + padding: 0.25rem 0.2rem; + gap: 0.1rem; + + .fan-card-name-group { font-size: 0.38rem; } + .fan-card-name { font-size: 0.5rem; } + .fan-card-arcana { font-size: 0.35rem; } + } +} diff --git a/src/templates/apps/gameboard/room.html b/src/templates/apps/gameboard/room.html index a6d8d80..5f0dc03 100644 --- a/src/templates/apps/gameboard/room.html +++ b/src/templates/apps/gameboard/room.html @@ -78,7 +78,21 @@ data-select-sig-url="{% url 'epic:select_sig' room.id %}" data-user-role="{{ user_seat.role|default:'' }}"> {% for card, deck_type in sig_cards %} -
{{ card.name }}
+
+
+ {{ card.corner_rank }} + {% if card.suit_icon %}{% endif %} +
+
+ {% if card.name_group %}

{{ card.name_group }}

{% endif %} +

{{ card.name_title }}

+

{{ card.get_arcana_display }}

+
+
+ {{ card.corner_rank }} + {% if card.suit_icon %}{% endif %} +
+
{% endfor %} {% endif %}