From 5caf20c680c65bee9711fc0693a8bba6339e4db9 Mon Sep 17 00:00:00 2001
From: Aelita4 <kontakt@mikorosa.pl>
Date: Tue, 14 Jan 2025 21:41:27 +0100
Subject: [PATCH] Improve resource bar tooltips

---
 src/components/ResourceBar.astro | 36 +++++++++++++++++++++++++-------
 1 file changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/components/ResourceBar.astro b/src/components/ResourceBar.astro
index d7afa0c..38cafc0 100644
--- a/src/components/ResourceBar.astro
+++ b/src/components/ResourceBar.astro
@@ -36,11 +36,11 @@ for(const key of planet.resources.resources) {
                 <span class="line2"></span>
             </div>
             <div class="resourcebar-item-tooltip">
-                <div class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'avaliable')} - <span class="resourcebar-item-tooltip-avaliable">{Math.floor(res.amount).toString()}</span></div>
-                <div class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'production')} - <span class="resourcebar-item-tooltip-production">{res.perHourMiningRate?.toString() ?? "0"}</span></div>
-                <div class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'capacity')} - <span class="resourcebar-item-tooltip-capacity">{'21372137'}</span></div>
+                <span class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'avaliable')}</span><span class="resourcebar-item-tooltip-amount resourcebar-item-tooltip-avaliable">{Math.floor(res.amount).toString()}</span>
+                <span class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'production')}</span><span class="resourcebar-item-tooltip-amount resourcebar-item-tooltip-production">{res.perHourMiningRate.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") ?? "0"}</span>
+                <span class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'capacity')}</span><span class="resourcebar-item-tooltip-amount resourcebar-item-tooltip-capacity">{'21372137'.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}</span>
             </div>
-        </div>    
+        </div>
     )}
 </div>
 <style>
@@ -143,13 +143,30 @@ for(const key of planet.resources.resources) {
     justify-content: center;
 }
 
+.resourcebar-item-tooltip-name {
+    font-size: 16px;
+    color: #b0b0b0;
+    margin-left: 5px;
+    margin-right: 5px;
+    margin-top: 5px;
+}
+
+.resourcebar-item-tooltip-amount {
+    font-size: 14px;
+    color: #fff;
+    margin-left: 5px;
+    margin-bottom: 5px;
+}
+
 .resourcebar-item .resourcebar-item-tooltip {
     position: absolute;
+    display: flex;
+    flex-direction: column;
     color: #b0b0b0;
     background-color: rgb(58, 58, 58);
-    margin-top: 130px;
-    width: 150%;
+    margin-top: 220px;
     border-radius: 10px;
+    min-width: 134px;
     transition: visibility 1s, opacity 1s;
     visibility: hidden;
     opacity: 0;
@@ -169,6 +186,11 @@ for(const key of planet.resources.resources) {
         return x.toString();
     }
 
+    function numWithSeparator(x: number) {
+        x = Math.floor(x);
+        return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    }
+
     function init() {
         const resourcebarItems = document.getElementById('resourcebar')?.querySelectorAll('.resourcebar-item');
         resourcebarItems?.forEach((item: any) => {
@@ -178,7 +200,7 @@ for(const key of planet.resources.resources) {
 
             item.dataset.resAmount = newAmount.toString();
             (item.querySelector('.line2') as HTMLElement).innerHTML = numWithPrefix(newAmount);
-            (item.querySelector('.resourcebar-item-tooltip-avaliable') as HTMLElement).innerHTML = Math.floor(newAmount).toString();
+            (item.querySelector('.resourcebar-item-tooltip-avaliable') as HTMLElement).innerHTML = numWithSeparator(newAmount);
         });
     }