From a7e7c4dbe934a834d14ac5c824b3c50a232429f5 Mon Sep 17 00:00:00 2001
From: Emil Nielsen <hej@emilnielsen.com>
Date: Thu, 27 Apr 2023 13:35:13 +0700
Subject: [PATCH] UI changes moons and items

---
 .../Components/Inventory/InventoryItem.tsx    | 149 ++++++++++--------
 src/app/Components/SelectDropdown.tsx         |   5 +-
 src/app/Components/Staking/StakingSource.tsx  |  27 ++--
 .../Components/Staking/StakingSourcesView.tsx |   2 +-
 src/app/Components/Store/StoreItem.tsx        |  52 ++++--
 src/app/page.tsx                              |   2 +-
 src/app/utils/page.tsx                        |   4 +-
 typings.d.ts                                  |   1 -
 8 files changed, 148 insertions(+), 94 deletions(-)

diff --git a/src/app/Components/Inventory/InventoryItem.tsx b/src/app/Components/Inventory/InventoryItem.tsx
index f068a24..03872a3 100644
--- a/src/app/Components/Inventory/InventoryItem.tsx
+++ b/src/app/Components/Inventory/InventoryItem.tsx
@@ -19,19 +19,57 @@ const InventoryItem = (props: {
     setCurrentUpgrade(currentUpdade);
   }, [props.inventoryItem]);
 
