fixed modal UX issue; now persists as intended, until token cost met in all six slots

This commit is contained in:
Disco DeDisco
2026-03-14 00:34:07 -04:00
parent af3523c9bb
commit d780115515
6 changed files with 74 additions and 46 deletions

View File

@@ -7,7 +7,7 @@
{% for room in my_games %}
<li><a href="{% url 'epic:gatekeeper' room.id %}">{{ room.name }}</a></li>
{% empty %}
<li><small>No games yet</small></li>
<li class="game-list-item"><small>No games yet</small></li>
{% endfor %}
</ul>
</section>

View File

@@ -6,6 +6,6 @@
<form method="POST" action="{% url "epic:create_room" %}">
{% csrf_token %}
<input id="id_new_game_name" name="name" type="text" placeholder="Room name" />
<button type="submit" id="id_create_game_btn" class="btn btn-primary btn-xl">Start<br>Game</button>
<button type="submit" id="id_create_game_btn" class="btn btn-confirm">OK</button>
</form>
</section>

View File

@@ -1,36 +1,45 @@
<div class="gate-modal" role="dialog" aria-label="Gatekeeper">
<header class="gate-header">
<h1>{{ room.name }}</h1>
<span class="gate-status">{{ room.gate_status }}</span>
</header>
<div
id="id_gate_wrapper"
hx-get="{% url 'epic:gate_status' room.id %}"
hx-trigger="every 3s"
hx-swap="outerHTML"
>
<div class="gate-overlay">
<div class="gate-modal" role="dialog" aria-label="Gatekeeper">
<header class="gate-header">
<h1>{{ room.name }}</h1>
<span class="gate-status">{{ room.gate_status }}</span>
</header>
<div class="gate-slots">
{% for slot in slots %}
<div
class="gate-slot{% if slot.status == 'EMPTY' %} empty{% elif slot.status == 'FILLED' %} filled{% endif %}"
data-slot="{{ slot.slot_number }}"
>
<span class="slot-number">{{ slot.slot_number }}</span>
{% if slot.gamer %}
<span class="slot-gamer">{{ slot.gamer.email }}</span>
<div class="gate-slots">
{% for slot in slots %}
<div
class="gate-slot{% if slot.status == 'EMPTY' %} empty{% elif slot.status == 'FILLED' %} filled{% endif %}"
data-slot="{{ slot.slot_number }}"
>
<span class="slot-number">{{ slot.slot_number }}</span>
{% if slot.gamer %}
<span class="slot-gamer">{{ slot.gamer.email }}</span>
{% else %}
<span class="slot-gamer">empty</span>
{% endif %}
{% if slot.status == 'EMPTY' and request.user.is_authenticated and not user_has_slot %}
<form method="POST" action="{% url "epic:drop_token" room.id slot.slot_number %}">
{% csrf_token %}
<button type="submit" class="btn drop-token-btn btn-primary btn-xl">Drop Token</button>
</form>
{% endif %}
{% else %}
<span class="slot-gamer">empty</span>
{% endif %}
{% if slot.status == 'EMPTY' and request.user.is_authenticated and not user_has_slot %}
<form method="POST" action="{% url "epic:drop_token" room.id slot.slot_number %}">
{% csrf_token %}
<button type="submit" class="btn drop-token-btn btn-primary btn-xl">Drop Token</button>
</form>
{% endif %}
</div>
{% endfor %}
</div>
{% endfor %}
{% if request.user == room.owner %}
<form method="POST" action="{% url 'epic:invite_gamer' room.id %}">
{% csrf_token %}
<input type="email" name="invitee_email" id="id_invite_email" placeholder="friend@example.com">
<button type="submit" id="id_invite_btn" class="btn btn-primary btn-xl">Invite</button>
</form>
{% endif %}
</div>
</div>
{% if request.user == room.owner %}
<form method="POST" action="{% url 'epic:invite_gamer' room.id %}">
{% csrf_token %}
<input type="email" name="invitee_email" id="id_invite_email" placeholder="friend@example.com">
<button type="submit" id="id_invite_btn" class="btn btn-primary btn-xl">Invite</button>
</form>
{% endif %}
</div>
</div>