mirror of
https://github.com/mwisnowski/mtg_python_deckbuilder.git
synced 2026-04-07 05:25:20 +02:00
feat: Card Kingdom prices, shopping cart export, and hover panel fixes (#73)
* feat: add CK prices, shopping cart export, and hover panel fixes * fix: include commander in Buy This Deck cart export
This commit is contained in:
mwisnowski
GitHub
parent
dd996939e6
commit
69d84cc414
24 changed files with 899 additions and 146 deletions
|
|
@ -5993,6 +5993,45 @@ footer.site-footer {
|
|||
color: var(--muted, #b6b8bd);
|
||||
}
|
||||
|
||||
.owned-badge {
|
||||
display: inline-block;
|
||||
padding: .1rem .45rem;
|
||||
border-radius: 4px;
|
||||
font-size: .75rem;
|
||||
font-weight: 600;
|
||||
color: var(--ok, #16a34a);
|
||||
border: 1px solid var(--ok, #16a34a);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Dual-price source labels (TCG / CK) */
|
||||
|
||||
.price-src-label {
|
||||
font-size: .65rem;
|
||||
font-weight: 600;
|
||||
opacity: .65;
|
||||
letter-spacing: .04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.price-sep {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.alt-prices {
|
||||
font-size: 11px;
|
||||
opacity: .7;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Price source legend (TCG = TCGPlayer · CK = Card Kingdom) */
|
||||
|
||||
.price-legend {
|
||||
font-size: .7rem;
|
||||
opacity: .55;
|
||||
letter-spacing: .02em;
|
||||
}
|
||||
|
||||
/* Inline price tooltip on card names */
|
||||
|
||||
.card-name-price-hover {
|
||||
|
|
@ -6382,6 +6421,104 @@ footer.site-footer {
|
|||
font-size: .92rem;
|
||||
}
|
||||
|
||||
/* Shopping cart toolbar — pickups page */
|
||||
|
||||
.cart-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .6rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: .75rem;
|
||||
padding: .45rem .6rem;
|
||||
background: var(--panel, #1a1f2e);
|
||||
border: 1px solid var(--border, #333);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.cart-toolbar .cart-label {
|
||||
font-size: .82rem;
|
||||
color: var(--muted, #94a3b8);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.cart-copy-feedback {
|
||||
font-size: .8rem;
|
||||
font-weight: 600;
|
||||
color: #34d399;
|
||||
margin-left: .25rem;
|
||||
}
|
||||
|
||||
.cart-copy-feedback.error {
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.cart-fallback-wrap {
|
||||
margin-top: .6rem;
|
||||
padding: .5rem .6rem;
|
||||
background: var(--panel, #1a1f2e);
|
||||
border: 1px solid var(--border, #333);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.cart-fallback-wrap p {
|
||||
font-size: .8rem;
|
||||
color: var(--muted, #94a3b8);
|
||||
margin: 0 0 .4rem 0;
|
||||
}
|
||||
|
||||
.cart-fallback-textarea {
|
||||
width: 100%;
|
||||
min-height: 110px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-size: .8rem;
|
||||
padding: .4rem .5rem;
|
||||
background: var(--bg, #0f172a);
|
||||
color: var(--text, #e5e7eb);
|
||||
border: 1px solid var(--border, #333);
|
||||
border-radius: 4px;
|
||||
resize: vertical;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.cart-cb-th {
|
||||
width: 2.2rem;
|
||||
text-align: center;
|
||||
padding: .4rem .25rem;
|
||||
border-bottom: 1px solid var(--border, #333);
|
||||
}
|
||||
|
||||
.cart-cb-td {
|
||||
text-align: center;
|
||||
padding: .35rem .25rem;
|
||||
border-bottom: 1px solid var(--border-subtle, #222);
|
||||
}
|
||||
|
||||
/* Top-center toast for buy/cart copy confirmation */
|
||||
|
||||
.cart-toast-top {
|
||||
position: fixed;
|
||||
top: 1.25rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--panel, #1a1f2e);
|
||||
color: var(--text, #e5e7eb);
|
||||
border: 1px solid #34d399;
|
||||
border-radius: 10px;
|
||||
padding: .6rem 1.4rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 8px 28px rgba(0,0,0,.45);
|
||||
z-index: 10000;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
transition: opacity .25s ease, transform .25s ease;
|
||||
}
|
||||
|
||||
.cart-toast-top.hide {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(-6px);
|
||||
}
|
||||
|
||||
.hover\:text-gray-700:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity, 1));
|
||||
|
|
@ -6422,3 +6559,4 @@ footer.site-footer {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3728,6 +3728,43 @@ footer.site-footer {
|
|||
color: var(--muted, #b6b8bd);
|
||||
}
|
||||
|
||||
.owned-badge {
|
||||
display: inline-block;
|
||||
padding: .1rem .45rem;
|
||||
border-radius: 4px;
|
||||
font-size: .75rem;
|
||||
font-weight: 600;
|
||||
color: var(--ok, #16a34a);
|
||||
border: 1px solid var(--ok, #16a34a);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Dual-price source labels (TCG / CK) */
|
||||
.price-src-label {
|
||||
font-size: .65rem;
|
||||
font-weight: 600;
|
||||
opacity: .65;
|
||||
letter-spacing: .04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.price-sep {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
.alt-prices {
|
||||
font-size: 11px;
|
||||
opacity: .7;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Price source legend (TCG = TCGPlayer · CK = Card Kingdom) */
|
||||
.price-legend {
|
||||
font-size: .7rem;
|
||||
opacity: .55;
|
||||
letter-spacing: .02em;
|
||||
}
|
||||
|
||||
/* Inline price tooltip on card names */
|
||||
.card-name-price-hover {
|
||||
cursor: default;
|
||||
|
|
@ -3957,3 +3994,86 @@ footer.site-footer {
|
|||
font-size: .92rem;
|
||||
}
|
||||
|
||||
/* Shopping cart toolbar — pickups page */
|
||||
.cart-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: .6rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: .75rem;
|
||||
padding: .45rem .6rem;
|
||||
background: var(--panel, #1a1f2e);
|
||||
border: 1px solid var(--border, #333);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.cart-toolbar .cart-label {
|
||||
font-size: .82rem;
|
||||
color: var(--muted, #94a3b8);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.cart-copy-feedback {
|
||||
font-size: .8rem;
|
||||
font-weight: 600;
|
||||
color: #34d399;
|
||||
margin-left: .25rem;
|
||||
}
|
||||
.cart-copy-feedback.error { color: #f87171; }
|
||||
.cart-fallback-wrap {
|
||||
margin-top: .6rem;
|
||||
padding: .5rem .6rem;
|
||||
background: var(--panel, #1a1f2e);
|
||||
border: 1px solid var(--border, #333);
|
||||
border-radius: 6px;
|
||||
}
|
||||
.cart-fallback-wrap p {
|
||||
font-size: .8rem;
|
||||
color: var(--muted, #94a3b8);
|
||||
margin: 0 0 .4rem 0;
|
||||
}
|
||||
.cart-fallback-textarea {
|
||||
width: 100%;
|
||||
min-height: 110px;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
font-size: .8rem;
|
||||
padding: .4rem .5rem;
|
||||
background: var(--bg, #0f172a);
|
||||
color: var(--text, #e5e7eb);
|
||||
border: 1px solid var(--border, #333);
|
||||
border-radius: 4px;
|
||||
resize: vertical;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.cart-cb-th {
|
||||
width: 2.2rem;
|
||||
text-align: center;
|
||||
padding: .4rem .25rem;
|
||||
border-bottom: 1px solid var(--border, #333);
|
||||
}
|
||||
.cart-cb-td {
|
||||
text-align: center;
|
||||
padding: .35rem .25rem;
|
||||
border-bottom: 1px solid var(--border-subtle, #222);
|
||||
}
|
||||
|
||||
/* Top-center toast for buy/cart copy confirmation */
|
||||
.cart-toast-top {
|
||||
position: fixed;
|
||||
top: 1.25rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--panel, #1a1f2e);
|
||||
color: var(--text, #e5e7eb);
|
||||
border: 1px solid #34d399;
|
||||
border-radius: 10px;
|
||||
padding: .6rem 1.4rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 8px 28px rgba(0,0,0,.45);
|
||||
z-index: 10000;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
transition: opacity .25s ease, transform .25s ease;
|
||||
}
|
||||
.cart-toast-top.hide { opacity: 0; transform: translateX(-50%) translateY(-6px); }
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -396,12 +396,24 @@ 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 ? ' <span style="color:#f59e0b;font-size:10px;" title="Price may be outdated (>24h)">\u23F1</span>' : '')
|
||||
: '';
|
||||
const staleSpan = isStale ? ' <span style="color:#f59e0b;font-size:10px;" title="Price may be outdated (>24h)">\u23F1</span>' : '';
|
||||
// Prefer the shared price cache (populated by initPriceDisplay with both TCG+CK)
|
||||
const globalCache = (window as any)._priceNum as Record<string, {tcg: number|null, ck: number|null}|null> | undefined;
|
||||
const cached = globalCache && globalCache[nm];
|
||||
if (cached && (cached.tcg !== null || cached.ck !== null)) {
|
||||
const parts: string[] = [];
|
||||
if (cached.tcg !== null) parts.push('<span class="price-src-label">TCG</span> $' + (cached.tcg as number).toFixed(2) + staleSpan);
|
||||
if (cached.ck !== null) parts.push('<span class="price-src-label">CK</span> $' + (cached.ck as number).toFixed(2));
|
||||
priceEl.innerHTML = parts.join(' <span class="price-sep">\u00B7</span> ');
|
||||
} else {
|
||||
// Fallback: data-price (TCG only, set server-side in _step5.html)
|
||||
const priceRaw = (attr('data-price') || '').trim();
|
||||
const priceNum = priceRaw ? parseFloat(priceRaw) : NaN;
|
||||
priceEl.innerHTML = !isNaN(priceNum)
|
||||
? '<span class="price-src-label">TCG</span> $' + priceNum.toFixed(2) + staleSpan
|
||||
: '';
|
||||
}
|
||||
}
|
||||
|
||||
const roleLabel = displayLabel(role);
|
||||
|
|
@ -680,7 +692,12 @@ interface PointerEventLike {
|
|||
|
||||
// Recognized container classes
|
||||
const container = el.closest && el.closest('.card-sample, .commander-cell, .commander-thumb, .commander-card, .candidate-tile, .card-preview, .stack-card');
|
||||
if (container) return container;
|
||||
if (container) {
|
||||
// .card-preview is also used as a plain layout aside (no data-card-name on it);
|
||||
// only treat it as a hover target when the attribute lives directly on the element.
|
||||
if (container.classList.contains('card-preview') && !container.hasAttribute('data-card-name')) return null;
|
||||
return container;
|
||||
}
|
||||
|
||||
// Image-based detection (any card image carrying data-card-name)
|
||||
if (el.matches && (el.matches('img.card-thumb') || el.matches('img[data-card-name]') || el.classList.contains('commander-img'))) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue