107 lines
2.8 KiB
TypeScript
107 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useState } from "react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { HABIT_PET_DATA_UPDATED_EVENT } from "@/lib/app-events";
|
|
import { getCoins } from "@/lib/avatar-progression-storage";
|
|
|
|
const shopItems = [
|
|
{
|
|
id: "hat",
|
|
name: "Pixel cap",
|
|
price: 50,
|
|
description: "A cozy cap for your habit pet.",
|
|
},
|
|
{
|
|
id: "bed",
|
|
name: "Cloud bed",
|
|
price: 120,
|
|
description: "Boost recovery after tough days.",
|
|
},
|
|
{
|
|
id: "snack",
|
|
name: "Berry snack",
|
|
price: 25,
|
|
description: "A small treat for good streaks.",
|
|
},
|
|
];
|
|
|
|
export function ShopContent() {
|
|
const [coins, setCoins] = useState<number | null>(null);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const refreshCoins = useCallback(async () => {
|
|
try {
|
|
setError(null);
|
|
setCoins(await getCoins());
|
|
} catch (refreshError) {
|
|
setError(
|
|
refreshError instanceof Error
|
|
? refreshError.message
|
|
: "Could not load your balance.",
|
|
);
|
|
setCoins(0);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
void refreshCoins();
|
|
|
|
window.addEventListener(HABIT_PET_DATA_UPDATED_EVENT, refreshCoins);
|
|
return () => {
|
|
window.removeEventListener(HABIT_PET_DATA_UPDATED_EVENT, refreshCoins);
|
|
};
|
|
}, [refreshCoins]);
|
|
|
|
return (
|
|
<>
|
|
<div className="mb-4 flex items-center justify-between rounded-lg border bg-muted/40 px-4 py-3">
|
|
<span className="text-sm text-muted-foreground">Your balance</span>
|
|
<Badge variant="secondary">
|
|
{coins === null ? "..." : `${coins} points`}
|
|
</Badge>
|
|
</div>
|
|
|
|
{error ? <p className="mb-4 text-sm text-red-500">{error}</p> : null}
|
|
|
|
<div className="grid gap-4">
|
|
{shopItems.map((item) => {
|
|
const canAfford = coins !== null && coins >= item.price;
|
|
|
|
return (
|
|
<Card key={item.id}>
|
|
<CardHeader>
|
|
<div className="flex items-start justify-between gap-3">
|
|
<div>
|
|
<CardTitle className="text-base">{item.name}</CardTitle>
|
|
<CardDescription>{item.description}</CardDescription>
|
|
</div>
|
|
<Badge>{item.price} pts</Badge>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Button
|
|
className="w-full"
|
|
variant="outline"
|
|
disabled={coins === null || !canAfford}
|
|
>
|
|
{canAfford ? "Buy" : "Not enough points"}
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|