python-tdd/src/templates/apps/billboard/_partials/_applet-my-sign.html

<section
    id="id_applet_my_sign"
    style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
>
    <h2><a href="{% url 'billboard:my_sign' %}">My Sign</a></h2>
    <div class="my-sign-applet-body"
         data-polarity="{% if request.user.significator_reversed %}levity{% else %}gravity{% endif %}">
        {% if request.user.significator %}
            {% with card=request.user.significator %}
            {# Mirrors the my_sign.html `.sig-stage-card` layout — corner #}
            {# top-left, name + polarity qualifier in the face, mirror   #}
            {# corner bottom-right (pre-rotated). Sized to fill the     #}
            {# applet's vertical aperture via container queries in       #}
            {# `_billboard.scss`. `significator_reversed` is the POLARITY #}
            {# axis (True ↔ levity), so the saved sig is always upright  #}
            {# in its polarity — no `.stage-card--reversed` rotation.    #}
            <div class="my-sign-applet-card my-sign-applet-card--{% if request.user.significator_reversed %}levity{% else %}gravity{% endif %}{% if card.deck_variant.has_card_images %} my-sign-applet-card--image{% endif %}"
                 data-card-id="{{ card.id }}"
                 data-arcana-key="{{ card.arcana }}">
                {% if card.deck_variant.has_card_images %}
                    {# Sprint A.6 — image-mode render mirrors my_sign.html's   #}
                    {# .sig-stage-card--image treatment. Shares the SCSS rule  #}
                    {# (comma-list selector) so the contour stroke + tray-card #}
                    {# silhouette black depth shadow + arcana stroke-color    #}
                    {# come for free.                                          #}
                    <img class="sig-stage-card-img" src="{{ card.image_url }}" alt="{{ card.name }}">
                    {% if not card.deck_variant.is_polarized %}
                    {# Non-polarized image deck: FLIP btn shows the deck back  #}
                    {# image (same behavior as my_sign.html main page). Both   #}
                    {# the back-img + flip-btn nest INSIDE the card so the    #}
                    {# absolute-positioned FLIP btn anchors to the card's     #}
                    {# bounds (card is position: relative in --image mode).   #}
                    <img class="sig-stage-card-back-img" alt=""
                         src="{{ card.deck_variant.back_image_url }}">
                    <button class="btn btn-reveal my-sign-applet-flip-btn"
                            type="button"
                            aria-label="Flip to deck back">FLIP</button>
                    {% endif %}
                {% else %}
                    <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 class="fan-card-face">
                        {# `request.user.sig_face` is the rendering payload from #}
                        {# `TarotCard.applet_face()` — mirrors `populateCard` in #}
                        {# `stage-card.js:135-144`:                              #}
                        {#   • Polarity-split (cards 48-49, trumps 19-21):       #}
                        {#     single-line title, qualifier blank.                #}
                        {#   • Major + qualifier: title carries a trailing       #}
                        {#     comma + qualifier renders BELOW.                  #}
                        {#   • Non-Major (middle court, Schizo / Nomad w. no    #}
                        {#     qualifier): qualifier renders ABOVE the title.   #}
                        {% with face=request.user.sig_face %}
                        {% if face.qualifier_first %}
                            <p class="fan-card-qualifier">{{ face.qualifier }}</p>
                            <p class="fan-card-name">{{ face.title }}</p>
                        {% else %}
                            <p class="fan-card-name">{{ face.title }}</p>
                            <p class="fan-card-qualifier">{{ face.qualifier }}</p>
                        {% endif %}
                        {% endwith %}
                        <p class="fan-card-arcana">{{ card.get_arcana_display }}</p>
                    </div>
                    <div class="fan-card-corner fan-card-corner--br">
                        <span class="fan-corner-rank">{{ card.corner_rank }}</span>
                        {% if card.suit_icon %}<i class="fa-solid {{ card.suit_icon }}"></i>{% endif %}
                    </div>
                {% endif %}
            </div>
            {# Stat block — same shape as my_sign.html's `.sig-stat-block`  #}
            {# (Emanation face label + keyword list) but no SPIN/FYI btns  #}
            {# since the applet is a read-only preview. Saved sigs persist #}
            {# only the polarity axis (FLIP), never the orientation axis   #}
            {# (SPIN), so always render the upright/emanation face.        #}
            <div class="my-sign-applet-stat-block" data-arcana-key="{{ card.arcana }}">
                {# Sprint A.7.5 — `.stat-face-header` wraps the rank+suit chip #}
                {# inline w. EMANATION per [[project-image-based-deck-face-   #}
                {# rendering]]'s A.3 Q3 spec. Server-rendered (read-only      #}
                {# applet — no JS populate path).                              #}
                <div class="stat-face-header">
                    <span class="stat-chip-rank">{{ card.corner_rank }}</span>
                    <div class="stat-chip-tag">
                        {% if card.suit_icon %}<i class="fa-solid {{ card.suit_icon }} stat-chip-icon"></i>{% endif %}
                        <p class="stat-face-label">Emanation</p>
                    </div>
                </div>
                <p class="stat-face-title">{{ card.name }}</p>
                <p class="stat-face-arcana">{{ card.get_arcana_display }}</p>
                <ul class="stat-keywords">
                    {% for kw in card.keywords_upright %}
                        <li>{{ kw }}</li>
                    {% endfor %}
                </ul>
            </div>
            {# Sprint A.6 — applet FLIP btn handler. Mirrors my_sign.html's    #}
            {# `_flipToBackAnimated()` shape (rotateY 0→90→0 over 500ms, class  #}
            {# toggle at halfway, `data-flipping` attr for SCSS to hide the    #}
            {# btn). Self-contained inline script — no shared module needed    #}
            {# since the applet is the only consumer outside the main page    #}
            {# (which has its own copy). Script wrapped inside the sig-present #}
            {# branch AND inside `{% with card %}` scope so `card` references  #}
            {# resolve + the JS selector strings don't leak into the no-sig    #}
            {# DOM (which would trip substring-matching tests).                 #}
            {% if card.deck_variant.has_card_images and not card.deck_variant.is_polarized %}
            <script>
            (function () {
                var applet = document.getElementById('id_applet_my_sign');
                if (!applet) return;
                var c = applet.querySelector('.my-sign-applet-card--image');
                var b = applet.querySelector('.my-sign-applet-flip-btn');
                if (!c || !b) return;
                b.addEventListener('click', function () {
                    if (c.dataset.flipping) return;
                    c.dataset.flipping = '1';
                    var rest = 'rotateY(0deg)';
                    var mid  = 'rotateY(90deg)';
                    c.animate([
                        { transform: rest },
                        { transform: mid, offset: 0.5 },
                        { transform: rest },
                    ], { duration: 500, easing: 'ease' });
                    setTimeout(function () {
                        c.classList.toggle('is-flipped-to-back');
                        b.classList.toggle(
                            'is-reversed',
                            c.classList.contains('is-flipped-to-back')
                        );
                    }, 250);
                    setTimeout(function () { delete c.dataset.flipping; }, 500);
                });
            }());
            </script>
            {% endif %}
            {% endwith %}
        {% else %}
            <p class="my-sign-applet-empty">No sign chosen yet.</p>
        {% endif %}
    </div>
</section>