diff --git a/src/data/store-availability.json b/src/data/store-availability.json
index 6494d8a..635dd22 100644
--- a/src/data/store-availability.json
+++ b/src/data/store-availability.json
@@ -5,11 +5,11 @@
"maxNote": "I take a limited number of orders at a time so each one gets full attention. Slots reopen as current orders finish.",
"slots": {
"cards": {
- "open": 0,
+ "open": 1,
"total": 3
},
"deckBoxes": {
- "open": 0,
+ "open": 2,
"total": 3
}
}
diff --git a/src/data/store-products.ts b/src/data/store-products.ts
index 29660ce..cc28692 100644
--- a/src/data/store-products.ts
+++ b/src/data/store-products.ts
@@ -100,34 +100,48 @@ export const cardProduct: Product = {
slotKey: 'cards',
images: [
{
- src: '/images/proxies.jpg',
+ src: '/images/store/cards/proxies.jpg',
alt: 'Example printed proxy MTG cards, front faces',
label: 'Card fronts \u2014 full-color print',
- },
- {
- src: '/images/proxies-example-1.svg',
- alt: 'Placeholder: close-up of card finish and cut',
- label: 'Placeholder \u2014 close-up of finish & cut',
- },
- {
- src: '/images/proxies-example-2.svg',
- alt: 'Placeholder: white card back showing the proxy marking',
- label: 'Placeholder \u2014 solid white back',
+ },{
+ src: '/images/store/cards/proxies2.jpg',
+ alt: 'Example printed foil proxy MTG cards, front faces',
+ label: 'Card fronts \u2014 foil print',
+ },{
+ src: '/images/store/cards/foil_cloud_measured.jpg',
+ alt: 'Example printed foil cloud proxy card with measurements',
+ label: 'Rainbow foil card front with measurements',
+ },{
+ src: '/images/store/cards/disclosure.jpg',
+ alt: 'Example printed deck disclosure card',
+ label: 'Deck disclosure card',
+ },{
+ src: '/images/store/cards/sleeved.jpg',
+ alt: 'Example printed proxy cards in sleeves',
+ label: 'Proxy cards in sleeves',
+ },{
+ src: '/images/store/cards/ravenous_duo.jpg',
+ alt: 'Example printed Ravenous TRex foil and non-foil proxy cards',
+ label: 'Ravenous TRex foil and non-foil proxy cards',
+ },{
+ src: '/images/store/cards/ghalta_duo.jpg',
+ alt: 'Example printed Ghalta foil and non-foil proxy cards',
+ label: 'Ghalta foil and non-foil proxy cards',
},
],
specs: [
{ label: 'Size', value: '63 x 88 mm (standard MTG card size)' },
- { label: 'Thickness', value: '0.31mm laminated photo cardstock' },
+ { label: 'Thickness', value: '0.37mm laminated photo cardstock' },
{ label: 'Back', value: 'Solid white back (clearly not tournament-legal)' },
{
label: 'Finishes',
- value: 'Default matte finish, available in glossy on request',
+ value: 'Default matte finish, available in glossy on request (Foil cards are always glossy finish)',
},
{
label: 'Double-sided cards',
value: 'Printed as two separate cards and count as 2 card slots',
},
- { label: 'Art', value: 'Official card art only. No offensive art (custom cards usable if fully provided see Requirements)' },
+ { label: 'Art', value: 'Official card art only. No offensive art (custom cards usable if fully provided)' },
],
pricing: [
{ band: 'Individual cards', price: '$1.00', note: 'per card' },
@@ -151,32 +165,77 @@ export const deckBoxProduct: Product = {
images: [
{
src: '/images/deckboxes.jpg',
- alt: 'Example 3D-printed deck boxes and counters',
- label: 'Deck box & counters \u2014 assembled',
+ alt: 'Example 3D-printed deck boxes',
+ label: 'Deck boxes - Marble, Nebula, and Sparkle Black with Metallic Gold Accents',
},
{
- src: '/images/deckboxes-example-1.svg',
- alt: 'Placeholder: deck box open showing card capacity',
- label: 'Placeholder \u2014 open, showing capacity',
+ src: '/images/store/deckboxes/ff_front.jpg',
+ alt: 'Deck Box front view - Fantastic Four',
+ label: 'Deck Box front view - Fantastic Four - Matte Blue with Metallic Black Accents',
},
{
- src: '/images/deckboxes-example-2.svg',
- alt: 'Placeholder: counter close-up with life totals',
- label: 'Placeholder \u2014 counter detail',
+ src: '/images/store/deckboxes/ff_side.jpg',
+ alt: 'Deck Box side view - Fantastic Four',
+ label: 'Deck Box side view - Fantastic Four - Matte Blue with Metallic Black Accents',
},
+ {
+ src: '/images/store/deckboxes/ff_back.jpg',
+ alt: 'Deck Box back view - Fantastic Four',
+ label: 'Deck Box back view - Fantastic Four - Matte Blue with Metallic Black Accents',
+ },
+ {
+ src: '/images/store/deckboxes/ff_open.jpg',
+ alt: 'Deck Box open view - Fantastic Four',
+ label: 'Deck Box open view - Fantastic Four - Matte Blue with Metallic Black Accents',
+ }
],
specs: [
{ label: 'Capacity', value: '100 double-sleeved card bay / 82mm depth and tray 67 mm x 76 mm x 24 mm (width x depth x height)' },
{ label: 'Material', value: 'PLA with 2x4 magnets and top-loader protection pane' },
{ label: 'Finish', value: 'as-printed' },
{ label: 'Sizing', value: '86 mm x 109 mm x 143 mm (width x depth x height)' },
- { label: 'Customization', value: 'Color selection from available filament' },
+ { label: 'Customization', value: 'Color selection from available filament. Default pages uses Matte Bone White. Default strap uses Matte Light Leather Brown.' },
],
pricing: [
{ band: 'Single deck box', price: '$30.00', note: 'per print' },
{ band: 'Deck box + counter set', price: 'Coming Soon', note: 'per set' },
{ band: 'Counter / token only', price: 'Coming Soon', note: 'per print' },
],
+ /**
+ * Available filament colors. Toggle `inStock` to reflect what's loaded on
+ * the printer; out-of-stock colors show a label and drop out of the order
+ * form. Add a new { name, hex, inStock } entry to offer a new color.
+ */
+ colors: [
+ { name: 'Charcoal Matte Black', hex: '#1d1d1d', inStock: true },
+ { name: 'Sparkle Black', hex: '#242424', inStock: true },
+ { name: 'Metallic Black', hex: '#242424', inStock: true },
+ { name: 'Metallic Gold', hex: '#96793b', inStock: true },
+ { name: 'Metallic Blue', hex: '#21356b', inStock: true },
+ { name: 'Metallic Silver', hex: '#b1b1b1', inStock: true },
+ { name: 'Silver', hex: '#d8d8d8', inStock: true },
+ { name: 'Copper', hex: '#61462d', inStock: true },
+ { name: 'Orange', hex: '#f77b28', inStock: true },
+ { name: 'Shiny Red', hex: '#af0505', inStock: true },
+ { name: 'Glossy Red', hex: '#cc2a17', inStock: true },
+ { name: 'Scarlet', hex: '#6e140b', inStock: true },
+ { name: 'Matte Bone White', hex: '#f4f1e8', inStock: true },
+ { name: 'Matte Light Leather Brown', hex: '#bea072', inStock: true },
+ { name: 'Basic White', hex: '#ffffff', inStock: true },
+ { name: 'Basic Cyan', hex: '#2ba8ce', inStock: true },
+ { name: 'Matte Blue', hex: '#365ecc', inStock: true },
+ { name: 'Royal Blue', hex: '#2247ac', inStock: true },
+ { name: 'Blue Grey', hex: '#46535f', inStock: true },
+ { name: 'Purple', hex: '#3a0961', inStock: true },
+ { name: 'Marble', hex: '#b9b9b9', inStock: true },
+ { name: 'Coffee Brown', hex: '#36241c', inStock: true },
+ { name: 'Sunflower Yellow', hex: '#e6e332', inStock: true },
+ { name: 'Basic Green', hex: '#24da00', inStock: true },
+ { name: 'Matte Leaf Green', hex: '#a6d19d', inStock: true },
+ { name: 'Army Green', hex: '#3e611d', inStock: true },
+ { name: 'Sparkle Green', hex: '#0b662e', inStock: true },
+ { name: 'Sparkle Nebula', hex: '#104568', inStock: true },
+ ],
};
/** Both product lines, for storefront iteration. */
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 8154355..ebb5cbf 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -25,6 +25,14 @@ import StoreNav from "@components/store/StoreNav.astro";
import Footer from "@components/layout/Footer.astro";
import { themeInitScript } from "@/scripts/theme-init";
import { siteIdentity } from "@lib/site";
+// Dev-only react-refresh preamble (see astro.config.mjs for why). Imported as a
+// raw string so we can emit it as the FIRST module script in , ahead of
+// any React island, so $RefreshReg$/$RefreshSig$ exist before islands eval.
+import { REACT_REFRESH_PREAMBLE } from "../../astro.config.mjs";
+
+// Only emit the preamble in dev (import.meta.env.DEV). Production builds compile
+// islands to jsx/jsxs and never touch the refresh runtime.
+const isDev = import.meta.env.DEV;
type Surface = "neutral" | "professional" | "interest";
@@ -85,6 +93,13 @@ const ogImageUrl = ogImage
+ {/* Dev-only react-refresh preamble. MUST be the first module script so the
+ refresh globals exist before any React island module evaluates. Without
+ it, islands throw at eval time and never hydrate (see astro.config.mjs). */}
+ {isDev && (
+
+ )}
+
{fullTitle}
diff --git a/src/pages/api/order.ts b/src/pages/api/order.ts
index 99a6534..d47882e 100644
--- a/src/pages/api/order.ts
+++ b/src/pages/api/order.ts
@@ -36,6 +36,8 @@ const schema = z.object({
name: z.string().min(1).max(120),
email: z.string().email().max(200),
orderType: orderTypeEnum.default('cards'),
+ // Filament color for printed items. Optional (only for deckBoxes/both).
+ color: z.string().max(120).optional().or(z.literal('')),
quantity: z.string().min(1).max(200),
details: z.string().min(10).max(20000),
notes: z.string().max(5000).optional().or(z.literal('')),
@@ -131,7 +133,7 @@ export const POST: APIRoute = async ({ request }) => {
if (!parsed.success) {
return json({ error: 'Please complete all fields correctly, including the policy acknowledgment.', issues: parsed.error.issues }, 400);
}
- const { name, email, orderType, quantity, details, notes, turnstileToken } = parsed.data;
+ const { name, email, orderType, color, quantity, details, notes, turnstileToken } = parsed.data;
// Rate limit.
const ip = clientIp(request);
@@ -147,7 +149,7 @@ export const POST: APIRoute = async ({ request }) => {
// Deliver.
try {
- const delivered = await deliver({ name, email, orderType, quantity, details, notes: notes ?? '' });
+ const delivered = await deliver({ name, email, orderType, color: color ?? '', quantity, details, notes: notes ?? '' });
if (!delivered) {
return json({ error: 'Order delivery is not configured yet. Please email me directly.' }, 503);
}
@@ -163,6 +165,7 @@ interface OrderMessage {
name: string;
email: string;
orderType: string;
+ color: string;
quantity: string;
details: string;
notes: string;
@@ -180,6 +183,7 @@ async function deliver(msg: OrderMessage): Promise
{
`Name: ${msg.name}`,
`Email: ${msg.email}`,
`Order type: ${typeLabel}`,
+ `Color: ${msg.color || '(not specified)'}`,
`Approx quantity: ${msg.quantity}`,
``,
`Details:`,
@@ -226,6 +230,7 @@ async function deliver(msg: OrderMessage): Promise {
name: msg.name,
email: msg.email,
orderType: typeLabel,
+ color: msg.color || undefined,
quantity: msg.quantity,
details: msg.details,
notes: msg.notes,
diff --git a/src/pages/store/deck-boxes.astro b/src/pages/store/deck-boxes.astro
index a31f966..a68a5b9 100644
--- a/src/pages/store/deck-boxes.astro
+++ b/src/pages/store/deck-boxes.astro
@@ -9,24 +9,26 @@
* (deckBoxProduct.images). The specs block is image-free now; examples live in
* the carousel only.
*/
-import StoreLayout from '@layouts/StoreLayout.astro';
-import Reveal from '@components/motion/Reveal.astro';
-import SectionHeader from '@components/layout/SectionHeader.astro';
-import Icon from '@components/Icon.astro';
-import Carousel from '@components/store/Carousel.tsx';
-import ProductCard from '@components/store/ProductCard.astro';
-import PricingTable from '@components/store/PricingTable.astro';
-import SlotMeter from '@components/store/SlotMeter.astro';
-import RequirementList from '@components/store/RequirementList.astro';
-import { deckBoxProduct, requirements } from '@data/store-products';
-import { storeAvailability } from '@data/store-availability';
+import StoreLayout from "@layouts/StoreLayout.astro";
+import Reveal from "@components/motion/Reveal.astro";
+import SectionHeader from "@components/layout/SectionHeader.astro";
+import Icon from "@components/Icon.astro";
+import Carousel from "@components/store/Carousel.tsx";
+import ProductCard from "@components/store/ProductCard.astro";
+import PricingTable from "@components/store/PricingTable.astro";
+import SlotMeter from "@components/store/SlotMeter.astro";
+import ColorGrid from "@components/store/ColorGrid.astro";
+import RequirementList from "@components/store/RequirementList.astro";
+import { deckBoxProduct, requirements } from "@data/store-products";
+import { storeAvailability } from "@data/store-availability";
const av = storeAvailability;
const slot = av.slots[deckBoxProduct.slotKey];
-const keyReqs = requirements.filter((r) =>
- r.title.toLowerCase().includes('final')
- || r.title.toLowerCase().includes('capacity')
- || r.title.toLowerCase().includes('affiliation'),
+const keyReqs = requirements.filter(
+ (r) =>
+ r.title.toLowerCase().includes("final") ||
+ r.title.toLowerCase().includes("capacity") ||
+ r.title.toLowerCase().includes("affiliation"),
);
---
@@ -48,28 +50,54 @@ const keyReqs = requirements.filter((r) =>
-
+
{/* Live slot tracker for this product line (top of content). */}
{/* Image carousel (server-driven, swipeable). */}
{/* Specifications (no image — examples live in the carousel). */}
-
+
@@ -77,7 +105,13 @@ const keyReqs = requirements.filter((r) =>
{/* Pricing */}
+ {/* Available print colors (filament). Managed in store-products.ts. */}
+
+
{/* Key requirements */}
-
+
@@ -101,7 +155,7 @@ const keyReqs = requirements.filter((r) =>
diff --git a/src/pages/store/index.astro b/src/pages/store/index.astro
index 02c93b8..fe381bc 100644
--- a/src/pages/store/index.astro
+++ b/src/pages/store/index.astro
@@ -10,30 +10,34 @@
* but is rendered through StoreLayout so it gets the store-only nav and
* noindex by default. No links back to the main site.
*/
-import StoreLayout from '@layouts/StoreLayout.astro';
-import Reveal from '@components/motion/Reveal.astro';
-import SectionHeader from '@components/layout/SectionHeader.astro';
-import AnimatedBackground from '@components/hero/AnimatedBackground.tsx';
-import StarBurst from '@components/mystic/StarBurst.astro';
-import Icon from '@components/Icon.astro';
-import ProductTile from '@components/store/ProductTile.astro';
-import SlotMeter from '@components/store/SlotMeter.astro';
-import RequirementList from '@components/store/RequirementList.astro';
-import { cardProduct, deckBoxProduct, requirements } from '@data/store-products';
-import { storeAvailability } from '@data/store-availability';
+import StoreLayout from "@layouts/StoreLayout.astro";
+import Reveal from "@components/motion/Reveal.astro";
+import SectionHeader from "@components/layout/SectionHeader.astro";
+import AnimatedBackground from "@components/hero/AnimatedBackground.tsx";
+import StarBurst from "@components/mystic/StarBurst.astro";
+import Icon from "@components/Icon.astro";
+import ProductTile from "@components/store/ProductTile.astro";
+import SlotMeter from "@components/store/SlotMeter.astro";
+import RequirementList from "@components/store/RequirementList.astro";
+import {
+ cardProduct,
+ deckBoxProduct,
+ requirements,
+} from "@data/store-products";
+import { storeAvailability } from "@data/store-availability";
const av = storeAvailability;
-const orderHref = '/store/order';
+const orderHref = "/store/order";
---
-
+
{/* --- Hero --- */}
-
+
- Clearly-marked proxies for casual play, and matching 3D-printed storage &
- counters. Hand-made in small batches.
+ Clearly-marked proxies for casual play, and matching 3D-printed
+ storage & counters. Hand-made in small batches.
@@ -107,10 +111,17 @@ const orderHref = '/store/order';
{/* --- Intro + limited capacity banner --- */}
-
+
-
+
{av.maxNote}
@@ -120,11 +131,22 @@ const orderHref = '/store/order';
style="border-color: color-mix(in srgb, var(--color-accent) 35%, transparent); background: color-mix(in srgb, var(--color-accent) 8%, transparent);"
>
-
- {av.turnaround}
+
+ {av.turnaround}
-
- {av.ordersOpen ? 'Orders open' : 'Orders currently closed'}
+
+ {av.ordersOpen ? "Orders open" : "Orders currently closed"}
@@ -133,7 +155,11 @@ const orderHref = '/store/order';
{/* --- Product lines --- */}
-
+
@@ -148,12 +174,16 @@ const orderHref = '/store/order';
{/* --- Live availability --- */}
-
+
- I can only take so many requests at a time. These update as I open and finish orders.
- Last updated {av.lastUpdated}.
+ I can only take so many requests at a time. These update as I open and
+ finish orders. Last updated {av.lastUpdated}.
@@ -177,7 +207,11 @@ const orderHref = '/store/order';
{/* --- Requirements / disclaimer --- */}
-
+
@@ -185,14 +219,26 @@ const orderHref = '/store/order';
{/* --- CTA --- */}
-
+
- Ready to put in a request?
+
+ Ready to put in a request?
+
- The order form collects your request and emails it to me. No payment is taken through
- the site. {av.ordersOpen ? '' : 'Orders are currently closed — check back soon.'}
+ The order form collects your request and emails it to me. No payment
+ is taken through the site. {
+ av.ordersOpen
+ ? ""
+ : "Orders are currently closed — check back soon."
+ }
diff --git a/src/pages/store/order.astro b/src/pages/store/order.astro
index 829c732..b4328dc 100644
--- a/src/pages/store/order.astro
+++ b/src/pages/store/order.astro
@@ -18,7 +18,7 @@ import ObfuscatedEmail from '@components/ObfuscatedEmail.astro';
import OrderForm from '@components/store/OrderForm.tsx';
import SlotMeter from '@components/store/SlotMeter.astro';
import RequirementList from '@components/store/RequirementList.astro';
-import { requirements } from '@data/store-products';
+import { requirements, deckBoxProduct } from '@data/store-products';
import { storeAvailability } from '@data/store-availability';
import { turnstileSiteKey } from '@lib/env';
@@ -97,7 +97,7 @@ const siteKey = turnstileSiteKey();
double-sided cards count as 2 slots.
-
+