Files
python-tdd/src/templates/apps/wallet/_partials/_applet-wallet-tokens.html
Disco DeDisco 8e476f5658 feat: wallet Tokens applet shows CARTE + BAND + COIN + PASS independently — Chunk 1 of the Shop applet rollout per [[project-wallet-shop-expansion]]. Pre-Chunk-1 the _applet-wallet-tokens.html template used a {% if pass_token %} ... {% elif band %} ... {% elif coin %} chain that suppressed 2-of-3 trinkets from the wallet whenever the user held a higher-priority one — bad UX since the equip slot is now the user's opt-in for trinket-as-token use per [[feedback-equip-slot-gates-trinket-use]], so ALL owned trinkets need visibility. Fix: dropped the elif chain → independent {% if %} blocks for PASS / BAND / COIN; added a new CARTE block w. fa-money-check icon mirroring the Game Kit's render. View context (apps.dashboard.views.wallet + :toggle_wallet_applets) now passes carte = user.tokens.filter(token_type=Token.CARTE).first() alongside the existing pass/band/coin keys (no is_staff filter — CARTE has no admin gate). TDD — new WalletTokensAppletAllTrinketsVisibleTest (9 ITs): 6 pin individual #id_<token> visibility for a staff user holding all 5 types, 2 pin view-context shape (carte + band keys), 1 pins CARTE-on-non-staff. New FT test_wallet_tokens_applet_shows_all_owned_trinket_types reads BAND/CARTE .tt innerHTML directly (no hover ceremony — already covered by the COIN/FREE hover paths in test_new_user_wallet_shows_starting_balances) to pin the new template blocks server-render full tooltip prose. **Trap caught mid-build**: initial multi-line {# ... #} Django comment leaked as plain text into the rendered DOM (Django's hash-comment is single-line only), pushing the COIN tile off-screen + breaking the existing hover FT. Switched to {% comment %}...{% endcomment %}. Captured in [[feedback-django-comments-single-line-only]] — symptom signature: previously-passing Selenium hover times out + screendump shows literal {# ... text near the broken element. 1169 IT/UT + 6 wallet FTs green
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-21 23:07:42 -04:00

112 lines
4.7 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<section
class="wallet-tokens"
style="--applet-cols: {{ entry.applet.grid_cols }}; --applet-rows: {{ entry.applet.grid_rows }};"
>
<h2>Tokens</h2>
<div class="token-row">
{% comment %}
Trinket-as-token row — each trinket type renders independently (no
if/elif suppression). Every one of PASS/BAND/COIN/CARTE is usable at
the gate; the user picks WHICH via the equip slot per
[[feedback-equip-slot-gates-trinket-use]].
{% endcomment %}
{% if pass_token %}
<div id="id_pass_token" class="token">
<i class="fa-solid fa-clipboard"></i>
<div class="tt">
<h4 class="tt-title">{{ pass_token.tooltip_name }}</h4>
<p class="tt-description">{{ pass_token.tooltip_description }}</p>
{% if pass_token.tooltip_shoptalk %}
<p class="tt-shoptalk"><em>{{ pass_token.tooltip_shoptalk }}</em></p>
{% endif %}
<p class="tt-expiry">{{ pass_token.tooltip_expiry }}</p>
</div>
</div>
{% endif %}
{% if band %}
<div id="id_band_token" class="token">
<i class="fa-solid fa-ring"></i>
<div class="tt">
<h4 class="tt-title">{{ band.tooltip_name }}</h4>
<p class="tt-description">{{ band.tooltip_description }}</p>
{% if band.tooltip_shoptalk %}
<p class="tt-shoptalk"><em>{{ band.tooltip_shoptalk }}</em></p>
{% endif %}
<p class="tt-expiry">{{ band.tooltip_expiry }}</p>
</div>
</div>
{% endif %}
{% if coin %}
<div id="id_coin_on_a_string" class="token">
<i class="fa-solid fa-medal"></i>
<div class="tt">
<h4 class="tt-title">{{ coin.tooltip_name }}</h4>
<p class="tt-description">{{ coin.tooltip_description }}</p>
{% if coin.tooltip_shoptalk %}
<p class="tt-shoptalk"><em>{{ coin.tooltip_shoptalk }}</em></p>
{% endif %}
<p class="tt-expiry">{{ coin.tooltip_expiry }}</p>
</div>
</div>
{% endif %}
{% if carte %}
<div id="id_carte_token" class="token">
<i class="fa-solid fa-money-check"></i>
<div class="tt">
<h4 class="tt-title">{{ carte.tooltip_name }}</h4>
<p class="tt-description">{{ carte.tooltip_description }}</p>
{% if carte.tooltip_shoptalk %}
<p class="tt-shoptalk"><em>{{ carte.tooltip_shoptalk }}</em></p>
{% endif %}
<p class="tt-expiry">{{ carte.tooltip_expiry }}</p>
</div>
</div>
{% endif %}
{% if free_tokens %}
{% with free_tokens.0 as token %}
<div id="id_free_token" class="token">
<i class="fa-solid fa-coins"></i>
<div class="tt">
<h4 class="tt-title">{{ token.tooltip_name }}{% if free_count > 1 %} <span class="token-count">(×{{ free_count }})</span>{% endif %}</h4>
<p class="tt-description">{{ token.tooltip_description }}</p>
{% if token.tooltip_shoptalk %}
<p class="tt-shoptalk"><em>{{ token.tooltip_shoptalk }}</em></p>
{% endif %}
<p class="tt-expiry">{{ token.tooltip_expiry }}</p>
</div>
</div>
{% endwith %}
{% else %}
<div id="id_free_token_empty" class="token token--empty">
<i class="fa-solid fa-coins"></i>
<div class="tt">
<h4 class="tt-title">Free Token</h4>
<p class="tt-description">0 owned</p>
<p class="tt-expiry">find one around</p>
</div>
</div>
{% endif %}
{% if tithe_tokens %}
{% with tithe_tokens.0 as token %}
<div id="id_tithe_token" class="token">
<i class="fa-solid fa-piggy-bank"></i>
<div class="tt">
<h4 class="tt-title">{{ token.tooltip_name }}{% if tithe_count > 1 %} <span class="token-count">(×{{ tithe_count }})</span>{% endif %}</h4>
<p class="tt-description">{{ token.tooltip_description }}</p>
<p class="tt-expiry">{{ token.tooltip_expiry }}</p>
</div>
</div>
{% endwith %}
{% else %}
<div id="id_tithe_token_empty" class="token token--empty">
<i class="fa-solid fa-piggy-bank"></i>
<div class="tt">
<h4 class="tt-title">Tithe Token</h4>
<p class="tt-description">0 owned</p>
<p class="tt-expiry">purchase one above</p>
</div>
</div>
{% endif %}
</div>
</section>