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