mirror of
https://github.com/mwisnowski/mtg_python_deckbuilder.git
synced 2025-12-28 13:18:50 +01:00
feat: locks/replace/compare/permalinks; perf: virtualization, LQIP, caching, diagnostics; add tests, docs, and issue/PR templates (flags OFF)
This commit is contained in:
matt
parent
f8c6b5c07e
commit
721e1884af
41 changed files with 2960 additions and 143 deletions
226
code/web/templates/decks/compare.html
Normal file
226
code/web/templates/decks/compare.html
Normal file
|
|
@ -0,0 +1,226 @@
|
|||
{% extends "base.html" %}
|
||||
{% block banner_subtitle %}Compare Decks{% endblock %}
|
||||
{% block content %}
|
||||
<h2>Compare Decks</h2>
|
||||
<p class="muted">Pick two finished decks to compare. You can get here from Finished Decks or deck view pages.</p>
|
||||
|
||||
<form method="get" action="/decks/compare" class="panel" style="display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;">
|
||||
<label>Deck A
|
||||
<select name="A" required>
|
||||
<option value="">Choose…</option>
|
||||
{% for opt in options %}
|
||||
<option value="{{ opt.name }}" data-mtime="{{ opt.mtime }}" {% if A == opt.name %}selected{% endif %}>{{ opt.label }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
<label>Deck B
|
||||
<select name="B" required>
|
||||
<option value="">Choose…</option>
|
||||
{% for opt in options %}
|
||||
<option value="{{ opt.name }}" data-mtime="{{ opt.mtime }}" {% if B == opt.name %}selected{% endif %}>{{ opt.label }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</label>
|
||||
<button type="submit">Compare</button>
|
||||
<button type="button" id="cmp-swap" class="btn" title="Swap A and B" style="margin-left:.25rem;">Swap A/B</button>
|
||||
<button type="button" id="cmp-latest" class="btn" title="Pick the latest two decks">Latest two</button>
|
||||
</form>
|
||||
|
||||
{% if diffs %}
|
||||
<div class="panel" style="margin-top:.75rem;">
|
||||
<div style="display:flex; gap:1rem; flex-wrap:wrap; align-items:center;">
|
||||
<div>
|
||||
<strong>A:</strong> {{ metaA.display or metaA.filename }}
|
||||
{% if metaA.commander %}<span class="muted">({{ metaA.commander }})</span>{% endif %}
|
||||
{% if metaA.tags %}<div class="muted">{{ metaA.tags }}</div>{% endif %}
|
||||
</div>
|
||||
<div>
|
||||
<strong>B:</strong> {{ metaB.display or metaB.filename }}
|
||||
{% if metaB.commander %}<span class="muted">({{ metaB.commander }})</span>{% endif %}
|
||||
{% if metaB.tags %}<div class="muted">{{ metaB.tags }}</div>{% endif %}
|
||||
</div>
|
||||
<div style="margin-left:auto; display:flex; gap:.5rem; align-items:center;">
|
||||
<button type="button" id="cmp-copy" class="btn" title="Copy a plain-text summary of the diffs">Copy summary</button>
|
||||
<button type="button" id="cmp-download" class="btn" title="Download a plain-text summary of the diffs">Download .txt</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel" style="margin-top:.5rem; display:flex; gap:1rem; align-items:center; flex-wrap:wrap;">
|
||||
<div class="muted">Totals:
|
||||
<strong id="totA">{{ (diffs.onlyA|length) if diffs.onlyA else 0 }}</strong> only-in-A,
|
||||
<strong id="totB">{{ (diffs.onlyB|length) if diffs.onlyB else 0 }}</strong> only-in-B,
|
||||
<strong id="totC">{{ (diffs.changed|length) if diffs.changed else 0 }}</strong> changed
|
||||
</div>
|
||||
<label class="muted" style="margin-left:auto; display:flex; align-items:center; gap:.35rem;">
|
||||
<input type="checkbox" id="cmp-changed-only" /> Changed only
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="only-panels" style="display:grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top:.75rem;">
|
||||
<div class="panel onlyA">
|
||||
<h3 style="margin-top:0;">Only in A</h3>
|
||||
{% if diffs.onlyA and diffs.onlyA|length %}
|
||||
<ul>
|
||||
{% for n in diffs.onlyA %}<li>{{ n }}</li>{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<div class="muted">None</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="panel onlyB">
|
||||
<h3 style="margin-top:0;">Only in B</h3>
|
||||
{% if diffs.onlyB and diffs.onlyB|length %}
|
||||
<ul>
|
||||
{% for n in diffs.onlyB %}<li>{{ n }}</li>{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<div class="muted">None</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel" style="margin-top:1rem;">
|
||||
<h3 style="margin-top:0;">Changed counts</h3>
|
||||
{% if diffs.changed and diffs.changed|length %}
|
||||
<ul class="changed-list">
|
||||
{% for n, a, b in diffs.changed %}
|
||||
{% set delta = b - a %}
|
||||
{% if delta > 0 %}
|
||||
<li class="chg inc" title="Increased in B">▲ {{ n }}: A={{ a }}, B={{ b }} (+{{ delta }})</li>
|
||||
{% elif delta < 0 %}
|
||||
<li class="chg dec" title="Decreased in B">▼ {{ n }}: A={{ a }}, B={{ b }} ({{ delta }})</li>
|
||||
{% else %}
|
||||
<li class="chg">{{ n }}: A={{ a }}, B={{ b }}</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% else %}
|
||||
<div class="muted">None</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<script id="cmp-data" type="application/json">{{ {
|
||||
'aLabel': (metaA.display or metaA.filename),
|
||||
'bLabel': (metaB.display or metaB.filename),
|
||||
'onlyA': diffs.onlyA or [],
|
||||
'onlyB': diffs.onlyB or [],
|
||||
'changed': diffs.changed or []
|
||||
} | tojson }}</script>
|
||||
<script>
|
||||
(function(){
|
||||
var copyBtn = document.getElementById('cmp-copy');
|
||||
var dlBtn = document.getElementById('cmp-download');
|
||||
var changedOnly = document.getElementById('cmp-changed-only');
|
||||
var dataEl = document.getElementById('cmp-data');
|
||||
var data = null;
|
||||
try { data = JSON.parse((dataEl && dataEl.textContent) ? dataEl.textContent : 'null'); } catch(e) { data = null; }
|
||||
function buildLines(){
|
||||
var lines = [];
|
||||
lines.push('Compare:');
|
||||
lines.push('A: ' + data.aLabel);
|
||||
lines.push('B: ' + data.bLabel);
|
||||
lines.push('');
|
||||
if (!changedOnly || !changedOnly.checked) {
|
||||
lines.push('Only in A:');
|
||||
if (data.onlyA && data.onlyA.length) { data.onlyA.forEach(function(n){ lines.push('- ' + n); }); }
|
||||
else { lines.push('(none)'); }
|
||||
lines.push('');
|
||||
lines.push('Only in B:');
|
||||
if (data.onlyB && data.onlyB.length) { data.onlyB.forEach(function(n){ lines.push('- ' + n); }); }
|
||||
else { lines.push('(none)'); }
|
||||
lines.push('');
|
||||
}
|
||||
lines.push('Changed counts:');
|
||||
if (data.changed && data.changed.length) {
|
||||
data.changed.forEach(function(row){ lines.push('- ' + row[0] + ': A=' + row[1] + ', B=' + row[2]); });
|
||||
} else { lines.push('(none)'); }
|
||||
return lines;
|
||||
}
|
||||
if (copyBtn) copyBtn.addEventListener('click', function(){
|
||||
try{
|
||||
var txt = buildLines().join('\n');
|
||||
if (navigator.clipboard && navigator.clipboard.writeText){ navigator.clipboard.writeText(txt); }
|
||||
else {
|
||||
var ta = document.createElement('textarea'); ta.value = txt; document.body.appendChild(ta); ta.select(); try{ document.execCommand('copy'); }catch(_){} document.body.removeChild(ta);
|
||||
}
|
||||
if (window.toast) window.toast('Copied comparison');
|
||||
}catch(_){ }
|
||||
});
|
||||
if (dlBtn) dlBtn.addEventListener('click', function(){
|
||||
try{
|
||||
var txt = buildLines().join('\n');
|
||||
var blob = new Blob([txt], {type:'text/plain'});
|
||||
var url = URL.createObjectURL(blob);
|
||||
var a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'compare.txt';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
setTimeout(function(){ try{ URL.revokeObjectURL(url); document.body.removeChild(a); }catch(_){ } }, 0);
|
||||
}catch(_){ }
|
||||
});
|
||||
function applyChangedOnlyFlag(){
|
||||
try{
|
||||
var wrap = document.querySelector('.only-panels');
|
||||
if (!wrap || !changedOnly) return;
|
||||
wrap.style.display = changedOnly.checked ? 'none' : 'grid';
|
||||
}catch(_){ }
|
||||
}
|
||||
if (changedOnly) {
|
||||
try {
|
||||
var saved = localStorage.getItem('compare:changedOnly');
|
||||
if (saved === '1') { changedOnly.checked = true; }
|
||||
} catch(_){ }
|
||||
applyChangedOnlyFlag();
|
||||
changedOnly.addEventListener('change', function(){
|
||||
try { localStorage.setItem('compare:changedOnly', this.checked ? '1' : '0'); } catch(_){ }
|
||||
applyChangedOnlyFlag();
|
||||
});
|
||||
}
|
||||
// Swap A/B
|
||||
var swapBtn = document.getElementById('cmp-swap');
|
||||
if (swapBtn) swapBtn.addEventListener('click', function(){
|
||||
try{
|
||||
var f = this.closest('form'); if(!f) return;
|
||||
var a = f.querySelector('select[name="A"]');
|
||||
var b = f.querySelector('select[name="B"]');
|
||||
if(!a || !b) return;
|
||||
var aVal = a.value, bVal = b.value;
|
||||
a.value = bVal; b.value = aVal;
|
||||
f.requestSubmit();
|
||||
}catch(_){ }
|
||||
});
|
||||
// Pick latest two by mtime from options metadata
|
||||
var latestBtn = document.getElementById('cmp-latest');
|
||||
if (latestBtn) latestBtn.addEventListener('click', function(){
|
||||
try{
|
||||
var f = this.closest('form'); if(!f) return;
|
||||
var a = f.querySelector('select[name="A"]');
|
||||
var b = f.querySelector('select[name="B"]');
|
||||
if(!a || !b) return;
|
||||
var opts = Array.from(a.querySelectorAll('option[value]')).filter(function(o){ return o.value; });
|
||||
opts.sort(function(x,y){
|
||||
var mx = parseInt(x.getAttribute('data-mtime') || '0', 10);
|
||||
var my = parseInt(y.getAttribute('data-mtime') || '0', 10);
|
||||
return (my - mx);
|
||||
});
|
||||
if (opts.length >= 2){
|
||||
var first = opts[0].value;
|
||||
var second = opts[1].value;
|
||||
a.value = first; b.value = second;
|
||||
f.requestSubmit();
|
||||
}
|
||||
}catch(_){ }
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
<style>
|
||||
.changed-list { list-style: none; padding-left: 0; }
|
||||
.changed-list .chg { padding: 2px 0; }
|
||||
.changed-list .chg.inc { color: #10b981; }
|
||||
.changed-list .chg.dec { color: #ef4444; }
|
||||
.only-panels .onlyA h3 { color: #60a5fa; }
|
||||
.only-panels .onlyB h3 { color: #f59e0b; }
|
||||
</style>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue