Compare commits
3 Commits
f990d70540
...
fe2abf4dd2
| Author | SHA1 | Date | |
|---|---|---|---|
|
fe2abf4dd2 | ||
|
|
561a74e26e | ||
|
|
6824d224c0 |
@@ -5,15 +5,28 @@
|
|||||||
opacity: .87;
|
opacity: .87;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-image {
|
||||||
|
aspect-ratio: 5/7;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sticky {
|
||||||
|
background-color: hsl(195, 4%, 22%);
|
||||||
|
position: sticky;
|
||||||
|
z-index: 1000;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.rarity-icon svg {
|
.rarity-icon svg {
|
||||||
height: 14.5px;
|
height: 1rem;
|
||||||
width: auto;
|
line-height: 1rem;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.price-label {
|
.price-label {
|
||||||
color: hsl(122, 39%, 49%);
|
color: hsl(122, 39%, 49%);
|
||||||
font-size: 0.825rem;
|
font-size: 0.825rem;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.price-label:nth-of-type(n+2) {
|
.price-label:nth-of-type(n+2) {
|
||||||
|
|||||||
@@ -11,6 +11,9 @@ import doubleRare from "/src/svg/rarity/double_rare.svg?raw";
|
|||||||
import promo from "/src/svg/rarity/promo.svg?raw";
|
import promo from "/src/svg/rarity/promo.svg?raw";
|
||||||
import specialIllusRare from "/src/svg/rarity/special_illustration_rare.svg?raw";
|
import specialIllusRare from "/src/svg/rarity/special_illustration_rare.svg?raw";
|
||||||
import ultrarare from "/src/svg/rarity/rare_ultra.svg?raw";
|
import ultrarare from "/src/svg/rarity/rare_ultra.svg?raw";
|
||||||
|
import secretrare from "/src/svg/rarity/rare_secret.svg?raw";
|
||||||
|
import blackwhiterare from "/src/svg/rarity/black_white_rare.svg?raw";
|
||||||
|
import raresecret from "/src/svg/rarity/rare_secret.svg?raw";
|
||||||
|
|
||||||
const { rarity } = Astro.props;
|
const { rarity } = Astro.props;
|
||||||
|
|
||||||
@@ -26,10 +29,13 @@ const rarityMap = {
|
|||||||
"Double Rare": doubleRare,
|
"Double Rare": doubleRare,
|
||||||
"Promo": promo,
|
"Promo": promo,
|
||||||
"Special Illustration Rare": specialIllusRare,
|
"Special Illustration Rare": specialIllusRare,
|
||||||
"Ultra Rare": ultrarare, // Ultra Rare and Holo Rare use the same icon
|
"Ultra Rare": ultrarare,
|
||||||
|
"Secret Rare": secretrare,
|
||||||
|
"Black White Rare": blackwhiterare,
|
||||||
|
"Shiny Holo Rare": raresecret,
|
||||||
};
|
};
|
||||||
|
|
||||||
const svg = rarityMap[rarity] ?? "";
|
const svg = rarityMap[rarity as keyof typeof rarityMap] ?? "";
|
||||||
---
|
---
|
||||||
|
|
||||||
<span class="rarity-icon h-100" set:html={svg}></span>
|
<div class="rarity-icon" set:html={svg}></div>
|
||||||
|
|||||||
@@ -6,7 +6,6 @@
|
|||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="generator" content={Astro.generator} />
|
<meta name="generator" content={Astro.generator} />
|
||||||
<link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js" as="style" />
|
|
||||||
<title>Rigid's app thing</title>
|
<title>Rigid's app thing</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@@ -1,74 +1,17 @@
|
|||||||
---
|
---
|
||||||
import Layout from '../layouts/Main.astro';
|
import Layout from '../layouts/Main.astro';
|
||||||
import RarityIcon from "../components/RarityIcon.astro";
|
import CardGrid from "../components/CardGrid.astro";
|
||||||
|
import Card from "../components/Card.astro";
|
||||||
//import { eq } from 'drizzle-orm';
|
import StickyFilter from '../components/StickyFilter.astro';
|
||||||
import { db } from '../db';
|
|
||||||
//import * as schema from '../db/schema.ts';
|
|
||||||
|
|
||||||
// Get some sample Pokemon data from the database
|
|
||||||
//const pokemon = await db.select().from(schema.cards).where(eq(schema.cards.productLineName, "pokemon")).limit(256);
|
|
||||||
const pokemon = await db.query.cards.findMany({
|
|
||||||
where: { productLineName: "pokemon" },
|
|
||||||
limit: 320,
|
|
||||||
with: {
|
|
||||||
prices: true,
|
|
||||||
set: true,
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const formatPrice = (price:any) => {
|
|
||||||
if (price === null) {
|
|
||||||
return "N/A";
|
|
||||||
}
|
|
||||||
price = Number(price);
|
|
||||||
if (price >= 100) {
|
|
||||||
return `${Math.round(price)}`;
|
|
||||||
}
|
|
||||||
return `${price.toFixed(2)}`;
|
|
||||||
};
|
|
||||||
|
|
||||||
const order = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
|
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout>
|
<Layout>
|
||||||
|
<StickyFilter />
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1 class="my-5">Rigid's app thing</h1>
|
<h1 class="my-5">Rigid's app thing</h1>
|
||||||
<div class="row">
|
<CardGrid>
|
||||||
<div class="col-sm-12 col-md-3">
|
<Card slot="Card"></Card>
|
||||||
<div class="h5">Inventory management placeholder</div>
|
</CardGrid>
|
||||||
</div>
|
|
||||||
<div class="col-sm-12 col-md-9">
|
|
||||||
<div class="row g-4 row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4">
|
|
||||||
{pokemon.map((card) => (
|
|
||||||
<div class="col">
|
|
||||||
<img src={`/cards/${card.productId}.jpg`} alt={card.productName} class="w-100 img-fluid rounded-4 mb-2" />
|
|
||||||
<div class="h6 my-0">{card.productName}</div>
|
|
||||||
<div class="d-flex justify-content-between">
|
|
||||||
<div class="copy-small">{card.number}</div>
|
|
||||||
<RarityIcon rarity={card.rarityName} />
|
|
||||||
</div>
|
|
||||||
<div>{card.set?.setName}</div>
|
|
||||||
<div class="row row-cols-5 gx-1 mt-1">
|
|
||||||
{card.prices
|
|
||||||
.slice()
|
|
||||||
.sort((a, b) => order.indexOf(a.condition) - order.indexOf(b.condition))
|
|
||||||
.filter((price, index, arr) =>
|
|
||||||
arr.findIndex(p => p.condition === price.condition) === index
|
|
||||||
)
|
|
||||||
.map((price) => (
|
|
||||||
<div class="col p price-label">
|
|
||||||
{price.condition.split(' ').map((w) => w[0]).join('')}
|
|
||||||
<br />${formatPrice(price.marketPrice)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</Layout>
|
</div>
|
||||||
|
</Layout>
|
||||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 10 KiB After Width: | Height: | Size: 11 KiB |
Reference in New Issue
Block a user