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 [!document.activeElement.closest('#id_gate_wrapper')]"
    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>
            </header>

            <div class="token-slot{% if can_drop %} active{% elif user_reserved_slot %} pending{% elif user_filled_slot or carte_active %} claimed{% elif token_depleted %} depleted{% 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-return-label">PUSH TO RETURN</span>
                </div>
                {% if user_can_reject %}
                    <form method="POST" action="{% url 'epic:return_token' room.id %}" style="display:contents">
                        {% csrf_token %}
                        <button type="submit" class="token-return-btn" aria-label="Push to return"></button>
                    </form>
                {% endif %}
            </div>

            <div class="gate-slots row">
                {% for slot in slots %}
                    <div
                        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 == 'RESERVED' and slot.gamer == request.user %}
                            <form method="POST" action="{% url 'epic:confirm_token' room.id %}">
                                {% csrf_token %}
                                {% 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>
                        {% elif carte_active and slot.status == 'EMPTY' and slot.slot_number == carte_next_slot_number %}
                            <form method="POST" action="{% url 'epic:confirm_token' room.id %}">
                                {% csrf_token %}
                                <input type="hidden" name="slot_number" value="{{ slot.slot_number }}">
                                <button type="submit" class="drop-token-btn btn btn-confirm" aria-label="Fill slot {{ slot.slot_number }}">OK</button>
                            </form>
                        {% elif carte_active and slot.status == 'FILLED' and slot.slot_number == carte_nvm_slot_number %}
                            <form method="POST" action="{% url 'epic:release_slot' room.id %}">
                                {% csrf_token %}
                                <input type="hidden" name="slot_number" value="{{ slot.slot_number }}">
                                <button type="submit" class="slot-release-btn btn btn-cancel">NVM</button>
                            </form>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
            {% if room.gate_status == 'OPEN' %}
                <button class="launch-game-btn btn btn-primary btn-xl">PICK ROLES</button>
            {% endif %}

            {% if request.user == room.owner %}
                <div class="form-container">
                    <h3>Invite Friend</h3>
                    <form method="POST" action="{% url 'epic:invite_gamer' room.id %}" style="display:flex; gap:0.5rem; align-items:center;">
                        {% csrf_token %}
                        <input type="email" name="invitee_email" id="id_invite_email" class="form-control form-control-lg" placeholder="friend@example.com" style="flex:1; min-width:0;" hx-preserve>
                        <button type="submit" id="id_invite_btn" class="btn btn-confirm">OK</button>
                    </form>
                </div>
            {% 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>