hex position indicators: chair icons at hex edge midpoints replace gate-slot circles

- Split .gate-overlay into .gate-backdrop (z-100, blur) + .gate-overlay modal (z-120) so .table-position elements (z-110) render above backdrop but below modal
- New _table_positions.html partial: 6 .table-position divs with .fa-chair, role label, and .fa-ban/.fa-circle-check status icons; included unconditionally in room.html
- New epic:room view at /gameboard/room/<uuid>/; gatekeeper redirects there when table_status set; pick_roles redirects there
- role-select.js: adds .active glow to position on selectRole(); swaps .fa-ban→.fa-circle-check in placeCard onComplete; handleTurnChanged clears stale .active from all positions
- FTs: PositionIndicatorsTest (5 tests) + RoleSelectTest 8a/8b (glow + check state)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Disco DeDisco
2026-03-30 18:31:05 -04:00
parent 8b006be138
commit a8592aeaec
11 changed files with 370 additions and 35 deletions

View File

@@ -2,6 +2,7 @@
id="id_gate_wrapper"
data-gate-status-url="{% url 'epic:gate_status' room.id %}"
>
<div class="gate-backdrop"></div>
<div class="gate-overlay">
<div class="gate-modal" role="dialog" aria-label="Gatekeeper">

View File

@@ -0,0 +1,12 @@
{% for pos in gate_positions %}
<div class="table-position" data-slot="{{ pos.slot.slot_number }}" data-role-label="{{ pos.role_label }}">
<div class="position-body">
<i class="fa-solid fa-chair"></i>
<span class="position-role-label">{{ pos.role_label }}</span>
<div class="token-tooltip">
<h4>{% if pos.slot.gamer %}@{{ pos.slot.gamer.username|default:pos.slot.gamer.email }}{% else %}Empty Seat{% endif %}</h4>
</div>
</div>
<i class="position-status-icon fa-solid {% if pos.slot.gamer %}fa-circle-check{% else %}fa-ban{% endif %}"></i>
</div>
{% endfor %}

View File

@@ -46,6 +46,7 @@
</div>
{% endfor %}
{% endif %}
{% include "apps/gameboard/_partials/_table_positions.html" %}
</div>
</div>