python-tdd/src/templates/apps/billboard/my_sign.html

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

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

{% block content %}
{# Solo lift of `_sig_select_overlay.html`. Same card-grid + stage-card     #}
{# choreography as the room sig-select, minus countdown / WebSocket /      #}
{# polarity / multi-user. FLIP btn (.spin-btn) lets the user choose the    #}
{# card's orientation; SAVE SIG persists it on the User model.             #}
{# "Significator" is preserved at the storage layer (User.significator) +  #}
{# game-room context; this billboard surface re-brands to "Sign".          #}
<div class="my-sign-page"
     data-save-url="{% url 'billboard:save_sign' %}"
     {% if current_significator %}data-current-card-id="{{ current_significator.id }}"{% endif %}
     data-current-reversed="{{ current_significator_reversed|yesno:'true,false' }}">

    {% if not equipped_deck %}
        <p class="my-sign-empty">
            Equip a card deck first in the
            <a href="{% url 'gameboard' %}">Game Kit</a> to pick your significator.
        </p>
    {% else %}
        <div class="my-sign-stage">
            <div class="sig-stage-card" style="display:none">
                <div class="fan-card-corner fan-card-corner--tl">
                    <span class="fan-corner-rank"></span>
                    <i class="fa-solid stage-suit-icon" style="display:none"></i>
                </div>
                <div class="fan-card-face">
                    <div class="fan-card-face-upright">
                        <p class="fan-card-name-group"></p>
                        <p class="sig-qualifier-above"></p>
                        <p class="fan-card-name"></p>
                        <p class="sig-qualifier-below"></p>
                    </div>
                    <p class="fan-card-arcana"></p>
                    <div class="fan-card-face-reversal">
                        <p class="fan-card-reversal-name"></p>
                        <p class="fan-card-reversal-qualifier"></p>
                    </div>
                </div>
                <div class="fan-card-corner fan-card-corner--br">
                    <span class="fan-corner-rank"></span>
                    <i class="fa-solid stage-suit-icon" style="display:none"></i>
                </div>
            </div>
            <div class="sig-stat-block">
                <button class="btn btn-reverse spin-btn" type="button">FLIP</button>
                <div class="stat-face stat-face--upright">
                    <p class="stat-face-label">Emanation</p>
                    <ul class="stat-keywords"></ul>
                </div>
                <div class="stat-face stat-face--reversed">
                    <p class="stat-face-label">Reversal</p>
                    <ul class="stat-keywords"></ul>
                </div>
            </div>
        </div>

        <div class="my-sign-deck-grid">
            {% for card in cards %}
                <div class="sig-card"
                     data-card-id="{{ card.id }}"
                     data-suit-icon="{{ card.suit_icon }}"
                     data-corner-rank="{{ card.corner_rank }}"
                     data-name-group="{{ card.name_group }}"
                     data-name-title="{{ card.name_title }}"
                     data-arcana="{{ card.get_arcana_display }}"
                     data-keywords-upright="{{ card.keywords_upright|join:',' }}"
                     data-keywords-reversed="{{ card.keywords_reversed|join:',' }}"
                     data-reversal-qualifier="{{ card.reversal_qualifier }}">
                    <div class="fan-card-corner fan-card-corner--tl">
                        <span class="fan-corner-rank">{{ card.corner_rank }}</span>
                        {% if card.suit_icon %}<i class="fa-solid {{ card.suit_icon }}"></i>{% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>

        <form id="id_save_sign_form" method="POST" action="{% url 'billboard:save_sign' %}">
            {% csrf_token %}
            <input type="hidden" name="card_id" id="id_save_sign_card_id" value="{{ current_significator.id|default:'' }}">
            <input type="hidden" name="reversed" id="id_save_sign_reversed" value="{{ current_significator_reversed|yesno:'1,0' }}">
            <button type="submit" id="id_save_sign_btn" class="btn btn-primary"{% if not current_significator %} disabled{% endif %}>SAVE SIGN</button>
        </form>

        {# Minimal picker JS — click .sig-card to pick + enable SAVE SIGN.   #}
        {# FLIP-btn integration (reversed toggle) lands w. the stage-card   #}
        {# preview JS in a Sprint 4a-follow-up; for now we just record     #}
        {# the chosen card_id + the FLIP state.                            #}
        <script>
        (function () {
            var grid = document.querySelector('.my-sign-deck-grid');
            if (!grid) return;
            var cardIdInput = document.getElementById('id_save_sign_card_id');
            var saveBtn     = document.getElementById('id_save_sign_btn');
            var flipBtn     = document.querySelector('.my-sign-stage .spin-btn');
            var revInput    = document.getElementById('id_save_sign_reversed');
            grid.addEventListener('click', function (e) {
                var card = e.target.closest('.sig-card');
                if (!card) return;
                grid.querySelectorAll('.sig-card.sig-focused').forEach(function (c) {
                    c.classList.remove('sig-focused');
                });
                card.classList.add('sig-focused');
                cardIdInput.value = card.dataset.cardId;
                saveBtn.removeAttribute('disabled');
            });
            if (flipBtn) {
                flipBtn.addEventListener('click', function () {
                    var current = revInput.value === '1';
                    revInput.value = current ? '0' : '1';
                    flipBtn.classList.toggle('is-reversed', !current);
                });
            }
        }());
        </script>
    {% endif %}
</div>
{% endblock content %}