src/render/kingdom-overview.ts

   1 import { Account } from "../repository/accounts";
   2 import { CityWithLocation, CityRepository } from "../repository/city";
   3 import * as _ from 'lodash';
   4
   5 function percent(curr: number, max: number, cap?: number): number {
   6   const val = Math.ceil((curr/max) * 100);
   7   if(cap && val > cap) {
   8     return cap;
   9   }
  10
  11   return val;
  12 }
  13
  14 type Usage = {
  15   foodUsagePerTick: number;
  16   foodProductionPerTick: number;
  17   energyUsagePerTick: number;
  18   energyProductionPerTick: number;
  19 }
  20
  21 const cityRepo = new CityRepository();
  22
  23 export function renderKingomOverview(city: CityWithLocation & Usage, account: Account): string {
  24   const foodRateOfChange = city.foodProductionPerTick - city.foodUsagePerTick;
  25   const energyRateOfChange = city.energyProductionPerTick - city.energyUsagePerTick;
  26     return `
  27         <div hx-trigger="every 600s" hx-get="/poll/overview">
  28         <h2 data-augmented-ui="tl-clip bl-clip none">Overview</h2>
  29         <table>
  30         <tr>
  31                 <th>Captain</th>
  32                 <td>${account.username}</td>
  33                 <th>Population</th>
  34                 <td>${city.population.toLocaleString()}/${cityRepo.maxPopulation(city)}</td>
  35         </tr>
  36         <tr>
  37                 <th>Space</th>
  38                 <td>${city.totalSpace.toLocaleString()} (${Math.ceil(city.usedSpace/city.totalSpace * 100)}% used)</td>
  39                 <th>Soldiers</th>
  40                 <td>${city.soldiers.toLocaleString()}</td>
  41         </tr>
  42         <tr>
  43                 <th>Location</th>
  44                 <td>Sector ${city.sector_id} - (${city.location_x},${city.location_y})</td>
  45                 <th>Attackers</th>
  46                 <td>${city.attackers.toLocaleString()}</td>
  47         </tr>
  48         <tr>
  49                 <th>Credits</th>
  50                 <td>${city.credits.toLocaleString()}</td>
  51                 <th>Defenders</th>
  52                 <td>${city.defenders.toLocaleString()}</td>
  53         </tr>
  54         <tr>
  55                 <th>Alloys</th>
  56                 <td>${city.alloys.toLocaleString()}</td>
  57                 <th>Special Attackers</th>
  58                 <td>${city.sp_attackers.toLocaleString()}</td>
  59         </tr>
  60         <tr>
  61                 <th>Energy</th>
  62                 <td>${city.energy.toLocaleString()} (<span class="rate-of-change ${energyRateOfChange < 0 ? 'danger-text' : 'success-text'}">${energyRateOfChange.toLocaleString()}</span>)</td>
  63                 <th>Special Defenders</th>
  64                 <td>${city.sp_defenders.toLocaleString()}</td>
  65         </tr>
  66         <tr>
  67                 <th>Food</th>
  68                 <td>
  69     ${city.food.toLocaleString()} (<span class="rate-of-change ${foodRateOfChange < 0 ? 'danger-text' : 'success-text'}">${foodRateOfChange.toLocaleString()}</span>) @ ${percent(city.food, city.warehouses, 100)}% Warehouse utilization
  70     </td>
  71         </tr>
  72         </table>
  73         </div>
  74         `;
  75 }