Redesign resource bar

src/components/NavBar.astro

@@ -190,7 +190,7 @@ const hasUnreadMail = await checkForUnreadMails(new ObjectId(userId));
 <style>
 nav {
     background-color: rgb(56, 59, 99);
-    border-radius: 10px;
+    border-radius: 10px 10px 0px 0px;
 }
 
 nav ul {

src/components/ResourceBar.astro

@@ -35,6 +35,12 @@ if(!(planet instanceof SystemManager)) {
         "hydrogen-tank": "hydrogen",
         "oxygen-tank": "oxygen",
         "helium3-tank": "helium-3",
+        "uranium-container": "uranium",
+        "oil-tank": "oil",
+        "diesel-tank": "diesel",
+        "kerosene-tank": "kerosene",
+        "deuterium-tank": "deuterium",
+        "tritium-tank": "tritium",
     }
 
     resourceArray.forEach(res => {
@@ -53,21 +59,27 @@ if(!(planet instanceof SystemManager)) {
 }
 ---
 <div id="resourcebar">
-    <!-- Energy: <span class={`${planet.energy.consumption > planet.energy.production ? "prod-full" : planet.energy.consumption >= (planet.energy.production * 0.9) ? "prod-almost-full" : ""}`}>{planet.energy.consumption}/{planet.energy.production}</span> -->
+    <div class="resbar-item">
-    <div class="resourcebar-item">
         <Image src="/images/resources/energy.png" alt="energy" class="icon" width={32} height={32} />
-        <div class="text">
+        <span class={`res-amount ${planet.energy.consumption > planet.energy.production ? "prod-full" : planet.energy.consumption >= (planet.energy.production * 0.9) ? "prod-almost-full" : ""}`}>{planet.energy.production - planet.energy.consumption}</span>
-            <span class="line1"><!--{getName(lang, 'resources', 'energy')}-->Energy</span>
-            <span class={`line2 ${planet.energy.consumption > planet.energy.production ? "prod-full" : planet.energy.consumption >= (planet.energy.production * 0.9) ? "prod-almost-full" : ""}`}>{planet.energy.consumption}/{planet.energy.production}</span>
-        </div>
         <div class="resourcebar-item-tooltip">
+            <span class="resourcebar-item-tooltip-title">Energy</span>
             <span class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'production')}</span><span class={`resourcebar-item-tooltip-amount`}>{planet.energy.production}</span>
             <span class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'consumption')}</span><span class="resourcebar-item-tooltip-amount">{planet.energy.consumption}</span>
             <span class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'balance')}</span><span class={`resourcebar-item-tooltip-amount ${planet.energy.consumption > planet.energy.production ? "prod-full" : planet.energy.consumption >= (planet.energy.production * 0.9) ? "prod-almost-full" : ""}`}>{planet.energy.production - planet.energy.consumption}</span>
         </div>
     </div>
