- Could not load reveal cards. Please try again later. -
- )} - {loading && !error && ( -- Loading reveal cards… -
- )} - {!loading && - !error && - tiers.map((tier, index) => ( -Attack of the Vine — Set 13 reveals
+
+
+ {cells}
+
+ );
+ });
+
+ return (
+
+
+ );
+}
diff --git a/apps/web/src/features/reveals/CardSlot.stories.tsx b/apps/web/src/features/reveals/CardSlot.stories.tsx
new file mode 100644
index 00000000..b1cba790
--- /dev/null
+++ b/apps/web/src/features/reveals/CardSlot.stories.tsx
@@ -0,0 +1,54 @@
+import type {Meta, StoryObj} from '@storybook/react-vite';
+import type {Ink, LorcanaCard} from 'inkweave-synergy-engine';
+import {CardSlot} from './CardSlot';
+
+const meta: Meta
+ {rows}
+
+
+ {}} />
+ {}} />
+ {}} />
+ {}} />
+ {}} />
+
+ ),
+};
diff --git a/apps/web/src/features/reveals/CardSlot.tsx b/apps/web/src/features/reveals/CardSlot.tsx
new file mode 100644
index 00000000..8b644340
--- /dev/null
+++ b/apps/web/src/features/reveals/CardSlot.tsx
@@ -0,0 +1,125 @@
+import {useState, type CSSProperties} from 'react';
+import type {Ink, LorcanaCard} from 'inkweave-synergy-engine';
+import {InkIcon} from '../../shared/components/InkIcon';
+import {smallImageUrl} from '../cards/loader';
+import {inkRgba} from './inkTint';
+import './reveals.css';
+
+interface CardSlotProps {
+ ink: Ink;
+ /** The revealed card. Omit for an unrevealed (placeholder) slot. */
+ card?: LorcanaCard;
+ /** Slot width in px — 58 on desktop, 46 on mobile. */
+ width?: number;
+ /** Slot height in px — 80 on desktop, 64 on mobile. */
+ height?: number;
+ /** Called when a revealed slot is activated (opens the card modal). */
+ onOpen?: (card: LorcanaCard) => void;
+ /** When true, the slot plays the cellPop animation (a switch-in burst). */
+ animate?: boolean;
+}
+
+/**
+ * Revealed tiles are bright with an ink glow so they stand out; unrevealed tiles
+ * are dimmer (subtler border, recessed shadow) so the board visibly lights up as
+ * cards drop. Pulled out so the `revealed` branches don't add to CardSlot.
+ */
+function slotTileStyle(ink: Ink, revealed: boolean, width: number, height: number): CSSProperties {
+ return {
+ width,
+ height,
+ borderRadius: 6,
+ position: 'relative',
+ overflow: 'hidden',
+ flex: '0 0 auto',
+ border: `1.5px solid ${inkRgba(ink, revealed ? 0.85 : 0.3)}`,
+ boxShadow: revealed
+ ? `0 2px 7px rgba(0, 0, 0, 0.45), 0 0 9px ${inkRgba(ink, 0.4)}`
+ : 'inset 0 2px 8px rgba(0, 0, 0, 0.55)',
+ };
+}
+
+/** The tile contents: ink-art base, the real image (or ink-symbol fallback), and a top sheen. */
+function SlotFace({ink, revealed, imgUrl, compact, onImgError}: {ink: Ink; revealed: boolean; imgUrl?: string; compact: boolean; onImgError: () => void}) {
+ const art = revealed
+ ? `radial-gradient(120% 80% at 50% 18%, ${inkRgba(ink, 0.62)}, ${inkRgba(ink, 0.14)} 70%, rgba(8, 8, 14, 0.9))`
+ : `radial-gradient(120% 80% at 50% 18%, ${inkRgba(ink, 0.26)}, ${inkRgba(ink, 0.06)} 70%, rgba(8, 8, 14, 0.95))`;
+ return (
+ <>
+ {/* Ink-art base (also the graceful fallback behind a revealed image). */}
+
+ {imgUrl ? (
+ 
+ ) : (
+
+
+ {face}
+
+ );
+}
diff --git a/apps/web/src/features/reveals/FranchiseCardsModal.stories.tsx b/apps/web/src/features/reveals/FranchiseCardsModal.stories.tsx
new file mode 100644
index 00000000..5deaac6b
--- /dev/null
+++ b/apps/web/src/features/reveals/FranchiseCardsModal.stories.tsx
@@ -0,0 +1,49 @@
+import type {Meta, StoryObj} from '@storybook/react-vite';
+import type {LorcanaCard} from 'inkweave-synergy-engine';
+import {FranchiseCardsModal} from './FranchiseCardsModal';
+import {FRANCHISES} from './franchise';
+
+const meta: Meta
+ {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- click boundary so panel clicks don't dismiss */}
+
,
+ document.body,
+ );
+}
diff --git a/apps/web/src/features/reveals/FranchiseTier.stories.tsx b/apps/web/src/features/reveals/FranchiseTier.stories.tsx
deleted file mode 100644
index fb1037e1..00000000
--- a/apps/web/src/features/reveals/FranchiseTier.stories.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import type {Meta, StoryObj} from '@storybook/react-vite';
-import {MemoryRouter} from 'react-router-dom';
-import type {LorcanaCard} from 'inkweave-synergy-engine';
-import {FranchiseTier} from './FranchiseTier';
-import type {RevealTier} from './useRevealCards';
-
-function make(id: string, name: string, overrides: Partial e.stopPropagation()}
+ style={{
+ width: '100%',
+ maxWidth: 960,
+ maxHeight: '85vh',
+ display: 'flex',
+ flexDirection: 'column',
+ background: '#12121f',
+ border: `1px solid ${inkRgba(franchise.ink, 0.4)}`,
+ borderRadius: 16,
+ overflow: 'hidden',
+ boxShadow: `0 24px 80px rgba(0, 0, 0, 0.6), 0 0 40px ${inkRgba(franchise.ink, 0.12)}`,
+ }}
+ >
+
+
+
+
+
+
+
+ New this set
+
+ + {franchise.label} +
+
+
+ {cards.length} card{cards.length === 1 ? '' : 's'}
+
+
+
+
+
+ - {tier.label} -
- )} - {tier.logoUrl && ( -- {tier.label} -
- )} -
- 
- {label && !isMobile && (
-
-
- {label}
-
- )}
- {label && isMobile && (
-
- {label}
-
- )}
- - {SUBTITLE} -
- -
+
+ ),
+ ],
+};
+export default meta;
+type Story = StoryObj
+
+ );
+}
+
+/**
+ * The featured board for one ink: a header (badge + name + count, with a
+ * "COLOR COMPLETE" ribbon at 34), the diamond mosaic, and the rarity breakdown.
+ * The panel glow and the bloom behind the header both scale with fill (count/34),
+ * so a fuller board visibly radiates more.
+ */
+export function InkBoard({progress, onOpen, compact = false}: InkBoardProps) {
+ const {ink, count, cards, rarityCounts} = progress;
+ const fill = count / PER_INK;
+
+ return (
+
+
+
+
+
+
+
+
+ Ink board
+
+
+ {ink}
+
+
+
+
+ {count}
+ / {PER_INK}
+
+ {done ? (
+
+ Color complete
+
+ ) : (
+
+ Revealed so far
+
+ )}
+
+ {/* Radial bloom behind the header; intensity scales with fill. */}
+
+
+
+ );
+}
diff --git a/apps/web/src/features/reveals/InkTrackerStrip.stories.tsx b/apps/web/src/features/reveals/InkTrackerStrip.stories.tsx
new file mode 100644
index 00000000..c7a73800
--- /dev/null
+++ b/apps/web/src/features/reveals/InkTrackerStrip.stories.tsx
@@ -0,0 +1,39 @@
+import {useState} from 'react';
+import type {Meta, StoryObj} from '@storybook/react-vite';
+import type {Ink} from 'inkweave-synergy-engine';
+import {InkTrackerStrip} from './InkTrackerStrip';
+
+const meta: Meta
+
+
+ {/* key={ink} re-mounts the mosaic on each color switch so a fresh set of
+ random slots bursts in (see CardMosaic's pop logic). */}
+
+
+
+
+ );
+}
+
+export const Default: Story = {
+ render: () =>
+ {inks.map(({ink, count}) => (
+
+ );
+}
diff --git a/apps/web/src/features/reveals/InkTrackerTile.stories.tsx b/apps/web/src/features/reveals/InkTrackerTile.stories.tsx
new file mode 100644
index 00000000..2e5fd97f
--- /dev/null
+++ b/apps/web/src/features/reveals/InkTrackerTile.stories.tsx
@@ -0,0 +1,27 @@
+import type {Meta, StoryObj} from '@storybook/react-vite';
+import {InkTrackerTile} from './InkTrackerTile';
+
+const meta: Meta
+ {ink}
+
+
+ {done ? 'Complete' : `${count} / ${PER_INK}`}
+
+
+ );
+}
+
+/**
+ * A selectable tracker tile: the ink's progress ring over its name and
+ * `count / 34` (or a gold "Complete" at 34). Selecting it features that ink's
+ * board below; the selected tile gets an ink-tinted border + glow.
+ */
+export function InkTrackerTile({ink, count, selected, onSelect, compact = false}: InkTrackerTileProps) {
+ return (
+
+ );
+}
diff --git a/apps/web/src/features/reveals/NewFranchises.stories.tsx b/apps/web/src/features/reveals/NewFranchises.stories.tsx
new file mode 100644
index 00000000..0c5a2e6c
--- /dev/null
+++ b/apps/web/src/features/reveals/NewFranchises.stories.tsx
@@ -0,0 +1,31 @@
+import type {Meta, StoryObj} from '@storybook/react-vite';
+import {NewFranchises} from './NewFranchises';
+
+const meta: Meta
+
+ ),
+ ],
+};
+export default meta;
+type Story = StoryObj
+
+ ),
+ ],
+};
diff --git a/apps/web/src/features/reveals/NewFranchises.tsx b/apps/web/src/features/reveals/NewFranchises.tsx
new file mode 100644
index 00000000..932fb0f6
--- /dev/null
+++ b/apps/web/src/features/reveals/NewFranchises.tsx
@@ -0,0 +1,115 @@
+import './reveals.css';
+import {FRANCHISES, type FranchiseConfig} from './franchise';
+import {INK_COLORS, FONTS} from '../../shared/constants';
+import {inkRgba} from './inkTint';
+
+interface NewFranchisesProps {
+ /** Opens the franchise's cards modal when its card is clicked. */
+ onSelect?: (franchise: FranchiseConfig) => void;
+ compact?: boolean;
+}
+
+/**
+ * One debut-franchise card: real key art over an ink-tinted bloom, a "NEW THIS
+ * SET" pill in that ink, the name, and a blurb. A button that opens the
+ * franchise's cards modal. Held to its own component so the per-card `compact`
+ * branches don't pile onto NewFranchises' complexity.
+ */
+function FranchiseCard({franchise, onSelect, compact}: {franchise: FranchiseConfig; onSelect?: (f: FranchiseConfig) => void; compact: boolean}) {
+ const inkText = INK_COLORS[franchise.ink].text;
+ return (
+
+ );
+}
+
+/**
+ * The "new to the Inkverse" section: one card per debut franchise, each opening
+ * that franchise's cards modal (via `onSelect`).
+ */
+export function NewFranchises({onSelect, compact = false}: NewFranchisesProps) {
+ return (
+
+
+
+
+ New to the Inkverse
+
+ + Three new franchises +
+
+ {FRANCHISES.map((f) => (
+
+
+ {ALL_INKS.map((ink) => (
+
+ ),
+};
diff --git a/apps/web/src/features/reveals/ProgressRing.tsx b/apps/web/src/features/reveals/ProgressRing.tsx
new file mode 100644
index 00000000..7411460b
--- /dev/null
+++ b/apps/web/src/features/reveals/ProgressRing.tsx
@@ -0,0 +1,56 @@
+import type {Ink} from 'inkweave-synergy-engine';
+import {InkIcon} from '../../shared/components/InkIcon';
+import {PER_INK} from './setComposition';
+import {inkRgb, inkRgba} from './inkTint';
+
+interface ProgressRingProps {
+ ink: Ink;
+ /** Revealed count for this ink. */
+ count: number;
+ /** Denominator (defaults to the per-ink board size). */
+ total?: number;
+ /** Outer diameter in px — 82 on desktop, 64 on mobile. */
+ size?: number;
+}
+
+/**
+ * Circular progress ring for an ink: a conic sweep filled to `count/total`,
+ * masked to a thin ring, with the ink symbol in the centre (the running count
+ * lives on the tile below the ring, so it isn't repeated here). The sweep starts
+ * at 12 o'clock (`from -90deg`) and the glow tracks the ink colour.
+ */
+export function ProgressRing({ink, count, total = PER_INK, size = 82}: ProgressRingProps) {
+ const pct = Math.max(0, Math.min(1, count / total));
+ const deg = pct * 360;
+ const rgb = inkRgb(ink);
+ const symbolSize = Math.round(size * 0.44);
+
+ return (
+
+
+
+ );
+}
diff --git a/apps/web/src/features/reveals/RarityBreakdown.stories.tsx b/apps/web/src/features/reveals/RarityBreakdown.stories.tsx
new file mode 100644
index 00000000..d920b032
--- /dev/null
+++ b/apps/web/src/features/reveals/RarityBreakdown.stories.tsx
@@ -0,0 +1,23 @@
+import type {Meta, StoryObj} from '@storybook/react-vite';
+import {RarityBreakdown} from './RarityBreakdown';
+
+const meta: Meta
+
+
+
+
+ );
+}
+
+/**
+ * Per-rarity tally for an ink board: each of the five rarities shows its real
+ * symbol, the actual number of revealed cards of that rarity, and its name. The
+ * count is the live tally from the data (no hardcoded total / denominator — the
+ * set's real composition differs from the old 12/9/8/3/2 assumption).
+ *
+ * The divider spans the full board, but the five chips are held to a centered
+ * band so they read as a tidy row.
+ */
+export function RarityBreakdown({rarityCounts, compact = false}: RarityBreakdownProps) {
+ return (
+
+
+
+ {revealed}
+
+
+ {rarity.name}
+
+
+
+ );
+}
diff --git a/apps/web/src/features/reveals/RaritySymbol.stories.tsx b/apps/web/src/features/reveals/RaritySymbol.stories.tsx
new file mode 100644
index 00000000..a6c147f0
--- /dev/null
+++ b/apps/web/src/features/reveals/RaritySymbol.stories.tsx
@@ -0,0 +1,39 @@
+import type {Meta, StoryObj} from '@storybook/react-vite';
+import {RaritySymbol} from './RaritySymbol';
+import {RARITIES} from './rarity';
+
+const meta: Meta
+ {RARITIES.map((r) => (
+
+
+ {RARITIES.map((r) => (
+
+ ),
+};
diff --git a/apps/web/src/features/reveals/RaritySymbol.tsx b/apps/web/src/features/reveals/RaritySymbol.tsx
new file mode 100644
index 00000000..bb56d92c
--- /dev/null
+++ b/apps/web/src/features/reveals/RaritySymbol.tsx
@@ -0,0 +1,41 @@
+import commonSvg from '../../assets/common.svg';
+import uncommonSvg from '../../assets/uncommon.svg';
+import rareSvg from '../../assets/rare.svg';
+import superRareSvg from '../../assets/super_rare.svg';
+import legendarySvg from '../../assets/legendary.svg';
+
+/** Real Lorcana rarity symbols, keyed by `card.rarity` (lowercased — see rarity.ts). */
+const RARITY_SYMBOLS: Record
+
+ ))}
+
+ {/* Countdown panel */}
+
+
+
+
+ {/* Revealed + franchises panel */}
+
+
+
+
+ {countdownDays}
+ days
+
+ Until pre-release
+
+
+ {releaseDate}
+ Set release
+
+
+
+
+
+ {totalRevealed}
+ / {totalCards}
+
+ Cards revealed
+
+
+ {franchiseCount}
+ New franchises
+ + Could not load reveal cards. Please try again later. +
+ ); + } + if (loading) { + returnLoading reveal cards…
; + } + return ( + <> +
+
+
+
+
+
+
+ );
+}
export function RevealsPage() {
const {isMobile} = useResponsive();
- const phase = useRevealPhase();
const {tiers, loading, error} = useRevealCards();
+ const progress = useRevealProgress();
+ const {openCardModal} = useCardModal();
const [dates, setDates] = useState