From a21facaa6fad49a1768d6e9bd2f8da909f271ced Mon Sep 17 00:00:00 2001 From: Emil Nielsen Date: Tue, 21 Mar 2023 13:43:22 +0700 Subject: [PATCH] Update inventoryItems when buying and upgrading --- config/game-config.json | 15 ++++ database.db | Bin 0 -> 49152 bytes src/app/Components/ErrorPopover.tsx | 45 ---------- src/app/Components/InventoryItem.tsx | 3 +- src/app/Components/NotificationPopover.tsx | 45 ++++++++++ src/app/page.tsx | 93 ++++++++++++--------- src/utils/helpers.ts | 10 +++ typings.d.ts | 10 +++ 8 files changed, 135 insertions(+), 86 deletions(-) create mode 100644 database.db delete mode 100644 src/app/Components/ErrorPopover.tsx create mode 100644 src/app/Components/NotificationPopover.tsx 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 0000000000000000000000000000000000000000..5d6e5f5ab2a027bb7a32ac62fe0a206e797c8948 GIT binary patch literal 49152 zcmeI*Pi*8?9S3lG{yWLcBW=;BT21#!QIw2!1M?@7rh^s{(pkE6m6RkE>PRp+wGcF^~D>!QXUn$zPYizv$b|>V~6h@cKliJo10s$TVL7W zueaV>9L=*FE}*|YTdkX|t=7hRYn%H)chNK`T7Hn9$`JuQ)q zM=s8Fxjk-a+2Y)sdh%A_(e3GGza#EaWsfDNB#p7a#W7q@KQyiVa298@l5hrk-*3xO zQyH}dYK^)lj1KLgJhLyT$o_!8+Pb;+=ItH6*d00!Eq>=T^v*kcp}jDPD zXDI#y{ocpkl*(VoWQv<*RWU6?+;i{rXxTgAQ38!qPa*XyRe3y1hc!9>(B{EPDs11^ zg36LMFli($Rh1OFcumpd=N-6=j-np=MMrMyYuoE%U{*^msM0lBg+eYlr;S}vIh&;{(X|@Eb(o3gGRd+UyN+fyP1&TY zVbZgyWLb-*46g@yA(>n{%{96@IL#8td2RfXR!vP7)!-6?wEz8IWy=cv!2kgWKmY;| zfB*y_009U<00Izzz?i`OTWU_3e{e&)+SnF7VTlEow~oblnwu`yc~5ut1=lTu_m5pq zIHo;xdEd6J>)gL4-|%m{=cea!!*o5m>DDvvQue_>=uU9g>=Ko+>zMlo-gUm;vybRL zN-mBC_YUYzNLPry%RQUZPXLbK_R!;dj@_pq-KcBRO)2&scL#b`RPI%4_2tIOYOPYM zFIDPGwJNVPnvLaVqtOnp|9_~k580pC`|LgTaBM}9ga8B}009U<00Izz00bZa0SG|g z(-2_kv~pEbH^lBRc(B$~K9yFk&nRxbiO=((tM@4T%$j2o}vtDv61j|EXz6StIbNi&C_9yq@Sbl zRE}lJp^lYN9nTS+n&-)}GU~A$E6pmEkqC37{JGR(IfB#sS2L7jv??p(8NyYmwx_5z zv+U97^Z(vwzotTH?5wzd-n`N-<%RuPE*%kZkMLd2-ja} zHmLBaC@h@`UujafzS1sfQ8-pOov?3I+ofC-md>=()GN)}EA3J?3QMQzDYn|IF1JgW zC>)!2t=gz{}fB*y_009U<00Izz00bcLzao&K+XA%2^FQ;y z|EJkc74{E$?*AXyFDZ!u0uX=z1Rwwb2tWV=5P$##AOL|+Ss?xbKtp~3ppg$=0H}^$ Z0BFnxZva%s-T-LK1TO$o!xsP={|1LMagG20 literal 0 HcmV?d00001 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;