+    <div class="resbar-item">
+        <Image src="/images/resources/stellar-quartz.png" alt="stellar-quartz" class="icon" width={32} height={32} />
+        <span class={`res-amount`}>0</span>
+        <div class="resourcebar-item-tooltip">
+            <span class="resourcebar-item-tooltip-title">Stellar Quartz</span>
+            <span class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'avaliable')}</span><span class={`resourcebar-item-tooltip-amount`}>0</span>
+        </div>
+    </div>
+    <div class="horizontal-divider"></div>
     {resourceArray.map(res =>
-        <div class="resourcebar-item resourcebar-iterable" id={`resource-${res.id}`}
+        <div class="resbar-item resourcebar-iterable" id={`resource-${res.id}`}
           data-res-type={resourceTypes.find(x => x.id === res.id)?.type ?? "solid"}
           data-res-id={res.id}
           data-res-amount={res.amount}
@@ -75,11 +87,9 @@ if(!(planet instanceof SystemManager)) {
           data-res-capacity={res.capacity}
         >
             <Image src={resourceTypes.find(x => x.id === res.id)?.icon ?? "#"} alt={res.id} class="icon" width={32} height={32} />
-            <div class="text" data-resname={res.id}>
+            <span class={`res-amount ${res.amount >= res.capacity ? "prod-full" : res.amount >= (res.capacity * 0.9) ? "prod-almost-full" : ""}`}>0</span>
-                <span class="line1">{getName(lang, 'resources', res.id)}</span>
-                <span class={`line2 ${res.amount >= res.capacity ? "prod-full" : res.amount >= (res.capacity * 0.9) ? "prod-almost-full" : ""}`}></span>
-            </div>
             <div class="resourcebar-item-tooltip">
+                <span class="resourcebar-item-tooltip-title">{getName(lang, 'resources', res.data.id)}</span>
                 <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.amount >= res.capacity ? "prod-full" : res.amount >= (res.capacity * 0.9) ? "prod-almost-full" : ""}`}>{res.amount >= res.capacity ? "0" : 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">{res.capacity.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}</span>
@@ -90,97 +100,53 @@ if(!(planet instanceof SystemManager)) {
 <style>
 #resourcebar {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    padding: 10px 20px;
     background: linear-gradient(135deg, #565656, #4a4a4a);
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
     position: sticky;
     top: 0;
-    left: 0;
-    right: 0;
     z-index: 1000;
+    border-radius: 0px 0px 10px 10px;
+    padding-top: 4px;
+    padding-bottom: 4px;
 }
 
-.resourcebar-item {
+.horizontal-divider {
+    width: 1px;
+    height: 32px;
+    background-color: #b0b0b0;
+    margin-left: 20px;
+}
+
+.res-amount {
+    color: #fff;
+}
+
+.resbar-item {
     display: flex;
-    align-items: center;
+    flex-direction: row;
-    margin: 0 10px;
+    padding-left: 10px;
+}
+
+.resbar-item span {
+    font-size: 14px;
+    font-weight: bold;
+    margin-top: 3px;
 }
 
 .icon {
     width: 24px;
     height: 24px;
-    margin-right: 10px;
+    margin-left: 10px;
+    margin-right: 5px;
 }
 
-.text {
+.resourcebar-item-tooltip-title {
-    display: flex;
+    font-size: 18px;
-    flex-direction: column;
-}
-
-.line1 {
-    font-size: 14px;
-    font-weight: bold;
     color: #fff;
-}
+    margin: 5px;
-
+    padding-bottom: 5px;
-.line2 {
+    border-bottom: 1px solid #b0b0b0;
-    font-size: 12px;
-    color: #b0b0b0;
-}
-
-@media (max-width: 768px) {
-    .status-bar {
-        padding: 10px 15px;
-    }
-
-    .icon {
-        width: 20px;
-        height: 20px;
-    }
-
-    .line1 {
-        font-size: 12px;
-    }
-
-    .line2 {
-        font-size: 10px;
-    }
-}
-
-@media (max-width: 480px) {
-    .status-bar {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-
-    .status-item {
-        width: 100%;
-        margin: 5px 0;
-    }
-}
-
-.resourcebar-item {
-    list-style: none;
-    display: flex;
-    flex-direction: row;
-    padding-left: 15px;
-    position: relative;
-}
-
-.resourcebar-item-icon {
-    width: 50px;
-    height: 50px;
-    margin-right: 8px;
-    margin-top: 8px;
-    margin-bottom: 8px;
-}
-
-.resourcebar-item-text-wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
 }
 
 .resourcebar-item-tooltip-name {
@@ -198,21 +164,13 @@ if(!(planet instanceof SystemManager)) {
     margin-bottom: 5px;
 }
 
-.prod-almost-full {
+.resbar-item .resourcebar-item-tooltip {
-    color: #ff9900;
-}
-
-.prod-full {
-    color: #ff0000;
-}
-
-.resourcebar-item .resourcebar-item-tooltip {
     position: absolute;
     display: flex;
     flex-direction: column;
     color: #b0b0b0;
     background-color: rgb(58, 58, 58);
-    margin-top: 220px;
+    margin-top: 32px;
     border-radius: 10px;
     min-width: 134px;
     transition: visibility 1s, opacity 1s;
@@ -220,10 +178,18 @@ if(!(planet instanceof SystemManager)) {
     opacity: 0;
 }
 
-.resourcebar-item:hover .resourcebar-item-tooltip {
+.resbar-item:hover .resourcebar-item-tooltip {
     visibility: visible;
     opacity: 1;
 }
+
+.prod-almost-full {
+    color: #ff9900;
+}
+
+.prod-full {
+    color: #ff0000;
+}
 </style>
 <script>
     function numWithPrefix(x: number) {
@@ -231,7 +197,7 @@ if(!(planet instanceof SystemManager)) {
         if(x < 1_000) return x.toString();
         if(x < 1_000_000) return (x / 1_000).toFixed(3) + "k";
         if(x < 1_000_000_000) return (x / 1_000_000).toFixed(3) + "M";
-        return x.toString();
+        return "1B+";
     }
 
     function numWithSeparator(x: number) {
@@ -247,17 +213,17 @@ if(!(planet instanceof SystemManager)) {
             const newAmount = resourceAmount + miningRate;
 
             item.dataset.resAmount = newAmount.toString();
-            (item.querySelector('.line2') as HTMLElement).innerHTML = numWithPrefix(newAmount);
+            (item.querySelector('.res-amount') as HTMLElement).innerHTML = numWithPrefix(newAmount);
             (item.querySelector('.resourcebar-item-tooltip-avaliable') as HTMLElement).innerHTML = numWithSeparator(newAmount);
 
             if(newAmount >= parseFloat(item.dataset.resCapacity ?? '0')) {
-                (item.querySelector('.line2') as HTMLElement).classList.remove('prod-almost-full');
+                (item.querySelector('.res-amount') as HTMLElement).classList.remove('prod-almost-full');
-                (item.querySelector('.line2') as HTMLElement).classList.add('prod-full');
+                (item.querySelector('.res-amount') as HTMLElement).classList.add('prod-full');
                 (item.querySelector('.resourcebar-item-tooltip-production') as HTMLElement).classList.remove('prod-almost-full');
                 (item.querySelector('.resourcebar-item-tooltip-production') as HTMLElement).classList.add('prod-full');
                 item.dataset.resMiningRate = '0';
             } else if(newAmount >= parseFloat(item.dataset.resCapacity ?? '0') * 0.9) {
-                (item.querySelector('.line2') as HTMLElement).classList.add('prod-almost-full');
+                (item.querySelector('.res-amount') as HTMLElement).classList.add('prod-almost-full');
                 (item.querySelector('.resourcebar-item-tooltip-production') as HTMLElement).classList.add('prod-almost-full');
             }
         });