From bc1fb0e3c7f9242daaef9d32e818e9fa17dc60f8 Mon Sep 17 00:00:00 2001 From: GamerBoss101 Date: Sun, 13 Apr 2025 04:53:44 -0400 Subject: [PATCH] Shop Purchase Update --- src/app/(app)/shop/page.tsx | 288 +++++++++++++++++++----------------- src/app/api/me/route.ts | 2 +- src/lib/scripts/User.ts | 2 +- 3 files changed, 156 insertions(+), 136 deletions(-) diff --git a/src/app/(app)/shop/page.tsx b/src/app/(app)/shop/page.tsx index b779ffd..fec637b 100644 --- a/src/app/(app)/shop/page.tsx +++ b/src/app/(app)/shop/page.tsx @@ -1,9 +1,8 @@ "use client"; import { useDevice } from "@/lib/context/DeviceContext"; -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; -// Default Profile Pictures are /avatar/p1.png to /avatar/p5.png const defaultPics = [ { src: "/avatar/p1.png", id: 1 }, { src: "/avatar/p2.png", id: 2 }, @@ -12,117 +11,126 @@ const defaultPics = [ { src: "/avatar/p5.png", id: 5 }, ]; -// Purchaseable Profile Pictures are /avatar/p6.png to /avatar/p16.png const purchasablePics = [ - { src: "/avatar/p6.png", price: 250 }, - { src: "/avatar/p7.png", price: 250 }, - { src: "/avatar/p8.png", price: 2000 }, - { src: "/avatar/p9.png", price: 2000 }, - { src: "/avatar/p10.png", price: 2000 }, - { src: "/avatar/p11.png", price: 2000 }, - { src: "/avatar/p12.png", price: 2000 }, - { src: "/avatar/p13.png", price: 10000 }, - { src: "/avatar/p14.png", price: 10000 }, - { src: "/avatar/p15.png", price: 10000 }, - { src: "/avatar/p16.png", price: 10000 }, + { id: 6, src: "/avatar/p6.png", price: 250 }, + { id: 7, src: "/avatar/p7.png", price: 250 }, + { id: 8, src: "/avatar/p8.png", price: 2000 }, + { id: 9, src: "/avatar/p9.png", price: 2000 }, + { id: 10, src: "/avatar/p10.png", price: 2000 }, + { id: 11, src: "/avatar/p11.png", price: 2000 }, + { id: 12, src: "/avatar/p12.png", price: 2000 }, + { id: 13, src: "/avatar/p13.png", price: 10000 }, + { id: 14, src: "/avatar/p14.png", price: 10000 }, + { id: 15, src: "/avatar/p15.png", price: 10000 }, + { id: 16, src: "/avatar/p16.png", price: 10000 }, ]; export default function ShopPage() { - const { isAuthenticated, session } = useDevice(); - const [points, setPoints] = useState(session?.points || 0); - const [avatar, setAvatar] = useState(session?.avatar || 1); - const [ownedPics, setOwnedPics] = useState(session?.ownedPics || []); + const { isAuthenticated, session } = useDevice(); - const handleAvatarSelect = async (id: number) => { - const formData = new FormData(); - formData.append("avatar", id.toString()); + const [points, setPoints] = useState(0); + const [avatar, setAvatar] = useState(1); + const [ownedPics, setOwnedPics] = useState([]); - try { - const response = await fetch("/api/me", { - method: "POST", - body: formData, - }); + useEffect(() => { + if (isAuthenticated && session) { + setPoints(session.points || 0); + setAvatar(session.avatar || 1); + setOwnedPics(session.inventory || []); + } + }, [session]); - const data = await response.json(); - if (response.ok) { - alert("Avatar updated successfully!"); - setAvatar(id); - } else { - alert(data.message || "Failed to update avatar."); - } - } catch (error) { - console.error("Error updating avatar:", error); - alert("An error occurred while updating the avatar."); - } - }; + const handleAvatarSelect = async (id: number) => { + const formData = new FormData(); + formData.append("avatar", id.toString()); - const handlePurchase = async (src: string, price: number) => { - if (points < price) { - alert("You don't have enough points to purchase this profile picture."); - return; - } + try { + const response = await fetch("/api/me", { + method: "POST", + body: formData, + }); - // Update the user's avatar and points on the server - const formData = new FormData(); - formData.append("avatar", src); - formData.append("points", (points - price).toString()); + const data = await response.json(); + if (response.ok) { + alert("Avatar updated successfully!"); + setAvatar(id); + } else { + alert(data.message || "Failed to update avatar."); + } + } catch (error) { + console.error("Error updating avatar:", error); + alert("An error occurred while updating the avatar."); + } + }; - try { - const response = await fetch("/api/me", { - method: "POST", - body: formData, - }); + const handlePurchase = async (id: number, price: number) => { + if (points < price) { + alert("You don't have enough points to purchase this profile picture."); + return; + } - const data = await response.json(); - if (response.ok) { - alert("Profile picture purchased successfully!"); - setPoints(points - price); - setAvatar(src); - setOwnedPics([...ownedPics, src]); - } else { - alert(data.message || "Failed to purchase profile picture."); - } - } catch (error) { - console.error("Error purchasing profile picture:", error); - alert("An error occurred while purchasing the profile picture."); - } - }; + // Update the user's avatar, points, and inventory on the server + const formData = new FormData(); + formData.append("avatar", id.toString()); + formData.append("points", (points - price).toString()); + formData.append("inventory", id.toString()); - return ( -
- {/* User Header */} -
-
-
- Current PFP -
-

