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">₡</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
+}