commit eae108c776f67a6187ae0973472f564cbfcee20d
parent 491792f4141c5ccc41b2af31ae2dc20cb6064117
Author: Alex Wennerberg <alex@Alexs-MacBook-Air.local>
Date: Wed, 17 Dec 2025 16:32:12 -0800
more features
Diffstat:
6 files changed, 72 insertions(+), 17 deletions(-)
diff --git a/static/style.css b/static/style.css
@@ -63,6 +63,51 @@ a:hover {
.hover_img a span { position:absolute; display:none; z-index:99; }
.hover_img a:hover span { display:block; }
+.card-icon-wrapper {
+ display: inline-block;
+ margin-right: 0;
+ vertical-align: middle;
+}
+
+.card-icon-link {
+ text-decoration: none;
+ cursor: pointer;
+ display: inline-block;
+}
+
+.mtg-card-icon {
+ width: 14px;
+ height: 14px;
+ opacity: 0.6;
+ transition: opacity 0.2s;
+}
+
+.mtg-card-icon:hover {
+ opacity: 1;
+}
+
+.card-preview {
+ position: absolute;
+ left: 20px;
+ top: -10px;
+ display: none;
+ z-index: 100;
+ pointer-events: none;
+ box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+ border-radius: 4px;
+ overflow: hidden;
+}
+
+.card-icon-link:hover .card-preview {
+ display: block;
+}
+
+.card-preview img {
+ width: 250px;
+ height: auto;
+ display: block;
+}
+
@media only screen and (max-width: 600px) {
.hide-mobile {
display:none;
diff --git a/templates/banned.html b/templates/banned.html
@@ -1,11 +1,5 @@
{% include 'header.html' %}
-
-<div class="banned-cards-dense">
{% for card in banned_cards %}
- <a href="/card?name={{ card.name|url_encode }}" title="{{ card.name }}">
- <img alt="{{ card.name }}" loading="lazy" src="https://api.scryfall.com/cards/named?exact={{ card.name|url_encode }}&format=image&version=medium">
- </a>
+<a href="/card?name={{ card.name|url_encode }}">{{card.name}}</a><br>
{% endfor %}
-</div>
-
-{% include 'footer.html' %}
-\ No newline at end of file
+{% include 'footer.html' %}
diff --git a/templates/card_icon.html b/templates/card_icon.html
@@ -0,0 +1,16 @@
+{% macro card_icon(card_name) %}
+<span class="card-icon-wrapper hover_img">
+ <a href="https://scryfall.com/search?q=!%22{{ card_name|url_encode }}%22" target="_blank" class="card-icon-link" title="View on Scryfall">
+ <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mtg-card-icon">
+ <rect x="3" y="2" width="18" height="20" rx="2" ry="2"></rect>
+ <line x1="7" y1="7" x2="17" y2="7"></line>
+ <line x1="7" y1="12" x2="17" y2="12"></line>
+ <circle cx="9" cy="17" r="1"></circle>
+ <circle cx="15" cy="17" r="1"></circle>
+ </svg>
+ <span class="card-preview">
+ <img src="https://api.scryfall.com/cards/named?exact={{ card_name|url_encode }}&format=image&version=normal" alt="{{ card_name }}" loading="lazy" />
+ </span>
+ </a>
+</span>
+{% endmacro %}
diff --git a/templates/cards.html b/templates/cards.html
@@ -1,3 +1,4 @@
+{% from 'card_icon.html' import card_icon %}
{% include 'header.html' %}
<table class="cards-table">
<thead>
@@ -9,7 +10,7 @@
<tbody>
{% for card in cards %}
<tr>
- <td><a href="/card?name={{ card.card|url_encode }}">{{ card.card }}</a>{% if card.card in banned_cards %} <span style="color: red;">(banned)</span>{% endif %}</td>
+ <td>{{ card_icon(card.card) }}<a href="/card?name={{ card.card|url_encode }}">{{ card.card }}</a>{% if card.card in banned_cards %} <span style="color: red;">(banned)</span>{% endif %}</td>
<td>{{ card.play_count }}</td>
</tr>
{% endfor %}
diff --git a/templates/index.html b/templates/index.html
@@ -7,7 +7,7 @@
<div class="rounds-list">
{% for round in rounds %}
<div class="round-item">
- <a href="/round/{{ round.id }}">Round {{ "%02d"|format(round.id) }}</a>
+ <a href="/round/{{ round.id }}">Round {{ "%03d"|format(round.id) }}</a>
<span class="round-meta">
{% if round.date %}
{{ round.date }}
@@ -17,4 +17,4 @@
</div>
{% endfor %}
</div>
-{% include 'footer.html' %}
-\ No newline at end of file
+{% include 'footer.html' %}
diff --git a/templates/matches.html b/templates/matches.html
@@ -1,5 +1,6 @@
+{% from 'card_icon.html' import card_icon %}
{% include 'header.html' %}
- {% if round %}
+ {% if round %}
<a href='https://docs.google.com/spreadsheets/d/{{ round.fileid }}/'>Google Sheet</a>{% endif %}
{% if not matches %}
<p>This card has never been played, or may be spelled wrong!</p>
@@ -23,9 +24,9 @@
<td style="border: 1px solid #ddd; padding: 8px;">{{ match.rank }}</td>
<td style="border: 1px solid #ddd; padding: 8px;">{{ match.prelim_score }}</td>
<td style="border: 1px solid #ddd; padding: 8px;">{{ match.final_score or '' }}</td>
- <td style="border: 1px solid #ddd; padding: 8px;"><a href="/card?name={{ match.card1 }}">{{ match.card1 }}</a>{% if match.card1 in banned_cards %} <span style="color: red;">(banned)</span>{% endif %}<br>{{ match.card1_type or 'N/A' }}{% if match.card1_cost %} {{ match.card1_cost|mana_symbols|safe }}{% endif %}</td>
- <td style="border: 1px solid #ddd; padding: 8px;"><a href="/card?name={{ match.card2 }}">{{ match.card2 }}</a>{% if match.card2 in banned_cards %} <span style="color: red;">(banned)</span>{% endif %}<br>{{ match.card2_type or 'N/A' }}{% if match.card2_cost %} {{ match.card2_cost|mana_symbols|safe }}{% endif %}</td>
- <td style="border: 1px solid #ddd; padding: 8px;"><a href="/card?name={{ match.card3 }}">{{ match.card3 }}</a>{% if match.card3 in banned_cards %} <span style="color: red;">(banned)</span>{% endif %}<br>{{ match.card3_type or 'N/A' }}{% if match.card3_cost %} {{ match.card3_cost|mana_symbols|safe }}{% endif %}</td>
+ <td style="border: 1px solid #ddd; padding: 8px;">{{ card_icon(match.card1) }}<a href="/card?name={{ match.card1 }}">{{ match.card1 }}</a>{% if match.card1 in banned_cards %} <span style="color: red;">(banned)</span>{% endif %}<br>{{ match.card1_type or 'N/A' }}{% if match.card1_cost %} {{ match.card1_cost|mana_symbols|safe }}{% endif %}</td>
+ <td style="border: 1px solid #ddd; padding: 8px;">{{ card_icon(match.card2) }}<a href="/card?name={{ match.card2 }}">{{ match.card2 }}</a>{% if match.card2 in banned_cards %} <span style="color: red;">(banned)</span>{% endif %}<br>{{ match.card2_type or 'N/A' }}{% if match.card2_cost %} {{ match.card2_cost|mana_symbols|safe }}{% endif %}</td>
+ <td style="border: 1px solid #ddd; padding: 8px;">{{ card_icon(match.card3) }}<a href="/card?name={{ match.card3 }}">{{ match.card3 }}</a>{% if match.card3 in banned_cards %} <span style="color: red;">(banned)</span>{% endif %}<br>{{ match.card3_type or 'N/A' }}{% if match.card3_cost %} {{ match.card3_cost|mana_symbols|safe }}{% endif %}</td>
<td style="border: 1px solid #ddd; padding: 8px;"><a href="/deck?c1={{ match.card1 }}&c2={{ match.card2 }}&c3={{ match.card3 }}">deck</a></td>
</tr>
{% endfor %}
