mirror of
https://github.com/mwisnowski/mtg_python_deckbuilder.git
synced 2025-12-17 16:10:12 +01:00
feat(card-browser): advanced filters, keyboard shortcuts, and responsive design
This commit is contained in:
matt
parent
e0fe8a36e6
commit
a8dc1835eb
12 changed files with 2591 additions and 8 deletions
|
|
@ -85,6 +85,7 @@
|
|||
<a href="/configs">Build from JSON</a>
|
||||
{% if show_setup %}<a href="/setup">Setup/Tag</a>{% endif %}
|
||||
<a href="/owned">Owned Library</a>
|
||||
<a href="/cards">All Cards</a>
|
||||
{% if show_commanders %}<a href="/commanders">Commanders</a>{% endif %}
|
||||
<a href="/decks">Finished Decks</a>
|
||||
<a href="/themes/">Themes</a>
|
||||
|
|
|
|||
22
code/web/templates/browse/cards/_card_grid.html
Normal file
22
code/web/templates/browse/cards/_card_grid.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
{# HTMX-loadable card grid for pagination #}
|
||||
{% for card in cards %}
|
||||
{% include "browse/cards/_card_tile.html" %}
|
||||
{% endfor %}
|
||||
|
||||
{# Pagination button (uses out-of-band swap to replace itself) #}
|
||||
<div id="load-more-container" hx-swap-oob="true" style="grid-column: 1 / -1; text-align:center; margin-top:1rem;">
|
||||
{% if has_next %}
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
hx-get="/cards/grid?cursor={{ last_card|urlencode }}{% if search %}&search={{ search|urlencode }}{% endif %}{% for theme in themes %}&themes={{ theme|urlencode }}{% endfor %}{% if color %}&color={{ color|urlencode }}{% endif %}{% if card_type %}&card_type={{ card_type|urlencode }}{% endif %}{% if rarity %}&rarity={{ rarity|urlencode }}{% endif %}{% if sort and sort != 'name_asc' %}&sort={{ sort|urlencode }}{% endif %}{% if cmc_min %}&cmc_min={{ cmc_min }}{% endif %}{% if cmc_max %}&cmc_max={{ cmc_max }}{% endif %}{% if power_min %}&power_min={{ power_min }}{% endif %}{% if power_max %}&power_max={{ power_max }}{% endif %}{% if tough_min %}&tough_min={{ tough_min }}{% endif %}{% if tough_max %}&tough_max={{ tough_max }}{% endif %}"
|
||||
hx-target="#card-grid"
|
||||
hx-swap="beforeend"
|
||||
hx-indicator="#load-indicator">
|
||||
Load More
|
||||
</button>
|
||||
<span id="load-indicator" class="htmx-indicator muted" style="margin-left:.5rem;">
|
||||
Loading...
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
67
code/web/templates/browse/cards/_card_tile.html
Normal file
67
code/web/templates/browse/cards/_card_tile.html
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
{# Single card tile for grid display #}
|
||||
<div class="card-browser-tile card-tile" data-card-name="{{ card.name }}" data-tags="{{ card.themeTags_parsed|join(', ') if card.themeTags_parsed else '' }}">
|
||||
{# Card image #}
|
||||
<div class="card-browser-tile-image">
|
||||
<img
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
alt="{{ card.name }}"
|
||||
src="https://api.scryfall.com/cards/named?fuzzy={{ card.name|urlencode }}&format=image&version=normal"
|
||||
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
|
||||
/>
|
||||
{# Fallback for missing images #}
|
||||
<div style="display:none; width:100%; height:100%; align-items:center; justify-content:center; background:#1a1d24; color:#9ca3af; font-size:14px; padding:1rem; text-align:center; position:absolute; top:0; left:0;">
|
||||
{{ card.name }}
|
||||
</div>
|
||||
|
||||
{# Owned indicator #}
|
||||
{% if card.is_owned %}
|
||||
<div style="position:absolute; top:4px; right:4px; background:rgba(34,197,94,0.9); color:white; padding:2px 6px; border-radius:4px; font-size:12px; font-weight:600;">
|
||||
✓ Owned
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# Card info #}
|
||||
<div class="card-browser-tile-info">
|
||||
{# Card name #}
|
||||
<div class="card-browser-tile-name" title="{{ card.name }}">
|
||||
{{ card.name }}
|
||||
</div>
|
||||
|
||||
{# Type line #}
|
||||
{% if card.type %}
|
||||
<div class="card-browser-tile-type" title="{{ card.type }}">
|
||||
{{ card.type }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Mana cost and color identity #}
|
||||
<div class="card-browser-tile-stats">
|
||||
{% if card.manaValue is defined and card.manaValue is not none %}
|
||||
<span style="font-size:12px; color:#cbd5e1;">CMC: {{ card.manaValue }}</span>
|
||||
{% endif %}
|
||||
|
||||
{% if card.is_colorless %}
|
||||
<div style="display:flex; gap:2px;">
|
||||
<span class="mana mana-C" style="width:16px; height:16px; font-size:10px;" title="Colorless"></span>
|
||||
</div>
|
||||
{% elif card.colorIdentity %}
|
||||
<div style="display:flex; gap:2px;">
|
||||
{% for color in card.colorIdentity %}
|
||||
<span class="mana mana-{{ color }}" style="width:16px; height:16px; font-size:10px;" title="{{ color }}"></span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# Theme tags (show all tags, not truncated) #}
|
||||
{% if card.themeTags_parsed and card.themeTags_parsed|length > 0 %}
|
||||
<div class="card-browser-tile-tags">
|
||||
{% for tag in card.themeTags_parsed %}
|
||||
<span class="tag">{{ tag }}</span>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
958
code/web/templates/browse/cards/index.html
Normal file
958
code/web/templates/browse/cards/index.html
Normal file
|
|
@ -0,0 +1,958 @@
|
|||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<style>
|
||||
/* Autocomplete dropdown styles (matching commanders page) */
|
||||
.autocomplete-container { position: relative; }
|
||||
.autocomplete-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: var(--card-bg, #1a1d24);
|
||||
border: 1px solid var(--border, #374151);
|
||||
border-top: none;
|
||||
border-radius: 0 0 6px 6px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.autocomplete-dropdown:empty { display: none; }
|
||||
.autocomplete-item {
|
||||
padding: .75rem;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid rgba(55, 65, 81, 0.5);
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.autocomplete-item:last-child { border-bottom: none; }
|
||||
.autocomplete-item:hover, .autocomplete-item:focus, .autocomplete-item.selected {
|
||||
background: rgba(148, 163, 184, .15);
|
||||
}
|
||||
.autocomplete-item.selected {
|
||||
background: rgba(148, 163, 184, .25);
|
||||
border-left: 3px solid var(--ring, #3b82f6);
|
||||
padding-left: calc(.75rem - 3px);
|
||||
}
|
||||
.autocomplete-empty {
|
||||
padding: .75rem;
|
||||
text-align: center;
|
||||
color: var(--muted, #9ca3af);
|
||||
font-size: .85rem;
|
||||
}
|
||||
.autocomplete-error {
|
||||
padding: .75rem;
|
||||
text-align: center;
|
||||
color: #f87171;
|
||||
font-size: .85rem;
|
||||
}
|
||||
|
||||
/* Keyboard shortcuts help button - desktop only */
|
||||
.shortcuts-help-btn {
|
||||
display: none !important; /* Hidden by default (mobile) */
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.shortcuts-help-btn {
|
||||
display: flex !important; /* Show on desktop */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<section class="card-browser-container">
|
||||
<h3>Card Browser</h3>
|
||||
<p class="muted">Browse all {{ total_cards }} cards with filters and search.</p>
|
||||
|
||||
{# Error message #}
|
||||
{% if error %}
|
||||
<div class="error" style="margin:.5rem 0 1rem 0; padding:.75rem; background:#7f1d1d; border:1px solid #dc2626; border-radius:6px; color:#fef2f2;">
|
||||
{{ error }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Filters Panel #}
|
||||
<div class="card-browser-filters" style="position: relative;">
|
||||
{# Keyboard shortcuts help button (desktop only) #}
|
||||
<button
|
||||
type="button"
|
||||
id="shortcuts-help-btn"
|
||||
class="shortcuts-help-btn"
|
||||
style="position: absolute; top: 0.5rem; right: 0.5rem; width: 28px; height: 28px; border-radius: 50%; background: #444; border: 1px solid #666; color: #fff; font-weight: bold; cursor: pointer; font-size: 16px; display: none; align-items: center; justify-content: center; padding: 0; line-height: 1;"
|
||||
title="Keyboard Shortcuts"
|
||||
onclick="toggleShortcutsHelp()"
|
||||
>?</button>
|
||||
|
||||
{# Shortcuts help tooltip #}
|
||||
<div
|
||||
id="shortcuts-help-tooltip"
|
||||
style="display: none; position: absolute; top: 2.5rem; right: 0.5rem; background: #2a2a2a; border: 1px solid #666; border-radius: 6px; padding: 1rem; min-width: 320px; max-width: 400px; z-index: 1000; box-shadow: 0 4px 6px rgba(0,0,0,0.3);"
|
||||
>
|
||||
<h4 style="margin-top: 0; margin-bottom: 0.75rem; font-size: 1.1rem;">Keyboard Shortcuts</h4>
|
||||
<div style="font-size: 0.9rem; line-height: 1.6;">
|
||||
<div style="margin-bottom: 0.5rem;"><strong>Enter</strong> - Add first theme match / Select autocomplete</div>
|
||||
<div style="margin-bottom: 0.5rem;"><strong>Shift+Enter</strong> - Add current theme & apply filters</div>
|
||||
<div style="margin-bottom: 0.5rem;"><strong>Escape</strong> - Close dropdown</div>
|
||||
<div style="margin-bottom: 0.5rem;"><strong>Escape×2</strong> - Clear all filters (within 0.5s)</div>
|
||||
<div style="margin-bottom: 0.5rem;"><strong>↑/↓</strong> - Navigate autocomplete</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onclick="toggleShortcutsHelp()"
|
||||
style="margin-top: 0.75rem; padding: 0.4rem 0.8rem; background: #555; border: 1px solid #777; border-radius: 4px; color: #fff; cursor: pointer; width: 100%;"
|
||||
>Close</button>
|
||||
</div>
|
||||
|
||||
{# Search bar #}
|
||||
<div class="filter-section">
|
||||
<form method="get" id="card-search-form">
|
||||
<div class="filter-row">
|
||||
<label for="search-input">Search</label>
|
||||
<div class="autocomplete-container" style="position:relative; flex: 1; max-width: 300px;">
|
||||
<input
|
||||
type="text"
|
||||
name="search"
|
||||
id="search-input"
|
||||
data-autocomplete-param="q"
|
||||
value="{{ search }}"
|
||||
placeholder="Search card names..."
|
||||
autocomplete="off"
|
||||
role="combobox"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="search-autocomplete-dropdown"
|
||||
aria-expanded="false"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
<div id="search-autocomplete-dropdown" class="autocomplete-dropdown" role="listbox" aria-label="Card name suggestions"></div>
|
||||
</div>
|
||||
{% if search %}
|
||||
<button type="button" onclick="document.getElementById('search-input').value=''; document.getElementById('card-search-form').submit();" class="btn" style="padding:.3rem .75rem;">Clear</button>
|
||||
{% endif %}
|
||||
<button type="submit" class="btn">Search</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{# Filter controls #}
|
||||
<div class="filter-section" style="margin-top: 1rem;">
|
||||
<div class="filter-row">
|
||||
{# Multi-select theme filter #}
|
||||
<label for="filter-theme-input">Themes (up to 5)</label>
|
||||
<div style="flex: 1; max-width: 500px;">
|
||||
{# Selected themes as chips #}
|
||||
<div id="selected-themes" style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; min-height: 2rem;">
|
||||
{% if themes %}
|
||||
{% for t in themes %}
|
||||
<span class="theme-chip" data-theme="{{ t }}">
|
||||
{{ t }}
|
||||
<button type="button" onclick="removeTheme('{{ t }}')" style="margin-left:0.5rem; background:none; border:none; color:inherit; cursor:pointer; padding:0; font-weight:bold;">×</button>
|
||||
</span>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# Autocomplete input #}
|
||||
<div class="autocomplete-container" style="position:relative;">
|
||||
<input
|
||||
type="text"
|
||||
id="filter-theme-input"
|
||||
placeholder="Add theme..."
|
||||
autocomplete="off"
|
||||
role="combobox"
|
||||
aria-autocomplete="list"
|
||||
aria-controls="theme-autocomplete-dropdown"
|
||||
aria-expanded="false"
|
||||
style="width: 100%;"
|
||||
/>
|
||||
<div id="theme-autocomplete-dropdown" class="autocomplete-dropdown" role="listbox" aria-label="Theme suggestions"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filter-row">
|
||||
{# Color filter #}
|
||||
{% if all_colors %}
|
||||
<label for="filter-color">Color</label>
|
||||
<select
|
||||
name="color"
|
||||
id="filter-color"
|
||||
onchange="applyFilter()">
|
||||
<option value="">All Colors</option>
|
||||
{% for group_name, group_colors in all_colors %}
|
||||
<optgroup label="{{ group_name }}">
|
||||
{% for color_id, display_name in group_colors %}
|
||||
<option value="{{ color_id }}" {% if color == color_id %}selected{% endif %}>{{ display_name }}</option>
|
||||
{% endfor %}
|
||||
</optgroup>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% endif %}
|
||||
|
||||
{# Type filter #}
|
||||
{% if all_types %}
|
||||
<label for="filter-type">Type</label>
|
||||
<select
|
||||
name="type"
|
||||
id="filter-type"
|
||||
onchange="applyFilter()">
|
||||
<option value="">All Types</option>
|
||||
{% for t in all_types %}
|
||||
<option value="{{ t }}" {% if card_type == t %}selected{% endif %}>{{ t }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% endif %}
|
||||
|
||||
{# Rarity filter #}
|
||||
{% if all_rarities %}
|
||||
<label for="filter-rarity">Rarity</label>
|
||||
<select
|
||||
name="rarity"
|
||||
id="filter-rarity"
|
||||
onchange="applyFilter()">
|
||||
<option value="">All Rarities</option>
|
||||
{% for r in all_rarities %}
|
||||
<option value="{{ r }}" {% if rarity == r %}selected{% endif %}>{{ r|title }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% endif %}
|
||||
|
||||
{# Sort dropdown #}
|
||||
<label for="filter-sort">Sort By</label>
|
||||
<select
|
||||
name="sort"
|
||||
id="filter-sort"
|
||||
onchange="applyFilter()">
|
||||
<option value="name_asc" {% if sort == 'name_asc' or not sort %}selected{% endif %}>Name (A-Z)</option>
|
||||
<option value="name_desc" {% if sort == 'name_desc' %}selected{% endif %}>Name (Z-A)</option>
|
||||
<option value="cmc_asc" {% if sort == 'cmc_asc' %}selected{% endif %}>CMC (Low-High)</option>
|
||||
<option value="cmc_desc" {% if sort == 'cmc_desc' %}selected{% endif %}>CMC (High-Low)</option>
|
||||
<option value="power_desc" {% if sort == 'power_desc' %}selected{% endif %}>Power (High-Low)</option>
|
||||
<option value="edhrec_asc" {% if sort == 'edhrec_asc' %}selected{% endif %}>EDHREC Rank (Popular)</option>
|
||||
</select>
|
||||
|
||||
<button type="button" class="btn" onclick="applyFilter()">Apply Filters</button>
|
||||
<button type="button" class="btn" onclick="window.location.href='/cards'" style="background-color: #666;">Clear Filters</button>
|
||||
</div>
|
||||
|
||||
{# Advanced filters row #}
|
||||
<div class="filter-row" style="margin-top: 0.75rem;">
|
||||
{# CMC range filter #}
|
||||
<label for="filter-cmc-min">CMC Range</label>
|
||||
<div style="display:flex; align-items:center; gap:0.5rem; flex:1; max-width:300px;">
|
||||
<input
|
||||
type="number"
|
||||
id="filter-cmc-min"
|
||||
min="0"
|
||||
max="16"
|
||||
value="{{ cmc_min if cmc_min is defined else '' }}"
|
||||
placeholder="Min"
|
||||
style="width:70px;"
|
||||
onchange="applyFilter()"
|
||||
/>
|
||||
<span>–</span>
|
||||
<input
|
||||
type="number"
|
||||
id="filter-cmc-max"
|
||||
min="0"
|
||||
max="16"
|
||||
value="{{ cmc_max if cmc_max is defined else '' }}"
|
||||
placeholder="Max"
|
||||
style="width:70px;"
|
||||
onchange="applyFilter()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{# Power range filter #}
|
||||
<label for="filter-power-min">Power</label>
|
||||
<div style="display:flex; align-items:center; gap:0.5rem; flex:1; max-width:300px;">
|
||||
<input
|
||||
type="number"
|
||||
id="filter-power-min"
|
||||
min="0"
|
||||
max="99"
|
||||
value="{{ power_min if power_min is defined else '' }}"
|
||||
placeholder="Min"
|
||||
style="width:70px;"
|
||||
onchange="applyFilter()"
|
||||
/>
|
||||
<span>–</span>
|
||||
<input
|
||||
type="number"
|
||||
id="filter-power-max"
|
||||
min="0"
|
||||
max="99"
|
||||
value="{{ power_max if power_max is defined else '' }}"
|
||||
placeholder="Max"
|
||||
style="width:70px;"
|
||||
onchange="applyFilter()"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{# Toughness range filter #}
|
||||
<label for="filter-tough-min">Toughness</label>
|
||||
<div style="display:flex; align-items:center; gap:0.5rem; flex:1; max-width:300px;">
|
||||
<input
|
||||
type="number"
|
||||
id="filter-tough-min"
|
||||
min="0"
|
||||
max="99"
|
||||
value="{{ tough_min if tough_min is defined else '' }}"
|
||||
placeholder="Min"
|
||||
style="width:70px;"
|
||||
onchange="applyFilter()"
|
||||
/>
|
||||
<span>–</span>
|
||||
<input
|
||||
type="number"
|
||||
id="filter-tough-max"
|
||||
min="0"
|
||||
max="99"
|
||||
value="{{ tough_max if tough_max is defined else '' }}"
|
||||
placeholder="Max"
|
||||
style="width:70px;"
|
||||
onchange="applyFilter()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Results info bar with page indicator #}
|
||||
<div id="card-browser-info" class="card-browser-info">
|
||||
<span id="results-count" class="results-count">
|
||||
{% if filtered_count is defined and filtered_count != total_cards %}
|
||||
Showing {{ cards|length }} of {{ filtered_count }} filtered cards ({{ total_cards }} total)
|
||||
{% else %}
|
||||
Showing {{ cards|length }} of {{ total_cards }} cards
|
||||
{% endif %}
|
||||
{% if search %} matching "{{ search }}"{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{# Card grid container or no results message #}
|
||||
{% if cards and cards|length %}
|
||||
<div id="card-grid-container"
|
||||
class="card-browser-grid"
|
||||
{% if total_cards > 800 %}data-virtualize="1"{% endif %}>
|
||||
<div id="card-grid" style="display:contents;">
|
||||
{% for card in cards %}
|
||||
{% include "browse/cards/_card_tile.html" %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Pagination controls #}
|
||||
{% if has_next %}
|
||||
<div id="load-more-container" class="card-browser-pagination">
|
||||
<button
|
||||
type="button"
|
||||
class="btn"
|
||||
hx-get="/cards/grid?cursor={{ last_card|urlencode }}{% if search %}&search={{ search|urlencode }}{% endif %}{% if theme %}&theme={{ theme|urlencode }}{% endif %}{% if color %}&color={{ color|urlencode }}{% endif %}{% if card_type %}&card_type={{ card_type|urlencode }}{% endif %}{% if rarity %}&rarity={{ rarity|urlencode }}{% endif %}{% if cmc_min %}&cmc_min={{ cmc_min }}{% endif %}{% if cmc_max %}&cmc_max={{ cmc_max }}{% endif %}"
|
||||
hx-target="#card-grid"
|
||||
hx-swap="beforeend"
|
||||
hx-indicator="#load-indicator">
|
||||
Load More
|
||||
</button>
|
||||
<span id="load-indicator" class="htmx-indicator muted card-browser-loading">
|
||||
Loading...
|
||||
</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{# No results message with helpful info #}
|
||||
<div class="no-results">
|
||||
<div class="no-results-title">No cards found</div>
|
||||
<div class="no-results-message">
|
||||
{% if search or color or card_type or rarity or theme or cmc_min or cmc_max %}
|
||||
No cards match your current filters.
|
||||
{% if search %}Try a different search term{% endif %}{% if search and (color or card_type or rarity or theme or cmc_min or cmc_max) %} or {% endif %}{% if color or card_type or rarity or theme or cmc_min or cmc_max %}adjust your filters{% endif %}.
|
||||
{% else %}
|
||||
Unable to load cards. Please try refreshing the page.
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if search or color or card_type or rarity or theme or cmc_min or cmc_max %}
|
||||
<div class="no-results-filters">
|
||||
<strong style="color: var(--text); margin-right: 0.5rem;">Active filters:</strong>
|
||||
{% if search %}
|
||||
<span class="no-results-filter-tag">Search: "{{ search }}"</span>
|
||||
{% endif %}
|
||||
{% if theme %}
|
||||
<span class="no-results-filter-tag">Theme: {{ theme }}</span>
|
||||
{% endif %}
|
||||
{% if color %}
|
||||
<span class="no-results-filter-tag">Color: {{ color }}</span>
|
||||
{% endif %}
|
||||
{% if card_type %}
|
||||
<span class="no-results-filter-tag">Type: {{ card_type }}</span>
|
||||
{% endif %}
|
||||
{% if rarity %}
|
||||
<span class="no-results-filter-tag">Rarity: {{ rarity|title }}</span>
|
||||
{% endif %}
|
||||
{% if cmc_min or cmc_max %}
|
||||
<span class="no-results-filter-tag">CMC: {% if cmc_min %}{{ cmc_min }}{% else %}0{% endif %}–{% if cmc_max %}{{ cmc_max }}{% else %}16+{% endif %}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<p><a href="/cards" class="btn">Clear All Filters</a></p>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</section>
|
||||
|
||||
<script>
|
||||
// Toggle shortcuts help tooltip
|
||||
function toggleShortcutsHelp() {
|
||||
const tooltip = document.getElementById('shortcuts-help-tooltip');
|
||||
if (tooltip) {
|
||||
tooltip.style.display = tooltip.style.display === 'none' ? 'block' : 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// Close tooltip when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
const tooltip = document.getElementById('shortcuts-help-tooltip');
|
||||
const helpBtn = document.getElementById('shortcuts-help-btn');
|
||||
if (tooltip && helpBtn &&
|
||||
tooltip.style.display === 'block' &&
|
||||
!tooltip.contains(e.target) &&
|
||||
!helpBtn.contains(e.target)) {
|
||||
tooltip.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Global Escape key handler for clearing filters (works anywhere on page)
|
||||
(function() {
|
||||
let lastGlobalEscapeTime = 0;
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
const now = Date.now();
|
||||
const timeSinceLastEscape = now - lastGlobalEscapeTime;
|
||||
|
||||
// Check if we're in a text input (let those handle their own Escape)
|
||||
const activeElement = document.activeElement;
|
||||
const isInTextInput = activeElement && (
|
||||
activeElement.tagName === 'INPUT' ||
|
||||
activeElement.tagName === 'TEXTAREA'
|
||||
);
|
||||
|
||||
if (!isInTextInput && timeSinceLastEscape < 500) {
|
||||
// Double Escape outside of inputs - clear all filters
|
||||
console.log('Global double Escape detected - clearing filters');
|
||||
e.preventDefault();
|
||||
window.location.href = '/cards';
|
||||
} else if (!isInTextInput) {
|
||||
// First escape outside input
|
||||
lastGlobalEscapeTime = now;
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
function applyFilter() {
|
||||
const color = document.getElementById('filter-color')?.value || '';
|
||||
const type = document.getElementById('filter-type')?.value || '';
|
||||
const rarity = document.getElementById('filter-rarity')?.value || '';
|
||||
const search = document.getElementById('search-input')?.value || '';
|
||||
const sort = document.getElementById('filter-sort')?.value || '';
|
||||
const cmcMin = document.getElementById('filter-cmc-min')?.value || '';
|
||||
const cmcMax = document.getElementById('filter-cmc-max')?.value || '';
|
||||
const powerMin = document.getElementById('filter-power-min')?.value || '';
|
||||
const powerMax = document.getElementById('filter-power-max')?.value || '';
|
||||
const toughMin = document.getElementById('filter-tough-min')?.value || '';
|
||||
const toughMax = document.getElementById('filter-tough-max')?.value || '';
|
||||
|
||||
// Collect selected themes
|
||||
const themeChips = document.querySelectorAll('#selected-themes .theme-chip');
|
||||
const themes = Array.from(themeChips).map(chip => chip.dataset.theme);
|
||||
|
||||
const params = new URLSearchParams();
|
||||
if (search) params.set('search', search);
|
||||
if (color) params.set('color', color);
|
||||
if (type) params.set('card_type', type);
|
||||
if (rarity) params.set('rarity', rarity);
|
||||
// Add themes as multiple params (themes=t1&themes=t2&themes=t3)
|
||||
themes.forEach(theme => params.append('themes', theme));
|
||||
if (sort && sort !== 'name_asc') params.set('sort', sort); // Only include if not default
|
||||
if (cmcMin) params.set('cmc_min', cmcMin);
|
||||
if (cmcMax) params.set('cmc_max', cmcMax);
|
||||
if (powerMin) params.set('power_min', powerMin);
|
||||
if (powerMax) params.set('power_max', powerMax);
|
||||
if (toughMin) params.set('tough_min', toughMin);
|
||||
if (toughMax) params.set('tough_max', toughMax);
|
||||
|
||||
window.location.href = `/cards?${params.toString()}`;
|
||||
}
|
||||
|
||||
// Autocomplete keyboard navigation
|
||||
(function() {
|
||||
const searchInput = document.getElementById('search-input');
|
||||
const autocompleteDropdown = document.getElementById('search-autocomplete-dropdown');
|
||||
const form = document.getElementById('card-search-form');
|
||||
|
||||
if (!searchInput || !autocompleteDropdown || !form) return;
|
||||
|
||||
let selectedIndex = -1;
|
||||
let debounceTimer = null;
|
||||
let lastEscapeTime = 0;
|
||||
|
||||
// Fetch autocomplete suggestions
|
||||
const fetchSuggestions = () => {
|
||||
const query = searchInput.value.trim();
|
||||
if (query.length < 2) {
|
||||
autocompleteDropdown.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
// Call the autocomplete endpoint
|
||||
fetch(`/cards/search-autocomplete?q=${encodeURIComponent(query)}`)
|
||||
.then(response => response.text())
|
||||
.then(html => {
|
||||
autocompleteDropdown.innerHTML = html;
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Autocomplete error:', err);
|
||||
autocompleteDropdown.innerHTML = '';
|
||||
});
|
||||
};
|
||||
|
||||
// Debounced input handler - reduced to 150ms for faster response
|
||||
searchInput.addEventListener('input', () => {
|
||||
clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(fetchSuggestions, 150);
|
||||
});
|
||||
|
||||
// Helper to get all autocomplete items
|
||||
const getItems = () => Array.from(autocompleteDropdown.querySelectorAll('.autocomplete-item'));
|
||||
|
||||
// Helper to select an item by index
|
||||
const selectItem = (index) => {
|
||||
const items = getItems();
|
||||
items.forEach((item, i) => {
|
||||
if (i === index) {
|
||||
item.classList.add('selected');
|
||||
item.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
||||
} else {
|
||||
item.classList.remove('selected');
|
||||
}
|
||||
});
|
||||
selectedIndex = index;
|
||||
};
|
||||
|
||||
// Helper to apply selected item
|
||||
const applySelectedItem = () => {
|
||||
const items = getItems();
|
||||
const item = items[selectedIndex];
|
||||
if (item && item.dataset.value) {
|
||||
searchInput.value = item.dataset.value;
|
||||
autocompleteDropdown.innerHTML = '';
|
||||
selectedIndex = -1;
|
||||
// Trigger search immediately
|
||||
applyFilter();
|
||||
}
|
||||
};
|
||||
|
||||
// Reset selection when dropdown content changes
|
||||
const observer = new MutationObserver(() => {
|
||||
selectedIndex = -1;
|
||||
getItems().forEach(item => item.classList.remove('selected'));
|
||||
// Update aria-expanded based on dropdown content
|
||||
const hasContent = autocompleteDropdown.children.length > 0;
|
||||
searchInput.setAttribute('aria-expanded', hasContent ? 'true' : 'false');
|
||||
});
|
||||
observer.observe(autocompleteDropdown, { childList: true });
|
||||
|
||||
// Click handler for autocomplete items - instant navigation
|
||||
document.body.addEventListener('click', (e) => {
|
||||
const item = e.target.closest('.autocomplete-item');
|
||||
if (item && item.dataset.value && autocompleteDropdown.contains(item)) {
|
||||
e.preventDefault();
|
||||
searchInput.value = item.dataset.value;
|
||||
autocompleteDropdown.innerHTML = '';
|
||||
selectedIndex = -1;
|
||||
// Navigate immediately using applyFilter
|
||||
applyFilter();
|
||||
}
|
||||
});
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('.autocomplete-container')) {
|
||||
autocompleteDropdown.innerHTML = '';
|
||||
selectedIndex = -1;
|
||||
}
|
||||
});
|
||||
|
||||
// Keyboard navigation
|
||||
searchInput.addEventListener('keydown', (e) => {
|
||||
const items = getItems();
|
||||
const hasItems = items.length > 0;
|
||||
|
||||
if (e.key === 'Escape') {
|
||||
const now = Date.now();
|
||||
const timeSinceLastEscape = now - lastEscapeTime;
|
||||
|
||||
if (hasItems) {
|
||||
// Close dropdown if open
|
||||
autocompleteDropdown.innerHTML = '';
|
||||
selectedIndex = -1;
|
||||
lastEscapeTime = now;
|
||||
e.preventDefault();
|
||||
} else if (timeSinceLastEscape < 500) {
|
||||
// Double-tap Escape within 500ms - clear all filters
|
||||
console.log('Double Escape detected - clearing filters');
|
||||
e.preventDefault();
|
||||
window.location.href = '/cards';
|
||||
} else {
|
||||
// First escape with no dropdown
|
||||
lastEscapeTime = now;
|
||||
e.preventDefault();
|
||||
}
|
||||
} else if (e.key === 'ArrowDown' && hasItems) {
|
||||
e.preventDefault();
|
||||
const newIndex = selectedIndex < items.length - 1 ? selectedIndex + 1 : 0;
|
||||
selectItem(newIndex);
|
||||
} else if (e.key === 'ArrowUp' && hasItems) {
|
||||
e.preventDefault();
|
||||
const newIndex = selectedIndex > 0 ? selectedIndex - 1 : items.length - 1;
|
||||
selectItem(newIndex);
|
||||
} else if (e.key === 'Enter') {
|
||||
if (e.shiftKey) {
|
||||
// Shift+Enter: Apply all filters
|
||||
e.preventDefault();
|
||||
applyFilter();
|
||||
} else if (selectedIndex >= 0 && hasItems) {
|
||||
e.preventDefault();
|
||||
applySelectedItem();
|
||||
}
|
||||
// Otherwise allow normal form submission
|
||||
}
|
||||
});
|
||||
|
||||
// Mouse hover to highlight items
|
||||
autocompleteDropdown.addEventListener('mouseover', (e) => {
|
||||
const item = e.target.closest('.autocomplete-item');
|
||||
if (item) {
|
||||
const items = getItems();
|
||||
const index = items.indexOf(item);
|
||||
if (index >= 0) {
|
||||
selectItem(index);
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
// Multi-select theme filter
|
||||
(function() {
|
||||
const themeInput = document.getElementById('filter-theme-input');
|
||||
const themeDropdown = document.getElementById('theme-autocomplete-dropdown');
|
||||
const selectedThemesContainer = document.getElementById('selected-themes');
|
||||
|
||||
if (!themeInput || !themeDropdown) return;
|
||||
|
||||
let selectedIndex = -1;
|
||||
let debounceTimer = null;
|
||||
let selectedThemes = new Set();
|
||||
let lastEscapeTime = 0;
|
||||
|
||||
// Initialize with existing themes from URL
|
||||
const existingChips = selectedThemesContainer.querySelectorAll('.theme-chip');
|
||||
existingChips.forEach(chip => {
|
||||
selectedThemes.add(chip.dataset.theme);
|
||||
});
|
||||
|
||||
// Update input state based on theme count
|
||||
const updateThemeInputState = () => {
|
||||
if (selectedThemes.size >= 5) {
|
||||
themeInput.disabled = true;
|
||||
themeInput.placeholder = 'Maximum 5 themes selected';
|
||||
themeInput.classList.add('disabled');
|
||||
} else {
|
||||
themeInput.disabled = false;
|
||||
themeInput.placeholder = 'Add theme...';
|
||||
themeInput.classList.remove('disabled');
|
||||
}
|
||||
};
|
||||
|
||||
// Initialize the input state
|
||||
updateThemeInputState();
|
||||
|
||||
// Fetch theme suggestions
|
||||
const fetchThemeSuggestions = () => {
|
||||
const query = themeInput.value.trim();
|
||||
if (query.length < 2) {
|
||||
themeDropdown.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(`/cards/theme-autocomplete?q=${encodeURIComponent(query)}`)
|
||||
.then(response => response.text())
|
||||
.then(html => {
|
||||
themeDropdown.innerHTML = html;
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Theme autocomplete error:', err);
|
||||
themeDropdown.innerHTML = '';
|
||||
});
|
||||
};
|
||||
|
||||
// Add theme chip
|
||||
window.addTheme = function(theme) {
|
||||
if (selectedThemes.size >= 5) {
|
||||
return; // Input should already be disabled, but double-check
|
||||
}
|
||||
if (selectedThemes.has(theme)) {
|
||||
return; // Already selected
|
||||
}
|
||||
|
||||
selectedThemes.add(theme);
|
||||
|
||||
const chip = document.createElement('span');
|
||||
chip.className = 'theme-chip';
|
||||
chip.dataset.theme = theme;
|
||||
chip.innerHTML = `${theme} <button type="button" onclick="removeTheme('${theme.replace(/'/g, "\\'")}')" style="margin-left:0.5rem; background:none; border:none; color:inherit; cursor:pointer; padding:0; font-weight:bold;">×</button>`;
|
||||
|
||||
selectedThemesContainer.appendChild(chip);
|
||||
themeInput.value = '';
|
||||
themeDropdown.innerHTML = '';
|
||||
selectedIndex = -1;
|
||||
|
||||
updateThemeInputState();
|
||||
|
||||
// Auto-focus the input on desktop (not mobile) for quick multi-selection
|
||||
// Focus immediately since we're NOT reloading the page anymore
|
||||
if (selectedThemes.size < 5 && window.innerWidth >= 768) {
|
||||
// Small delay to ensure DOM updates are complete
|
||||
requestAnimationFrame(() => {
|
||||
themeInput.focus();
|
||||
});
|
||||
}
|
||||
|
||||
// Don't auto-apply filter - let user add multiple themes then click Apply
|
||||
// This allows the auto-focus to work and provides better UX
|
||||
// applyFilter();
|
||||
};
|
||||
|
||||
// Remove theme chip
|
||||
window.removeTheme = function(theme) {
|
||||
selectedThemes.delete(theme);
|
||||
const chip = selectedThemesContainer.querySelector(`.theme-chip[data-theme="${theme}"]`);
|
||||
if (chip) {
|
||||
chip.remove();
|
||||
}
|
||||
updateThemeInputState();
|
||||
// Don't auto-apply filter - let user manage themes then click Apply
|
||||
// applyFilter();
|
||||
};
|
||||
|
||||
// Debounced input handler
|
||||
themeInput.addEventListener('input', () => {
|
||||
clearTimeout(debounceTimer);
|
||||
debounceTimer = setTimeout(fetchThemeSuggestions, 150);
|
||||
});
|
||||
|
||||
// Helper functions
|
||||
const getItems = () => Array.from(themeDropdown.querySelectorAll('.autocomplete-item'));
|
||||
|
||||
const selectItem = (index) => {
|
||||
const items = getItems();
|
||||
items.forEach((item, i) => {
|
||||
if (i === index) {
|
||||
item.classList.add('selected');
|
||||
item.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
|
||||
} else {
|
||||
item.classList.remove('selected');
|
||||
}
|
||||
});
|
||||
selectedIndex = index;
|
||||
};
|
||||
|
||||
const applySelectedItem = () => {
|
||||
const items = getItems();
|
||||
const item = items[selectedIndex];
|
||||
if (item && item.dataset.value) {
|
||||
addTheme(item.dataset.value);
|
||||
}
|
||||
};
|
||||
|
||||
// Reset selection when dropdown changes
|
||||
const observer = new MutationObserver(() => {
|
||||
selectedIndex = -1;
|
||||
getItems().forEach(item => item.classList.remove('selected'));
|
||||
const hasContent = themeDropdown.children.length > 0;
|
||||
themeInput.setAttribute('aria-expanded', hasContent ? 'true' : 'false');
|
||||
});
|
||||
observer.observe(themeDropdown, { childList: true });
|
||||
|
||||
// Click handler
|
||||
document.body.addEventListener('click', (e) => {
|
||||
const item = e.target.closest('.autocomplete-item');
|
||||
if (item && item.dataset.value && themeDropdown.contains(item)) {
|
||||
e.preventDefault();
|
||||
addTheme(item.dataset.value);
|
||||
}
|
||||
});
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!e.target.closest('#filter-theme-input') && !e.target.closest('#theme-autocomplete-dropdown')) {
|
||||
themeDropdown.innerHTML = '';
|
||||
selectedIndex = -1;
|
||||
}
|
||||
});
|
||||
|
||||
// Keyboard navigation
|
||||
themeInput.addEventListener('keydown', (e) => {
|
||||
const items = getItems();
|
||||
const hasItems = items.length > 0;
|
||||
|
||||
if (e.key === 'Escape') {
|
||||
const now = Date.now();
|
||||
const timeSinceLastEscape = now - lastEscapeTime;
|
||||
|
||||
if (hasItems) {
|
||||
// Close dropdown if open
|
||||
themeDropdown.innerHTML = '';
|
||||
selectedIndex = -1;
|
||||
lastEscapeTime = now;
|
||||
e.preventDefault();
|
||||
} else if (timeSinceLastEscape < 500) {
|
||||
// Double-tap Escape within 500ms - clear all filters
|
||||
console.log('Double Escape detected - clearing filters');
|
||||
e.preventDefault();
|
||||
window.location.href = '/cards';
|
||||
} else {
|
||||
// First escape with no dropdown
|
||||
lastEscapeTime = now;
|
||||
e.preventDefault();
|
||||
}
|
||||
} else if (e.key === 'ArrowDown' && hasItems) {
|
||||
e.preventDefault();
|
||||
const newIndex = selectedIndex < items.length - 1 ? selectedIndex + 1 : 0;
|
||||
selectItem(newIndex);
|
||||
} else if (e.key === 'ArrowUp' && hasItems) {
|
||||
e.preventDefault();
|
||||
const newIndex = selectedIndex > 0 ? selectedIndex - 1 : items.length - 1;
|
||||
selectItem(newIndex);
|
||||
} else if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
if (e.shiftKey) {
|
||||
// Shift+Enter: Add current theme if any, then apply all filters
|
||||
if (hasItems) {
|
||||
// Add the first match before applying
|
||||
if (selectedIndex >= 0) {
|
||||
applySelectedItem();
|
||||
} else {
|
||||
selectItem(0);
|
||||
applySelectedItem();
|
||||
}
|
||||
// Small delay to ensure theme is added before applying filters
|
||||
setTimeout(() => applyFilter(), 50);
|
||||
} else {
|
||||
// No autocomplete, just apply filters
|
||||
applyFilter();
|
||||
}
|
||||
} else if (selectedIndex >= 0 && hasItems) {
|
||||
// Apply the explicitly selected item
|
||||
applySelectedItem();
|
||||
} else if (hasItems) {
|
||||
// No item selected, but there are items - select the first one
|
||||
selectItem(0);
|
||||
applySelectedItem();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Mouse hover
|
||||
themeDropdown.addEventListener('mouseover', (e) => {
|
||||
const item = e.target.closest('.autocomplete-item');
|
||||
if (item) {
|
||||
const items = getItems();
|
||||
const index = items.indexOf(item);
|
||||
if (index >= 0) {
|
||||
selectItem(index);
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
// Update card count after loading more cards via HTMX
|
||||
let autoLoadEnabled = true;
|
||||
let lastCardCount = 0;
|
||||
|
||||
document.body.addEventListener('htmx:afterSwap', function(event) {
|
||||
// Only update if this was a card grid load
|
||||
if (event.detail.target.id === 'card-grid') {
|
||||
const cardTiles = document.querySelectorAll('#card-grid .card-tile');
|
||||
const totalCount = cardTiles.length;
|
||||
const resultsCount = document.getElementById('results-count');
|
||||
|
||||
if (resultsCount && totalCount > 0) {
|
||||
// Extract the "of X filtered cards" or "of X cards" part
|
||||
const originalText = resultsCount.textContent;
|
||||
const match = originalText.match(/of (\d+)( filtered)? cards/);
|
||||
|
||||
if (match) {
|
||||
const totalCards = match[1];
|
||||
const filtered = match[2] || '';
|
||||
const searchMatch = originalText.match(/matching "([^"]+)"/);
|
||||
const searchText = searchMatch ? ` matching "${searchMatch[1]}"` : '';
|
||||
|
||||
resultsCount.textContent = `Showing ${totalCount} of ${totalCards}${filtered} cards${searchText}`;
|
||||
}
|
||||
}
|
||||
|
||||
// Check if we just crossed a 100-card boundary
|
||||
const currentHundred = Math.floor(totalCount / 100);
|
||||
const lastHundred = Math.floor(lastCardCount / 100);
|
||||
|
||||
if (currentHundred > lastHundred && totalCount % 100 === 0) {
|
||||
autoLoadEnabled = false;
|
||||
}
|
||||
|
||||
lastCardCount = totalCount;
|
||||
|
||||
// Re-observe the new load more button
|
||||
const loadMoreContainer = document.getElementById('load-more-container');
|
||||
if (loadMoreContainer) {
|
||||
scrollObserver.observe(loadMoreContainer);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Scroll observer for infinite scroll
|
||||
const scrollObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting && autoLoadEnabled) {
|
||||
const loadMoreBtn = document.querySelector('#load-more-container button');
|
||||
if (loadMoreBtn) {
|
||||
loadMoreBtn.click();
|
||||
}
|
||||
}
|
||||
});
|
||||
}, {
|
||||
rootMargin: '200px' // Start loading 200px before reaching the button
|
||||
});
|
||||
|
||||
// Manual "Load More" click re-enables auto-load
|
||||
document.body.addEventListener('click', function(event) {
|
||||
const loadMoreBtn = event.target.closest('#load-more-container button');
|
||||
if (loadMoreBtn && !autoLoadEnabled) {
|
||||
autoLoadEnabled = true;
|
||||
}
|
||||
});
|
||||
|
||||
// Initial observation
|
||||
window.addEventListener('load', function() {
|
||||
const loadMoreContainer = document.getElementById('load-more-container');
|
||||
if (loadMoreContainer) {
|
||||
scrollObserver.observe(loadMoreContainer);
|
||||
}
|
||||
|
||||
// Initialize theme chips from URL params
|
||||
{% if themes %}
|
||||
{% for theme in themes %}
|
||||
addTheme('{{ theme|replace("'", "\\'") }}');
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
|
@ -6,6 +6,7 @@
|
|||
<a class="action-button" href="/configs">Run a JSON Config</a>
|
||||
{% if show_setup %}<a class="action-button" href="/setup">Initial Setup</a>{% endif %}
|
||||
<a class="action-button" href="/owned">Owned Library</a>
|
||||
<a class="action-button" href="/cards">Browse All Cards</a>
|
||||
{% if show_commanders %}<a class="action-button" href="/commanders">Browse Commanders</a>{% endif %}
|
||||
<a class="action-button" href="/decks">Finished Decks</a>
|
||||
<a class="action-button" href="/themes/">Browse Themes</a>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue