src/render/kingdom-overview.ts

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