233 lines
8.3 KiB
TypeScript
233 lines
8.3 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* RewardsGallery — the collected-gifts section on /sadhna-streak. Shows each
|
|
* unique reward the devotee has earned as a tappable tile (image + short
|
|
* name); tapping opens a detail dialog with the full name + symbolic
|
|
* meaning + which streak day it was earned. Remaining catalog slots show as
|
|
* locked tiles to entice completion.
|
|
*
|
|
* Built to read in both themes (card/foreground tokens), keep names legible
|
|
* (line-clamped, never overflowing), and resize the large R2 images via
|
|
* next/image.
|
|
*/
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { createPortal } from "react-dom";
|
|
import Image from "next/image";
|
|
import { Gift, Sparkles } from "lucide-react";
|
|
import { sadhna, type SadhnaRewardGrant } from "@/lib/sadhna";
|
|
import { useMounted } from "@/lib/use-mounted";
|
|
import { RewardCelebration } from "@/components/sadhna/reward-celebration";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export function RewardsGallery({
|
|
collected,
|
|
nextRewardDate,
|
|
}: {
|
|
collected: SadhnaRewardGrant[];
|
|
nextRewardDate: string | null;
|
|
}) {
|
|
const [detail, setDetail] = useState<SadhnaRewardGrant | null>(null);
|
|
// The gift currently being opened — shown enlarged, over confetti.
|
|
const [unwrapping, setUnwrapping] = useState<SadhnaRewardGrant | null>(null);
|
|
// Gifts opened in this session. Held locally so the tile clears the moment
|
|
// the celebration is dismissed, rather than waiting for a page refresh.
|
|
const [justOpened, setJustOpened] = useState<Set<string>>(new Set());
|
|
|
|
// De-dupe by reward (collected is newest-first, so the first wins).
|
|
const seen = new Set<string>();
|
|
const unique: SadhnaRewardGrant[] = [];
|
|
for (const g of collected) {
|
|
if (!seen.has(g.reward.key)) {
|
|
seen.add(g.reward.key);
|
|
unique.push(g);
|
|
}
|
|
}
|
|
|
|
// A gift stays wrapped until opened. Everything else — every streak
|
|
// reward — is simply collected.
|
|
const isWrapped = (g: SadhnaRewardGrant) =>
|
|
g.source === "gift" && !g.opened && !justOpened.has(g.reward.key);
|
|
|
|
const openGift = (g: SadhnaRewardGrant) => {
|
|
setUnwrapping(null);
|
|
setJustOpened((prev) => new Set(prev).add(g.reward.key));
|
|
// The tile has already cleared; a failed write only means it arrives
|
|
// wrapped again next load, which is better than blocking the celebration.
|
|
void sadhna.openGift(g.reward.key).catch(() => {});
|
|
};
|
|
|
|
return (
|
|
<section className="rounded-2xl border border-border bg-card p-4 sm:p-5">
|
|
<div className="mb-3 flex items-center gap-2">
|
|
<Gift className="size-5 text-primary" />
|
|
<h2 className="text-base font-semibold text-foreground">
|
|
Sacred Rewards
|
|
</h2>
|
|
</div>
|
|
|
|
{unique.length === 0 ? (
|
|
<div className="flex flex-col items-center gap-2 rounded-xl border border-dashed border-border bg-muted/20 px-4 py-8 text-center">
|
|
<Gift className="size-8 text-muted-foreground/50" />
|
|
<p className="text-sm text-muted-foreground">
|
|
No gifts yet. Keep your sādhana streak — a sacred reward arrives
|
|
every 7 days.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-3 gap-2.5 sm:grid-cols-4">
|
|
{unique.map((g) => (
|
|
<button
|
|
key={g.reward.key}
|
|
type="button"
|
|
onClick={() =>
|
|
isWrapped(g) ? setUnwrapping(g) : setDetail(g)
|
|
}
|
|
aria-label={
|
|
isWrapped(g)
|
|
? "A gift is waiting — tap to open"
|
|
: g.reward.name
|
|
}
|
|
className={cn(
|
|
"group flex flex-col items-center gap-1.5 rounded-xl border bg-background p-2 text-center transition-colors",
|
|
isWrapped(g)
|
|
? "border-primary/40 hover:border-primary"
|
|
: "border-border hover:border-primary/40 hover:bg-muted/40",
|
|
)}
|
|
>
|
|
<div className="relative aspect-square w-full">
|
|
<Image
|
|
src={g.reward.image_url}
|
|
alt={isWrapped(g) ? "" : g.reward.name}
|
|
fill
|
|
sizes="(max-width: 640px) 30vw, 120px"
|
|
className={cn(
|
|
"object-contain p-1 transition-all",
|
|
// Blurred, not hidden: the shape hints at what's coming
|
|
// without giving it away.
|
|
isWrapped(g) && "scale-95 blur-md",
|
|
)}
|
|
/>
|
|
{isWrapped(g) && (
|
|
<span className="absolute inset-0 flex items-center justify-center">
|
|
<Sparkles className="size-6 text-primary drop-shadow" />
|
|
</span>
|
|
)}
|
|
</div>
|
|
<span className="line-clamp-2 text-[13px] font-medium leading-tight text-foreground">
|
|
{isWrapped(g) ? "A gift for you" : shortName(g.reward.name)}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{nextRewardDate ? (
|
|
<p className="mt-3.5 text-center text-xs text-muted-foreground">
|
|
Next gift on{" "}
|
|
<span className="font-medium text-foreground">
|
|
{fmtLong(nextRewardDate)}
|
|
</span>
|
|
</p>
|
|
) : null}
|
|
|
|
{detail ? (
|
|
<RewardDetail grant={detail} onClose={() => setDetail(null)} />
|
|
) : null}
|
|
|
|
{/* Reuses the streak celebration wholesale — a gift should feel like
|
|
any other sacred reward arriving, not like a second mechanism. */}
|
|
{unwrapping ? (
|
|
<RewardCelebration
|
|
grant={unwrapping}
|
|
onClose={() => openGift(unwrapping)}
|
|
/>
|
|
) : null}
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function RewardDetail({
|
|
grant,
|
|
onClose,
|
|
}: {
|
|
grant: SadhnaRewardGrant;
|
|
onClose: () => void;
|
|
}) {
|
|
const mounted = useMounted();
|
|
useEffect(() => {
|
|
const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
|
|
window.addEventListener("keydown", onKey);
|
|
const prev = document.body.style.overflow;
|
|
document.body.style.overflow = "hidden";
|
|
return () => {
|
|
window.removeEventListener("keydown", onKey);
|
|
document.body.style.overflow = prev;
|
|
};
|
|
}, [onClose]);
|
|
if (!mounted) return null;
|
|
const r = grant.reward;
|
|
|
|
return createPortal(
|
|
<div className="fixed inset-0 z-[120] flex items-center justify-center p-4">
|
|
<div
|
|
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
|
onClick={onClose}
|
|
/>
|
|
<div className="relative z-10 w-full max-w-md max-h-[90vh] overflow-y-auto rounded-3xl border border-border bg-card p-6 text-center shadow-2xl select-none">
|
|
<div className="relative mx-auto mb-4 flex size-40 items-center justify-center">
|
|
<div className="absolute inset-0 rounded-full bg-primary/10 blur-2xl" />
|
|
<Image
|
|
src={r.image_url}
|
|
alt={r.name}
|
|
width={224}
|
|
height={224}
|
|
sizes="224px"
|
|
className="relative size-full object-contain drop-shadow-lg"
|
|
/>
|
|
</div>
|
|
<h3 className="font-(family-name:--font-title) text-xl font-semibold text-foreground">
|
|
{r.name}
|
|
</h3>
|
|
{r.meaning ? (
|
|
<p className="mx-auto mt-2 max-w-sm text-[15px] leading-relaxed text-muted-foreground">
|
|
{r.meaning}
|
|
</p>
|
|
) : null}
|
|
<p className="mt-4 text-xs text-muted-foreground">
|
|
{/* A gift has no milestone — saying "day null of your streak"
|
|
would be worse than saying nothing about where it came from. */}
|
|
{grant.milestone !== null
|
|
? `Earned on day ${grant.milestone} of your streak`
|
|
: "An occasional gift"}
|
|
</p>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="mt-5 inline-flex w-full items-center justify-center rounded-xl border border-border px-4 py-2.5 text-sm font-semibold text-foreground transition-colors hover:bg-muted"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>,
|
|
document.body,
|
|
);
|
|
}
|
|
|
|
/** The evocative term before the em-dash, for compact tile labels. */
|
|
function shortName(name: string): string {
|
|
const parts = name.split("—");
|
|
return (parts[0] ?? name).trim();
|
|
}
|
|
|
|
function fmtLong(date: string): string {
|
|
const d = new Date(`${date}T00:00:00Z`);
|
|
if (Number.isNaN(d.getTime())) return "";
|
|
return d.toLocaleDateString(undefined, {
|
|
month: "short",
|
|
day: "numeric",
|
|
timeZone: "UTC",
|
|
});
|
|
}
|