mirror of
https://github.com/mwisnowski/mtg_python_deckbuilder.git
synced 2025-12-26 12:18:50 +01:00
feat(web): launch commander browser with deck builder CTA
This commit is contained in:
matt
parent
6e9ba244c9
commit
8e57588f40
27 changed files with 1960 additions and 45 deletions
201
code/web/templates/commanders/index.html
Normal file
201
code/web/templates/commanders/index.html
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<section class="commander-page">
|
||||
<header class="commander-hero">
|
||||
<h2>Commanders</h2>
|
||||
<p class="muted">Browse the catalog and jump straight into a build with your chosen leader.</p>
|
||||
</header>
|
||||
|
||||
<form
|
||||
id="commander-filter-form"
|
||||
class="commander-filters"
|
||||
action="/commanders"
|
||||
method="get"
|
||||
hx-get="/commanders"
|
||||
hx-target="#commander-results"
|
||||
hx-trigger="submit, change from:#commander-color, keyup changed delay:300ms from:#commander-search"
|
||||
hx-include="#commander-filter-form"
|
||||
hx-push-url="true"
|
||||
hx-indicator="#commander-loading"
|
||||
novalidate
|
||||
>
|
||||
<label>
|
||||
<span class="filter-label">Search</span>
|
||||
<input type="search" id="commander-search" name="q" value="{{ query }}" placeholder="Search commanders, themes, or text..." autocomplete="off" />
|
||||
</label>
|
||||
<label>
|
||||
<span class="filter-label">Color identity</span>
|
||||
<select id="commander-color" name="color">
|
||||
<option value="">All colors</option>
|
||||
{% for code, label in color_options %}
|
||||
<option value="{{ code }}" {% if color == code %}selected{% endif %}>{{ label }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
<input type="hidden" name="page" value="{{ page }}" />
|
||||
<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>
|
||||
<div class="skeleton-line skeleton-text shimmer"></div>
|
||||
</div>
|
||||
<div class="skeleton-cta shimmer"></div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="commander-results">
|
||||
{% include "commanders/list_fragment.html" %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.commander-page { display:flex; flex-direction:column; gap:1.25rem; }
|
||||
.commander-hero h2 { margin:0; font-size:1.75rem; }
|
||||
.commander-hero p { margin:0; max-width:60ch; }
|
||||
.commander-filters { display:flex; flex-wrap:wrap; gap:.75rem 1rem; align-items:flex-end; }
|
||||
.commander-filters label { display:flex; flex-direction:column; gap:.35rem; min-width:220px; }
|
||||
.filter-label { font-size:.85rem; color:var(--muted); letter-spacing:.03em; text-transform:uppercase; }
|
||||
.commander-filters input,
|
||||
.commander-filters select { background:var(--panel); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:.45rem .6rem; min-height:2.4rem; }
|
||||
.commander-filters input:focus,
|
||||
.commander-filters select:focus { outline:2px solid var(--ring); outline-offset:2px; }
|
||||
.filter-submit { height:2.4rem; align-self:flex-end; }
|
||||
|
||||
.commander-summary { font-size:.9rem; }
|
||||
.commander-error { padding:.75rem .9rem; border:1px solid #f87171; background:rgba(248,113,113,.12); border-radius:10px; color:#fca5a5; }
|
||||
.commander-empty { margin:1rem 0 0; }
|
||||
.commander-list { display:flex; flex-direction:column; gap:1rem; margin-top:.5rem; }
|
||||
|
||||
.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; }
|
||||
.commander-thumb img { width:160px; height:auto; border-radius:10px; border:1px solid var(--border); background:#0b0d12; display:block; }
|
||||
.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; }
|
||||
.color-identity { display:flex; align-items:center; gap:.35rem; }
|
||||
.commander-context { margin:0; font-size:.95rem; }
|
||||
.commander-themes { display:flex; flex-wrap:wrap; gap:.4rem; }
|
||||
.commander-themes-empty { font-size:.85rem; }
|
||||
.commander-theme-chip { display:inline-flex; align-items:center; gap:.25rem; padding:4px 10px; border-radius:9999px; border:1px solid var(--border); background:rgba(148,163,184,.15); font-size:.75rem; letter-spacing:.03em; color:inherit; cursor:pointer; transition:background .15s ease, border-color .15s ease, transform .15s ease; appearance:none; font:inherit; }
|
||||
.commander-theme-chip:focus-visible { outline:2px solid var(--ring); outline-offset:2px; }
|
||||
.commander-theme-chip:hover { background:rgba(148,163,184,.25); border-color:rgba(148,163,184,.45); transform:translateY(-1px); }
|
||||
.commander-partners { display:flex; flex-wrap:wrap; gap:.4rem; font-size:.85rem; }
|
||||
.commander-partner-sep { opacity:.6; }
|
||||
.commander-cta { margin-left:auto; display:flex; align-items:center; }
|
||||
.commander-cta .btn { white-space:nowrap; }
|
||||
.commander-pagination { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:1rem; flex-wrap:wrap; }
|
||||
.commander-summary + .commander-pagination { margin-top:.75rem; }
|
||||
.commander-pagination .pagination-group { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
|
||||
.commander-pagination .commander-page-btn { display:inline-flex; align-items:center; justify-content:center; min-width:96px; }
|
||||
.commander-pagination .commander-page-btn[disabled],
|
||||
.commander-pagination .commander-page-btn.disabled { opacity:.55; cursor:default; pointer-events:none; }
|
||||
.commander-pagination-status { font-size:.85rem; color:var(--muted); }
|
||||
|
||||
.commander-loading { display:none; margin-top:1rem; }
|
||||
.commander-loading.htmx-request { display:block; }
|
||||
.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; }
|
||||
.skeleton-main { flex:1 1 auto; display:flex; flex-direction:column; gap:.6rem; }
|
||||
.skeleton-line { height:16px; border-radius:9999px; }
|
||||
.skeleton-title { width:45%; height:22px; }
|
||||
.skeleton-meta { width:30%; }
|
||||
.skeleton-text { width:65%; }
|
||||
.skeleton-chip-row { display:flex; gap:.5rem; flex-wrap:wrap; }
|
||||
.skeleton-chip { width:90px; height:22px; border-radius:9999px; display:inline-block; }
|
||||
.skeleton-cta { width:120px; height:42px; border-radius:9999px; }
|
||||
.shimmer { background:linear-gradient(90deg, rgba(148,163,184,0.25) 25%, rgba(148,163,184,0.15) 37%, rgba(148,163,184,0.25) 63%); background-size:400% 100%; animation:commander-shimmer 1.4s ease-in-out infinite; }
|
||||
@keyframes commander-shimmer {
|
||||
0% { background-position:100% 0; }
|
||||
100% { background-position:-100% 0; }
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.commander-row { flex-direction:column; }
|
||||
.commander-thumb img { width:100%; max-width:280px; }
|
||||
.commander-cta { margin-left:0; }
|
||||
.commander-cta .btn { width:100%; justify-content:center; text-align:center; }
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.commander-filters { align-items:stretch; }
|
||||
.filter-submit { width:100%; }
|
||||
.commander-filters label { flex:1 1 100%; min-width:0; }
|
||||
.commander-thumb { width:min(70vw, 220px); align-self:center; }
|
||||
.commander-thumb img { width:100%; }
|
||||
.skeleton-thumb { width:min(70vw, 220px); height:calc(min(70vw, 220px) * 1.4); }
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
(function(){
|
||||
const form = document.getElementById('commander-filter-form');
|
||||
if (!form) return;
|
||||
const pageInput = form.querySelector('input[name="page"]');
|
||||
if (!pageInput) return;
|
||||
|
||||
const resetPage = () => { pageInput.value = '1'; };
|
||||
const searchField = document.getElementById('commander-search');
|
||||
const colorField = document.getElementById('commander-color');
|
||||
if (searchField) searchField.addEventListener('input', resetPage);
|
||||
if (colorField) colorField.addEventListener('change', resetPage);
|
||||
|
||||
const updatePageFromResults = (container) => {
|
||||
if (!container) return;
|
||||
const marker = container.querySelector('[data-current-page]');
|
||||
if (marker) {
|
||||
const current = marker.getAttribute('data-current-page');
|
||||
if (current) pageInput.value = current;
|
||||
}
|
||||
};
|
||||
|
||||
document.body.addEventListener('htmx:afterSwap', (event) => {
|
||||
const target = event.detail && event.detail.target;
|
||||
if (!target || target.id !== 'commander-results') return;
|
||||
updatePageFromResults(target);
|
||||
// Intelligent scroll-to-top: only when triggered from bottom controls or when the summary/top controls are off-screen
|
||||
const container = document.getElementById('commander-results');
|
||||
const searchEl = document.getElementById('commander-search');
|
||||
if (!container) return;
|
||||
const invoker = event.detail && event.detail.elt ? event.detail.elt : null;
|
||||
const fromBottom = invoker && invoker.closest && invoker.closest('[data-bottom-controls]');
|
||||
// If not from bottom, check whether the top of the results is already within view; if so, skip scroll
|
||||
const rect = container.getBoundingClientRect();
|
||||
const topInView = rect.top >= 0 && rect.top <= (window.innerHeight * 0.25);
|
||||
// If we're below the top controls (content's top is above viewport) or the click came from the bottom controls,
|
||||
// jump directly to the search input (no smooth animation) for fastest navigation.
|
||||
if (fromBottom || rect.top < 0) {
|
||||
requestAnimationFrame(() => {
|
||||
if (searchEl) {
|
||||
searchEl.scrollIntoView({ behavior: 'auto', block: 'start' });
|
||||
try { searchEl.focus({ preventScroll: true }); } catch(_) { /* no-op */ }
|
||||
} else {
|
||||
window.scrollTo({ top: 0, behavior: 'auto' });
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!topInView) {
|
||||
requestAnimationFrame(() => {
|
||||
container.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
updatePageFromResults(document.getElementById('commander-results'));
|
||||
})();
|
||||
</script>
|
||||
{% endblock %}
|
||||
38
code/web/templates/commanders/list_fragment.html
Normal file
38
code/web/templates/commanders/list_fragment.html
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<div class="commander-results-inner" data-current-page="{{ page }}">
|
||||
{% if error %}
|
||||
<div class="commander-error" role="alert">{{ error }}</div>
|
||||
{% else %}
|
||||
<div class="commander-summary muted">
|
||||
{% if total_count %}
|
||||
{% if commanders %}
|
||||
Showing {{ page_start }} – {{ page_end }} of {{ result_total }} commander{% if result_total != 1 %}s{% endif %}{% if is_filtered %} (filtered){% endif %}.
|
||||
{% else %}
|
||||
No commanders matched your filters.
|
||||
{% endif %}
|
||||
{% else %}
|
||||
No commander data available.
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if commanders %}
|
||||
{% set pagination_position = 'top' %}
|
||||
{% include "commanders/pagination_controls.html" %}
|
||||
<div class="commander-list" role="list">
|
||||
{% for entry in commanders %}
|
||||
{% include "commanders/row_wireframe.html" %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% if page_count > 1 %}
|
||||
{% set pagination_position = 'bottom' %}
|
||||
{% include "commanders/pagination_controls.html" %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<p class="muted commander-empty" role="status">
|
||||
{% if total_count %}
|
||||
No commanders matched your filters.
|
||||
{% else %}
|
||||
Commander catalog is empty.
|
||||
{% endif %}
|
||||
</p>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
37
code/web/templates/commanders/pagination_controls.html
Normal file
37
code/web/templates/commanders/pagination_controls.html
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<nav class="commander-pagination" role="navigation" aria-label="Commander pagination" {% if pagination_position == 'bottom' %}data-bottom-controls="1"{% endif %}>
|
||||
<div class="pagination-group">
|
||||
<a
|
||||
class="btn ghost commander-page-btn {% if not has_prev %}disabled{% endif %}"
|
||||
{% if has_prev %}
|
||||
href="{{ prev_url }}"
|
||||
hx-get="{{ prev_url }}"
|
||||
hx-target="#commander-results"
|
||||
hx-push-url="true"
|
||||
data-scroll-top-on-swap="1"
|
||||
{% else %}
|
||||
aria-disabled="true"
|
||||
tabindex="-1"
|
||||
{% endif %}
|
||||
>
|
||||
← Previous
|
||||
</a>
|
||||
<span class="commander-pagination-status" aria-live="polite">
|
||||
Page {{ page }} of {{ page_count }}
|
||||
</span>
|
||||
<a
|
||||
class="btn ghost commander-page-btn {% if not has_next %}disabled{% endif %}"
|
||||
{% if has_next %}
|
||||
href="{{ next_url }}"
|
||||
hx-get="{{ next_url }}"
|
||||
hx-target="#commander-results"
|
||||
hx-push-url="true"
|
||||
data-scroll-top-on-swap="1"
|
||||
{% else %}
|
||||
aria-disabled="true"
|
||||
tabindex="-1"
|
||||
{% endif %}
|
||||
>
|
||||
Next →
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
56
code/web/templates/commanders/row_wireframe.html
Normal file
56
code/web/templates/commanders/row_wireframe.html
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
{# Commander row partial fed by CommanderView entries #}
|
||||
{% from "partials/_macros.html" import color_identity %}
|
||||
{% set record = entry.record %}
|
||||
<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 %}
|
||||
<img
|
||||
src="{{ small }}"
|
||||
srcset="{{ small }} 160w, {{ record.image_normal_url or small }} 488w"
|
||||
sizes="160px"
|
||||
alt="{{ record.display_name }} card art"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
data-card-name="{{ record.display_name }}"
|
||||
data-hover-simple="true"
|
||||
/>
|
||||
</div>
|
||||
<div class="commander-main">
|
||||
<div class="commander-header">
|
||||
<h3 class="commander-name">{{ record.display_name }}</h3>
|
||||
{{ color_identity(record.color_identity, record.is_colorless, entry.color_aria_label, entry.color_label) }}
|
||||
</div>
|
||||
<p class="commander-context muted">{{ record.type_line or 'Legendary Creature' }}</p>
|
||||
{% if entry.themes %}
|
||||
<div class="commander-themes" role="list">
|
||||
{% for theme in entry.themes %}
|
||||
{% set summary = theme.summary or 'Summary unavailable' %}
|
||||
<button type="button"
|
||||
class="commander-theme-chip"
|
||||
role="listitem"
|
||||
data-theme-name="{{ theme.name }}"
|
||||
data-theme-slug="{{ theme.slug }}"
|
||||
data-theme-summary="{{ summary }}"
|
||||
title="{{ summary }}"
|
||||
aria-label="{{ theme.name }} theme: {{ summary }}">
|
||||
{{ theme.name }}
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="commander-themes commander-themes-empty">
|
||||
<span class="muted">No themes linked yet.</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% if entry.partner_summary %}
|
||||
<div class="commander-partners muted">
|
||||
{% for note in entry.partner_summary %}
|
||||
<span>{{ note }}</span>{% if not loop.last %}<span aria-hidden="true" class="commander-partner-sep">•</span>{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="commander-cta">
|
||||
<a class="btn" href="/build?commander={{ record.display_name|urlencode }}&return={{ return_url|urlencode }}" data-commander="{{ record.slug }}">Build</a>
|
||||
</div>
|
||||
</article>
|
||||
Loading…
Add table
Add a link
Reference in a new issue