Change id on wells, storeitems and inventory items. Modify UI a bit

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"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
@@ -103,7 +103,7 @@ const ResourceAccount = (props: {
             viewBox="0 0 24 24"
             strokeWidth={1.5}
             stroke="currentColor"
-            className="w-6 h-6 absolute right-0 top-0 mt-4 mr-4"
+            className="w-6 h-6 absolute right-0 top-0 mt-4 mr-4 hover:cursor-pointer"
             onClick={() => {
               setShowModal(!showModal);
             }}

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

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 (
     <div className="bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto p-1 rounded-xl rounded-xl col-span-5">
-      <div className="bg-slate-900 text-white p-8 rounded-xl">
+      <div className="bg-slate-900 text-white p-8 rounded-xl h-full">
         <h2 className="text-3xl font-bold mb-4">Your Inventory</h2>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {props.inventoryItems &&
+          {props.inventoryItems && props.inventoryItems.length > 0 ? (
-            props.inventoryItems.length > 0 &&
             props.inventoryItems.map((inventoryItem, id) => (
               <InventoryItem
                 key={id}
@@ -21,7 +20,12 @@ const InventoryItemView = (props: {
                 upgradeInventoryItem={props.upgradeInventoryItem}
                 stakes={props.stakes}
               />
-            ))}
+            ))
+          ) : (
+            <p className="text-white text-2xl">
+              Go to the <strong>Store</strong> to buy items
+            </p>
+          )}
         </div>
       </div>
     </div>

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 {

src/app/Components/Staking/StakingSource.tsx

@@ -12,17 +12,19 @@ const StakingSource = (props: {
   inventoryItems: IInventoryItem[] | null | undefined;
   claimStake: (stakingEventId: number) => void;
   startStake: (
-    inventoryItemId: number,
+    inventoryItemId: string,
-    storeItemId: string,
+    storeItemId: number,
-    wellId: number
+    wellId: string
   ) => void;
 }) => {
   const [activeStakes, setActiveStakes] = useState<IStake[]>([]);
-  const [selectedItemId, setSelectedItemId] = useState<number | null>(null);
+  const [selectedInventoryItemId, setSelectedInventoryItemId] = useState<
-  const [selectedStoreItemId, setSelectedStoreItemId] = useState<string | null>(
+    string | null
+  >(null);
+  const [selectedStoreItemId, setSelectedStoreItemId] = useState<number | null>(
     null
   );
-  const [selectedWellId, setSelectedWellId] = useState<number | null>(null);
+  const [selectedWellId, setSelectedWellId] = useState<string | null>(null);
   const [showInfo, setShowInfo] = useState(false);
 
   // Check if claimable every second
@@ -53,8 +55,12 @@ const StakingSource = (props: {
   });
 
   const handleStartMining = () => {
-    if (selectedItemId && selectedWellId && selectedStoreItemId) {
+    if (selectedInventoryItemId && selectedWellId && selectedStoreItemId) {
-      props.startStake(selectedItemId, selectedStoreItemId, selectedWellId);
+      props.startStake(
+        selectedInventoryItemId,
+        selectedStoreItemId,
+        selectedWellId
+      );
     }
   };
 
@@ -64,12 +70,12 @@ const StakingSource = (props: {
 
   const handleSelectChange = (
     wellId: string,
-    itemId: number,
+    inventoryItemId: string,
-    storeitemId: 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 ? (
                                 <button
                                   onClick={handleStartMining}
                                   className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold w-28 text-center ml-2"

src/app/Components/Staking/StakingSourcesView.tsx

@@ -46,9 +46,9 @@ interface RowProps {
   inventoryItems: IInventoryItem[] | undefined | null;
   claimStake: (stakingEventId: number) => void;
   startStake: (
-    inventoryItemId: number,
+    inventoryItemId: string,
-    storeItemId: string,
+    storeItemId: number,
-    wellId: number
+    wellId: string
   ) => void;
 }
 
@@ -81,16 +81,16 @@ const StakingSourcesView = (props: {
   inventoryItems: IInventoryItem[] | null | undefined;
   claimStake: (stakingEventId: number) => void;
   startStake: (
-    inventoryItemId: number,
+    inventoryItemId: string,
-    storeItemId: string,
+    storeItemId: number,
-    wellId: number
+    wellId: string
   ) => void;
   createStakingSource: () => void;
 }) => {
   // Generate rows of stakingSources
   const handleRows = () => {
     let rows = [];
-    let currentRow = [];
+    let currentRow: IStakingSource[] = [];
     let rowSize = 3;
     if (props.stakingSources) {
       props.stakingSources.forEach((stakingSource, index) => {
@@ -117,7 +117,7 @@ const StakingSourcesView = (props: {
 
   return (
     <div className="bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto p-1 rounded-xl h-auto p-1 rounded-xl col-span-5">
-      <div className="bg-slate-900 p-8 rounded-xl">
+      <div className="bg-slate-900 p-8 rounded-xl h-full">
         <div className="flex items-center mb-4">
           <h2 className="text-3xl text-white font-bold">Your Moons</h2>
           <button
@@ -140,15 +140,19 @@ const StakingSourcesView = (props: {
             </svg>
           </button>
         </div>
-        {rows.map((stakingSources, index) => (
+        {rows.length > 0 ? (
-          <Row
+          rows.map((stakingSources, index) => (
-            key={index}
+            <Row
-            stakingSources={stakingSources}
+              key={index}
-            inventoryItems={props.inventoryItems}
+              stakingSources={stakingSources}
-            claimStake={props.claimStake}
+              inventoryItems={props.inventoryItems}
-            startStake={props.startStake}
+              claimStake={props.claimStake}
-          />
+              startStake={props.startStake}
-        ))}
+            />
+          ))
+        ) : (
+          <p className="text-white text-2xl">You don't have any moons</p>
+        )}
       </div>
     </div>
   );

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 (
     <CardLayout>

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) => (
+        <StoreItem
+          key={id}
+          storeItem={storeItem}
+          buyStoreItem={props.buyStoreItem}
+        />
+      ));
+    } else {
+      return (
+        <p className="text-white text-2xl">No items.. Check back later!</p>
+      );
+    }
+  };
+
   return (
     <div className="bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto p-1 rounded-xl rounded-xl col-span-5">
-      <div className="bg-slate-900 text-white p-8 rounded-xl">
+      <div className="bg-slate-900 text-white p-8 rounded-xl h-full">
         <h2 className="text-3xl font-bold mb-4 text-white">Store</h2>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {props.storeItems &&
+          {availableItems()}
-            props.storeItems.length > 0 &&
-            props.storeItems
-              .filter((item) => !item.isOwned)
-              .map((storeItem, id) => (
-                <StoreItem
-                  key={id}
-                  storeItem={storeItem}
-                  buyStoreItem={props.buyStoreItem}
-                />
-              ))}
         </div>
       </div>
     </div>

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,
+    inventoryItemId: string,
-    storeItemId: string,
+    storeItemId: number,
-    wellId: 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) => {
+  const buyStoreItem = async (storeItemId: number) => {
-    console.log(`Buying item with id ${itemId}`);
+    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,
+    inventoryItemId: string,
-    storeItemId: string
+    storeItemId: number
   ) => {
     try {
       const response = await fetch(`/api/user/${userId}/inventory-items`, {

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
 }