Stable version with additional styling
This commit is contained in:
pricewowen
@@ -15,6 +15,7 @@ import {
|
||||
import { useToast } from "@/components/ui/toast-provider";
|
||||
import { HABIT_PET_DATA_UPDATED_EVENT } from "@/lib/app-events";
|
||||
import { DEFAULT_GRAY_COLOR } from "@/lib/character/presets";
|
||||
import { getRoomBackground } from "@/lib/room-backgrounds";
|
||||
import {
|
||||
equipShopItem,
|
||||
getShopInventory,
|
||||
@@ -35,11 +36,80 @@ const SHOP_LAYER_ORDER: ShopLayerId[] = [
|
||||
"eyes",
|
||||
];
|
||||
|
||||
function ShopItemCard({
|
||||
item,
|
||||
owned,
|
||||
equipped,
|
||||
canAfford,
|
||||
isPending,
|
||||
onPurchase,
|
||||
onEquipToggle,
|
||||
}: {
|
||||
item: ShopItemRecord;
|
||||
owned: boolean;
|
||||
equipped: boolean;
|
||||
canAfford: boolean;
|
||||
isPending: boolean;
|
||||
onPurchase: () => void;
|
||||
onEquipToggle: () => void;
|
||||
}) {
|
||||
const room = item.type === "room" ? getRoomBackground(item.id) : null;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex size-14 items-center justify-center border-2 border-border bg-zinc-950/80 p-1.5">
|
||||
{room ? (
|
||||
<div className={`size-full ${room.previewClassName}`} />
|
||||
) : (
|
||||
<TintedSpriteIcon
|
||||
src={item.image_path}
|
||||
color={DEFAULT_GRAY_COLOR.hsl}
|
||||
size={36}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-xs">{item.name}</CardTitle>
|
||||
<CardDescription className="text-[9px]">{item.id}</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
<Badge>{item.price} pts</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-2">
|
||||
{!owned ? (
|
||||
<Button
|
||||
className="w-full"
|
||||
variant="outline"
|
||||
disabled={!canAfford || isPending}
|
||||
onClick={onPurchase}
|
||||
>
|
||||
{isPending ? "Processing..." : canAfford ? "Buy" : "Not enough points"}
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
className="w-full"
|
||||
variant={equipped ? "default" : "outline"}
|
||||
disabled={isPending || (item.type === "room" && equipped)}
|
||||
onClick={onEquipToggle}
|
||||
>
|
||||
{isPending ? "Updating..." : equipped ? "Equipped" : "Equip"}
|
||||
</Button>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export function ShopContent() {
|
||||
const { toast } = useToast();
|
||||
const [items, setItems] = useState<ShopItemRecord[]>([]);
|
||||
const [ownedItemIds, setOwnedItemIds] = useState<string[]>([]);
|
||||
const [equippedItems, setEquippedItems] = useState<string[]>([]);
|
||||
const [equippedRoomBackground, setEquippedRoomBackground] = useState("room-day");
|
||||
const [coins, setCoins] = useState<number | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [pendingItemId, setPendingItemId] = useState<string | null>(null);
|
||||
@@ -51,6 +121,7 @@ export function ShopContent() {
|
||||
setItems(inventory.items);
|
||||
setOwnedItemIds(inventory.ownedItemIds);
|
||||
setEquippedItems(inventory.equippedItems);
|
||||
setEquippedRoomBackground(inventory.equippedRoomBackground);
|
||||
setCoins(inventory.coins);
|
||||
} catch (refreshError) {
|
||||
setError(
|
||||
@@ -94,12 +165,15 @@ export function ShopContent() {
|
||||
setPendingItemId(item.id);
|
||||
|
||||
try {
|
||||
const isEquipped = equippedItems.includes(item.id);
|
||||
const isEquipped =
|
||||
item.type === "room"
|
||||
? equippedRoomBackground === item.id
|
||||
: equippedItems.includes(item.id);
|
||||
|
||||
if (isEquipped) {
|
||||
if (item.type !== "room" && isEquipped) {
|
||||
await unequipShopItem(item.id);
|
||||
toast(`Unequipped ${item.name}.`, "default");
|
||||
} else {
|
||||
} else if (!isEquipped) {
|
||||
await equipShopItem(item.id);
|
||||
toast(`Equipped ${item.name}.`, "success");
|
||||
}
|
||||
@@ -115,24 +189,28 @@ export function ShopContent() {
|
||||
}
|
||||
};
|
||||
|
||||
const groupedItems = SHOP_LAYER_ORDER.map((layerId) => ({
|
||||
const styleGroups = SHOP_LAYER_ORDER.map((layerId) => ({
|
||||
layerId,
|
||||
label: getLayerLabel(layerId),
|
||||
items: items.filter((item) => item.type === layerId),
|
||||
})).filter((group) => group.items.length > 0);
|
||||
|
||||
const roomItems = items.filter((item) => item.type === "room");
|
||||
|
||||
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>
|
||||
<div className="mb-4 flex items-center justify-between border-2 border-border bg-muted/40 px-4 py-3 shadow-[var(--retro-shadow-sm)]">
|
||||
<span className="text-[10px] uppercase tracking-wider 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}
|
||||
{error ? <p className="mb-4 text-xs text-red-500">{error}</p> : null}
|
||||
|
||||
{!error && coins !== null && groupedItems.length === 0 ? (
|
||||
{!error && coins !== null && items.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
@@ -144,70 +222,46 @@ export function ShopContent() {
|
||||
) : null}
|
||||
|
||||
<div className="grid gap-6">
|
||||
{groupedItems.map((group) => (
|
||||
{roomItems.length > 0 ? (
|
||||
<section className="grid gap-3">
|
||||
<h3 className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
|
||||
Room backgrounds
|
||||
</h3>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{roomItems.map((item) => (
|
||||
<ShopItemCard
|
||||
key={item.id}
|
||||
item={item}
|
||||
owned={ownedItemIds.includes(item.id)}
|
||||
equipped={equippedRoomBackground === item.id}
|
||||
canAfford={coins !== null && coins >= item.price}
|
||||
isPending={pendingItemId === item.id}
|
||||
onPurchase={() => void handlePurchase(item.id)}
|
||||
onEquipToggle={() => void handleEquipToggle(item)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
{styleGroups.map((group) => (
|
||||
<section key={group.layerId} className="grid gap-3">
|
||||
<h3 className="text-sm font-medium uppercase tracking-wider text-muted-foreground">
|
||||
<h3 className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground">
|
||||
{group.label}
|
||||
</h3>
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
{group.items.map((item) => {
|
||||
const owned = ownedItemIds.includes(item.id);
|
||||
const equipped = equippedItems.includes(item.id);
|
||||
const canAfford = coins !== null && coins >= item.price;
|
||||
const isPending = pendingItemId === item.id;
|
||||
|
||||
return (
|
||||
<Card key={item.id}>
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex size-14 items-center justify-center rounded-lg border bg-zinc-950/80 p-1.5">
|
||||
<TintedSpriteIcon
|
||||
src={item.image_path}
|
||||
color={DEFAULT_GRAY_COLOR.hsl}
|
||||
size={36}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-base">{item.name}</CardTitle>
|
||||
<CardDescription>{item.id}</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
<Badge>{item.price} pts</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-2">
|
||||
{!owned ? (
|
||||
<Button
|
||||
className="w-full"
|
||||
variant="outline"
|
||||
disabled={coins === null || !canAfford || isPending}
|
||||
onClick={() => void handlePurchase(item.id)}
|
||||
>
|
||||
{isPending
|
||||
? "Processing..."
|
||||
: canAfford
|
||||
? "Buy"
|
||||
: "Not enough points"}
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
className="w-full"
|
||||
variant={equipped ? "default" : "outline"}
|
||||
disabled={isPending}
|
||||
onClick={() => void handleEquipToggle(item)}
|
||||
>
|
||||
{isPending
|
||||
? "Updating..."
|
||||
: equipped
|
||||
? "Equipped"
|
||||
: "Equip"}
|
||||
</Button>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
{group.items.map((item) => (
|
||||
<ShopItemCard
|
||||
key={item.id}
|
||||
item={item}
|
||||
owned={ownedItemIds.includes(item.id)}
|
||||
equipped={equippedItems.includes(item.id)}
|
||||
canAfford={coins !== null && coins >= item.price}
|
||||
isPending={pendingItemId === item.id}
|
||||
onPurchase={() => void handlePurchase(item.id)}
|
||||
onEquipToggle={() => void handleEquipToggle(item)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user