Phase 18: collection quick-sell button

Each card in the Collection tab now shows a Sell button displaying the
quick-sell coin value (computed from overall rating using the same tiers
as the backend: 85+→1500c, 80-84→900c, 75-79→600c, 65-74→300c, <65→150c).
Clicking calls DELETE /collection/:id with a confirmation prompt, shows a
toast with the actual coins received, and refreshes both the collection
and the header coin counter. Loan cards show a disabled button instead
to prevent accidental early sale.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
funman300
2026-06-25 17:50:16 -07:00
parent ba1b0a09f2
commit 30dfb25cf7
+26
View File
@@ -711,6 +711,26 @@ function statBar(label, val) {
</div>`;
}
function quickSellValue(overall) {
if (overall >= 85) return 1500;
if (overall >= 80) return 900;
if (overall >= 75) return 600;
if (overall >= 65) return 300;
return 150;
}
async function quickSellCard(ownedCardId, coinValue, btn) {
if (!confirm(`Quick-sell for ${coinValue.toLocaleString()} coins? This cannot be undone.`)) return;
btn.disabled = true;
try {
const r = await api('DELETE', `/collection/${ownedCardId}`);
showToast(`Sold for ${(r.coins_received || coinValue).toLocaleString()} coins`);
el('hdr-coins').textContent = '…';
api('GET', '/club').then(c => { el('hdr-coins').textContent = (c.coins ?? 0).toLocaleString() + ' coins'; }).catch(() => {});
loadCollection();
} catch (e) { showToast(e.message, true); btn.disabled = false; }
}
function renderPlayerCard(item) {
const c = item.card;
const ovr = item.effective_overall ?? c.overall;
@@ -724,6 +744,11 @@ function renderPlayerCard(item) {
isLoan,
].join('');
const sellCoins = quickSellValue(ovr);
const sellBtn = item.is_loan
? `<button class="btn btn-danger btn-sm" disabled title="Loan cards cannot be sold" style="width:100%;margin-top:6px">LOAN</button>`
: `<button class="btn btn-danger btn-sm" onclick="quickSellCard('${item.owned_card_id}', ${sellCoins}, this)" style="width:100%;margin-top:6px">Sell ${sellCoins.toLocaleString()}c</button>`;
return `<div class="player-card" title="${c.club} · ${c.league} · ${c.nation}">
<span class="card-rarity ${rarityClass(c.rarity)}">${(c.rarity||'').toUpperCase()}</span>
<div class="card-ovr">${ovr}</div>
@@ -735,6 +760,7 @@ function renderPlayerCard(item) {
${statBar('DRI', c.dribbling)}${statBar('DEF', c.defending)}${statBar('PHY', c.physical)}
</div>
${pills ? `<div class="card-upgrades">${pills}</div>` : ''}
${sellBtn}
</div>`;
}