From 39df55b19cadf97fe9f1fa1a6b5a6ff866ba35fb Mon Sep 17 00:00:00 2001 From: Emil Nielsen Date: Sun, 9 Apr 2023 09:18:58 +0700 Subject: [PATCH] Change id on wells, storeitems and inventory items. Modify UI a bit --- src/app/Components/Accounts/Account.tsx | 4 +- .../Components/Inventory/InventoryItem.tsx | 2 +- .../Inventory/InventoryItemView.tsx | 14 ++++--- .../Components/Navigation/NavbarVertical.tsx | 2 +- src/app/Components/Staking/StakingSource.tsx | 34 ++++++++++------- .../Components/Staking/StakingSourcesView.tsx | 38 ++++++++++--------- src/app/Components/Store/StoreItem.tsx | 2 +- src/app/Components/Store/StoreItemView.tsx | 33 +++++++++------- src/app/page.tsx | 21 +++++----- typings.d.ts | 13 ++++--- 10 files changed, 93 insertions(+), 70 deletions(-) diff --git a/src/app/Components/Accounts/Account.tsx b/src/app/Components/Accounts/Account.tsx index fc2468e..e55317c 100644 --- a/src/app/Components/Accounts/Account.tsx +++ b/src/app/Components/Accounts/Account.tsx @@ -32,7 +32,7 @@ const ResourceAccount = (props: { onClick={() => { setShowModal(!showModal); }} - className="text-white absolute top-0" + className="text-white absolute top-0 hover:cursor-pointer" > { setShowModal(!showModal); }} diff --git a/src/app/Components/Inventory/InventoryItem.tsx b/src/app/Components/Inventory/InventoryItem.tsx index 3342da8..fd287f3 100644 --- a/src/app/Components/Inventory/InventoryItem.tsx +++ b/src/app/Components/Inventory/InventoryItem.tsx @@ -5,7 +5,7 @@ import Image from "next/image"; const InventoryItem = (props: { inventoryItem: IInventoryItem; stakes: IStake[] | null; - upgradeInventoryItem: (inventoryItemId: number, storeItemId: string) => void; + upgradeInventoryItem: (inventoryItemId: string, storeItemId: number) => void; }) => { const [currentTierIndex, setCurrentTierIndex] = useState( props.inventoryItem.currentTierIndex diff --git a/src/app/Components/Inventory/InventoryItemView.tsx b/src/app/Components/Inventory/InventoryItemView.tsx index c111375..4e6d2ad 100644 --- a/src/app/Components/Inventory/InventoryItemView.tsx +++ b/src/app/Components/Inventory/InventoryItemView.tsx @@ -5,15 +5,14 @@ import InventoryItem from "./InventoryItem"; const InventoryItemView = (props: { stakes: IStake[] | null; inventoryItems: IInventoryItem[] | null | undefined; - upgradeInventoryItem: (inventoryItemId: number, storeItemId: string) => void; + upgradeInventoryItem: (inventoryItemId: string, storeItemId: number) => void; }) => { return (
-
+

Your Inventory

- {props.inventoryItems && - props.inventoryItems.length > 0 && + {props.inventoryItems && props.inventoryItems.length > 0 ? ( props.inventoryItems.map((inventoryItem, id) => ( - ))} + )) + ) : ( +

+ Go to the Store to buy items +

+ )}
diff --git a/src/app/Components/Navigation/NavbarVertical.tsx b/src/app/Components/Navigation/NavbarVertical.tsx index 95eb3b7..7f9aeaa 100644 --- a/src/app/Components/Navigation/NavbarVertical.tsx +++ b/src/app/Components/Navigation/NavbarVertical.tsx @@ -8,7 +8,7 @@ interface MenuItem { const menuItems: MenuItem[] = [ { name: "Moons", componentKey: "stakingsourcesview" }, { name: "Inventory", componentKey: "inventoryitemview" }, - { name: "Buy Items", componentKey: "storeitemview" }, + { name: "Store", componentKey: "storeitemview" }, ]; interface NavbarProps { diff --git a/src/app/Components/Staking/StakingSource.tsx b/src/app/Components/Staking/StakingSource.tsx index fc93826..4a5d7d8 100644 --- a/src/app/Components/Staking/StakingSource.tsx +++ b/src/app/Components/Staking/StakingSource.tsx @@ -12,17 +12,19 @@ const StakingSource = (props: { inventoryItems: IInventoryItem[] | null | undefined; claimStake: (stakingEventId: number) => void; startStake: ( - inventoryItemId: number, - storeItemId: string, - wellId: number + inventoryItemId: string, + storeItemId: number, + wellId: string ) => void; }) => { const [activeStakes, setActiveStakes] = useState([]); - const [selectedItemId, setSelectedItemId] = useState(null); - const [selectedStoreItemId, setSelectedStoreItemId] = useState( + const [selectedInventoryItemId, setSelectedInventoryItemId] = useState< + string | null + >(null); + const [selectedStoreItemId, setSelectedStoreItemId] = useState( null ); - const [selectedWellId, setSelectedWellId] = useState(null); + const [selectedWellId, setSelectedWellId] = useState(null); const [showInfo, setShowInfo] = useState(false); // Check if claimable every second @@ -53,8 +55,12 @@ const StakingSource = (props: { }); const handleStartMining = () => { - if (selectedItemId && selectedWellId && selectedStoreItemId) { - props.startStake(selectedItemId, selectedStoreItemId, selectedWellId); + if (selectedInventoryItemId && selectedWellId && selectedStoreItemId) { + props.startStake( + selectedInventoryItemId, + selectedStoreItemId, + selectedWellId + ); } }; @@ -64,12 +70,12 @@ const StakingSource = (props: { const handleSelectChange = ( wellId: string, - itemId: number, - storeitemId: string + inventoryItemId: string, + storeitemId: number ) => { - setSelectedWellId(Number(wellId)); + setSelectedWellId(wellId); setSelectedStoreItemId(storeitemId); - setSelectedItemId(itemId); + setSelectedInventoryItemId(inventoryItemId); }; const Countdown = (props: { remainingTime: number }) => { @@ -208,9 +214,9 @@ const StakingSource = (props: { item.storeItem.id ) } - isActive={selectedItemId === item.id} + isActive={selectedInventoryItemId === item.id} /> - {selectedItemId === item.id ? ( + {selectedInventoryItemId === item.id ? (
- {rows.map((stakingSources, index) => ( - - ))} + {rows.length > 0 ? ( + rows.map((stakingSources, index) => ( + + )) + ) : ( +

You don't have any moons

+ )} ); diff --git a/src/app/Components/Store/StoreItem.tsx b/src/app/Components/Store/StoreItem.tsx index 6a6b363..7921257 100644 --- a/src/app/Components/Store/StoreItem.tsx +++ b/src/app/Components/Store/StoreItem.tsx @@ -6,7 +6,7 @@ import Image from "next/image"; const StoreItem = (props: { storeItem: IStoreItem; - buyStoreItem: (itemId: string) => void; + buyStoreItem: (storeItemId: number) => void; }) => { return ( diff --git a/src/app/Components/Store/StoreItemView.tsx b/src/app/Components/Store/StoreItemView.tsx index 040ab42..8cbb6f0 100644 --- a/src/app/Components/Store/StoreItemView.tsx +++ b/src/app/Components/Store/StoreItemView.tsx @@ -5,24 +5,31 @@ import StoreItem from "./StoreItem"; const StoreItemView = (props: { inventoryItems: IInventoryItem[] | null | undefined; storeItems: IStoreItem[]; - buyStoreItem: (itemId: string) => void; + buyStoreItem: (storeItemId: number) => void; }) => { + const availableItems = () => { + const items = props.storeItems.filter((item) => !item.isOwned); + if (items.length > 0) { + items.map((storeItem, id) => ( + + )); + } else { + return ( +

No items.. Check back later!

+ ); + } + }; + return (
-
+

Store

- {props.storeItems && - props.storeItems.length > 0 && - props.storeItems - .filter((item) => !item.isOwned) - .map((storeItem, id) => ( - - ))} + {availableItems()}
diff --git a/src/app/page.tsx b/src/app/page.tsx index 1c270b7..3bb8e7e 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -4,7 +4,6 @@ import InventoryItemView from "./Components/Inventory/InventoryItemView"; import StakingSourcesView from "./Components/Staking/StakingSourcesView"; import BankAccountsView from "./Components/Accounts/AccountsView"; import StoreItemView from "./Components/Store/StoreItemView"; -import ResourceStore from "./Components/Accounts/Old/ResourceStore"; import NotificationPopover from "./Components/NotificationPopover"; import { gameConfig } from "@/utils/gameLogic"; import { @@ -35,7 +34,7 @@ export default function Home() { const [isLoading, setIsLoading] = useState(true); const [activeComponent, setActiveComponent] = useState("stakingsourcesview"); - const isOwned = (storeItemId: string) => { + const isOwned = (storeItemId: number) => { if (inventoryItems && inventoryItems?.length > 0) { return inventoryItems?.some((item) => item.storeItem.id == storeItemId); } else { @@ -53,6 +52,7 @@ export default function Home() { ); } // TODO Can you just return the array? + console.log(DBInventoryItems.inventoryItems); setInventoryItems(DBInventoryItems.inventoryItems); }; @@ -143,9 +143,9 @@ export default function Home() { }; const startStake = async ( - inventoryItemId: number, - storeItemId: string, - wellId: number + inventoryItemId: string, + storeItemId: number, + wellId: string ) => { const response = await fetch(`/api/user/${userId}/stakes/start`, { method: "POST", @@ -184,14 +184,14 @@ export default function Home() { return await response.json(); }; - const buyStoreItem = async (itemId: string) => { - console.log(`Buying item with id ${itemId}`); + const buyStoreItem = async (storeItemId: number) => { + console.log(`Buying item with id ${storeItemId}`); try { const response = await fetch(`/api/user/${userId}/inventory-items`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ - storeItemId: itemId, + storeItemId: storeItemId, }), }); @@ -210,6 +210,7 @@ export default function Home() { type: "Success", }); fetchInventoryItems(); + fetchBankAccount(); } } catch (error) { if (error instanceof Error) { @@ -221,8 +222,8 @@ export default function Home() { }; const upgradeInventoryItem = async ( - inventoryItemId: number, - storeItemId: string + inventoryItemId: string, + storeItemId: number ) => { try { const response = await fetch(`/api/user/${userId}/inventory-items`, { diff --git a/typings.d.ts b/typings.d.ts index 993f0e9..6726304 100644 --- a/typings.d.ts +++ b/typings.d.ts @@ -10,7 +10,7 @@ export interface TimeDuration { } export interface IResourceWell { - id: number; + id: string; resourceType: string; supply: number; } @@ -20,7 +20,7 @@ export interface IStake { resourceType: string; stakingSourceId: number; startTime: string; - inventoryItemId: number; + inventoryItemId: string; stakeAmount: number; durationInMins: number; unclaimed: boolean | undefined; @@ -39,13 +39,14 @@ export interface IStakingSource { resourceChance: number | null resourceMinStartAmount: number | null resourceMaxStartAmount: number | null - size: number | null + size: number | undefined } export interface IInventoryItem { - id: number; - storeItem: IStoreItem; currentTierIndex: number; + id: string; + storeItem: IStoreItem; + storeItemId: number } export interface IUpgrade { @@ -140,7 +141,7 @@ type PhantomRequestMethod = // Generic stuff export interface IOption { - value: number, + value: string, label: string }