various styling & structural changes to unify site themes; token-drop interaction changes across epic urls & views
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed

This commit is contained in:
Disco DeDisco
2026-03-14 02:03:44 -04:00
parent d9feb80b2a
commit f76c6d0fe5
8 changed files with 618 additions and 90 deletions

View File

@@ -6,6 +6,7 @@
>
<div class="gate-overlay">
<div class="gate-modal" role="dialog" aria-label="Gatekeeper">
<header class="gate-header">
<h1>{{ room.name }}</h1>
<div class="gate-status-wrap">
@@ -14,44 +15,62 @@
<span></span><span></span><span></span><span></span>
</span>
</div>
<script>
(function () {
clearInterval(window._gateDots);
var wrap = document.querySelector('.status-dots');
if (!wrap) return;
var dots = wrap.querySelectorAll('span');
var n = 0;
window._gateDots = setInterval(function () {
if (!document.contains(wrap)) { clearInterval(window._gateDots); return; }
dots.forEach(function (d, i) { d.textContent = i < n ? '.' : ''; });
n = (n + 1) % 5;
}, 400);
}());
</script>
</header>
<div class="token-slot{% if can_drop %} active{% elif user_reserved_slot %} pending{% elif user_filled_slot %} claimed{% else %} locked{% endif %}">
{% if can_drop %}
<form method="POST" action="{% url 'epic:drop_token' room.id %}" style="display:contents">
{% csrf_token %}
<button type="submit" class="token-rails" aria-label="Insert token to play">
<span class="rail"></span>
<span class="rail"></span>
</button>
</form>
{% else %}
<div class="token-rails">
<span class="rail"></span>
<span class="rail"></span>
</div>
{% endif %}
<div class="token-panel">
<div class="token-denomination">1</div>
<span class="token-insert-label">INSERT TOKEN TO PLAY</span>
<span class="token-reject-label">PUSH TO REJECT</span>
</div>
{% if user_can_reject %}
<form method="POST" action="{% url 'epic:reject_token' room.id %}" style="display:contents">
{% csrf_token %}
<button type="submit" class="token-reject-overlay" aria-label="Push to reject"></button>
</form>
{% endif %}
</div>
<div class="gate-slots">
{% for slot in slots %}
<div
class="gate-slot{% if slot.status == 'EMPTY' %} empty{% elif slot.status == 'FILLED' %} filled{% endif %}"
class="gate-slot{% if slot.status == 'EMPTY' %} empty{% elif slot.status == 'FILLED' %} filled{% elif slot.status == 'RESERVED' %} reserved{% 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 %}">
{% if slot.status == 'RESERVED' and slot.gamer == request.user %}
<form method="POST" action="{% url 'epic:confirm_token' room.id %}">
{% csrf_token %}
<button type="submit" class="btn drop-token-btn btn-primary btn-xl">Drop Token</button>
{% if is_last_slot %}
<button type="submit" class="btn btn-primary btn-xl">PICK ROLES</button>
{% else %}
<button type="submit" class="btn btn-confirm">OK</button>
{% endif %}
</form>
{% endif %}
{% endif %}
</div>
{% endfor %}
</div>
{% if request.user == room.owner %}
<form method="POST" action="{% url 'epic:invite_gamer' room.id %}">
{% csrf_token %}
@@ -59,6 +78,21 @@
<button type="submit" id="id_invite_btn" class="btn btn-primary btn-xl">Invite</button>
</form>
{% endif %}
</div>
</div>
</div>
<script>
(function () {
clearInterval(window._gateDots);
var wrap = document.querySelector('.status-dots');
if (!wrap) return;
var dots = wrap.querySelectorAll('span');
var n = 0;
window._gateDots = setInterval(function () {
if (!document.contains(wrap)) { clearInterval(window._gateDots); return; }
dots.forEach(function (d, i) { d.textContent = i < n ? '.' : ''; });
n = (n + 1) % 5;
}, 400);
}());
</script>