91 lines
6.0 KiB
HTML
91 lines
6.0 KiB
HTML
<section
|
|
id="id_applet_my_sea"
|
|
style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
|
|
>
|
|
<h2><a href="{% url 'my_sea' %}">My Sea</a></h2>
|
|
{# `my_sea_slots` (built by `latest_draw_slots()` in `gameboard.models`) #}
|
|
{# carries one entry per spread position in DRAW_ORDER — filled slots #}
|
|
{# render the drawn card, empty slots render as labelled placeholders. #}
|
|
{# Spread lock-in: the row is created at first card draw, so the moment #}
|
|
{# 1+ cards exist all the spread's positions show in the applet. The #}
|
|
{# scroll container handles overflow (mirrors the Palettes applet). #}
|
|
{# Slot display is INDEPENDENT of `request.user.significator_id` — the #}
|
|
{# MySeaDraw row snapshots the sig at first-draw time (see #}
|
|
{# `gameboard.models.MySeaDraw` doc lines 130-132), so a subsequent #}
|
|
{# my-sign DEL doesn't invalidate the saved draw. The sig-gate Brief #}
|
|
{# banner only shows when the user has NO draws AND no sig — once draws #}
|
|
{# exist, they render regardless of current sig state (user spec #}
|
|
{# 2026-05-25 PM bug-report). #}
|
|
{% if my_sea_slots %}
|
|
<div class="my-sea-scroll">
|
|
{% for slot in my_sea_slots %}
|
|
{% if slot.card %}
|
|
<div class="my-sea-slot-wrap">
|
|
{# Mirrors the my_sign.html `.sig-stage-card` layout — #}
|
|
{# corner top-left, face w. name + arcana, mirror corner #}
|
|
{# bottom-right. Label is a SIBLING of the slot inside #}
|
|
{# the wrap so it sits BELOW the slot box (user-spec #}
|
|
{# 2026-05-23: same position as the my_sea.html picker's #}
|
|
{# `.sea-pos-label`). #}
|
|
<div class="my-sea-slot my-sea-slot--filled my-sea-slot--{{ slot.polarity }}{% if slot.reversed %} my-sea-slot--reversed{% endif %}{% if slot.card.deck_variant.has_card_images %} my-sea-slot--image{% endif %}"
|
|
data-position="{{ slot.position }}"
|
|
data-card-id="{{ slot.card.id }}"
|
|
data-arcana-key="{{ slot.card.arcana }}">
|
|
{% if slot.card.deck_variant.has_card_images %}
|
|
{# Sprint A.7 — image-mode slot render. Shares the #}
|
|
{# `.sig-stage-card-img` SCSS rule via the #}
|
|
{# `.my-sea-slot--image` comma-list addition in #}
|
|
{# `_card-deck.scss`. Contour stroke + depth shadow #}
|
|
{# scale w. the slot's smaller dimensions. #}
|
|
<img class="sig-stage-card-img" src="{{ slot.card.image_url }}" alt="{{ slot.card.name }}">
|
|
{% else %}
|
|
<div class="fan-card-corner fan-card-corner--tl">
|
|
<span class="fan-corner-rank">{{ slot.card.corner_rank }}</span>
|
|
{% if slot.card.suit_icon %}<i class="fa-solid {{ slot.card.suit_icon }}"></i>{% endif %}
|
|
</div>
|
|
<div class="fan-card-face">
|
|
{# `slot.face` is the rendering payload from `TarotCard. #}
|
|
{# applet_face()` — mirrors `populateCard` in #}
|
|
{# `stage-card.js`: #}
|
|
{# • Polarity-split (cards 19-21, 48-49): single-line #}
|
|
{# title, qualifier blank. #}
|
|
{# • Pattern B Major (2-5, 10-15, 22-35, 41): swapped #}
|
|
{# reversal name + polarity qualifier carried. #}
|
|
{# • Pattern B' Major (16-18): swapped reversal name, #}
|
|
{# no qualifier on reversal. #}
|
|
{# • Non-Major: qualifier ABOVE the title. #}
|
|
{# Empty `.fan-card-qualifier` is hidden by `:empty` CSS. #}
|
|
{% if slot.face.qualifier_first %}
|
|
<p class="fan-card-qualifier">{{ slot.face.qualifier }}</p>
|
|
<p class="fan-card-name">{{ slot.face.title }}</p>
|
|
{% else %}
|
|
<p class="fan-card-name">{{ slot.face.title }}</p>
|
|
<p class="fan-card-qualifier">{{ slot.face.qualifier }}</p>
|
|
{% endif %}
|
|
<p class="fan-card-arcana">{{ slot.card.get_arcana_display }}</p>
|
|
</div>
|
|
<div class="fan-card-corner fan-card-corner--br">
|
|
<span class="fan-corner-rank">{{ slot.card.corner_rank }}</span>
|
|
{% if slot.card.suit_icon %}<i class="fa-solid {{ slot.card.suit_icon }}"></i>{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<span class="my-sea-slot-label">{{ slot.label }}</span>
|
|
</div>
|
|
{% else %}
|
|
<div class="my-sea-slot-wrap">
|
|
<div class="my-sea-slot my-sea-slot--empty"
|
|
data-position="{{ slot.position }}"></div>
|
|
<span class="my-sea-slot-label my-sea-slot-label--empty">{{ slot.label }}</span>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
{% if not request.user.significator_id %}
|
|
{% include "apps/gameboard/_partials/_my_sea_sign_gate_brief.html" %}
|
|
{% endif %}
|
|
<p class="my-sea-empty">No draws yet.</p>
|
|
{% endif %}
|
|
</section>
|