RecentRunner/HaBit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add customize-screen shop preview and purchase flow.

Browse Source 
Locked items can be previewed on the pet from the editor, purchased with points in the preview modal, and opened in the full customize view from the shop.
This commit is contained in:
Harkamal Randhawa
2026-05-24 05:05:46 -06:00
parent 5d80b60247
commit 3470d444b4
7 changed files with 260 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
components/avatar/customize-page-content.tsx
View File

@@ -10,7 +10,9 @@ import {
saveAvatarCustomization,
type AvatarCustomization,
} from "@/lib/avatar-customization-storage";
import { getOwnedItemIds } from "@/lib/shop-storage";
import { normalizeRoomBackgroundId } from "@/lib/room-backgrounds";
import type { ShopItemRecord } from "@/lib/shop-catalog";
import { getShopInventory } from "@/lib/shop-storage";
export function CustomizePageContent() {
const { toast } = useToast();
@@ -20,18 +22,30 @@ export function CustomizePageContent() {
const [avatarName, setAvatarName] = useState("");
const [isSavingAvatar, setIsSavingAvatar] = useState(false);
const [ownedVariantIds, setOwnedVariantIds] = useState<string[]>([]);
const [equippedItems, setEquippedItems] = useState<string[]>([]);
const [shopItems, setShopItems] = useState<ShopItemRecord[]>([]);
const [coins, setCoins] = useState<number | null>(null);
const [loadError, setLoadError] = useState<string | null>(null);
const loadCustomization = useCallback(async () => {
try {
setLoadError(null);
const [next, owned] = await Promise.all([
const [next, inventory] = await Promise.all([
getAvatarCustomization(),
getOwnedItemIds(),
getShopInventory(),
]);
setCustomization(next);
setCustomization({
...next,
equippedItems: inventory.equippedItems,
roomBackground: normalizeRoomBackgroundId(
inventory.equippedRoomBackground,
),
});
setAvatarName(next.name);
setOwnedVariantIds(owned);
setOwnedVariantIds(inventory.ownedItemIds);
setEquippedItems(inventory.equippedItems);
setShopItems(inventory.items);
setCoins(inventory.coins);
} catch (error) {
setLoadError(
error instanceof Error ? error.message : "Could not load your avatar.",
@@ -55,7 +69,6 @@ export function CustomizePageContent() {
await saveAvatarCustomization({
...nextCustomization,
name: avatarName.trim() || nextCustomization.name,
equippedItems: customization?.equippedItems ?? [],
});
toast("Avatar updated.", "success");
await loadCustomization();
@@ -80,7 +93,7 @@ export function CustomizePageContent() {
return (
<CharacterCreator
key={`${customization.variants.head}-${customization.variants.torso}-${customization.colors.skin.l}-${customization.roomBackground}-${avatarName}`}
key={`${customization.variants.head}-${customization.variants.torso}-${customization.colors.skin.l}-${customization.roomBackground}-${avatarName}-${ownedVariantIds.join(",")}`}
initialCustomization={{
...customization,
name: avatarName,
@@ -88,6 +101,10 @@ export function CustomizePageContent() {
name={avatarName}
onNameChange={setAvatarName}
ownedVariantIds={ownedVariantIds}
shopItems={shopItems}
coins={coins}
equippedItems={equippedItems}
onShopDataChange={loadCustomization}
showNameField
saveLabel={isSavingAvatar ? "Saving..." : "Save changes"}
isSaving={isSavingAvatar}

187
components/character/character-creator.tsx
View File

@@ -1,6 +1,6 @@
"use client";
import { useState } from "react";
import { useCallback, useState } from "react";
import { CharacterColorPresets } from "@/components/character/character-color-presets";
import { CharacterColorSliders } from "@/components/character/character-color-sliders";
@@ -9,9 +9,11 @@ import { CharacterLayerTabs } from "@/components/character/character-layer-tabs"
import { CharacterPieceSelector } from "@/components/character/character-piece-selector";
import { ParallaxRoomBackground } from "@/components/pet/parallax-room-background";
import { RoomStyleSelector } from "@/components/pet/room-style-selector";
import { ShopItemPreviewModal } from "@/components/shop/shop-item-preview-modal";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useToast } from "@/components/ui/toast-provider";
import type { AvatarCustomization } from "@/lib/avatar-customization-storage";
import { clampHsl } from "@/lib/character/color-utils";
import {
@@ -31,6 +33,17 @@ import {
normalizeRoomBackgroundId,
type RoomBackgroundId,
} from "@/lib/room-backgrounds";
import {
findShopItemById,
parseShopStyleItem,
type ShopItemRecord,
} from "@/lib/shop-catalog";
import { buildShopItemPreviewCustomization } from "@/lib/shop-preview";
import {
equipShopItem,
purchaseShopItem,
unequipShopItem,
} from "@/lib/shop-storage";
function SectionLabel({ children }: { children: React.ReactNode }) {
return (
@@ -48,6 +61,10 @@ type CharacterCreatorProps = {
saveLabel?: string;
isSaving?: boolean;
ownedVariantIds?: string[];
shopItems?: ShopItemRecord[];
coins?: number | null;
equippedItems?: string[];
onShopDataChange?: () => void | Promise<void>;
onSave?: (customization: AvatarCustomization) => Promise<void>;
};
@@ -56,11 +73,16 @@ export function CharacterCreator({
name: controlledName,
onNameChange,
ownedVariantIds = [],
shopItems = [],
coins = null,
equippedItems: initialEquippedItems = [],
onShopDataChange,
showNameField = false,
saveLabel = "Save avatar",
isSaving = false,
onSave,
}: CharacterCreatorProps) {
const { toast } = useToast();
const [internalName, setInternalName] = useState(
initialCustomization?.name ?? "Pixel Me",
);
@@ -83,11 +105,16 @@ export function CharacterCreator({
const [roomBackground, setRoomBackground] = useState<RoomBackgroundId>(
normalizeRoomBackgroundId(initialCustomization?.roomBackground),
);
const [equippedItems, setEquippedItems] = useState<string[]>(
initialCustomization?.equippedItems ?? initialEquippedItems,
);
const [activePresetId, setActivePresetId] = useState<string>(
DEFAULT_GRAY_COLOR.id,
);
const [activeTabId, setActiveTabId] = useState<CharacterCreatorTabId>("skin");
const [saveError, setSaveError] = useState<string | null>(null);
const [previewItem, setPreviewItem] = useState<ShopItemRecord | null>(null);
const [pendingItemId, setPendingItemId] = useState<string | null>(null);
const isRoomTab = activeTabId === "room";
const isSkinTab = activeTabId === "skin";
@@ -160,15 +187,135 @@ export function CharacterCreator({
setRoomBackground(roomId);
};
const openLockedItemPreview = useCallback(
(itemId: string) => {
const item = findShopItemById(shopItems, itemId);
if (!item) {
toast("This item is not available in the shop yet.", "error");
return;
}
setPreviewItem(item);
},
[shopItems, toast],
);
const buildCustomization = (): AvatarCustomization => ({
name,
colors,
variants,
customized: true,
equippedItems: initialCustomization?.equippedItems ?? [],
equippedItems,
roomBackground,
});
const displayCustomization = previewItem
? buildShopItemPreviewCustomization(buildCustomization(), previewItem)
: buildCustomization();
const previewOwned = previewItem
? ownedVariantIds.includes(previewItem.id)
: false;
const previewEquipped = previewItem
? previewItem.type === "room"
? roomBackground === previewItem.id
: equippedItems.includes(previewItem.id)
: false;
const previewCanAfford = previewItem
? coins !== null && coins >= previewItem.price
: false;
const applyOwnedItemToEditor = (item: ShopItemRecord) => {
if (item.type === "room") {
setRoomBackground(normalizeRoomBackgroundId(item.id));
return;
}
const style = parseShopStyleItem(item.id, item.type);
if (style) {
setVariants((current) => ({
...current,
[style.layerId]: style.variantId,
}));
}
};
const handlePreviewPurchase = async () => {
if (!previewItem) {
return;
}
setPendingItemId(previewItem.id);
try {
const purchased = await purchaseShopItem(previewItem.id);
const nextEquipped = await equipShopItem(previewItem.id);
setEquippedItems(nextEquipped);
applyOwnedItemToEditor(purchased);
toast(`Purchased and equipped ${purchased.name}.`, "success");
setPreviewItem(null);
await onShopDataChange?.();
} catch (error) {
toast(
error instanceof Error ? error.message : "Purchase failed.",
"error",
);
} finally {
setPendingItemId(null);
}
};
const handlePreviewEquipToggle = async () => {
if (!previewItem) {
return;
}
setPendingItemId(previewItem.id);
try {
const isEquipped =
previewItem.type === "room"
? roomBackground === previewItem.id
: equippedItems.includes(previewItem.id);
if (previewItem.type !== "room" && isEquipped) {
const nextEquipped = await unequipShopItem(previewItem.id);
setEquippedItems(nextEquipped);
toast(`Unequipped ${previewItem.name}.`, "default");
} else if (!isEquipped) {
const nextEquipped = await equipShopItem(previewItem.id);
setEquippedItems(nextEquipped);
applyOwnedItemToEditor(previewItem);
toast(`Equipped ${previewItem.name}.`, "success");
setPreviewItem(null);
}
await onShopDataChange?.();
} catch (error) {
toast(
error instanceof Error ? error.message : "Could not equip item.",
"error",
);
} finally {
setPendingItemId(null);
}
};
const previewStyleLayerId =
previewItem && previewItem.type !== "room"
? parseShopStyleItem(previewItem.id, previewItem.type)?.layerId
: null;
const activePieceId =
previewStyleLayerId === activeLayerId && previewItem
? previewItem.id
: variants[activeLayerId];
const activeRoomId: RoomBackgroundId =
previewItem?.type === "room"
? normalizeRoomBackgroundId(previewItem.id)
: roomBackground;
const handleSave = async () => {
if (!onSave) {
return;
@@ -186,6 +333,25 @@ export function CharacterCreator({
};
return (
<>
<ShopItemPreviewModal
item={previewItem}
baseCustomization={buildCustomization()}
coins={coins}
owned={previewOwned}
equipped={previewEquipped}
canAfford={previewCanAfford}
isPending={previewItem !== null && pendingItemId === previewItem.id}
showCustomizeLink={false}
onClose={() => setPreviewItem(null)}
onPurchase={() => {
void handlePreviewPurchase();
}}
onEquipToggle={() => {
void handlePreviewEquipToggle();
}}
/>
<div className="tamagotchi-shell overflow-hidden p-3 sm:p-4">
{showNameField ? (
<div className="mb-4 grid max-w-md gap-2 border-b-2 border-border/60 pb-4">
@@ -205,11 +371,15 @@ export function CharacterCreator({
<div className="customize-body mt-4 grid items-stretch gap-4 lg:grid-cols-[minmax(0,1fr)_minmax(0,1.15fr)] lg:gap-5">
<div className="flex min-h-full min-w-0 flex-col">
<div className="tamagotchi-lcd tamagotchi-lcd-pet-match relative">
<ParallaxRoomBackground roomId={roomBackground} interactive={false} />
<ParallaxRoomBackground
roomId={displayCustomization.roomBackground}
interactive={false}
/>
<div className="relative z-10 flex h-full items-center justify-center">
<CharacterLayerPreview
colors={colors}
variants={variants}
colors={displayCustomization.colors}
variants={displayCustomization.variants}
equippedItems={displayCustomization.equippedItems}
scale={8}
compact
className="!h-auto max-h-none"
@@ -226,18 +396,20 @@ export function CharacterCreator({
<div className="min-h-14">
{isRoomTab ? (
<RoomStyleSelector
activeId={roomBackground}
activeId={activeRoomId}
ownedItemIds={ownedVariantIds}
onSelect={handleRoomChange}
onLockedSelect={openLockedItemPreview}
/>
) : (
<CharacterPieceSelector
variants={pieceVariants}
lockedVariantIds={lockedVariantIds}
activeId={variants[activeLayerId]}
activeId={activePieceId}
color={activeColor}
skinColor={colors.skin}
onSelect={handleVariantChange}
onLockedSelect={openLockedItemPreview}
/>
)}
</div>
@@ -285,5 +457,6 @@ export function CharacterCreator({
</div>
</div>
</div>
</>
);
}

19
components/character/character-piece-selector.tsx
View File

@@ -16,6 +16,7 @@ type CharacterPieceSelectorProps = {
color: HSL;
skinColor?: HSL;
onSelect: (variantId: string) => void;
onLockedSelect?: (variantId: string) => void;
};
export function CharacterPieceSelector({
@@ -25,6 +26,7 @@ export function CharacterPieceSelector({
color,
skinColor,
onSelect,
onLockedSelect,
}: CharacterPieceSelectorProps) {
const slots = Array.from({ length: PIECE_SLOT_COUNT }, (_, index) =>
variants[index] ?? null,
@@ -74,20 +76,25 @@ export function CharacterPieceSelector({
<button
key={variant.id}
type="button"
disabled={locked}
aria-disabled={locked}
title={
locked ? `${variant.label} — unlock in the shop` : variant.label
locked ? `${variant.label} — preview in shop` : variant.label
}
aria-label={
locked ? `${variant.label}, locked — unlock in the shop` : variant.label
locked ? `${variant.label}, locked — preview to unlock` : variant.label
}
aria-pressed={activeId === variant.id}
onClick={() => onSelect(variant.id)}
onClick={() => {
if (locked) {
onLockedSelect?.(variant.id);
return;
}
onSelect(variant.id);
}}
className={cn(
"relative flex size-14 items-center justify-center rounded-lg border bg-zinc-950/80 p-1.5 transition-colors",
locked
? "cursor-not-allowed border-border/40 opacity-80"
? "border-border/40 opacity-80 hover:border-border hover:bg-zinc-900/60"
: activeId === variant.id
? "border-foreground bg-zinc-900 shadow-[inset_0_0_0_1px_hsl(var(--foreground)/0.15)]"
: "border-border/60 hover:border-border hover:bg-zinc-900/60",

16
components/pet/room-background-picker.tsx
View File

@@ -13,6 +13,7 @@ type RoomBackgroundPickerProps = {
value: RoomBackgroundId;
ownedItemIds: string[];
onChange: (roomId: RoomBackgroundId) => void;
onLockedSelect?: (roomId: RoomBackgroundId) => void;
compact?: boolean;
};
@@ -20,6 +21,7 @@ export function RoomBackgroundPicker({
value,
ownedItemIds,
onChange,
onLockedSelect,
compact = false,
}: RoomBackgroundPickerProps) {
return (
@@ -47,14 +49,20 @@ export function RoomBackgroundPicker({
<button
key={room.id}
type="button"
disabled={!unlocked}
aria-pressed={selected}
title={
unlocked
? room.name
: `${room.name} — unlock in the shop`
: `${room.name} — preview in shop`
}
onClick={() => onChange(room.id)}
onClick={() => {
if (!unlocked) {
onLockedSelect?.(room.id);
return;
}
onChange(room.id);
}}
className={cn(
"relative aspect-[4/3] overflow-hidden border-2 transition-transform",
selected
@@ -62,7 +70,7 @@ export function RoomBackgroundPicker({
: "border-border/70",
unlocked
? "hover:-translate-y-0.5"
: "cursor-not-allowed opacity-80",
: "opacity-80 hover:-translate-y-0.5",
)}
>
<div className={cn("absolute inset-0", room.previewClassName)} />

19
components/pet/room-style-selector.tsx
View File

@@ -14,12 +14,14 @@ type RoomStyleSelectorProps = {
activeId: RoomBackgroundId;
ownedItemIds: readonly string[];
onSelect: (roomId: RoomBackgroundId) => void;
onLockedSelect?: (roomId: RoomBackgroundId) => void;
};
export function RoomStyleSelector({
activeId,
ownedItemIds,
onSelect,
onLockedSelect,
}: RoomStyleSelectorProps) {
const slots = Array.from({ length: PIECE_SLOT_COUNT }, (_, index) =>
ROOM_BACKGROUNDS[index] ?? null,
@@ -44,20 +46,25 @@ export function RoomStyleSelector({
<button
key={room.id}
type="button"
disabled={locked}
aria-disabled={locked}
title={
locked ? `${room.name} — unlock in the shop` : room.name
locked ? `${room.name} — preview in shop` : room.name
}
aria-label={
locked ? `${room.name}, locked — unlock in the shop` : room.name
locked ? `${room.name}, locked — preview to unlock` : room.name
}
aria-pressed={activeId === room.id}
onClick={() => onSelect(room.id)}
onClick={() => {
if (locked) {
onLockedSelect?.(room.id);
return;
}
onSelect(room.id);
}}
className={cn(
"relative size-14 overflow-hidden rounded-lg border transition-colors",
locked
? "cursor-not-allowed border-border/40 opacity-80"
? "border-border/40 opacity-80 hover:border-border"
: activeId === room.id
? "border-foreground shadow-[inset_0_0_0_1px_hsl(var(--foreground)/0.15)]"
: "border-border/60 hover:border-border",

10
components/shop/shop-item-preview-modal.tsx
View File

@@ -1,6 +1,7 @@
"use client";
import { X } from "lucide-react";
import Link from "next/link";
import { useEffect } from "react";
import { CharacterLayerPreview } from "@/components/character/character-layer-preview";
@@ -12,6 +13,7 @@ import {
getShopPreviewRoomId,
} from "@/lib/shop-preview";
import type { ShopItemRecord } from "@/lib/shop-catalog";
import { routes } from "@/lib/routes";
type ShopItemPreviewModalProps = {
item: ShopItemRecord | null;
@@ -24,6 +26,7 @@ type ShopItemPreviewModalProps = {
onClose: () => void;
onPurchase: () => void;
onEquipToggle: () => void;
showCustomizeLink?: boolean;
};
export function ShopItemPreviewModal({
@@ -37,6 +40,7 @@ export function ShopItemPreviewModal({
onClose,
onPurchase,
onEquipToggle,
showCustomizeLink = true,
}: ShopItemPreviewModalProps) {
useEffect(() => {
if (!item) {
@@ -162,6 +166,12 @@ export function ShopItemPreviewModal({
</Button>
</>
)}
{showCustomizeLink ? (
<Button type="button" className="w-full" variant="outline" asChild>
<Link href={routes.customize}>Open in Customize</Link>
</Button>
) : null}
</div>
</div>
</div>

7
lib/shop-catalog.ts
View File

@@ -94,3 +94,10 @@ function getDefaultPriceForLayer(layerId: ShopLayerId, variantId: string) {
export function getLayerLabel(layerId: ShopLayerId) {
return CHARACTER_LAYERS.find((layer) => layer.id === layerId)?.label ?? layerId;
}
export function findShopItemById(
items: readonly ShopItemRecord[],
itemId: string,
): ShopItemRecord | undefined {
return items.find((item) => item.id === itemId);
}