- {isAuthenticated ? session.username : "Username"} -

-
-
+ try { + const response = await fetch("/api/me", { + method: "POST", + body: formData, + }); - {/* Total Points */} -
-

- Total Points -

-

{points}

-
+ const data = await response.json(); + if (response.ok) { + alert("Profile picture purchased successfully!"); + setPoints(points - price); + setAvatar(id); + setOwnedPics(prev => [...prev, id]); + } else { + alert(data.message || "Failed to purchase profile picture."); + } + } catch (error) { + console.error("Error purchasing profile picture:", error); + alert("An error occurred while purchasing the profile picture."); + } + }; - {/* Default Profile Pictures */} -
-
-

- Default Profile Pics -

-
-
- {defaultPics.map((pfp) => ( + return ( +
+ {/* User Header */} +
+
+
+ Current PFP +
+

+ {isAuthenticated ? session.username : "Username"} +

+
+
+ + {/* Total Points */} +
+

+ Total Points +

+

{points}

+
+ + {/* Default Profile Pictures */} +
+
+

+ Default Profile Pics +

+
+
+ {defaultPics.map((pfp) => (
- ))} -
-
+ ))} +
+
- {/* Purchaseable Profile Pictures */} -
-
-

- Purchase New Profile Pics! -

-
-
- {purchasablePics.map((pic) => ( -
- PFP -

{pic.price} pts

- -
- ))} -
-
-
- ); + {/* Purchaseable Profile Pictures */} +
+
+

+ Purchase New Profile Pics! +

+
+
+ {purchasablePics.map((pic) => ( +
+ PFP +

{pic.price} pts

+ {ownedPics.includes(pic.id) ? ( + + ) : ( + + )} +
+ ))} +
+
+
+ ); } diff --git a/src/app/api/me/route.ts b/src/app/api/me/route.ts index 3f27e2d..64bbceb 100644 --- a/src/app/api/me/route.ts +++ b/src/app/api/me/route.ts @@ -42,7 +42,7 @@ export async function POST(req: Request) { if(inventory) { let inventoryData = userData.inventory; if (!inventoryData) inventoryData = []; - inventoryData.push(inventory.toString()); + inventoryData.push(parseInt(inventory.toString())); userData = await db.users.update(userData.id, { inventory: inventoryData }); if (!userData) return NextResponse.json({ message: "Failed to update inventory" }, { status: 500 }); diff --git a/src/lib/scripts/User.ts b/src/lib/scripts/User.ts index 9b3edd8..78b6178 100644 --- a/src/lib/scripts/User.ts +++ b/src/lib/scripts/User.ts @@ -12,7 +12,7 @@ const userSchema = new mongoose.Schema({ bio: String, avatar: Number, points: Number, - inventory: Array, + inventory: Array, friends: Array, requests: Array, });