219 lines
12 KiB
Plaintext
219 lines
12 KiB
Plaintext
---
|
|
import ebay from "/vendors/ebay.svg?raw";
|
|
import SetIcon from '../../components/SetIcon.astro';
|
|
import EnergyIcon from '../../components/EnergyIcon.astro';
|
|
import RarityIcon from '../../components/RarityIcon.astro';
|
|
import { db } from '../../db/index';
|
|
import { privateDecrypt } from "node:crypto";
|
|
|
|
export const partial = true;
|
|
export const prerender = false;
|
|
|
|
const searchParams = Astro.url.searchParams;
|
|
const cardId = Number(searchParams.get('cardId')) || 0;
|
|
|
|
|
|
// query the database for the card with the given productId and return the card data as json
|
|
const card = await db.query.cards.findFirst({
|
|
where: { cardId: Number(cardId) },
|
|
with: {
|
|
prices: true,
|
|
set: true,
|
|
}
|
|
});
|
|
|
|
function timeAgo(date: Date | null) {
|
|
if (!date) return "Not applicable";
|
|
|
|
const seconds = Math.floor((Date.now() - date.getTime()) / 1000);
|
|
|
|
const intervals: Record<string, number> = {
|
|
year: 31536000,
|
|
month: 2592000,
|
|
day: 86400,
|
|
hour: 3600,
|
|
minute: 60
|
|
};
|
|
|
|
for (const [unit, value] of Object.entries(intervals)) {
|
|
const count = Math.floor(seconds / value);
|
|
if (count >= 1) return `${count} ${unit}${count > 1 ? "s" : ""} ago`;
|
|
}
|
|
|
|
return "just now";
|
|
}
|
|
|
|
// Get the most recent calculatedAt across all prices
|
|
const calculatedAt = (() => {
|
|
if (!card?.prices?.length) return null;
|
|
|
|
// Extract all valid calculatedAt timestamps
|
|
const dates = card.prices
|
|
.map(p => p.calculatedAt)
|
|
.filter(d => d) // remove null/undefined
|
|
.map(d => new Date(d));
|
|
|
|
if (!dates.length) return null;
|
|
|
|
// Return the most recent one
|
|
return new Date(Math.max(...dates.map(d => d.getTime())));
|
|
})();
|
|
|
|
const conditionOrder = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
|
|
|
|
const conditionAttributes = (price: any) => {
|
|
const volatility = (() => {
|
|
const current = price?.marketPrice;
|
|
const low = price?.lowestPrice;
|
|
const high = price?.highestPrice;
|
|
|
|
if (current === null || low === null || high === null) return "—";
|
|
|
|
const range = Number(high) - Number(low);
|
|
if (range <= 0) return "Low";
|
|
|
|
const position = (Number(current) - Number(low)) / range;
|
|
if (position > 0.75) return "High";
|
|
if (position > 0.46) return "Medium";
|
|
return "Low";
|
|
})();
|
|
|
|
const volatilityClass =
|
|
volatility === "High" ? "alert-danger" :
|
|
volatility === "Medium" ? "alert-warning" :
|
|
volatility === "Low" ? "alert-success" :
|
|
"";
|
|
|
|
const condition: string = price?.condition || "Near Mint";
|
|
return {
|
|
"Near Mint": { label: "nav-nm", volatility: volatility, volatilityClass: volatilityClass, class:"show active" },
|
|
"Lightly Played": { label: "nav-lp", volatility: volatility, volatilityClass: volatilityClass },
|
|
"Moderately Played": { label: "nav-mp", volatility: volatility, volatilityClass: volatilityClass },
|
|
"Heavily Played": { label: "nav-hp", volatility: volatility, volatilityClass: volatilityClass },
|
|
"Damaged": { label: "nav-dmg", volatility: volatility, volatilityClass: volatilityClass},
|
|
}[condition];
|
|
};
|
|
|
|
const ebaySearchUrl = (card: any) => {
|
|
return `https://www.ebay.com/sch/i.html?_nkw=${encodeURIComponent(card?.productUrlName)}+${encodeURIComponent(card?.set?.setUrlName)}+${card?.number}&LH_Sold=1&Graded=No&_dcat=183454${card?.productId}`;
|
|
};
|
|
---
|
|
|
|
<div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
|
|
<div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
|
|
<div class="modal-content">
|
|
<div class="modal-header border-0">
|
|
<div class="container-fluid">
|
|
<span class="h4 card-title pe-2">{card?.productName}</span><span class="text-secondary ps-2 border-start">{card?.number}</span><span class="text-secondary ps-2">{card?.variant}</span>
|
|
</div>
|
|
<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body pt-0">
|
|
<div class="container-fluid">
|
|
<div class="card mb-2 border-0">
|
|
<div class="row g-4">
|
|
<div class="col-sm-12 col-md-3">
|
|
<p class="text-secondary">{card?.set?.setName}</p>
|
|
<div class="position-relative"><img src={`/cards/${card?.productId}.jpg`} class="card-image w-100 img-fluid rounded-4" alt={card?.productName} onerror="this.onerror=null;this.src='/cards/default.jpg'" onclick="copyImage(this); dataLayer.push({'event': 'copiedImage'});"><span class="position-absolute bottom-0 start-0 d-inline"><SetIcon set={card?.set?.setCode} /></span><span class="position-absolute top-0 end-0 d-inline"><EnergyIcon energy={card?.energyType} /></span><span class="rarity-icon-large position-absolute bottom-0 end-0 d-inline"><RarityIcon rarity={card?.rarityName} /></span></div>
|
|
<div class="d-flex flex-row justify-content-between mt-2">
|
|
<div class="p text-secondary">Illustrator: {card?.Artist}</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-7">
|
|
<ul class="nav nav-tabs nav-fill border-0 me-3 mb-2" id="myTab" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link nm active" id="nm-tab" data-bs-toggle="tab" data-bs-target="#nav-nm" type="button" role="tab" aria-controls="nav-nm" aria-selected="true"><span class="d-none d-md-inline">Near Mint</span><span class="d-md-none">NM</span></button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link lp" id="lp-tab" data-bs-toggle="tab" data-bs-target="#nav-lp" type="button" role="tab" aria-controls="nav-lp" aria-selected="false"><span class="d-none d-md-inline">Lightly Played</span><span class="d-md-none">LP</span></button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link mp" id="mp-tab" data-bs-toggle="tab" data-bs-target="#nav-mp" type="button" role="tab" aria-controls="nav-mp" aria-selected="false"><span class="d-none d-md-inline">Moderately Played</span><span class="d-md-none">MP</span></button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link hp" id="hp-tab" data-bs-toggle="tab" data-bs-target="#nav-hp" type="button" role="tab" aria-controls="nav-hp" aria-selected="false"><span class="d-none d-md-inline">Heavily Played</span><span class="d-md-none">HP</span></button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link dmg" id="dmg-tab" data-bs-toggle="tab" data-bs-target="#nav-dmg" type="button" role="tab" aria-controls="nav-dmg" aria-selected="false"><span class="d-none d-md-inline">Damaged</span><span class="d-md-none">DMG</span></button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link vendor d-none" id="vendor-tab" data-bs-toggle="tab" data-bs-target="#nav-vendor" type="button" role="tab" aria-controls="nav-vendor" aria-selected="false"><span class="d-none d-md-inline">Inventory</span><span class="d-md-none">+/-</span></button>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content" id="myTabContent">
|
|
{card?.prices.slice().sort((a, b) => conditionOrder.indexOf(a.condition) - conditionOrder.indexOf(b.condition)).map((price) => {
|
|
const attributes = conditionAttributes(price);
|
|
return (
|
|
<div class={`tab-pane fade ${attributes?.label} ${attributes?.class}`} id={`${attributes?.label}`} role="tabpanel" tabindex="0">
|
|
<div class="d-block gap-2 d-md-flex">
|
|
<div class="d-flex flex-row flex-md-column gap-1 col-12 col-md-2 mb-0">
|
|
<div class="alert alert-secondary rounded p-2 flex-fill mb-2">
|
|
<h6>Market Price</h6>
|
|
<p class="pb-0">${price.marketPrice}</p>
|
|
</div>
|
|
<div class="alert alert-secondary rounded p-2 flex-fill mb-2">
|
|
<h6>Lowest Price</h6>
|
|
<p class="pb-0">${price.lowestPrice}</p>
|
|
</div>
|
|
<div class="alert alert-secondary rounded p-2 flex-fill mb-2">
|
|
<h6>Highest Price</h6>
|
|
<p class="pb-0">${price.highestPrice}</p>
|
|
</div>
|
|
<div class={`alert alert-secondary rounded p-2 flex-fill mb-2 ${attributes?.volatilityClass}`}>
|
|
<h6>Volatility</h6>
|
|
<p class="pb-0">{attributes?.volatility}</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-column gap-1 col-12 col-md-10 mb-0 me-2">
|
|
<div class="alert alert-secondary rounded p-2 mb-2">
|
|
<h6>Latest Sales</h6>
|
|
</div>
|
|
<div class="alert alert-secondary rounded p-2 mb-2">
|
|
<h6>Placeholder for graph</h6>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
<div class="tab-pane fade" id="nav-vendor" role="tabpanel" aria-labelledby="nav-vendor" tabindex="0">
|
|
<div class="row g-2 mt-2">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-2 mt-0 mt-md-5">
|
|
<a class="btn btn-secondary mb-2 w-100" href={`https://www.tcgplayer.com/product/${card?.productId}`} target="_blank" onclick="dataLayer.push({'event': 'tcgplayerClick', 'tcgplayerUrl': this.getAttribute('href')});"><img src="/vendors/tcgplayer.webp"> TCGPlayer</a>
|
|
<a class="btn btn-secondary mb-2 w-100" href={`${ebaySearchUrl(card)}`} target="_blank" onclick="dataLayer.push({'event': 'ebayClick', 'ebayUrl': this.getAttribute('href')});"><span set:html={ebay} /></a>
|
|
</div>
|
|
</div>
|
|
<div class="text-end my-0"><small class="text-body-secondary">Prices last changed: {timeAgo(calculatedAt)}</small></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script is:inline>
|
|
async function copyImage(img) {
|
|
const canvas = document.createElement("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
canvas.width = img.naturalWidth;
|
|
canvas.height = img.naturalHeight;
|
|
|
|
// draw the real image pixels
|
|
ctx.drawImage(img, 0, 0);
|
|
|
|
// convert to blob
|
|
canvas.toBlob(async (blob) => {
|
|
await navigator.clipboard.write([
|
|
new ClipboardItem({ "image/png": blob })
|
|
]);
|
|
console.log("Copied image via canvas.");
|
|
});
|
|
}
|
|
</script> |