mirror of
https://github.com/mwisnowski/mtg_python_deckbuilder.git
synced 2026-01-10 19:48:51 +01:00
feat: optimize must-have controls and commander catalog
This commit is contained in:
matt
parent
b7bfc4ca09
commit
3877890889
23 changed files with 1150 additions and 87 deletions
|
|
@ -35,6 +35,9 @@
|
|||
}catch(_){ }
|
||||
})();
|
||||
</script>
|
||||
<script>
|
||||
window.__telemetryEndpoint = '/telemetry/events';
|
||||
</script>
|
||||
<link rel="stylesheet" href="/static/styles.css?v=20250911-1" />
|
||||
<!-- Performance hints -->
|
||||
<link rel="preconnect" href="https://api.scryfall.com" crossorigin>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@
|
|||
{% set toggle_label = 'Owned only: On' if require_owned else 'Owned only: Off' %}
|
||||
<div style="display:flex; gap:.35rem; flex-wrap:wrap;">
|
||||
<button class="btn" hx-get="/build/alternatives?name={{ name|urlencode }}&owned_only={{ toggle_q }}"
|
||||
hx-target="closest .alts" hx-swap="outerHTML">{{ toggle_label }}</button>
|
||||
hx-target="closest .alts" hx-swap="outerHTML"
|
||||
data-hx-cache="1" data-hx-cache-key="alts:{{ name|lower }}:owned:{{ toggle_q }}" data-hx-cache-ttl="20000">{{ toggle_label }}</button>
|
||||
<button class="btn" hx-get="/build/alternatives?name={{ name|urlencode }}&owned_only={{ 1 if require_owned else 0 }}&refresh=1"
|
||||
hx-target="closest .alts" hx-swap="outerHTML" title="Request a fresh pool of alternatives">New pool</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@
|
|||
<button type="button" id="cand-{{ loop.index0 }}" class="chip candidate-btn" role="option" data-idx="{{ loop.index0 }}" data-name="{{ cand.value|e }}" data-display="{{ cand.display|e }}"
|
||||
hx-get="/build/new/inspect?name={{ cand.display|urlencode }}"
|
||||
hx-target="#newdeck-tags-slot" hx-swap="innerHTML"
|
||||
data-hx-cache="1" data-hx-cache-key="newdeck:inspect:{{ cand.display|lower }}" data-hx-cache-ttl="45000"
|
||||
data-hx-prefetch="/build/new/inspect?name={{ cand.display|urlencode }}"
|
||||
hx-on="htmx:afterOnLoad: (function(){ try{ var preferred=this.getAttribute('data-name')||''; var displayed=this.getAttribute('data-display')||preferred; var ci = document.querySelector('input[name=commander]'); if(ci){ ci.value=preferred; try{ ci.selectionStart = ci.selectionEnd = ci.value.length; }catch(_){} try{ ci.dispatchEvent(new Event('input', { bubbles: true })); }catch(_){ } } var nm = document.querySelector('input[name=name]'); if(nm && (!nm.value || !nm.value.trim())){ nm.value=displayed; } }catch(_){ } }).call(this)">
|
||||
{{ cand.display }}
|
||||
{% if cand.warning %}
|
||||
|
|
|
|||
|
|
@ -206,6 +206,11 @@
|
|||
Enter one card name per line. Cards are validated against the database with smart name matching.
|
||||
</small>
|
||||
</fieldset>
|
||||
{% if not show_must_have_buttons %}
|
||||
<div class="muted" style="font-size:12px; margin-top:.75rem;">
|
||||
Step 5 quick-add buttons are hidden (<code>SHOW_MUST_HAVE_BUTTONS=0</code>), but you can still seed must include/exclude lists here.
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
<details style="margin-top:.5rem;">
|
||||
<summary>Advanced options (ideals)</summary>
|
||||
|
|
|
|||
|
|
@ -356,8 +356,9 @@
|
|||
{% for c in g.list %}
|
||||
{% set owned = (owned_set is defined and c.name and (c.name|lower in owned_set)) %}
|
||||
{% set is_locked = (locks is defined and (c.name|lower in locks)) %}
|
||||
<div class="card-tile{% if game_changers and (c.name in game_changers) %} game-changer{% endif %}{% if is_locked %} locked{% endif %}"
|
||||
data-card-name="{{ c.name }}" data-role="{{ c.role or c.sub_role or '' }}" data-tags="{{ (c.tags|join(', ')) if c.tags else '' }}" data-tags-slug="{{ (c.tags_slug|join(', ')) if c.tags_slug else '' }}" data-owned="{{ '1' if owned else '0' }}"{% if c.reason %} data-reasons="{{ c.reason|e }}"{% endif %}>
|
||||
<div class="card-tile{% if game_changers and (c.name in game_changers) %} game-changer{% endif %}{% if is_locked %} locked{% endif %}{% if c.must_include %} must-include{% endif %}{% if c.must_exclude %} must-exclude{% endif %}"
|
||||
data-card-name="{{ c.name }}" data-role="{{ c.role or c.sub_role or '' }}" data-tags="{{ (c.tags|join(', ')) if c.tags else '' }}" data-tags-slug="{{ (c.tags_slug|join(', ')) if c.tags_slug else '' }}" data-owned="{{ '1' if owned else '0' }}"{% if c.reason %} data-reasons="{{ c.reason|e }}"{% endif %}
|
||||
data-must-include="{{ '1' if c.must_include else '0' }}" data-must-exclude="{{ '1' if c.must_exclude else '0' }}">
|
||||
<div class="img-btn" role="button" tabindex="0" title="Tap or click to view {{ c.name }}" aria-label="View {{ c.name }} details">
|
||||
<img class="card-thumb" src="https://api.scryfall.com/cards/named?fuzzy={{ c.name|urlencode }}&format=image&version=normal" alt="{{ c.name }} image" width="160" data-card-name="{{ c.name }}" loading="lazy" decoding="async" data-lqip="1"
|
||||
srcset="https://api.scryfall.com/cards/named?fuzzy={{ c.name|urlencode }}&format=image&version=small 160w, https://api.scryfall.com/cards/named?fuzzy={{ c.name|urlencode }}&format=image&version=normal 488w, https://api.scryfall.com/cards/named?fuzzy={{ c.name|urlencode }}&format=image&version=large 672w"
|
||||
|
|
@ -369,15 +370,25 @@
|
|||
{% from 'partials/_macros.html' import lock_button %}
|
||||
{{ lock_button(c.name, is_locked) }}
|
||||
</div>
|
||||
{% if allow_must_haves and show_must_have_buttons %}
|
||||
<div class="must-have-controls" role="group" aria-label="Must have controls">
|
||||
<button type="button" class="btn-chip must-have-btn include" data-toggle="include" data-card-name="{{ c.name }}" data-card-label="{{ c.must_include_label or c.name }}" data-active="{{ '1' if c.must_include else '0' }}" title="Must include forces future reruns to add this card whenever it's legal. Unlike Lock, it re-adds the card if it falls out.">Must include</button>
|
||||
<button type="button" class="btn-chip must-have-btn exclude" data-toggle="exclude" data-card-name="{{ c.name }}" data-card-label="{{ c.must_exclude_label or c.name }}" data-active="{{ '1' if c.must_exclude else '0' }}" title="Must exclude keeps this card out of future reruns before selection. Use it when you never want the builder to pick it again.">Must exclude</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if c.reason %}
|
||||
<div style="display:flex; justify-content:center; margin-top:.25rem; gap:.35rem; flex-wrap:wrap;">
|
||||
<button type="button" class="btn-why" aria-expanded="false">Why?</button>
|
||||
<button type="button" class="btn" hx-get="/build/alternatives" hx-vals='{"name": "{{ c.name }}"}' hx-target="#alts-{{ group_idx }}-{{ loop.index0 }}" hx-swap="innerHTML" title="Suggest alternatives">Alternatives</button>
|
||||
<button type="button" class="btn" hx-get="/build/alternatives" hx-vals='{"name": "{{ c.name }}"}' hx-target="#alts-{{ group_idx }}-{{ loop.index0 }}" hx-swap="innerHTML" title="Suggest alternatives"
|
||||
data-hx-cache="1" data-hx-cache-key="alts:{{ c.name|lower }}" data-hx-cache-ttl="20000"
|
||||
data-hx-prefetch="/build/alternatives?name={{ c.name|urlencode }}">Alternatives</button>
|
||||
</div>
|
||||
<div class="reason" role="region" aria-label="Reason">{{ c.reason }}</div>
|
||||
{% else %}
|
||||
<div style="display:flex; justify-content:center; margin-top:.25rem;">
|
||||
<button type="button" class="btn" hx-get="/build/alternatives" hx-vals='{"name": "{{ c.name }}"}' hx-target="#alts-{{ group_idx }}-{{ loop.index0 }}" hx-swap="innerHTML" title="Suggest alternatives">Alternatives</button>
|
||||
<button type="button" class="btn" hx-get="/build/alternatives" hx-vals='{"name": "{{ c.name }}"}' hx-target="#alts-{{ group_idx }}-{{ loop.index0 }}" hx-swap="innerHTML" title="Suggest alternatives"
|
||||
data-hx-cache="1" data-hx-cache-key="alts:{{ c.name|lower }}" data-hx-cache-ttl="20000"
|
||||
data-hx-prefetch="/build/alternatives?name={{ c.name|urlencode }}">Alternatives</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div id="alts-{{ group_idx }}-{{ loop.index0 }}" class="alts" style="margin-top:.25rem;"></div>
|
||||
|
|
@ -391,8 +402,9 @@
|
|||
{% for c in added_cards %}
|
||||
{% set owned = (owned_set is defined and c.name and (c.name|lower in owned_set)) %}
|
||||
{% set is_locked = (locks is defined and (c.name|lower in locks)) %}
|
||||
<div class="card-tile{% if game_changers and (c.name in game_changers) %} game-changer{% endif %}{% if is_locked %} locked{% endif %}"
|
||||
data-card-name="{{ c.name }}" data-role="{{ c.role or c.sub_role or '' }}" data-tags="{{ (c.tags|join(', ')) if c.tags else '' }}" data-tags-slug="{{ (c.tags_slug|join(', ')) if c.tags_slug else '' }}" data-owned="{{ '1' if owned else '0' }}"{% if c.reason %} data-reasons="{{ c.reason|e }}"{% endif %}>
|
||||
<div class="card-tile{% if game_changers and (c.name in game_changers) %} game-changer{% endif %}{% if is_locked %} locked{% endif %}{% if c.must_include %} must-include{% endif %}{% if c.must_exclude %} must-exclude{% endif %}"
|
||||
data-card-name="{{ c.name }}" data-role="{{ c.role or c.sub_role or '' }}" data-tags="{{ (c.tags|join(', ')) if c.tags else '' }}" data-tags-slug="{{ (c.tags_slug|join(', ')) if c.tags_slug else '' }}" data-owned="{{ '1' if owned else '0' }}"{% if c.reason %} data-reasons="{{ c.reason|e }}"{% endif %}
|
||||
data-must-include="{{ '1' if c.must_include else '0' }}" data-must-exclude="{{ '1' if c.must_exclude else '0' }}">
|
||||
<div class="img-btn" role="button" tabindex="0" title="Tap or click to view {{ c.name }}" aria-label="View {{ c.name }} details">
|
||||
<img class="card-thumb" src="https://api.scryfall.com/cards/named?fuzzy={{ c.name|urlencode }}&format=image&version=normal" alt="{{ c.name }} image" width="160" data-card-name="{{ c.name }}" loading="lazy" decoding="async" data-lqip="1"
|
||||
srcset="https://api.scryfall.com/cards/named?fuzzy={{ c.name|urlencode }}&format=image&version=small 160w, https://api.scryfall.com/cards/named?fuzzy={{ c.name|urlencode }}&format=image&version=normal 488w, https://api.scryfall.com/cards/named?fuzzy={{ c.name|urlencode }}&format=image&version=large 672w"
|
||||
|
|
@ -404,15 +416,25 @@
|
|||
{% from 'partials/_macros.html' import lock_button %}
|
||||
{{ lock_button(c.name, is_locked) }}
|
||||
</div>
|
||||
{% if allow_must_haves and show_must_have_buttons %}
|
||||
<div class="must-have-controls" role="group" aria-label="Must have controls">
|
||||
<button type="button" class="btn-chip must-have-btn include" data-toggle="include" data-card-name="{{ c.name }}" data-card-label="{{ c.must_include_label or c.name }}" data-active="{{ '1' if c.must_include else '0' }}" title="Must include forces future reruns to add this card whenever it's legal. Unlike Lock, it re-adds the card if it falls out.">Must include</button>
|
||||
<button type="button" class="btn-chip must-have-btn exclude" data-toggle="exclude" data-card-name="{{ c.name }}" data-card-label="{{ c.must_exclude_label or c.name }}" data-active="{{ '1' if c.must_exclude else '0' }}" title="Must exclude keeps this card out of future reruns before selection. Use it when you never want the builder to pick it again.">Must exclude</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if c.reason %}
|
||||
<div style="display:flex; justify-content:center; margin-top:.25rem; gap:.35rem; flex-wrap:wrap;">
|
||||
<button type="button" class="btn-why" aria-expanded="false">Why?</button>
|
||||
<button type="button" class="btn" hx-get="/build/alternatives" hx-vals='{"name": "{{ c.name }}"}' hx-target="#alts-{{ loop.index0 }}" hx-swap="innerHTML" title="Suggest alternatives">Alternatives</button>
|
||||
<button type="button" class="btn" hx-get="/build/alternatives" hx-vals='{"name": "{{ c.name }}"}' hx-target="#alts-{{ loop.index0 }}" hx-swap="innerHTML" title="Suggest alternatives"
|
||||
data-hx-cache="1" data-hx-cache-key="alts:{{ c.name|lower }}" data-hx-cache-ttl="20000"
|
||||
data-hx-prefetch="/build/alternatives?name={{ c.name|urlencode }}">Alternatives</button>
|
||||
</div>
|
||||
<div class="reason" role="region" aria-label="Reason">{{ c.reason }}</div>
|
||||
{% else %}
|
||||
<div style="display:flex; justify-content:center; margin-top:.25rem;">
|
||||
<button type="button" class="btn" hx-get="/build/alternatives" hx-vals='{"name": "{{ c.name }}"}' hx-target="#alts-{{ loop.index0 }}" hx-swap="innerHTML" title="Suggest alternatives">Alternatives</button>
|
||||
<button type="button" class="btn" hx-get="/build/alternatives" hx-vals='{"name": "{{ c.name }}"}' hx-target="#alts-{{ loop.index0 }}" hx-swap="innerHTML" title="Suggest alternatives"
|
||||
data-hx-cache="1" data-hx-cache-key="alts:{{ c.name|lower }}" data-hx-cache-ttl="20000"
|
||||
data-hx-prefetch="/build/alternatives?name={{ c.name|urlencode }}">Alternatives</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div id="alts-{{ loop.index0 }}" class="alts" style="margin-top:.25rem;"></div>
|
||||
|
|
@ -420,7 +442,11 @@
|
|||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if allow_must_haves and show_must_have_buttons %}
|
||||
<div class="muted" style="font-size:12px; margin:.35rem 0 .25rem 0;">Tip: Use the 🔒 Lock button to preserve the current copy in the deck. “Must include” will try to pull the card back in on future reruns, while “Must exclude” blocks the engine from selecting it again. Tap or click the card art to view details without changing the lock state.</div>
|
||||
{% else %}
|
||||
<div class="muted" style="font-size:12px; margin:.35rem 0 .25rem 0;">Tip: Use the 🔒 Lock button under each card to keep it across reruns. Tap or click the card art to view details without changing the lock state.</div>
|
||||
{% endif %}
|
||||
<div data-empty hidden role="status" aria-live="polite" class="muted" style="margin:.5rem 0 0;">
|
||||
No cards match your filters.
|
||||
</div>
|
||||
|
|
@ -435,10 +461,10 @@
|
|||
|
||||
<!-- controls now above -->
|
||||
|
||||
{% if status and status.startswith('Build complete') and summary %}
|
||||
<!-- Include/Exclude Summary Panel (M3: Include/Exclude Summary Panel) -->
|
||||
{% if allow_must_haves %}
|
||||
{% include "partials/include_exclude_summary.html" %}
|
||||
|
||||
{% endif %}
|
||||
{% if status and status.startswith('Build complete') and summary %}
|
||||
{% include "partials/deck_summary.html" %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -45,30 +45,45 @@
|
|||
<button type="submit" class="btn filter-submit">Apply</button>
|
||||
</form>
|
||||
|
||||
<div id="commander-loading" class="commander-loading" role="status" aria-live="polite">
|
||||
<span class="sr-only">Loading commanders…</span>
|
||||
<div class="commander-skeleton-list" aria-hidden="true">
|
||||
{% for i in range(3) %}
|
||||
<article class="commander-skeleton">
|
||||
<div class="skeleton-thumb shimmer"></div>
|
||||
<div class="skeleton-main">
|
||||
<div class="skeleton-line skeleton-title shimmer"></div>
|
||||
<div class="skeleton-line skeleton-meta shimmer"></div>
|
||||
<div class="skeleton-chip-row">
|
||||
<span class="skeleton-chip shimmer"></span>
|
||||
<span class="skeleton-chip shimmer"></span>
|
||||
<span class="skeleton-chip shimmer"></span>
|
||||
<div
|
||||
id="commander-results"
|
||||
data-skeleton
|
||||
data-skeleton-label=""
|
||||
data-skeleton-delay="420"
|
||||
data-skeleton-overlay="false"
|
||||
aria-live="polite"
|
||||
>
|
||||
<div
|
||||
id="commander-loading"
|
||||
class="commander-loading"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
data-skeleton-placeholder
|
||||
>
|
||||
<span class="sr-only">Loading commanders…</span>
|
||||
<div class="commander-skeleton-list" aria-hidden="true">
|
||||
{% for i in range(3) %}
|
||||
<article class="commander-skeleton">
|
||||
<div class="skeleton-thumb shimmer"></div>
|
||||
<div class="skeleton-main">
|
||||
<div class="skeleton-line skeleton-title shimmer"></div>
|
||||
<div class="skeleton-line skeleton-meta shimmer"></div>
|
||||
<div class="skeleton-chip-row">
|
||||
<span class="skeleton-chip shimmer"></span>
|
||||
<span class="skeleton-chip shimmer"></span>
|
||||
<span class="skeleton-chip shimmer"></span>
|
||||
</div>
|
||||
<div class="skeleton-line skeleton-text shimmer"></div>
|
||||
</div>
|
||||
<div class="skeleton-line skeleton-text shimmer"></div>
|
||||
</div>
|
||||
<div class="skeleton-cta shimmer"></div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
<div class="skeleton-cta shimmer"></div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="commander-results">
|
||||
{% include "commanders/list_fragment.html" %}
|
||||
<div class="commander-results-swap" data-skeleton-content>
|
||||
{% include "commanders/list_fragment.html" %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
@ -93,6 +108,11 @@
|
|||
.commander-row { display:flex; gap:1rem; padding:1rem; border:1px solid var(--border); border-radius:14px; background:var(--panel); align-items:stretch; }
|
||||
.commander-thumb { width:160px; flex:0 0 auto; position:relative; }
|
||||
.commander-thumb img { width:160px; height:auto; border-radius:10px; border:1px solid var(--border); background:#0b0d12; display:block; }
|
||||
.commander-thumb-img.is-placeholder { animation: commander-thumb-pulse 1.2s ease-in-out infinite alternate; }
|
||||
@keyframes commander-thumb-pulse {
|
||||
from { filter:brightness(0.45); }
|
||||
to { filter:brightness(0.65); }
|
||||
}
|
||||
.commander-main { flex:1 1 auto; display:flex; flex-direction:column; gap:.6rem; min-width:0; }
|
||||
.commander-header { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem; }
|
||||
.commander-name { margin:0; font-size:1.25rem; }
|
||||
|
|
@ -121,8 +141,8 @@
|
|||
.theme-suggestion-chip:hover { background:rgba(94,106,136,.28); border-color:rgba(148,163,184,.45); transform:translateY(-1px); }
|
||||
.theme-suggestion-chip:focus-visible { outline:2px solid var(--ring); outline-offset:2px; }
|
||||
|
||||
.commander-loading { display:none; margin-top:1rem; }
|
||||
.commander-loading.htmx-request { display:block; }
|
||||
.commander-loading { margin-top:1rem; gap:1rem; }
|
||||
.commander-results-swap { display:flex; flex-direction:column; }
|
||||
.commander-skeleton-list { display:flex; flex-direction:column; gap:1rem; }
|
||||
.commander-skeleton { display:flex; gap:1rem; padding:1rem; border:1px solid var(--border); border-radius:14px; background:var(--panel); align-items:stretch; }
|
||||
.skeleton-thumb { width:160px; height:220px; border-radius:10px; }
|
||||
|
|
|
|||
|
|
@ -2,20 +2,37 @@
|
|||
{% from "partials/_macros.html" import color_identity %}
|
||||
{% set record = entry.record %}
|
||||
{% set display_label = record.name if '//' in record.name else record.display_name %}
|
||||
{% set placeholder_pixel = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" %}
|
||||
<article class="commander-row" data-commander-slug="{{ record.slug }}" data-hover-simple="true">
|
||||
<div class="commander-thumb">
|
||||
{% set small = record.image_small_url or record.image_normal_url %}
|
||||
{% set normal = record.image_normal_url or small %}
|
||||
<img
|
||||
src="{{ small }}"
|
||||
srcset="{{ small }} 160w, {{ record.image_normal_url or small }} 488w"
|
||||
sizes="160px"
|
||||
src="{{ placeholder_pixel }}"
|
||||
alt="{{ record.display_name }} card art"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
width="160"
|
||||
height="223"
|
||||
data-lazy-image="commander"
|
||||
data-lazy-src="{{ small }}"
|
||||
data-lazy-srcset="{{ small }} 160w, {{ normal }} 488w"
|
||||
data-lazy-sizes="(max-width: 900px) 60vw, 160px"
|
||||
data-card-name="{{ record.display_name }}"
|
||||
data-original-name="{{ record.name }}"
|
||||
data-hover-simple="true"
|
||||
class="commander-thumb-img"
|
||||
/>
|
||||
<noscript>
|
||||
<img
|
||||
src="{{ small }}"
|
||||
srcset="{{ small }} 160w, {{ normal }} 488w"
|
||||
sizes="160px"
|
||||
alt="{{ record.display_name }} card art"
|
||||
width="160"
|
||||
height="223"
|
||||
/>
|
||||
</noscript>
|
||||
</div>
|
||||
<div class="commander-main">
|
||||
<div class="commander-header">
|
||||
|
|
|
|||
|
|
@ -1,3 +1,9 @@
|
|||
<div id="include-exclude-summary" data-summary>
|
||||
{% set pending_state = must_have_state if must_have_state is defined else None %}
|
||||
{% set pending_includes = pending_state.includes if pending_state and pending_state.includes is not none else [] %}
|
||||
{% set pending_excludes = pending_state.excludes if pending_state and pending_state.excludes is not none else [] %}
|
||||
{% set has_pending = (pending_includes|length > 0) or (pending_excludes|length > 0) %}
|
||||
|
||||
{% if summary and summary.include_exclude_summary %}
|
||||
{% set ie_summary = summary.include_exclude_summary %}
|
||||
{% set has_data = (ie_summary.include_cards|length > 0) or (ie_summary.exclude_cards|length > 0) or (ie_summary.include_added|length > 0) or (ie_summary.excluded_removed|length > 0) %}
|
||||
|
|
@ -192,4 +198,45 @@
|
|||
}
|
||||
</style>
|
||||
{% endif %}
|
||||
{% elif has_pending %}
|
||||
<section style="margin-top:1rem;">
|
||||
<h5>Must-Have Selections</h5>
|
||||
<div class="impact-panel" style="border:1px solid var(--border); border-radius:8px; padding:.6rem; background:#0f1115;">
|
||||
<div class="muted" style="font-size:12px; margin-bottom:.5rem;">These card lists will apply to the next build run.</div>
|
||||
<div style="display:flex; flex-direction:column; gap:.75rem;">
|
||||
<div>
|
||||
<div class="muted" style="font-weight:600; color:#4ade80; margin-bottom:.35rem;">✓ Must Include ({{ pending_includes|length }})</div>
|
||||
{% if pending_includes|length %}
|
||||
<div class="ie-chips" style="display:flex; gap:.35rem; flex-wrap:wrap;">
|
||||
{% for card in pending_includes %}
|
||||
<span class="chip" style="background:#dcfce7; color:#166534; border:1px solid #bbf7d0;" data-card-name="{{ card }}">{{ card }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="muted" style="font-size:12px;">No include cards selected.</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div>
|
||||
<div class="muted" style="font-weight:600; color:#ef4444; margin-bottom:.35rem;">✗ Must Exclude ({{ pending_excludes|length }})</div>
|
||||
{% if pending_excludes|length %}
|
||||
<div class="ie-chips" style="display:flex; gap:.35rem; flex-wrap:wrap;">
|
||||
{% for card in pending_excludes %}
|
||||
<span class="chip" style="background:#fee2e2; color:#dc2626; border:1px solid #fecaca;" data-card-name="{{ card }}">{{ card }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="muted" style="font-size:12px;">No exclude cards selected.</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% else %}
|
||||
{% if show_must_have_buttons %}
|
||||
<section style="margin-top:1rem;">
|
||||
<h5>Must-Have Selections</h5>
|
||||
<div class="muted" style="font-size:12px;">Use the ✓/✗ toggles on each card to mark must-have preferences.</div>
|
||||
</section>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue