From 406a0e0c893dea7dcada98ef47c5511095fb0cb7 Mon Sep 17 00:00:00 2001
From: Emil Nielsen <hej@emilnielsen.com>
Date: Mon, 20 Mar 2023 21:05:36 +0700
Subject: [PATCH] Updates to StoreItemView

---
 config/game-config.json              |  47 ++++++++++++++++++++++-
 database.db                          | Bin 49152 -> 49152 bytes
 src/app/Components/StoreItem.tsx     |   5 +--
 src/app/Components/StoreItemView.tsx |  21 ++--------
 src/app/page.tsx                     |  55 +++++++++++++--------------
 typings.d.ts                         |   1 +
 6 files changed, 79 insertions(+), 50 deletions(-)

diff --git a/config/game-config.json b/config/game-config.json
index 1e2f9e6..31306d7 100644
--- a/config/game-config.json
+++ b/config/game-config.json
@@ -51,6 +51,51 @@
           { "tier": 4, "price": 500, "claimBoost": 40 },
           { "tier": 5, "price": 600, "claimBoost": 50 }
         ]
-    }
+    },
+    {
+      "id": "item4",
+      "name": "Drill D",
+      "description": "This is drill D",
+      "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 }
+      ]
+  },
+  {
+    "id": "item5",
+    "name": "Drill E",
+    "description": "This is drill E",
+    "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 }
+    ]
+},
+{
+  "id": "item6",
+  "name": "Drill F",
+  "description": "This is drill F",
+  "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
index 4d5b84aa9e9370858134a362d83b24a083d3c20e..8f668b0f0c02c4b102fb1493390db976f3db307e 100644
GIT binary patch
delta 710
zcmZo@U~Xt&o*>O=I8nx#(QsqJGI^0W2L7-7Px#OA@8(~@KZU=MzmPv}v!Z|tzpx-D
zvpQpGL3&YQN@{#+S!!Mh@8m*#Ge)+}EA(R&1lahk82In=@8h4#U&9~GZw1t(#-A+D
z#>T+OA#R#klA3E~WME{hYhbKvWT0SZY-MU_Wo#NH&x%lBil)H8%GfAMo&}-61XY2t
zft8_Q)a1GG=|J0$GVp)rf6M=v|0e%={-c`(6E^b8aWacDf^BAlu}oQEEEAT=kMkAf
zc=>V}_#g5g;$O_)!k^0T#;?xL!S|By6yIvT9==?lC%pOUWqDZ`AYL#;c7TbM0nisl
zQL;REqz$8Fx$#SL;g{xQsmE<O&~y&`+S&0)8$`*n;g@CwN!Npd5R1=&+F5XGH?fG4
zWrj%`qlKHHm5F(jEE7x`-Ec!IBVe#HLZvsqs+Un<`3{WV&4LSF@J|e2<zxrSaWXU3
J|5>y_001%hrWODI

delta 156
zcmZo@U~Xt&o*>OAJW<A(QFvp*GI^1B2L7-7Px#OA@8(~@KZU=MzmPwEv!Z}2zmNbY
zvpQ#KL3&YQN@{#+S!!O%<U)NjM&`{c^kWpbnEB^2@Zaa($3GXSx}SgY-1u~$*kcC%
z@BDB1A8!_1aFu`Z<9tOnM*fEk{11Wr>-?J^)~hP8{AA$&3FJQGpBTW&&dSKbz{zN|
HXoCO%L=!Vq

diff --git a/src/app/Components/StoreItem.tsx b/src/app/Components/StoreItem.tsx
index ac5c005..ba0c04f 100644
--- a/src/app/Components/StoreItem.tsx
+++ b/src/app/Components/StoreItem.tsx
@@ -6,13 +6,12 @@ import CommonCardLayout from "../Layouts/CommonCardLayout";
 const StoreItem = (props: {
   storeItem: IStoreItem;
   buyStoreItem: (itemId: string) => void;
-  owned: boolean | undefined;
 }) => {
   return (
     <CommonCardLayout>
       <div className="flex gap-4">
         <div className="flex-1">
-          {props.owned ? (
+          {props.storeItem.isOwned ? (
             <span className="text-green-600 font-bold">Owned</span>
           ) : (
             ""
@@ -41,7 +40,7 @@ const StoreItem = (props: {
           </table>
         </div>
         <div className="flex items-center h-100">
-          {props.owned ? (
+          {props.storeItem.isOwned ? (
             <button className="bg-slate-400 text-slate-600 px-4 py-2 rounded-lg font-bold w-28 text-center cursor-not-allowed">
               Owned
             </button>
diff --git a/src/app/Components/StoreItemView.tsx b/src/app/Components/StoreItemView.tsx
index 695ed79..7542d12 100644
--- a/src/app/Components/StoreItemView.tsx
+++ b/src/app/Components/StoreItemView.tsx
@@ -3,34 +3,21 @@ import { IInventoryItem, IStoreItem } from "typings";
 import StoreItem from "./StoreItem";
 
 const StoreItemView = (props: {
-  storeItems: IStoreItem[] | null;
   inventoryItems: IInventoryItem[] | null | undefined;
+  storeItems: IStoreItem[];
   buyStoreItem: (itemId: string) => void;
 }) => {
-  const isOwned = (storeItemId: string) => {
-    return props.inventoryItems?.some(
-      (item) => item.storeItem.id == storeItemId
-    );
-  };
-
-  const storeItemsToRender = props.storeItems?.map((storeItem) => {
-    return {
-      ...storeItem,
-      owned: isOwned(storeItem.id),
-    };
-  });
   return (
     <div className="bg-slate-800 p-4 rounded-lg">
       <h2 className="text-2xl font-bold mb-4 text-white">Store</h2>
-      {storeItemsToRender &&
-        storeItemsToRender
-          .sort((a, b) => (a.owned === b.owned ? 0 : a.owned ? 1 : -1))
+      {props.storeItems &&
+        props.storeItems
+          .sort((a, b) => (a.isOwned === b.isOwned ? 0 : a.isOwned ? 1 : -1))
           .map((storeItem, id) => (
             <StoreItem
               key={id}
               storeItem={storeItem}
               buyStoreItem={props.buyStoreItem}
-              owned={storeItem.owned}
             />
           ))}
     </div>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d502da5..8f3c8a9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -8,13 +8,7 @@ import StoreItemView from "./Components/StoreItemView";
 import ResourceStore from "./Components/ResourceStore";
 import ErrorPopover from "./Components/ErrorPopover";
 import { gameConfig } from "@/utils/gameLogic";
-import {
-  IStoreItem,
-  IInventoryItem,
-  IStakingSource,
-  IBankAccount,
-  IStake,
-} from "typings";
+import { IInventoryItem, IStakingSource, IBankAccount, IStake } from "typings";
 
 export default function Home() {
   const [inventoryItems, setInventoryItems] = useState<
@@ -24,30 +18,21 @@ export default function Home() {
     []
   );
   const [bankAccount, setBankAccount] = useState<IBankAccount>();
-  const [storeItems, setStoreItems] = useState<IStoreItem[]>([]);
   const [userStakes, setUserStakes] = useState<IStake[]>([]);
   const [lightBoxIsActive, setLightBoxIsActive] = useState(false);
   const [userId, setUserId] = useState<number | null>(null);
   const [error, setError] = useState<Error | null>(null);
   const [errorTime, setErrorTime] = useState(3);
+  const [storeItems, setStoreItems] = useState(gameConfig.store);
+  const [isLoading, setIsLoading] = useState(false);
 
-  // EMIL
-  // It should be possible to add infinite drills on each resource (however many the user has)
-
-  // JOE
-  // Transaction table
-  // Add dev buttons to prototype
-
-  // DONE POST /user/login check if user exists
-  // DONE GET /user/USER_ID/stakes get stake event
-  // DONE POST /user/USER_ID/stakes/claim claim stake
-  // DONE POST /user/USER_ID/stakes/start start stake
-  // DONE GET /user/USER_ID/bank-account get balance
-  // DONE PUT /user/USER_ID/bank-account sell resource
-  // DONE GET /user/USER_ID/inventory-items get inventory items
-  // DONE POST /user/USER_ID/inventory-items buy item
-  // DONE GET /user/USER_ID/staking-sources get staking sources
-  // DONE POST /user/USER_ID/staking-sources create staking source
+  const isOwned = (storeItemId: string) => {
+    if (inventoryItems) {
+      return inventoryItems?.some((item) => item.storeItem.id == storeItemId);
+    } else {
+      return false;
+    }
+  };
 
   useEffect(() => {
     const fetchUser = async (wallet: string) => {
@@ -104,14 +89,26 @@ export default function Home() {
     fetchUser("abcdefg"); // Public key goes here
     // Nico is there a better way of checking if a user is logged in?
     if (userId) {
-      setStoreItems(gameConfig.store);
       fetchBankAccount();
       fetchStakingSources();
       fetchInventoryItems();
       fetchStakes();
     }
+
+    setIsLoading(!isLoading);
   }, [userId]);
 
+  // Update data
+  useEffect(() => {
+    const updatedStoreItems = storeItems.map((storeItem) => {
+      return {
+        ...storeItem,
+        isOwned: isOwned(storeItem.id),
+      };
+    });
+    updatedStoreItems && setStoreItems(updatedStoreItems);
+  }, [inventoryItems]);
+
   // Hide error automatically
   useEffect(() => {
     if (error) {
@@ -214,7 +211,7 @@ export default function Home() {
 
       if (response.status == 200) {
         // Return success message
-        console.log(data.message);
+        console.log(data);
       }
 
       if (response.status == 400) {
@@ -249,7 +246,7 @@ export default function Home() {
   };
 
   if (!userId) return <p>Please login</p>;
-
+  console.log(inventoryItems);
   return (
     <>
       {error && (
@@ -277,8 +274,8 @@ export default function Home() {
           upgradeInventoryItem={upgradeInventoryItem}
         />
         <StoreItemView
-          storeItems={storeItems}
           inventoryItems={inventoryItems}
+          storeItems={storeItems}
           buyStoreItem={buyStoreItem}
         />
       </div>
diff --git a/typings.d.ts b/typings.d.ts
index 0c82274..844224b 100644
--- a/typings.d.ts
+++ b/typings.d.ts
@@ -54,6 +54,7 @@ export interface IStoreItem {
     price: number;
     claimBoost: number;
   }[];
+  isOwned: boolean;
 }
 
 export interface IResourceAccount {