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 function renderUnreadBadge(count: number): string {
  11   return `<span class="badge danger">${count}</span>`;
  12
  13 }
  14
  15 function mailLink(unreadCount: number): string {
  16   return `
  17   <a href="#" hx-target="#main" hx-get="/poll/mailroom" hx-trigger="click" id="mail-link" hx-swap-oob="true">Mail ${unreadCount > 0 ? renderUnreadBadge(unreadCount) : ''}</a>
  18   `;
  19 }
  20
  21 export function topbar(city: City & Usage, unreadMail: number): string {
  22   const foodRateOfChange = city.foodProductionPerTick - city.foodUsagePerTick;
  23   const energyRateOfChange = city.energyProductionPerTick - city.energyUsagePerTick;
  24     const oob = `
  25     ${mailLink(unreadMail)}
  26     <div class="col" id="info-bar" hx-swap-oob="true">
  27     <span>
  28       <b data-augmented-ui="all-hex border" title="Credits">&#8353;</b>
  29       <span class="text">${city.credits.toLocaleString()}</span>
  30     </span>
  31     <span>
  32       <b data-augmented-ui="all-hex border" title="Alloys">A</b>
  33       <span class="text">${city.alloys.toLocaleString()}</span>
  34     </span>
  35     <span>
  36       <b data-augmented-ui="all-hex border" title="Food">F</b>
  37       <span class="text">
  38       ${city.food.toLocaleString()}
  39       <span class="rate-of-change ${foodRateOfChange < 0 ? 'danger-text': 'success-text'}">${foodRateOfChange.toLocaleString()}</span>
  40       </span>
  41     </span>
  42     <span>
  43       <b data-augmented-ui="all-hex border" title="Energy">E</b>
  44       <span class="text">
  45       ${city.energy.toLocaleString()}
  46       <span class="rate-of-change ${energyRateOfChange < 0 ? 'danger-text': 'success-text'}">${energyRateOfChange.toLocaleString()}</span>
  47       </span>
  48     </span>
  49     </div>
  50     `;
  51
  52     return oob;
  53 }