' +
@@ -158,6 +159,7 @@ interface PointerEventLike {
const imgEl = panel.querySelector('.hcp-img') as HTMLImageElement;
const nameEl = panel.querySelector('.hcp-name') as HTMLElement;
const rarityEl = panel.querySelector('.hcp-rarity') as HTMLElement;
+ const priceEl = panel.querySelector('.hcp-price') as HTMLElement;
const metaEl = panel.querySelector('.hcp-meta') as HTMLElement;
const reasonsList = panel.querySelector('.hcp-reasons') as HTMLElement;
const tagsEl = panel.querySelector('.hcp-tags') as HTMLElement;
@@ -393,6 +395,14 @@ interface PointerEventLike {
nameEl.textContent = nm;
rarityEl.textContent = rarity;
+ if (priceEl) {
+ const priceRaw = (attr('data-price') || '').trim();
+ const priceNum = priceRaw ? parseFloat(priceRaw) : NaN;
+ const isStale = attr('data-stale') === '1';
+ priceEl.innerHTML = !isNaN(priceNum)
+ ? '$' + priceNum.toFixed(2) + (isStale ? '
\u23F1' : '')
+ : '';
+ }
const roleLabel = displayLabel(role);
const roleKey = (roleLabel || role || '').toLowerCase();
diff --git a/code/web/templates/base.html b/code/web/templates/base.html
index 2949ce3..c1d9134 100644
--- a/code/web/templates/base.html
+++ b/code/web/templates/base.html
@@ -118,6 +118,7 @@
Card images and data provided by
Scryfall.
This website is not produced by, endorsed by, supported by, or affiliated with Scryfall or Wizards of the Coast.
+ {% set _pba = _price_cache_ts() %}{% if _pba %}
Prices as of {{ _pba }} — for live pricing visit Scryfall.{% endif %}
+ {% if budget_config and budget_config.total %}
+
Loading deck cost...
+ {% endif %}
{% for t in tb.order %}
{{ t }} — {{ tb.counts[t] }}{% if tb.total %} ({{ '%.1f' % (tb.counts[t] * 100.0 / tb.total) }}%){% endif %}
@@ -46,7 +52,7 @@
@media (max-width: 1199px) {
.list-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}
- .list-row { display:grid; grid-template-columns: 4ch 1.25ch minmax(0,1fr) auto 1.6em; align-items:center; column-gap:.45rem; width:100%; }
+ .list-row { display:grid; grid-template-columns: 4ch 1.25ch minmax(0,1fr) auto auto 1.6em; align-items:center; column-gap:.45rem; width:100%; }
.list-row .count { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; text-align:right; color:#94a3b8; }
.list-row .times { color:#94a3b8; text-align:center; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.list-row .name { display:inline-block; padding: 2px 4px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@@ -75,6 +81,7 @@
{{ cnt }}
x
{{ c.name }}
+
{% if c.dfc_land %}
DFC land{% if c.dfc_adds_extra_land %} +1{% endif %}
@@ -114,8 +121,7 @@
 }})
- {{ cnt }}x
- {% if owned %}✔{% else %}✖{% endif %}
+ {{ cnt }}x
{% if owned %}✔{% else %}✖{% endif %}
{% if c.dfc_land %}
DFC{% if c.dfc_adds_extra_land %}+1{% endif %}
{% endif %}
@@ -601,6 +607,11 @@
} else if (t === 'curve') {
titleSpan.textContent = el.dataset.label + ': ' + (el.dataset.val || '0') + ' (' + (el.dataset.pct || '0') + '%)';
listText = (el.dataset.cards || '').split(' • ').filter(Boolean).join('\n');
+ } else if (t === 'hist') {
+ var hval = el.dataset.val || '0';
+ titleSpan.textContent = (el.dataset.range || '') + ' \u2014 ' + hval + ' card' + (hval !== '1' ? 's' : '');
+ var pairs = (el.dataset.cards || '').split(' \u2022 ').filter(Boolean);
+ listText = pairs.map(function(p){ var idx = p.lastIndexOf('|'); return idx < 0 ? p : p.slice(0, idx) + ' \u2014 $' + parseFloat(p.slice(idx+1)).toFixed(2); }).join('\n');
} else {
titleSpan.textContent = el.getAttribute('aria-label') || '';
}
@@ -662,6 +673,8 @@
var s = String(n);
// Strip trailing " ×" count suffix if present
s = s.replace(/\s×\d+$/,'');
+ // Strip trailing "|price" suffix from hist bars
+ s = s.replace(/\|[\d.]+$/, '');
return s.trim();
}).filter(Boolean);
}
@@ -707,8 +720,8 @@
}
function attach() {
- // Attach to SVG elements with data-type for better hover zones
- document.querySelectorAll('svg[data-type]').forEach(function(el) {
+ // Attach to elements with data-type (SVG mana charts + div hist bars)
+ document.querySelectorAll('[data-type]').forEach(function(el) {
el.addEventListener('mouseenter', function(e) {
// Don't show hover tooltip if this element is pinned
if (pinnedEl === el) return;
@@ -719,7 +732,7 @@
// Cross-highlight for mana curve bars -> card items
try {
var dataType = el.getAttribute('data-type');
- if (dataType === 'curve' || dataType === 'pips' || dataType === 'sources') {
+ if (dataType === 'curve' || dataType === 'pips' || dataType === 'sources' || dataType === 'hist') {
lastNames = normalizeList((el.dataset.cards || '').split(' • ').filter(Boolean));
lastType = dataType;
// Only apply hover highlights if nothing is pinned
@@ -769,7 +782,7 @@
document.addEventListener('click', function(e) {
if (!pinnedEl) return;
// Don't unpin if clicking the tooltip itself or a chart
- if (tip.contains(e.target) || e.target.closest('svg[data-type]')) return;
+ if (tip.contains(e.target) || e.target.closest('[data-type]')) return;
unpin();
});
@@ -825,7 +838,16 @@
}
} catch(_) {}
}
- attach();
+ // On static pages (view.html, run_result.html) deck_summary.html is rendered
+ // before the price-chart histogram bars in the outer template, so the inline
+ // script runs mid-parse and querySelectorAll('[data-type]') would not yet see
+ // those elements. Deferring to DOMContentLoaded fixes this for static pages
+ // while still running immediately when injected via HTMX (readyState 'complete').
+ if (document.readyState === 'loading') {
+ document.addEventListener('DOMContentLoaded', function() { attach(); });
+ } else {
+ attach();
+ }
document.addEventListener('htmx:afterSwap', function() { attach(); });
})();
diff --git a/code/web/templates/setup/index.html b/code/web/templates/setup/index.html
index 1ea6035..21e7608 100644
--- a/code/web/templates/setup/index.html
+++ b/code/web/templates/setup/index.html
@@ -145,6 +145,25 @@
(~15-20 min local, instant if cached on GitHub)
{% endif %}
+
+
+ Card Price Cache Status
+
+
Last updated:
+
+ {% if price_cache_built_at %}{{ price_cache_built_at }}{% else %}Not yet generated — run Setup first, then refresh prices.{% endif %}
+
+ {% if price_auto_refresh %}
+
Auto-refresh is enabled (runs daily at 01:00 UTC).
+ {% endif %}
+
+ {% if not price_auto_refresh %}
+
+ {{ button('Refresh Card Prices', variant='primary', onclick='refreshPriceCache()', attrs='id="btn-refresh-prices"') }}
+ Rebuilds price data from local Scryfall bulk data (requires Setup to have run).
+
+ {% endif %}