Improve resource bar

src/components/ResourceBar.astro

@@ -4,7 +4,6 @@ import { getHighestWeightedLanguage, getLocales, getName } from '../lib/utils/la
 import { getAllResources } from '../lib/db/resources';
 import locationManager from '../lib/classes/managers/LocationManager';
 import { Resource } from '../lib/classes/managers/abstract/ResourceManager';
-import SystemManager from '../lib/classes/managers/SystemManager';
 
 const resourceTypes = await getAllResources();
 
@@ -24,74 +23,98 @@ for(const key of planet.resources.resources) {
 }
 ---
 <div id="resourcebar">
-    <div class="resourcebar-item-identifier">
+    {resourceArray.map(res =>
-        <div class="resourcebar-circle-id" data-type="solid"></div>
+        <div class="resourcebar-item"
-    </div>
+          data-res-type={resourceTypes.find(x => x.id === res.id)?.type ?? "solid"}
-    <div class="resourcebar-planetname">
+          data-res-id={res.id}
-        {planet instanceof SystemManager ? <span style="color: red;">{planet.data.name}</span> : planet.name}
+          data-res-amount={res.amount}
-    </div>
+          data-res-mining-rate={res.perHourMiningRate}
-    <div id="resourcebar-elements" class="resourcebar-elements">
+        >
-        {resourceArray.map(res =>
+            <img src={resourceTypes.find(x => x.id === res.id)?.icon ?? "#"} alt={res.id} class="icon" />
-            <div class="resourcebar-item"
+            <div class="text" data-resname={res.id}>
-              data-res-type={resourceTypes.find(x => x.id === res.id)?.type ?? "solid"}
+                <span class="line1">{getName(lang, 'resources', res.id)}</span>
-              data-res-id={res.id}
+                <span class="line2"></span>
-              data-res-amount={res.amount}
+            </div>
-              data-res-mining-rate={res.perHourMiningRate}
+            <div class="resourcebar-item-tooltip">
-              style={(resourceTypes.find(x => x.id === res.id)?.type ?? "solid") === "solid" ? "" : "display: none;"}
+                <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-icon">
+                <div class="resourcebar-item-tooltip-name">{getName(lang, 'general', 'capacity')} - <span class="resourcebar-item-tooltip-capacity">{'21372137'}</span></div>
-                    <img src={resourceTypes.find(x => x.id === res.id)?.icon ?? "#"} alt={res.id} />    
+            </div>
-                </div>
+        </div>    
-                <div class="resourcebar-item-text-wrapper" data-resname={res.id}>
+    )}
-                    <div class="resourcebar-item-text">{getName(lang, 'resources', res.id)}</div>
-                    <div class="resourcebar-item-amount">[fetching]</div>
-                </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>
-                </div>
-            </div>    
-        )}
-    </div>
 </div>
 <style>
 #resourcebar {
-    color: white;
-    background-color: blueviolet;
-    border-radius: 15px;
-    margin-top: 20px;
     display: flex;
-    flex-direction: row;
+    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;
 }
 
