diff --git a/config/game-config.json b/config/game-config.json index 31306d7..6e98fd8 100644 --- a/config/game-config.json +++ b/config/game-config.json @@ -96,6 +96,21 @@ { "tier": 4, "price": 500, "claimBoost": 40 }, { "tier": 5, "price": 600, "claimBoost": 50 } ] +}, +{ + "id": "item7", + "name": "Drill G", + "description": "This is drill G", + "price": 250, + "claimAmount": 50, + "completionTimeInMins": 5, + "upgrades": [ + { "tier": 1, "price": 200, "claimBoost": 10 }, + { "tier": 2, "price": 300, "claimBoost": 20 }, + { "tier": 3, "price": 400, "claimBoost": 30 }, + { "tier": 4, "price": 500, "claimBoost": 40 }, + { "tier": 5, "price": 600, "claimBoost": 50 } + ] } ] } diff --git a/database.db b/database.db new file mode 100644 index 0000000..5d6e5f5 Binary files /dev/null and b/database.db differ diff --git a/src/app/Components/ErrorPopover.tsx b/src/app/Components/ErrorPopover.tsx deleted file mode 100644 index 16b1f63..0000000 --- a/src/app/Components/ErrorPopover.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from "react"; - -interface ErrorPopoverProps { - message: string; - onClose: () => void; -} - -const ErrorPopover: React.FC = ({ message, onClose }) => { - return ( -
-
-
-
- -
-
-

Error

-
{message}
-
- -
-
-
- ); -}; - -export default ErrorPopover; diff --git a/src/app/Components/InventoryItem.tsx b/src/app/Components/InventoryItem.tsx index f30af5c..03da04d 100644 --- a/src/app/Components/InventoryItem.tsx +++ b/src/app/Components/InventoryItem.tsx @@ -9,13 +9,12 @@ const InventoryItem = (props: { const getCurrentTier = (index: number) => { return props.inventoryItem.storeItem.upgrades[index].tier; }; - return (

{props.inventoryItem.storeItem.name}{" "} - {props.inventoryItem.currentTierIndex} + {getCurrentTier(props.inventoryItem.currentTierIndex)}

{props.inventoryItem.storeItem.description}

diff --git a/src/app/Components/NotificationPopover.tsx b/src/app/Components/NotificationPopover.tsx new file mode 100644 index 0000000..d647139 --- /dev/null +++ b/src/app/Components/NotificationPopover.tsx @@ -0,0 +1,45 @@ +import React from "react"; + +import { NotificationPopoverProps } from "typings"; +import { notificationTypeToBg } from "@/utils/helpers"; + +const NotificationPopover: React.FC = ({ + notification, + onClose, +}) => { + return ( +
+
+
+

{notification.type}

+
+ {notification.message} +
+
+ +
+
+ ); +}; + +export default NotificationPopover; diff --git a/src/app/page.tsx b/src/app/page.tsx index 8f3c8a9..fe06971 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -6,9 +6,15 @@ import StakingSourcesView from "./Components/StakingSourcesView"; import BankAccountsView from "./Components/BankAccountsView"; import StoreItemView from "./Components/StoreItemView"; import ResourceStore from "./Components/ResourceStore"; -import ErrorPopover from "./Components/ErrorPopover"; +import NotificationPopover from "./Components/NotificationPopover"; import { gameConfig } from "@/utils/gameLogic"; -import { IInventoryItem, IStakingSource, IBankAccount, IStake } from "typings"; +import { + IInventoryItem, + IStakingSource, + IBankAccount, + IStake, + Notification, +} from "typings"; export default function Home() { const [inventoryItems, setInventoryItems] = useState< @@ -21,10 +27,9 @@ export default function Home() { const [userStakes, setUserStakes] = useState([]); const [lightBoxIsActive, setLightBoxIsActive] = useState(false); const [userId, setUserId] = useState(null); - const [error, setError] = useState(null); - const [errorTime, setErrorTime] = useState(3); + const [notification, setNotification] = useState(null); + const [notificationTime, setNotificationTime] = useState(3); const [storeItems, setStoreItems] = useState(gameConfig.store); - const [isLoading, setIsLoading] = useState(false); const isOwned = (storeItemId: string) => { if (inventoryItems) { @@ -34,6 +39,19 @@ export default function Home() { } }; + const fetchInventoryItems = async () => { + const response = await fetch(`/api/user/${userId}/inventory-items`); + const DBInventoryItems = await response.json(); + + for (const invItem of DBInventoryItems) { + invItem.storeItem = gameConfig.store.find( + (item) => item.id === invItem.storeItemId + ); + } + + setInventoryItems(DBInventoryItems); + }; + useEffect(() => { const fetchUser = async (wallet: string) => { const response = await fetch(`/api/user/login`, { @@ -62,19 +80,6 @@ export default function Home() { setStakingSources(sources); }; - const fetchInventoryItems = async () => { - const response = await fetch(`/api/user/${userId}/inventory-items`); - const DBInventoryItems = await response.json(); - - for (const invItem of DBInventoryItems) { - invItem.storeItem = gameConfig.store.find( - (item) => item.id === invItem.storeItemId - ); - } - - setInventoryItems(DBInventoryItems); - }; - const fetchStakes = async () => { const response = await fetch(`/api/user/${userId}/stakes`); const stakes = await response.json(); @@ -94,8 +99,6 @@ export default function Home() { fetchInventoryItems(); fetchStakes(); } - - setIsLoading(!isLoading); }, [userId]); // Update data @@ -111,21 +114,21 @@ export default function Home() { // Hide error automatically useEffect(() => { - if (error) { + if (notification) { const intervalId = setInterval(() => { - setErrorTime((prev) => prev - 1); + setNotificationTime((prev) => prev - 1); }, 1000); - if (errorTime === 0) { - setError(null); + if (notificationTime === 0) { + setNotification(null); clearInterval(intervalId); - setErrorTime(3); + setNotificationTime(3); } return () => { clearInterval(intervalId); }; } - }, [error, errorTime]); + }, [notification, notificationTime]); const claimStake = async (stakingEventId: number) => { const response = await fetch(`/api/user/${userId}/stakes/claim`, { @@ -172,7 +175,7 @@ export default function Home() { if (!response.ok) { const error = await response.text(); - setError(new Error(error)); + setNotification({ message: error, type: "Error" }); return; } @@ -181,12 +184,17 @@ export default function Home() { if (response.status == 200) { // Return success message console.log(data.message); + setNotification({ + message: "Item has been purchased", + type: "Success", + }); + fetchInventoryItems(); } } catch (error) { if (error instanceof Error) { - setError(error); + setNotification({ message: error.message, type: "Error" }); } else { - setError(new Error("An unknown error occurred.")); + setNotification({ message: "An unknown error occured", type: "Error" }); } } }; @@ -203,7 +211,7 @@ export default function Home() { if (!response.ok) { const error = await response.text(); - setError(new Error(error)); + setNotification({ message: error, type: "Error" }); return; } @@ -212,17 +220,19 @@ export default function Home() { if (response.status == 200) { // Return success message console.log(data); + setNotification({ message: "Item has been upgraded", type: "Success" }); + fetchInventoryItems(); } if (response.status == 400) { // return error message - setError(data.error); + setNotification({ message: data.error, type: "Error" }); } } catch (error) { if (error instanceof Error) { - setError(error); + setNotification({ message: error.message, type: "Error" }); } else { - setError(new Error("An unknown error occurred.")); + setNotification({ message: "An unknown error occured", type: "Error" }); } } }; @@ -237,20 +247,22 @@ export default function Home() { }; const handleSetLightBox = () => { - console.log("Tester"); setLightBoxIsActive(!lightBoxIsActive); }; - const handleCloseError = () => { - setError(null); + const handleCloseNotification = () => { + setNotification(null); }; if (!userId) return

Please login

; - console.log(inventoryItems); + return ( <> - {error && ( - + {notification && ( + )} ); } + +// Pass data from storeComponent to parentComponent +// re-fetch data of inventory diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts index 6281890..d081d69 100644 --- a/src/utils/helpers.ts +++ b/src/utils/helpers.ts @@ -44,6 +44,16 @@ export function resourceToFc(resourceName: string): string { return mapping[resourceName] } +export function notificationTypeToBg(type: string): string { + + const mapping: IMapping = { + "Error": "bg-red-600", + "Success": "bg-green-600", + } + + return mapping[type] +} + export const calculateRemainingTime = (startTime: string, durationInMins: number) => { const start = new Date(startTime); const end = new Date(start.getTime() + durationInMins * 60000); diff --git a/typings.d.ts b/typings.d.ts index 844224b..09a3183 100644 --- a/typings.d.ts +++ b/typings.d.ts @@ -81,6 +81,16 @@ export interface IConversionPair { moneyAmount: number } +interface Notification { + message: string; + type: string; +} + +interface NotificationPopoverProps { + notification: Notification; + onClose: () => void; +} + // Phantom export interface PhantomProvider { publicKey: PublicKey | null;