Resource fixes!

[browser-rts.git] / src / render / topbar.ts

diff --git a/src/render/topbar.ts b/src/render/topbar.ts
index e1261374385a3b707a422b4ca98d5457b6e9942f..94313c55f411b90cd4f5936de818491dc7bde61a 100644 (file)
--- a/src/render/topbar.ts
+++ b/src/render/topbar.ts
@@ -1,13 +1,42 @@
 import { City } from "../repository/city";
 
-export function topbar(city: City): string {
+type Usage = {
+  foodUsagePerTick: number;
+  foodProductionPerTick: number;
+  energyUsagePerTick: number;
+  energyProductionPerTick: number;
+}
+
+
+export function topbar(city: City & Usage): string {
+  const foodRateOfChange = city.foodProductionPerTick - city.foodUsagePerTick;
+  const energyRateOfChange = city.energyProductionPerTick - city.energyUsagePerTick;
     const oob = `
     <div class="col" id="info-bar" hx-swap-oob="true">
-    <span><b>Gold:</b> ${city.gold.toLocaleString()}</span>
-    <span><b>Ore:</b> ${city.ore.toLocaleString()}</span>
-    <span><b>Logs:</b> ${city.logs.toLocaleString()}</span>
+    <span>
+      <b data-augmented-ui="all-hex border" title="Credits">&#8353;</b>
+      <span class="text">${city.credits.toLocaleString()}</span>
+    </span>
+    <span>
+      <b data-augmented-ui="all-hex border" title="Alloys">A</b>
+      <span class="text">${city.alloys.toLocaleString()}</span>
+    </span>
+    <span>
+      <b data-augmented-ui="all-hex border" title="Food">F</b>
+      <span class="text">
+      ${city.food.toLocaleString()}
+      <span class="rate-of-change ${foodRateOfChange < 0 ? 'danger-text': 'success-text'}">${foodRateOfChange.toLocaleString()}</span>
+      </span>
+    </span>
+    <span>
+      <b data-augmented-ui="all-hex border" title="Energy">E</b>
+      <span class="text">
+      ${city.energy.toLocaleString()}
+      <span class="rate-of-change ${energyRateOfChange < 0 ? 'danger-text': 'success-text'}">${energyRateOfChange.toLocaleString()}</span>
+      </span>
+    </span>
     </div>
     `;
 
     return oob;
-}
\ No newline at end of file
+}