mirror of
https://github.com/Patiun/com.gregkilmer.www.git
synced 2026-11-08 04:08:24 +00:00
TCGs
This commit is contained in:
Greg Kilmer
@@ -54,6 +54,17 @@ const interests = [
|
||||
"Resin dice in a pressure pot, fun and functional prints on the P1s, custom TCG proxies and decks. Passion and utility.",
|
||||
image: "/images/making-resin.jpg",
|
||||
alt: "Polyhedral dice on a dark bag",
|
||||
},
|
||||
{
|
||||
href: "/interests/tcgs",
|
||||
icon: "cards",
|
||||
title: "Trading Card Games",
|
||||
tagline:
|
||||
"Cardboard, deckbuilding, and the eternal question: one more pack?",
|
||||
blurb:
|
||||
"Magic: The Gathering Commander decks, Pokémon collecting, Riftbound, and the Gundam card game. Plus the proxies and props I make to play them.",
|
||||
image: "/images/cards.jpg",
|
||||
alt: "Trading cards and dice on a playmat",
|
||||
} /*
|
||||
{
|
||||
href: '/interests/pokemon',
|
||||
|
||||
@@ -56,6 +56,12 @@ const related = [
|
||||
icon: "book-open-page-variant",
|
||||
blurb: "Displays and props for the stories I love.",
|
||||
},
|
||||
{
|
||||
href: "/interests/tcgs",
|
||||
title: "Trading Card Games",
|
||||
icon: "cards",
|
||||
blurb: "Proxies, tokens, and props are the TCG side of the workshop.",
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
|
||||
@@ -0,0 +1,231 @@
|
||||
---
|
||||
/**
|
||||
* tcgs.astro — Trading Card Games
|
||||
* ---------------------------------------------------------------------------
|
||||
* Per-interest template. Sections: overview narrative, the games I play
|
||||
* (MTG, Pokémon, Riftbound, Gundam), Magic: The Gathering decks pulled live
|
||||
* from Archidekt, and proxy making. Related links to Tabletop and Making.
|
||||
*/
|
||||
import BaseLayout from "@layouts/BaseLayout.astro";
|
||||
import Reveal from "@components/motion/Reveal.astro";
|
||||
import InterestHero from "@components/layout/InterestHero.astro";
|
||||
import InterestCard from "@components/cards/InterestCard.astro";
|
||||
import DeckCard from "@components/cards/DeckCard.astro";
|
||||
import SectionHeader from "@components/layout/SectionHeader.astro";
|
||||
import RelatedInterests from "@components/layout/RelatedInterests.astro";
|
||||
import Placeholder from "@components/layout/Placeholder.astro";
|
||||
import Icon from "@components/Icon.astro";
|
||||
import {
|
||||
getDecks,
|
||||
archidektSearchUrl,
|
||||
ARCHIDEKT_USERNAME,
|
||||
} from "@lib/archidekt";
|
||||
|
||||
const games = [
|
||||
{
|
||||
icon: "cards-playing",
|
||||
title: "Magic: The Gathering",
|
||||
body: "The main event. Mostly Commander (EDH), with a deckbuilding obsession that Archidekt enables far too well.",
|
||||
},
|
||||
{
|
||||
icon: "pokeball",
|
||||
title: "Pokémon TCG",
|
||||
body: "Collector energy and casual play. Beautiful art pulls, deck drafts, and a soft spot for Steel/Psychic. Mostly on Pocket TCG.",
|
||||
},
|
||||
{
|
||||
icon: "sword-cross",
|
||||
title: "Riftbound",
|
||||
body: "Riot's League of Legends TCG. A new game with a lot of potential. Interested in exploring deckbuilding and the evolving meta.",
|
||||
},
|
||||
{
|
||||
icon: "robot",
|
||||
title: "Gundam Card Game",
|
||||
body: "Bandai's Gundam TCG. A new game with a lot of potential. Interested in how some of the figures will come into play with the other table top pieces for this entry.",
|
||||
},
|
||||
];
|
||||
|
||||
const proxy = [
|
||||
{
|
||||
icon: "content-cut",
|
||||
title: "Proxy TCG cards",
|
||||
body: "Designing and cutting proxy cards on the Silhouette Cameo 5a for casual play",
|
||||
},
|
||||
{
|
||||
icon: "scissors-cutting",
|
||||
title: "Custom stickers & decals",
|
||||
body: "Vinyl cut for sleeves, playmats, and storage — life counters, clan badges, and the occasional silly sticker.",
|
||||
},
|
||||
{
|
||||
icon: "diamond-stone",
|
||||
title: "Tokens & counters",
|
||||
body: "Resin-cast tokens, +1/+1 counters, and commander damage trackers cast in the pressure pot.",
|
||||
},
|
||||
{
|
||||
icon: "printer-3d-nozzle",
|
||||
title: "3D-printed props",
|
||||
body: "Life counters, dice towers, deck boxes, and display stands off.",
|
||||
},
|
||||
];
|
||||
|
||||
const related = [
|
||||
{
|
||||
href: "/interests/ttrpgs",
|
||||
title: "TTRPGs & Tabletop",
|
||||
icon: "dice-multiple",
|
||||
blurb: "Cards and dice share the same shelf and the same table.",
|
||||
},
|
||||
{
|
||||
href: "/interests/making",
|
||||
title: "Making & Creating",
|
||||
icon: "palette",
|
||||
blurb: "Proxies, tokens, and props are the TCG side of the workshop.",
|
||||
},
|
||||
];
|
||||
|
||||
// Live Archidekt decks (server-side, cached ~1h, never throws).
|
||||
const decks = await getDecks();
|
||||
const decksHref = archidektSearchUrl();
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
surface="interest"
|
||||
title="Trading Card Games"
|
||||
description="Magic: The Gathering Commander decks, Pokémon collecting, Riftbound, and the Gundam card game. Plus the proxies, tokens, and props I make to play them."
|
||||
>
|
||||
<InterestHero
|
||||
icon="cards"
|
||||
title="Trading Card Games"
|
||||
tagline="Cardboard, deckbuilding, and the eternal question: one more pack?"
|
||||
image="/images/cards.jpg"
|
||||
imageAlt="Trading cards and dice on a playmat"
|
||||
/>
|
||||
|
||||
<div class="container-prose flex flex-col gap-20 py-12 sm:py-16">
|
||||
{/* Overview */}
|
||||
<section
|
||||
class="flex flex-col gap-5 text-lg leading-relaxed"
|
||||
style="color: var(--color-text-muted);"
|
||||
>
|
||||
<Reveal
|
||||
><p>
|
||||
Trading card games are where my collecting, deckbuilding, and making
|
||||
instincts all collide. I primarily play Magic: The Gathering, mostly
|
||||
Commander (Elder Dragon Highlander), where a hundred cards becomes a
|
||||
personal expression and the brewing never really ends. But I keep a
|
||||
hand in the Pokémon TCG, and I'm watching Riftbound and the new Gundam
|
||||
card game closely. If it has nice cardboard, pretty art, and a
|
||||
decision tree, I'm interested.
|
||||
</p></Reveal
|
||||
>
|
||||
<Reveal delay={80}
|
||||
><p>
|
||||
The hobby overlaps the rest of the fun wing: the same workshop that
|
||||
produces resin dice and 3D prints also turns out proxies, tokens, and
|
||||
deckboxes and more. And the deckbuilding itch is a close relation of
|
||||
the RPG character-builder in me. Optimizing a list tells a story about
|
||||
how I want to play and the theme I build the deck around.
|
||||
</p></Reveal
|
||||
>
|
||||
</section>
|
||||
|
||||
{/* The games I play */}
|
||||
<section class="flex flex-col gap-6">
|
||||
<Reveal
|
||||
><SectionHeader
|
||||
kicker="Collection"
|
||||
icon="cards-outline"
|
||||
title="The games I play"
|
||||
/></Reveal
|
||||
>
|
||||
<div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-2">
|
||||
{
|
||||
games.map((g, i) => (
|
||||
<Reveal delay={i * 70}>
|
||||
<InterestCard icon={g.icon} title={g.title}>
|
||||
{g.body}
|
||||
</InterestCard>
|
||||
</Reveal>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Magic: The Gathering decks (live from Archidekt) */}
|
||||
<section class="flex flex-col gap-6">
|
||||
<Reveal>
|
||||
<div class="flex flex-wrap items-end justify-between gap-4">
|
||||
<SectionHeader kicker="Magic" icon="magic-staff" title="MTG decks" />
|
||||
<a
|
||||
href={decksHref}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center gap-1.5 text-sm transition-colors hover:underline"
|
||||
style="color: var(--color-accent);"
|
||||
>
|
||||
Manage on Archidekt
|
||||
<Icon name="open-in-new" class="h-4 w-4" />
|
||||
</a>
|
||||
</div>
|
||||
</Reveal>
|
||||
<Reveal delay={40}>
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">
|
||||
Pulled live from my Archidekt account ({ARCHIDEKT_USERNAME}). Newest
|
||||
decks first; click a card to open it.
|
||||
</p>
|
||||
</Reveal>
|
||||
{
|
||||
decks.length > 0 ? (
|
||||
<div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{decks
|
||||
.slice()
|
||||
.sort((a, b) => +new Date(b.updatedAt) - +new Date(a.updatedAt))
|
||||
.map((d, i) => (
|
||||
<Reveal delay={Math.min(i * 50, 400)}>
|
||||
<DeckCard
|
||||
name={d.name}
|
||||
href={d.href}
|
||||
featured={d.featured}
|
||||
colors={d.colors}
|
||||
size={d.size}
|
||||
formatLabel={d.formatLabel}
|
||||
updatedAt={d.updatedAt}
|
||||
/>
|
||||
</Reveal>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<Reveal delay={80}>
|
||||
<Placeholder
|
||||
label="Archidekt decks"
|
||||
hint={`Couldn't reach Archidekt right now. View the full list at ${decksHref}.`}
|
||||
/>
|
||||
</Reveal>
|
||||
)
|
||||
}
|
||||
</section>
|
||||
|
||||
{/* Proxy making */}
|
||||
<section class="flex flex-col gap-6">
|
||||
<Reveal
|
||||
><SectionHeader
|
||||
kicker="Workshop"
|
||||
icon="auto-fix"
|
||||
title="Proxy making & printed props"
|
||||
/></Reveal
|
||||
>
|
||||
<div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-2">
|
||||
{
|
||||
proxy.map((p, i) => (
|
||||
<Reveal delay={i * 70}>
|
||||
<InterestCard icon={p.icon} title={p.title}>
|
||||
{p.body}
|
||||
</InterestCard>
|
||||
</Reveal>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<RelatedInterests items={related} />
|
||||
</div>
|
||||
</BaseLayout>
|
||||
@@ -67,6 +67,12 @@ const related = [
|
||||
icon: "gamepad-variant",
|
||||
blurb: "Digital RPGs as another expression of the same impulse.",
|
||||
},
|
||||
{
|
||||
href: "/interests/tcgs",
|
||||
title: "Trading Card Games",
|
||||
icon: "cards",
|
||||
blurb: "Cards and dice share the same shelf — and the same table.",
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
|
||||
Reference in New Issue
Block a user