Add tooltip to resourcebar

src/components/ResourceBar.astro

@@ -4,8 +4,10 @@ import { getUserResources } from '../lib/utils/resourceManager';
 import { getHighestWeightedLanguage, getLocales } from '../lib/lang/langDriver';
 
 import resourceTypes from '../lib/data/resources.json';
+import format from '../lib/utils/format';
 
 const resourceLang = await getLocales(getHighestWeightedLanguage(Astro.request.headers.get('accept-language')), 'resources');
+const resBarLang = await getLocales(getHighestWeightedLanguage(Astro.request.headers.get('accept-language')), 'resourcebar');
 
 const resources = await getUserResources(new ObjectId(Astro.cookies.get('userid')?.value ?? ''));
 
@@ -23,7 +25,11 @@ for(const key in resources) {
     </div>
     <div id="resourcebar-elements" class="resourcebar-elements">
         {resourceArray.map(res =>
-            <div class="resourcebar-item" data-res-type={resourceTypes.find(x => x.name === res.name)?.type ?? "solid"} style={(resourceTypes.find(x => x.name === res.name)?.type ?? "solid") === "solid" ? "" : "display: none;"}>
+            <div class="resourcebar-item"
+              data-res-type={resourceTypes.find(x => x.name === res.name)?.type ?? "solid"}
+              data-res-amount={res.amount}
+              style={(resourceTypes.find(x => x.name === res.name)?.type ?? "solid") === "solid" ? "" : "display: none;"}
+            >
                 <div class="resourcebar-item-icon">
                     <img src={resourceTypes.find(x => x.name === res.name)?.icon ?? "#"} alt={res.name} />    
                 </div>
@@ -31,6 +37,11 @@ for(const key in resources) {
                     <div class="resourcebar-item-text">{resourceLang[`Label_${res.name}`]}</div>
                     <div class="resourcebar-item-amount">{res.amount}</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_production']} - <span class="resourcebar-item-tooltip-production">{'69'}</span></div>
+                    <div class="resourcebar-item-tooltip-name">{resBarLang['Label_capacity']} - <span class="resourcebar-item-tooltip-capacity">{'21372137'}</span></div>
+                </div>
             </div>    
         )}
     </div>
@@ -75,6 +86,7 @@ for(const key in resources) {
     display: flex;
     flex-direction: row;
     padding-left: 15px;
+    position: relative;
 }
 
 .resourcebar-item-icon {
@@ -102,36 +114,55 @@ for(const key in resources) {
 .resourcebar-item-amount {
     font-size: 1.2em;
 }
+
+.resourcebar-item .resourcebar-item-tooltip {
+    position: absolute;
+    background-color: gray;
+    margin-top: 70px;
+    width: 150%;
+    border-radius: 10px;
+    transition: opacity 1s;
+    opacity: 0;
+}
+
+.resourcebar-item:hover .resourcebar-item-tooltip {
+    opacity: 1;
+}
 </style>
 
 <script>
+    function numWithPrefix(x: number) {
+        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 resourcebar = document.getElementById('resourcebar');
+        const resourcebarItems = document.getElementById('resourcebar')?.querySelectorAll('.resourcebar-item');
-        const resourcebarItems = resourcebar?.querySelectorAll('.resourcebar-item');
 
-        const perSecondProduction = {
+        resourcebarItems?.forEach((item: any) => {
-            "coal": 10,
-            "iron": 15,
-            "gold": 20,
-
-            "water": 5,
-            "sulfuricAcid": 1,
-            "liquidNitrogen": 2,
-
-            "hydrogen": 5,
-            "oxygen": 50,
-            "helium3": 1
-        }
-
-        resourcebarItems?.forEach(item => {
             const resourceName = (item.querySelector('.resourcebar-item-text-wrapper') as HTMLElement)?.dataset.resname ?? '';
-            const resourceAmount = parseInt(item.querySelector('.resourcebar-item-amount')?.innerHTML ?? '0');
+            const resourceAmount = parseInt(item.dataset.resAmount ?? '0');
-            const element = item.querySelector('.resourcebar-item-amount');
+            const newAmount = resourceAmount + perSecondProduction[resourceName as never];
-
+            item.dataset.resAmount = newAmount.toString();
-            if(!element) return;
+            (item.querySelector('.resourcebar-item-amount') as HTMLElement).innerHTML = numWithPrefix(newAmount);
-
+            (item.querySelector('.resourcebar-item-tooltip .resourcebar-item-tooltip-avaliable') as HTMLElement).innerHTML = newAmount.toString();
-            element.innerHTML = (resourceAmount + perSecondProduction[resourceName as never]).toString();
+        });
-        })
     }, 1_000);
 
     document.querySelector(".resourcebar-item-identifier")?.addEventListener("click", () => {

src/lib/lang/en/resourcebar.json

@@ -1,7 +1,7 @@
 {
     "Label": {
-        "avaliable": "Avaliable: {}",
+        "avaliable": "Avaliable",
-        "production": "Production: {}/h",
+        "production": "Production",
-        "capacity": "Storage capacity: {}"
+        "capacity": "Storage capacity"
     }
 }