diff --git a/public/assets/drill_2.jpg b/public/assets/drill_2.jpg deleted file mode 100644 index 249e317..0000000 Binary files a/public/assets/drill_2.jpg and /dev/null differ diff --git a/public/assets/drill_4.jpg b/public/assets/drill_4.jpg deleted file mode 100644 index 0d82ec7..0000000 Binary files a/public/assets/drill_4.jpg and /dev/null differ diff --git a/public/assets/items/dustexcavator.png b/public/assets/items/dustexcavator.png new file mode 100644 index 0000000..df2b115 Binary files /dev/null and b/public/assets/items/dustexcavator.png differ diff --git a/public/assets/items/lunarcoreextractor.png b/public/assets/items/lunarcoreextractor.png new file mode 100644 index 0000000..420dbf9 Binary files /dev/null and b/public/assets/items/lunarcoreextractor.png differ diff --git a/public/assets/drill_1.jpg b/public/assets/items/lunarlite.jpg similarity index 100% rename from public/assets/drill_1.jpg rename to public/assets/items/lunarlite.jpg diff --git a/public/assets/items/lunarlite300.png b/public/assets/items/lunarlite300.png new file mode 100644 index 0000000..211bcc0 Binary files /dev/null and b/public/assets/items/lunarlite300.png differ diff --git a/public/assets/items/pickaxe.png b/public/assets/items/pickaxe.png new file mode 100644 index 0000000..82b6c63 Binary files /dev/null and b/public/assets/items/pickaxe.png differ diff --git a/public/assets/drill_3.jpg b/public/assets/items/regolith.jpg similarity index 100% rename from public/assets/drill_3.jpg rename to public/assets/items/regolith.jpg diff --git a/public/assets/items/shovel.png b/public/assets/items/shovel.png new file mode 100644 index 0000000..dda3986 Binary files /dev/null and b/public/assets/items/shovel.png differ diff --git a/src/app/Components/Accounts/Account.tsx b/src/app/Components/Accounts/Account.tsx index e55317c..38b56b8 100644 --- a/src/app/Components/Accounts/Account.tsx +++ b/src/app/Components/Accounts/Account.tsx @@ -1,28 +1,41 @@ "use client"; -import React, { useState } from "react"; -import { IResourceAccount, IConversionPair } from "typings"; +import React, { useEffect, useState } from "react"; +import { IResourceAccount, IConversionPair, IGameConfig } from "typings"; import { resourceToFc } from "../../../utils/helpers"; import ResourceModal from "./ResourceModal"; const ResourceAccount = (props: { account: IResourceAccount; sellResource: (pairs: IConversionPair[]) => void; + gameConfig: IGameConfig | undefined; }) => { const [showModal, setShowModal] = useState(false); const [conversionPair, setConversionPair] = useState< IConversionPair | undefined >(undefined); - const [conversionRate, setConversionRate] = useState(0.1); + const [conversionRate, setConversionRate] = useState(0.1); const handleConversionPair = (amount: number, resourceType: string) => { const updatedPair = { resourceType: resourceType, resourceAmount: amount, - moneyAmount: amount * conversionRate.valueOf(), + moneyAmount: amount * conversionRate, }; setConversionPair(updatedPair); }; + const getConversionRate = (account: IResourceAccount) => { + if (props.gameConfig === undefined) return 0; + const query = account.resourceType + "ToMoonbucks"; + const rate = props.gameConfig.gameConstants[query]; + return rate; + }; + + useEffect(() => { + const rate = getConversionRate(props.account); + setConversionRate(rate); + }, [props.gameConfig]); + return ( <> {showModal && ( diff --git a/src/app/Components/Accounts/AccountsView.tsx b/src/app/Components/Accounts/AccountsView.tsx index ed21434..0e9a82e 100644 --- a/src/app/Components/Accounts/AccountsView.tsx +++ b/src/app/Components/Accounts/AccountsView.tsx @@ -1,12 +1,18 @@ "use client"; import React, { useState, useEffect } from "react"; -import { IBankAccount, IConversionPair } from "typings"; +import { + IBankAccount, + IConversionPair, + IGameConfig, + IResourceAccount, +} from "typings"; import Account from "./Account"; import { BiLoaderAlt } from "react-icons/bi"; const BankAccountsView = (props: { bankAccount: IBankAccount | undefined; sellResource: (pairs: IConversionPair[]) => void; + gameConfig: IGameConfig | undefined; }) => { if (props.bankAccount === undefined) { return ( @@ -39,6 +45,7 @@ const BankAccountsView = (props: { key={id} account={account} sellResource={props.sellResource} + gameConfig={props.gameConfig} /> ); })} diff --git a/src/app/Components/Inventory/InventoryItem.tsx b/src/app/Components/Inventory/InventoryItem.tsx index fd287f3..f068a24 100644 --- a/src/app/Components/Inventory/InventoryItem.tsx +++ b/src/app/Components/Inventory/InventoryItem.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from "react"; -import { IInventoryItem, IStake } from "typings"; +import { IInventoryItem, IStake, IUpgrade } from "typings"; import CardLayout from "../../Layouts/CardLayout"; import Image from "next/image"; const InventoryItem = (props: { @@ -10,14 +10,13 @@ const InventoryItem = (props: { const [currentTierIndex, setCurrentTierIndex] = useState( props.inventoryItem.currentTierIndex ); - const [currentUpgrade, setCurrentUpgrade] = useState( - props.inventoryItem.storeItem.upgrades[currentTierIndex] - ); + const [currentUpgrade, setCurrentUpgrade] = useState(null); useEffect(() => { const index = props.inventoryItem.currentTierIndex; setCurrentTierIndex(index); - setCurrentUpgrade(props.inventoryItem.storeItem.upgrades[index]); + const currentUpdade = props.inventoryItem.storeItem.upgrades[index]; + setCurrentUpgrade(currentUpdade); }, [props.inventoryItem]); const isInUse = () => { @@ -47,18 +46,21 @@ const InventoryItem = (props: {

{props.inventoryItem.storeItem.claimAmount}

Tier

- {props.inventoryItem.storeItem.upgrades.map((upgrade, id) => { - if (upgrade.tier <= currentUpgrade.tier) { - return ( - - ); - } else { - return ( - - ); - } - })} -

(+{currentUpgrade.claimBoost})

+ {currentUpgrade && + props.inventoryItem.storeItem.upgrades.map((upgrade, id) => { + if (upgrade.tier <= currentUpgrade.tier) { + return ( + + ); + } else { + return ( + + ); + } + })} +

+ (+{currentUpgrade && currentUpgrade.claimBoost}) +

Upgrade

@@ -97,7 +99,7 @@ const InventoryItem = (props: {
{props.inventoryItem.storeItem.name}
{props.storeItem.name} void; }) => { return ( @@ -12,15 +12,16 @@ const StoreItemView = (props: {

Store

- {props.storeItems - .filter((item) => !item.isOwned) - .map((storeItem, id) => ( - - ))} + {props.storeItems && + props.storeItems + .filter((item) => !item.isOwned) + .map((storeItem, id) => ( + + ))}
diff --git a/src/app/page.tsx b/src/app/page.tsx index 785be4e..ac1d55e 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -5,7 +5,6 @@ import StakingSourcesView from "./Components/Staking/StakingSourcesView"; import BankAccountsView from "./Components/Accounts/AccountsView"; import StoreItemView from "./Components/Store/StoreItemView"; import NotificationPopover from "./Components/NotificationPopover"; -import { gameConfig } from "@/utils/gameLogic"; import { IInventoryItem, IStakingSource, @@ -13,6 +12,8 @@ import { IStake, IConversionPair, Notification, + IGameConfig, + IStoreItem, } from "typings"; import Navbar from "./Components/Navigation/Navbar"; import NavbarVertical from "./Components/Navigation/NavbarVertical"; @@ -26,13 +27,13 @@ export default function Home() { ); const [bankAccount, setBankAccount] = useState(); const [userStakes, setUserStakes] = useState([]); - const [lightBoxIsActive, setLightBoxIsActive] = useState(false); const [userId, setUserId] = useState(""); const [notification, setNotification] = useState(null); const [notificationTime, setNotificationTime] = useState(30); - const [storeItems, setStoreItems] = useState(gameConfig.store); + const [storeItems, setStoreItems] = useState(null); const [isLoading, setIsLoading] = useState(true); - const [activeComponent, setActiveComponent] = useState("stakingsourcesview"); + const [activeComponent, setActiveComponent] = useState("inventoryitemview"); + const [gameConfig, setGameConfig] = useState(); const isOwned = (storeItemId: number) => { if (inventoryItems && inventoryItems?.length > 0) { @@ -46,20 +47,34 @@ export default function Home() { const response = await fetch(`/api/user/${userId}/inventory-items`); const DBInventoryItems = await response.json(); - for (const invItem of DBInventoryItems.inventoryItems) { - invItem.storeItem = gameConfig.store.find( - (item) => item.id === invItem.storeItemId - ); - } - // TODO Can you just return the array? - console.log(DBInventoryItems.inventoryItems); - setInventoryItems(DBInventoryItems.inventoryItems); + // Calling the endpoint here because state might not be ready + const gameConfig = await fetch(`/api/get-game-config`); + const gameConfigData = await gameConfig.json(); + + const updatedInventoryItems = DBInventoryItems.inventoryItems.map( + (invItem: IInventoryItem) => { + return { + ...invItem, + storeItem: gameConfigData.storeItems?.find( + (item: IStoreItem) => item.id === invItem.storeItemId + ), + }; + } + ); + + setInventoryItems(updatedInventoryItems); + }; + + const fetchStoreItems = async () => { + const response = await fetch(`/api/get-game-config`); + const data = await response.json(); + setGameConfig(data); + setStoreItems(data.storeItems); }; const fetchStakingSources = async () => { const response = await fetch(`/api/user/${userId}/staking-sources`); const sources = await response.json(); - // TODO Can you just return the array? setStakingSources(sources.stakingSources); }; @@ -86,21 +101,23 @@ export default function Home() { fetchStakingSources(); fetchInventoryItems(); fetchStakes(); + fetchStoreItems(); setIsLoading(false); }, [userId]); // Update data useEffect(() => { - const updatedStoreItems = storeItems.map((storeItem) => { - return { - ...storeItem, - isOwned: isOwned(storeItem.id), - }; - }); - updatedStoreItems && setStoreItems(updatedStoreItems); + if (storeItems) { + const updatedStoreItems = storeItems.map((storeItem) => { + return { + ...storeItem, + isOwned: isOwned(storeItem.id), + }; + }); + updatedStoreItems && setStoreItems(updatedStoreItems); + } }, [inventoryItems]); - // Hide error automatically useEffect(() => { if (notification) { const intervalId = setInterval(() => { @@ -332,7 +349,11 @@ export default function Home() { onClose={handleCloseNotification} /> )} - +