mirror of
https://github.com/mwisnowski/mtg_python_deckbuilder.git
synced 2025-12-16 23:50:12 +01:00
70 lines
4.3 KiB
HTML
70 lines
4.3 KiB
HTML
<div class="random-result" id="random-result">
|
||
<style>
|
||
.diag-badges{display:inline-flex; gap:4px; margin-left:8px; flex-wrap:wrap;}
|
||
.diag-badge{background:var(--panel-alt,#334155); color:#fff; padding:2px 6px; border-radius:12px; font-size:10px; letter-spacing:.5px; line-height:1.2;}
|
||
.diag-badge.warn{background:#8a6d3b;}
|
||
.diag-badge.err{background:#7f1d1d;}
|
||
.diag-badge.fallback{background:#4f46e5;}
|
||
.btn-compact{font-size:11px; padding:2px 6px; line-height:1.2;}
|
||
</style>
|
||
<div class="random-meta" style="display:flex; gap:12px; align-items:center; flex-wrap:wrap;">
|
||
<span class="seed">Seed: <strong>{{ seed }}</strong></span>
|
||
{% if theme %}<span class="theme">Theme: <strong>{{ theme }}</strong></span>{% endif %}
|
||
{% if permalink %}
|
||
<button class="btn btn-compact" type="button" aria-label="Copy permalink for this exact build" onclick="(async()=>{try{await navigator.clipboard.writeText(location.origin + '{{ permalink }}');(window.toast&&toast('Permalink copied'))||console.log('Permalink copied');}catch(e){alert('Copy failed');}})()">Copy Permalink</button>
|
||
{% endif %}
|
||
{% if show_diagnostics and diagnostics %}
|
||
<span class="diag-badges" aria-label="Diagnostics" role="group">
|
||
<span class="diag-badge" title="Attempts tried before acceptance">Att {{ diagnostics.attempts }}</span>
|
||
<span class="diag-badge" title="Elapsed build time in milliseconds">{{ diagnostics.elapsed_ms }}ms</span>
|
||
{% if diagnostics.timeout_hit %}<span class="diag-badge warn" title="Generation loop exceeded timeout limit before success">Timeout</span>{% endif %}
|
||
{% if diagnostics.retries_exhausted %}<span class="diag-badge warn" title="All allotted attempts were used without an early acceptable candidate">Retries</span>{% endif %}
|
||
{% if fallback or diagnostics.fallback %}<span class="diag-badge fallback" title="Original theme produced no candidates; Surprise mode fallback engaged">Fallback</span>{% endif %}
|
||
</span>
|
||
{% endif %}
|
||
</div>
|
||
<!-- Hidden current seed so HTMX reroll button can include it via hx-include -->
|
||
<input type="hidden" id="current-seed" name="seed" value="{{ seed }}" />
|
||
<input type="hidden" id="current-commander" name="commander" value="{{ commander }}" />
|
||
<div class="commander-block" style="display:flex; gap:14px; align-items:flex-start; margin-top:.75rem;">
|
||
<div class="commander-thumb" style="flex:0 0 auto;">
|
||
<img
|
||
src="https://api.scryfall.com/cards/named?fuzzy={{ commander|urlencode }}&format=image&version=small"
|
||
srcset="https://api.scryfall.com/cards/named?fuzzy={{ commander|urlencode }}&format=image&version=small 160w, https://api.scryfall.com/cards/named?fuzzy={{ commander|urlencode }}&format=image&version=normal 488w"
|
||
sizes="(max-width: 600px) 120px, 160px"
|
||
alt="{{ commander }} image"
|
||
width="160" height="220"
|
||
style="width:160px; height:auto; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.55); border:1px solid var(--border); background:#0f1115;"
|
||
class="commander-img"
|
||
loading="lazy" decoding="async"
|
||
data-card-name="{{ commander }}" />
|
||
</div>
|
||
<div style="flex:1 1 auto;">
|
||
<div class="muted" style="font-size:12px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;">Commander</div>
|
||
<h3 class="commander" style="margin:.15rem 0 0 0;" data-card-name="{{ commander }}">{{ commander }}</h3>
|
||
</div>
|
||
</div>
|
||
{% if summary %}
|
||
{# Reuse the comprehensive deck summary partial #}
|
||
{% include "partials/deck_summary.html" %}
|
||
{% else %}
|
||
<ul class="decklist">
|
||
{% for card in decklist %}
|
||
{% if card.name %}
|
||
<li>{{ card.name }}{% if card.count %} ×{{ card.count }}{% endif %}</li>
|
||
{% else %}
|
||
<li>{{ card }}</li>
|
||
{% endif %}
|
||
{% endfor %}
|
||
</ul>
|
||
{% endif %}
|
||
<script>
|
||
// Re-run bindings after OOB swap so hover & view toggle work consistently
|
||
(function(){
|
||
try { if (window.bindAllCardImageRetries) window.bindAllCardImageRetries(); } catch(_) {}
|
||
try { if (window.attachCardHover) window.attachCardHover(); } catch(_) {}
|
||
// Deck summary initializer (idempotent) – will assign aria-selected
|
||
try { if (window.initDeckSummaryTypeView) window.initDeckSummaryTypeView(document.getElementById('random-result')); } catch(_) {}
|
||
})();
|
||
</script>
|
||
</div>
|