python-tdd/src/templates/apps/gameboard/_partials/_gatekeeper.html

<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>
                <div class="gate-status-wrap">
                    <span class="gate-status-text">{{ room.get_gate_status_display }}</span>
                    <span class="status-dots" aria-hidden="true">
                        <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="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 %}
                    </div>
                {% endfor %}
            </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>
</div>