Rework resource bar to use new resource manager

src/components/ResourceBar.astro

@@ -13,10 +13,7 @@ const resources = await getUserResources(new ObjectId(Astro.cookies.get('userid'
 
 const resourceArray = [];
 for(const key in resources) {
-    resourceArray.push({
+    resourceArray.push(resources[key as never]);
-        name: key,
-        amount: resources[key as never]
-    });
 }
 ---
 <div id="resourcebar">
@@ -28,6 +25,7 @@ for(const key in resources) {
             <div class="resourcebar-item"
               data-res-type={resourceTypes.find(x => x.name === res.name)?.type ?? "solid"}
               data-res-amount={res.amount}
+              data-res-mining-rate={res.perHourMiningRate}
               style={(resourceTypes.find(x => x.name === res.name)?.type ?? "solid") === "solid" ? "" : "display: none;"}
             >
                 <div class="resourcebar-item-icon">
@@ -35,11 +33,11 @@ for(const key in resources) {
                 </div>
                 <div class="resourcebar-item-text-wrapper" data-resname={res.name}>
                     <div class="resourcebar-item-text">{resourceLang[`Label_${res.name}`]}</div>
-                    <div class="resourcebar-item-amount">{res.amount}</div>
+                    <div class="resourcebar-item-amount">{Math.floor(res.amount).toString()}</div>
                 </div>
                 <div class="resourcebar-item-tooltip">
-                    <div class="resourcebar-item-tooltip-name">{resBarLang['Label_avaliable']} - <span class="resourcebar-item-tooltip-avaliable">{res.amount.toString()}</span></div>
+                    <div class="resourcebar-item-tooltip-name">{resBarLang['Label_avaliable']} - <span class="resourcebar-item-tooltip-avaliable">{Math.floor(res.amount).toString()}</span></div>
-                    <div class="resourcebar-item-tooltip-name">{resBarLang['Label_production']} - <span class="resourcebar-item-tooltip-production">{'69'}</span></div>
+                    <div class="resourcebar-item-tooltip-name">{resBarLang['Label_production']} - <span class="resourcebar-item-tooltip-production">{res.perHourMiningRate.toString()}</span></div>
                     <div class="resourcebar-item-tooltip-name">{resBarLang['Label_capacity']} - <span class="resourcebar-item-tooltip-capacity">{'21372137'}</span></div>
                 </div>
             </div>    
@@ -132,36 +130,24 @@ for(const key in resources) {
 
 <script>
     function numWithPrefix(x: number) {
+        x = Math.floor(x);
         if(x < 1_000) return x.toString();
         if(x < 1_000_000) return (x / 1_000).toFixed(2) + "k";
         if(x < 1_000_000_000) return (x / 1_000_000).toFixed(2) + "M";
         return x.toString();
     }
-    
-    const perSecondProduction = {
-        "coal": 10,
-        "iron": 15,
-        "gold": 200,
-
-        "water": 5,
-        "sulfuricAcid": 1,
-        "liquidNitrogen": 2,
-
-        "hydrogen": 5,
-        "oxygen": 50,
-        "helium3": 1
-    }
 
     setInterval(() => {
         const resourcebarItems = document.getElementById('resourcebar')?.querySelectorAll('.resourcebar-item');
 
         resourcebarItems?.forEach((item: any) => {
-            const resourceName = (item.querySelector('.resourcebar-item-text-wrapper') as HTMLElement)?.dataset.resname ?? '';
+            const resourceAmount = parseFloat(item.dataset.resAmount ?? '0');
-            const resourceAmount = parseInt(item.dataset.resAmount ?? '0');
+            const miningRate = parseInt(item.dataset.resMiningRate ?? '0') / 3600;
-            const newAmount = resourceAmount + perSecondProduction[resourceName as never];
+            const newAmount = resourceAmount + miningRate;
+
             item.dataset.resAmount = newAmount.toString();
             (item.querySelector('.resourcebar-item-amount') as HTMLElement).innerHTML = numWithPrefix(newAmount);
-            (item.querySelector('.resourcebar-item-tooltip .resourcebar-item-tooltip-avaliable') as HTMLElement).innerHTML = newAmount.toString();
+            (item.querySelector('.resourcebar-item-tooltip .resourcebar-item-tooltip-avaliable') as HTMLElement).innerHTML = Math.floor(newAmount).toString();
         });
     }, 1_000);
 

src/lib/utils/resourceManager.ts

@@ -4,6 +4,67 @@ import { Users } from "../db/mongodb";
 import type DBResource from "../../types/DBResource";
 import type Resource from "../../types/Resource";
 
+export const createInitialResources = async (id: ObjectId) => {
+    const resources: Array<DBResource> = [
+        {
+            name: "coal",
+            amount: 11,
+            lastUpdated: new Date(),
+            perHourMiningRate: 11
+        },
+        {
+            name: "iron",
+            amount: 22,
+            lastUpdated: new Date(),
+            perHourMiningRate: 22
+        },
+        {
+            name: "gold",
+            amount: 33,
+            lastUpdated: new Date(),
+            perHourMiningRate: 33
+        },
+        {
+            name: "water",
+            amount: 44,
+            lastUpdated: new Date(),
+            perHourMiningRate: 44
+        },
+        {
+            name: "sulfuricAcid",
+            amount: 55,
+            lastUpdated: new Date(),
+            perHourMiningRate: 55
+        },
+        {
+            name: "liquidNitrogen",
+            amount: 66,
+            lastUpdated: new Date(),
+            perHourMiningRate: 66
+        },
+        {
+            name: "hydrogen",
+            amount: 77,
+            lastUpdated: new Date(),
+            perHourMiningRate: 77
+        },
+        {
+            name: "oxygen",
+            amount: 88,
+            lastUpdated: new Date(),
+            perHourMiningRate: 88
+        },
+        {
+            name: "helium3",
+            amount: 99,
+            lastUpdated: new Date(),
+            perHourMiningRate: 99
+        }
+    ];
+
+    updateUserResources(id, resources);
+}
+
 export const getUserResources = async (id: ObjectId): Promise<Array<DBResource>> => {
     const user = await getUserById(id);