python-tdd/src/templates/apps/gameboard/room.html

{% extends "core/base.html" %}
{% load static tooltip_tags %}

{% block title_text %}Gameboard{% endblock title_text %}
{% block header_text %}<span>Game</span>room{% endblock header_text %}

{% block content %}
    <div class="room-page" data-room-id="{{ room.id }}"
         {% if room.table_status %}data-select-role-url="{% url 'epic:select_role' room.id %}"{% endif %}>
        <div id="id_aperture_fill"></div>
        <div class="room-shell">
            <div id="id_game_table" class="room-table">
                {% if room.table_status == "ROLE_SELECT" %}
                <div id="id_pick_sigs_wrap"{% if starter_roles|length < 6 %} style="display:none"{% endif %}>
                    <form method="POST" action="{% url 'epic:pick_sigs' room.id %}">
                        {% csrf_token %}
                        <button id="id_pick_sigs_btn" type="submit" class="btn btn-primary">PICK<br>SIGS</button>
                    </form>
                </div>
                {% endif %}
                <div class="room-table-scene">
                    <div class="table-hex-border">
                        <div class="table-hex">
                            <div class="table-center">
                                {% if room.table_status == "ROLE_SELECT" %}
                                    {% if card_stack_state %}
                                        <div class="card-stack" data-state="{{ card_stack_state }}"
                                            data-starter-roles="{{ starter_roles|join:',' }}"
                                            data-user-slots="{{ user_slots|join:',' }}"
                                            data-active-slot="{{ active_slot }}"
                                            data-equipped-deck="{{ equipped_deck_id|default:'' }}">
                                            {% if card_stack_state == "ineligible" %}
                                                <i class="fa-solid fa-ban"></i>
                                            {% endif %}
                                        </div>
                                    {% endif %}
                                {% endif %}
                                {% if room.table_status == "SKY_SELECT" %}
                                    {% if sky_confirmed %}
                                        <button id="id_pick_sea_btn" class="btn btn-primary">PICK<br>SEA</button>
                                    {% else %}
                                        <button id="id_pick_sky_btn" class="btn btn-primary">PICK<br>SKY</button>
                                    {% endif %}
                                {% elif room.table_status == "SIG_SELECT" %}
                                    <button id="id_pick_sky_btn" class="btn btn-primary" style="display:none">PICK<br>SKY</button>
                                    {% if polarity_done %}
                                        <p id="id_hex_waiting_msg">{% if user_polarity == "levity" %}Gravity settling . . .{% else %}Levity appraising . . .{% endif %}</p>
                                    {% endif %}
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    {# Seats — fa-chair layout persists from ROLE_SELECT through SIG_SELECT #}
                    {% for pos in gate_positions %}
                        <div class="table-seat{% if pos.role_label in starter_roles %} role-confirmed{% endif %}"
                             data-slot="{{ pos.slot.slot_number }}" data-role="{{ pos.role_label }}">
                            <i class="fa-solid fa-chair"></i>
                            <span class="seat-role-label">{{ pos.role_label }}</span>
                            {% if pos.role_label in starter_roles %}
                                <i class="position-status-icon fa-solid fa-circle-check"></i>
                            {% else %}
                                <i class="position-status-icon fa-solid fa-ban"></i>
                            {% endif %}
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>

        {# Sig Select overlay — suppressed once this gamer's polarity sigs are assigned #}
        {% if room.table_status == "SIG_SELECT" and user_polarity and not polarity_done %}
            {% include "apps/gameboard/_partials/_sig_select_overlay.html" %}
        {% endif %}

        {# Sky (Pick Sky) overlay — natal chart entry #}
        {% if room.table_status == "SKY_SELECT" and not sky_confirmed %}
            {% include "apps/gameboard/_partials/_sky_overlay.html" %}
        {% endif %}
        {# Sky tooltip: sibling of .sky-overlay, not inside .sky-modal-wrap (which has transform) #}
        {% if room.table_status == "SKY_SELECT" and not sky_confirmed %}
            <div id="id_sky_tooltip" class="tt" style="display:none;"></div>
            <div id="id_sky_tooltip_2" class="tt" style="display:none;"></div>
        {% endif %}

        {# Sea (Pick Sea) overlay — Celtic Cross spread entry #}
        {% if room.table_status == "SKY_SELECT" and sky_confirmed %}
            {% include "apps/gameboard/_partials/_sea_overlay.html" %}
        {% endif %}

        {% if room.gate_status != "RENEWAL_DUE" and room.table_status != "SIG_SELECT" %}
            {% include "apps/gameboard/_partials/_table_positions.html" %}
        {% endif %}
        {% if not room.table_status and room.gate_status != "RENEWAL_DUE" %}
            {% include "apps/gameboard/_partials/_gatekeeper.html" %}
        {% endif %}
        {% if room.table_status %}
        <div id="id_tray_wrap"{% if room.table_status == "ROLE_SELECT" and starter_roles|length < 6 %} class="role-select-phase"{% endif %}>
            <div id="id_tray_handle">
                <div id="id_tray_grip"></div>
                <button id="id_tray_btn" aria-label="Open seat tray">
                    <i class="fa-solid fa-dice-d20"></i>
                </button>
            </div>
            <div id="id_tray" style="display:none"><div id="id_tray_grid" data-role-icons-url="{% static 'apps/epic/icons/cards-roles/' %}">{% if my_tray_role %}<div class="tray-cell tray-role-card" data-role="{{ my_tray_role }}"><img src="{% static my_tray_scrawl_static_path %}" alt="{{ my_tray_role }}">{% tooltip my_tray_role_tooltip %}</div>{% else %}<div class="tray-cell"></div>{% endif %}{% if my_tray_sig %}<div class="tray-cell tray-sig-card"><div class="sig-stage-card sea-sig-card" aria-label="{{ my_tray_sig.name }}" data-energies="{{ my_tray_sig.energies_json }}" data-operations="{{ my_tray_sig.operations_json }}"><span class="fan-corner-rank">{{ my_tray_sig.corner_rank }}</span>{% if my_tray_sig.suit_icon %}<i class="fa-solid {{ my_tray_sig.suit_icon }}"></i>{% endif %}</div></div>{% else %}<div class="tray-cell"></div>{% endif %}{% for i in "345678" %}<div class="tray-cell"></div>{% endfor %}</div></div>
        </div>
        {% endif %}
        {% comment %}
            Tray-tooltip portal — sibling of the tray so it sits at room-page root,
            not inside the tray's overflow:hidden / mask-image clip. JS populates
            innerHTML on hover of .tray-role-card > img (and Phase 2: sig card).
        {% endcomment %}
        {% if room.table_status %}
            <div id="id_tooltip_portal" class="tt" style="display:none;"></div>
        {% endif %}
        {% include "apps/gameboard/_partials/_room_gear.html" %}
    </div>
{% endblock content %}

{% block scripts %}
    <script src="{% static 'apps/epic/room.js' %}"></script>
    <script src="{% static 'apps/epic/gatekeeper.js' %}"></script>
    <script src="{% static 'apps/epic/role-select.js' %}"></script>
    <script src="{% static 'apps/epic/stage-card.js' %}"></script>
    <script src="{% static 'apps/epic/combobox.js' %}"></script>
    <script src="{% static 'apps/epic/sig-select.js' %}"></script>
    <script src="{% static 'apps/epic/sea.js' %}"></script>
    <script src="{% static 'apps/epic/tray.js' %}"></script>
    <script src="{% static 'apps/epic/tray-tooltip.js' %}"></script>
{% endblock scripts %}