Resource fixes!

[browser-rts.git] / src / render / kingdom-overview.ts

diff --git a/src/render/kingdom-overview.ts b/src/render/kingdom-overview.ts
index c6b5964c1d615ca4a57844b8ba3e2aafa2f21ae6..c035f7cbcec60921063e74f6d41c164402965f9d 100644 (file)
--- a/src/render/kingdom-overview.ts
+++ b/src/render/kingdom-overview.ts
@@ -1,54 +1,62 @@
 import { Account } from "../repository/accounts";
 import { CityWithLocation } from "../repository/city";
 import * as _ from 'lodash';
-import { topbar } from "./topbar";
 
-export function renderKingomOverview(city: CityWithLocation, account: Account): string {
+type Usage = {
+  foodUsagePerTick: number;
+  foodProductionPerTick: number;
+  energyUsagePerTick: number;
+  energyProductionPerTick: number;
+}
+
+export function renderKingomOverview(city: CityWithLocation & Usage, account: Account): string {
+  const foodRateOfChange = city.foodProductionPerTick - city.foodUsagePerTick;
+  const energyRateOfChange = city.energyProductionPerTick - city.energyUsagePerTick;
     return `
        <div hx-trigger="every 600s" hx-get="/poll/overview">
-       <h2 data-augmented-ui="tl-clip bl-clip none">Kingdom Overview</h2>
+       <h2 data-augmented-ui="tl-clip bl-clip none">Overview</h2>
        <table>
        <tr>
-               <th>Lord</th>
+               <th>Captain</th>
                <td>${account.username}</td>
                <th>Population</th>
                <td>${city.population.toLocaleString()}/${_.max([city.farms * 70, city.population])}</td>
        </tr>
        <tr>
-               <th>Land</th>
+               <th>Space</th>
                <td>${city.totalSpace.toLocaleString()} (${Math.ceil(city.usedSpace/city.totalSpace * 100)}% used)</td>
                <th>Soldiers</th>
                <td>${city.soldiers.toLocaleString()}</td>
        </tr>
        <tr>
                <th>Location</th>
-               <td>${city.sector_id} - (${city.location_x},${city.location_y})</td>
+               <td>Sector ${city.sector_id} - (${city.location_x},${city.location_y})</td>
                <th>Attackers</th>
                <td>${city.attackers.toLocaleString()}</td>
        </tr>
        <tr>
-               <th>Gold</th>
-               <td>${city.gold.toLocaleString()}</td>
+               <th>Credits</th>
+               <td>${city.credits.toLocaleString()}</td>
                <th>Defenders</th>
                <td>${city.defenders.toLocaleString()}</td>
        </tr>
        <tr>
-               <th>Ore</th>
-               <td>${city.ore.toLocaleString()}</td>
+               <th>Alloys</th>
+               <td>${city.alloys.toLocaleString()}</td>
                <th>Special Attackers</th>
                <td>${city.sp_attackers.toLocaleString()}</td>
        </tr>
        <tr>
-               <th>Logs</th>
-               <td>${city.logs.toLocaleString()}</td>
+               <th>Energy</th>
+               <td>${city.energy.toLocaleString()} (<span class="rate-of-change ${energyRateOfChange < 0 ? 'danger-text' : 'success-text'}">${energyRateOfChange.toLocaleString()}</span>)</td>
                <th>Special Defenders</th>
                <td>${city.sp_defenders.toLocaleString()}</td>
        </tr>
        <tr>
-               <th>Bushels</th>
-               <td>${city.bushels.toLocaleString()}</td>
+               <th>Food</th>
+               <td>${city.food.toLocaleString()} (<span class="rate-of-change ${foodRateOfChange < 0 ? 'danger-text' : 'success-text'}">${foodRateOfChange.toLocaleString()}</span>)</td>
        </tr>
        </table>
        </div>
-       ${topbar(city)}`;
+       `;
 }