-  const isInUse = () => {
-    if (!props.stakes) return false;
-    return props.stakes.some((stake) => {
-      stake.inventoryItemId === props.inventoryItem.id;
-    });
+  const renderUpgradeButton = () => {
+    // If no staking source
+    if (!props.stakes) return "No staking source";
+
+    // If item is in use
+    if (
+      props.stakes.some((stake) => {
+        stake.inventoryItemId === props.inventoryItem.id;
+      })
+    )
+      return "In use";
+
+    // If item is maxxed
+    if (currentTierIndex === 4) return "Maxed";
+
+    // Show price
+    return (
+      <>
+        <button
+          onClick={() =>
+            props.upgradeInventoryItem(
+              props.inventoryItem.id,
+              props.inventoryItem.storeItem.id
+            )
+          }
+          className="bg-orange-600 rounded-full p-1"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            strokeWidth={2.5}
+            stroke="currentColor"
+            className="w-6 h-6"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75"
+            />
+          </svg>
+        </button>
+        <span className="ml-1">
+          {`$${
+            props.inventoryItem.storeItem.upgrades[currentTierIndex + 1].price
+          }`}
+        </span>
+      </>
+    );
   };
 
-  const getNextUpgradePrice = () => {
-    if (currentTierIndex === 4) return "Maxed";
-    return `$${
-      props.inventoryItem.storeItem.upgrades[currentTierIndex + 1].price
-    }`;
-  };
   return (
     <CardLayout>
       <div className="md:flex gap-4">
@@ -42,59 +80,42 @@ const InventoryItem = (props: {
           <p className="text-sm mb-3">
             {props.inventoryItem.storeItem.description}
           </p>
-          <p className="font-bold mt-4">Base Yield</p>
-          <p>{props.inventoryItem.storeItem.claimAmount}</p>
-          <p className="font-bold mb-1 mt-4">Tier</p>
-          <div className="flex items-center">
-            {currentUpgrade &&
-              props.inventoryItem.storeItem.upgrades.map((upgrade, id) => {
-                if (upgrade.tier <= currentUpgrade.tier) {
-                  return (
-                    <span key={id} className="bg-green-600 px-4 py-2"></span>
-                  );
-                } else {
-                  return (
-                    <span key={id} className="bg-slate-200 px-4 py-2"></span>
-                  );
-                }
-              })}
-            <p className="font-bold ml-1">
-              (+{currentUpgrade && currentUpgrade.claimBoost})
-            </p>
-          </div>
-          <p className="font-bold mb-1 mt-4">Upgrade</p>
-          <div className="flex items-center">
-            {isInUse() ? (
-              <button className="bg-slate-400 text-slate-600 px-4 py-2 rounded-lg font-bold text-center cursor-not-allowed">
-                In Use
-              </button>
-            ) : (
-              <button
-                onClick={() =>
-                  props.upgradeInventoryItem(
-                    props.inventoryItem.id,
-                    props.inventoryItem.storeItem.id
-                  )
-                }
-                className="bg-green-600 rounded-full p-1"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  strokeWidth={2.5}
-                  stroke="currentColor"
-                  className="w-6 h-6"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75"
-                  />
-                </svg>
-              </button>
-            )}
-            <span className="ml-1">({getNextUpgradePrice()})</span>
+          <div className="grid grid-cols-4 gap-4">
+            <div className="col-span-1">
+              <p className="font-bold mt-4">Yield</p>
+              <p>
+                {props.inventoryItem.storeItem.claimAmount} (+
+                {currentUpgrade && currentUpgrade.claimBoost})
+              </p>
+            </div>
+            <div className="col-span-3">
+              <p className="font-bold mb-1 mt-4">Tier</p>
+              <div className="flex">
+                <div className="flex items-center mr-2">
+                  {currentUpgrade &&
+                    props.inventoryItem.storeItem.upgrades.map(
+                      (upgrade, id) => {
+                        if (upgrade.tier <= currentUpgrade.tier) {
+                          return (
+                            <span
+                              key={id}
+                              className="bg-green-600 px-2 py-2 border border-black"
+                            ></span>
+                          );
+                        } else {
+                          return (
+                            <span
+                              key={id}
+                              className="bg-slate-200 px-2 py-2 border border-black"
+                            ></span>
+                          );
+                        }
+                      }
+                    )}
+                </div>
+                <div className="flex items-center">{renderUpgradeButton()}</div>
+              </div>
+            </div>
           </div>
         </div>
         <div className="relative object-contain w-48 h-48 mt-4 md:mt-0">
diff --git a/src/app/Components/SelectDropdown.tsx b/src/app/Components/SelectDropdown.tsx
index 4c6cc99..546400f 100644
--- a/src/app/Components/SelectDropdown.tsx
+++ b/src/app/Components/SelectDropdown.tsx
@@ -23,7 +23,10 @@ const SelectDropdown: React.FC<ISelectDropdownProps> = (props) => {
       onChange={handleChange}
       className="text-black flex-1 p-2 border border-gray-300 rounded-lg hover:cursor-pointer"
     >
-      <option value="">Select</option>
+      <option value="" className="font-bold">
+        Select resource to mine
+      </option>
+      <hr />
       {props.options.map((option, index) => (
         <option key={index} value={option.value}>
           {option.label}
diff --git a/src/app/Components/Staking/StakingSource.tsx b/src/app/Components/Staking/StakingSource.tsx
index bcb0262..3542a07 100644
--- a/src/app/Components/Staking/StakingSource.tsx
+++ b/src/app/Components/Staking/StakingSource.tsx
@@ -102,7 +102,7 @@ const StakingSource = (props: {
       return (
         <button
           onClick={() => handleClaim(props.stake.id)}
-          className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold text-center"
+          className="bg-green-600 text-white px-4 py-2 rounded-lg font-bold text-center"
         >
           Claim
         </button>
@@ -132,21 +132,28 @@ const StakingSource = (props: {
         <div className="bg-slate-900 md:rounded-xl p-4">
           <div className="">
             <h3 className="text-3xl font-bold mb-2">
-              {props.stakingSource.name}
+              {props.stakingSource.name}{" "}
+              <span>
+                (
+                {props.stakingSource.resourceWells.reduce(
+                  (x, y) => x + y.supply,
+                  0
+                )}
+                )
+              </span>
             </h3>
             <p className="text-sm">{props.stakingSource.description}</p>
           </div>
-          <div className="flex">
+          <h3 className="mt-4 mb-2 text-2xl font-bold">Inventory</h3>
+          <div className="">
             {activeStakes.length > 0 && (
               <div className="">
-                <p className="font-bold mt-4 mb-2">Active Drills</p>
                 {activeStakes.map((stake, id) => (
                   <div
                     key={id}
                     className="border border-white rounded-xl p-3 mb-2 bg-black/20"
                   >
-                    <p>
-                      <span className="font-bold">Drill: </span>
+                    <p className="font-bold text-xl mb-2">
                       {props.inventoryItems &&
                         getObjectFromArray(
                           props.inventoryItems,
@@ -169,7 +176,6 @@ const StakingSource = (props: {
             )}
             {props.inventoryItems && (
               <div className="">
-                <p className="font-bold mt-4 mb-2">Inactive Drills</p>
                 {props.inventoryItems.map(
                   (item, id) =>
                     !isActive(item) && (
@@ -177,14 +183,15 @@ const StakingSource = (props: {
                         key={id}
                         className="border border-white rounded-xl p-3 mb-2 bg-black/20"
                       >
-                        <p className="font-bold">{item.storeItem.name}</p>
-                        <p className="mt-2">Select Resource</p>
+                        <p className="font-bold text-xl mb-2">
+                          {item.storeItem.name}
+                        </p>
                         <div className="flex">
                           <SelectDropdown
                             options={props.stakingSource.resourceWells.map(
                               (well): IOption => ({
                                 value: well.id,
-                                label: well.resourceType,
+                                label: well.resourceType + ` (${well.supply})`,
                               })
                             )}
                             onChange={(value) =>
diff --git a/src/app/Components/Staking/StakingSourcesView.tsx b/src/app/Components/Staking/StakingSourcesView.tsx
index ed8f9fe..91644c2 100644
--- a/src/app/Components/Staking/StakingSourcesView.tsx
+++ b/src/app/Components/Staking/StakingSourcesView.tsx
@@ -20,7 +20,7 @@ const StakingSourcesView = (props: {
         <div className="flex items-center mb-4">
           <h2 className="text-3xl text-white font-bold">Your Moons</h2>
           <button
-            className="bg-green-600 rounded-full ml-2 p-1 inline"
+            className="bg-green-600 text-white rounded-full ml-2 p-1 inline"
             onClick={() => props.createStakingSource()}
           >
             <svg
diff --git a/src/app/Components/Store/StoreItem.tsx b/src/app/Components/Store/StoreItem.tsx
index 3a80f3d..13afbb9 100644
--- a/src/app/Components/Store/StoreItem.tsx
+++ b/src/app/Components/Store/StoreItem.tsx
@@ -17,25 +17,11 @@ const StoreItem = (props: {
           <div className="py-4 my-2">
             <button
               onClick={() => props.buyStoreItem(props.storeItem.id)}
-              className="bg-slate-100 text-slate-900 px-4 py-2 rounded-lg font-bold w-auto text-center"
+              className="bg-green-600 text-white px-4 py-2 rounded-lg font-bold w-auto text-center"
             >
               Buy | ${props.storeItem.price}
             </button>
           </div>
-          <div className="flex">
-            <div className="mr-3">
-              <p className="font-bold">Base Yield</p>
-              <p className="">{props.storeItem.claimAmount}</p>
-            </div>
-            <div className="">
-              <p className="font-bold">Upgrades</p>
-              {props.storeItem.upgrades.map((upgrade, id) => (
-                <span key={id} className="mr-2">
-                  {upgrade.claimBoost}
-                </span>
-              ))}
-            </div>
-          </div>
         </div>
         <div className="relative object-contain w-48 h-48">
           <Image
@@ -46,6 +32,42 @@ const StoreItem = (props: {
           />
         </div>
       </div>
+      <div className="flex flex-grow mt-4">
+        <div className="mr-3 flex-grow">
+          <p className="font-bold">Yield</p>
+          <p className="">{props.storeItem.claimAmount}</p>
+        </div>
+        <div className="mr-3 flex-grow">
+          <p className="font-bold">Completion Time</p>
+          <p className="">{props.storeItem.completionTimeInMins} min</p>
+        </div>
+        <div className="mr-3 flex-grow">
+          <p className="font-bold">Yield / Hr.</p>
+          <p className="">
+            {(
+              (props.storeItem.claimAmount /
+                props.storeItem.completionTimeInMins) *
+              60
+            ).toFixed(0)}
+          </p>
+        </div>
+      </div>
+      <p className="font-bold mt-4  ">Tiers</p>
+      <div className="mt-4 flex f-full">
+        {props.storeItem.upgrades.map((upgrade, id) => (
+          <table key={id} className="table-auto flex-grow">
+            <tr className="border">
+              <td colSpan={2} className="p-2 text-center">
+                {upgrade.tier}
+              </td>
+            </tr>
+            <tr>
+              <td className="p-2 border">${upgrade.price}</td>
+              <td className="p-2 border">+{upgrade.claimBoost}</td>
+            </tr>
+          </table>
+        ))}
+      </div>
     </CardLayout>
   );
 };
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 0b1f272..8171ce2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -346,7 +346,7 @@ export default function Home() {
     return <p>Loading...</p>;
   }
 
-  console.log(bankAccount);
+  console.log(storeItems);
   return (
     <>
       <Navbar setUserId={setUserId} />
diff --git a/src/app/utils/page.tsx b/src/app/utils/page.tsx
index 35ec78b..673bee2 100644
--- a/src/app/utils/page.tsx
+++ b/src/app/utils/page.tsx
@@ -10,9 +10,11 @@ export default function Utils() {
   const [userId, setUserId] = useState<string>("");
 
   const clearUserData = async () => {
-    await fetch(`/api/user/${userId}/clear-data`, {
+    console.log("Clearing data..");
+    const response = await fetch(`/api/user/${userId}/clear-data`, {
       method: "POST",
     });
+    console.log(response);
   };
 
   const loadConfig = async () => {
diff --git a/typings.d.ts b/typings.d.ts
index 0f5e117..8b1abd6 100644
--- a/typings.d.ts
+++ b/typings.d.ts
@@ -39,7 +39,6 @@ export interface IStakingSource {
   resourceChance: number | null
   resourceMinStartAmount: number | null
   resourceMaxStartAmount: number | null
-  size: number | undefined
 }
 
 export interface IInventoryItem {