-.resourcebar-item-identifier {
+.resourcebar-item {
-    left: 25px;
-    flex-shrink: 0;
-    margin-left: 25px;
-}
-
-.resourcebar-circle-id {
-    width: 50px;
-    height: 50px;
-    background-color: #0f0;
-    border-radius: 25px;
-    margin-right: 8px;
-    margin-top: 8px;
-    margin-bottom: 8px;
-}
-
-.resourcebar-planetname {
-    margin-top: 8px;
-    font-size: 2.5em;
-    margin-left: 25px;
-}
-
-.resourcebar-elements {
-    flex-grow: 1;
     display: flex;
-    flex-direction: row;
+    align-items: center;
-    justify-content: space-evenly;
+    margin: 0 10px;
+}
+
+.icon {
+    width: 24px;
+    height: 24px;
+    margin-right: 10px;
+}
+
+.text {
+    display: flex;
+    flex-direction: column;
+}
+
+.line1 {
+    font-size: 14px;
+    font-weight: bold;
+    color: #fff;
+}
+
+.line2 {
+    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 {
@@ -120,18 +143,11 @@ for(const key of planet.resources.resources) {
     justify-content: center;
 }
 
-.resourcebar-item-text {
-    font-size: 1.5em;
-}
-
-.resourcebar-item-amount {
-    font-size: 1.2em;
-}
-
 .resourcebar-item .resourcebar-item-tooltip {
     position: absolute;
-    background-color: gray;
+    color: #b0b0b0;
-    margin-top: 70px;
+    background-color: rgb(58, 58, 58);
+    margin-top: 130px;
     width: 150%;
     border-radius: 10px;
     transition: visibility 1s, opacity 1s;
@@ -153,55 +169,19 @@ for(const key of planet.resources.resources) {
         return x.toString();
     }
 
-    setInterval(() => {
+    function init() {
         const resourcebarItems = document.getElementById('resourcebar')?.querySelectorAll('.resourcebar-item');
-
         resourcebarItems?.forEach((item: any) => {
             const resourceAmount = parseFloat(item.dataset.resAmount ?? '0');
             const miningRate = parseInt(item.dataset.resMiningRate ?? '0') / 3600;
             const newAmount = resourceAmount + miningRate;
 
             item.dataset.resAmount = newAmount.toString();
-            (item.querySelector('.resourcebar-item-amount') as HTMLElement).innerHTML = numWithPrefix(newAmount);
+            (item.querySelector('.line2') as HTMLElement).innerHTML = numWithPrefix(newAmount);
-            (item.querySelector('.resourcebar-item-tooltip .resourcebar-item-tooltip-avaliable') as HTMLElement).innerHTML = Math.floor(newAmount).toString();
+            (item.querySelector('.resourcebar-item-tooltip-avaliable') as HTMLElement).innerHTML = Math.floor(newAmount).toString();
         });
-    }, 1_000);
+    }
 
-    document.querySelector(".resourcebar-item-identifier")?.addEventListener("click", () => {
+    init();
-        switch((document.querySelector(".resourcebar-item-identifier")?.children[0] as HTMLElement)?.dataset.type) {
+    setInterval(init, 1_000);
-            case "solid":
-                (document.querySelector(".resourcebar-item-identifier")?.children[0] as HTMLElement).dataset.type = "liquid";
-                (document.querySelector(".resourcebar-item-identifier")?.children[0] as HTMLElement).style.backgroundColor = "#00f";
-                (document.getElementById("resourcebar-elements")?.querySelectorAll(".resourcebar-item") as NodeListOf<HTMLElement>).forEach(item => {
-                    if(item.dataset.resType === "liquid") {
-                        item.style.display = "";
-                    } else {
-                        item.style.display = "none";
-                    }
-                });
-                break;
-            case "liquid":
-                (document.querySelector(".resourcebar-item-identifier")?.children[0] as HTMLElement).dataset.type = "gas";
-                (document.querySelector(".resourcebar-item-identifier")?.children[0] as HTMLElement).style.backgroundColor = "#ff0";
-                (document.getElementById("resourcebar-elements")?.querySelectorAll(".resourcebar-item") as NodeListOf<HTMLElement>).forEach(item => {
-                    if(item.dataset.resType === "gas") {
-                        item.style.display = "";
-                    } else {
-                        item.style.display = "none";
-                    }
-                });
-                break;
-            case "gas":
-                (document.querySelector(".resourcebar-item-identifier")?.children[0] as HTMLElement).dataset.type = "solid";
-                (document.querySelector(".resourcebar-item-identifier")?.children[0] as HTMLElement).style.backgroundColor = "#0f0";
-                (document.getElementById("resourcebar-elements")?.querySelectorAll(".resourcebar-item") as NodeListOf<HTMLElement>).forEach(item => {
-                    if(item.dataset.resType === "solid") {
-                        item.style.display = "";
-                    } else {
-                        item.style.display = "none";
-                    }
-                });
-                break;
-        }
-    });
 </script>

src/layouts/LoggedIn.astro

@@ -21,14 +21,21 @@ const { title } = Astro.props;
 		<title>{title}</title>
 	</head>
 	<body>
-	    <NavBar loggedIn="true" active={Astro.props.id} />
+	    <div class="bars">
-	    <ResourceBar />
+			<NavBar loggedIn="true" active={Astro.props.id} />
+	    	<ResourceBar />
+		</div>
 		<slot />
 	</body>
 </html>
 <style>
-    html {
+html {
-		font-family: system-ui, sans-serif;
+	font-family: system-ui, sans-serif;
-		background: #13151a;
+	background: #13151a;
-	}
+	width: 100%;
+}
+
+.bars {
+	display: inline;
+}
 </style>