src/render/topbar.ts

   1 import { City } from "../repository/city";
   2
   3 type Usage = {
   4   foodUsagePerTick: number;
   5   foodProductionPerTick: number;
   6   energyUsagePerTick: number;
   7   energyProductionPerTick: number;
   8 }
   9
  10
  11 export function topbar(city: City & Usage): string {
  12   const foodRateOfChange = city.foodProductionPerTick - city.foodUsagePerTick;
  13   const energyRateOfChange = city.energyProductionPerTick - city.energyUsagePerTick;
  14     const oob = `
  15     <div class="col" id="info-bar" hx-swap-oob="true">
  16     <span>
  17       <b data-augmented-ui="all-hex border" title="Credits">&#8353;</b>
  18       <span class="text">${city.credits.toLocaleString()}</span>
  19     </span>
  20     <span>
  21       <b data-augmented-ui="all-hex border" title="Alloys">A</b>
  22       <span class="text">${city.alloys.toLocaleString()}</span>
  23     </span>
  24     <span>
  25       <b data-augmented-ui="all-hex border" title="Food">F</b>
  26       <span class="text">
  27       ${city.food.toLocaleString()}
  28       <span class="rate-of-change ${foodRateOfChange < 0 ? 'danger-text': 'success-text'}">${foodRateOfChange.toLocaleString()}</span>
  29       </span>
  30     </span>
  31     <span>
  32       <b data-augmented-ui="all-hex border" title="Energy">E</b>
  33       <span class="text">
  34       ${city.energy.toLocaleString()}
  35       <span class="rate-of-change ${energyRateOfChange < 0 ? 'danger-text': 'success-text'}">${energyRateOfChange.toLocaleString()}</span>
  36       </span>
  37     </span>
  38     </div>
  39     `;
  40
  41     return oob;
  42 }