src/render/unit-training.ts

   1 import _ from "lodash";
   2 import { CityWithLocation } from "../repository/city";
   3 import { UnitTrainingQueue } from "../repository/training-queue";
   4 import { Unit } from "../repository/unit";
   5 import { topbar } from "./topbar";
   6
   7 function progressBar(current, max): string {
   8     const percent = Math.ceil((current/max) * 100);
   9     return `
  10     <div class="progress-bar unit-training" style="background: background: var(--green-bg);
  11     background: linear-gradient(90deg, var(--green-bg) 0%, var(--green-bg) ${percent}%, #000 ${percent}%); border-color: var(--green-border);">
  12     ${percent}%
  13     </div>
  14     `;
  15 }
  16
  17 export function renderUnitTraining(city: CityWithLocation, units: Unit[], trainingQueues: UnitTrainingQueue[]): string {
  18     const unit = _.keyBy(units, 'slug');
  19     let html = `
  20     <div hx-trigger="reload-unit-training, every 600s" hx-get="/poll/unit-training">
  21     <h2 data-augmented-ui="tl-clip bl-clip none">Unit Training</h2>
  22     <table>
  23     <tr>
  24         <th>Unit</th>
  25         <th>Avail.</td>
  26         <th></th>
  27     </tr>
  28     <tr>
  29         <th>Soldiers</th>
  30         <td>${city.population}</td>
  31         <td>
  32             <form hx-post="/units">
  33                 <input type="number" name="amount" size="6" max="${city.population}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.soldiers.slug}-cost">
  34                 <input type="hidden" name="type" value="${unit.soldiers.slug}">
  35                 <button type="submit" ${city.population ? '' : 'disabled'}>Train</button>
  36             </form>
  37             <span id="${unit.soldiers.slug}-cost"></span>
  38         </td>
  39     </tr>
  40     <tr>
  41         <th>Attackers</th>
  42         <td>${city.soldiers}</td>
  43         <td>
  44             <form hx-post="/units">
  45                 <input type="number" name="amount" size="6" max="${city.soldiers}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.attackers.slug}-cost">
  46                 <input type="hidden" name="type" value="${unit.attackers.slug}">
  47                 <button type="submit" ${city.soldiers ? '' : 'disabled'}>Train</button>
  48             </form>
  49             <span id="${unit.attackers.slug}-cost"></span>
  50         </td>
  51     </tr>
  52     <tr>
  53         <th>Defenders</th>
  54         <td>${city.soldiers}</td>
  55         <td>
  56             <form hx-post="/units">
  57                 <input type="number" name="amount" size="6" max="${city.soldiers}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.defenders.slug}-cost">
  58                 <input type="hidden" name="type" value="${unit.defenders.slug}">
  59                 <button type="submit" ${city.soldiers ? '' : 'disabled'}>Train</button>
  60             </form>
  61             <span id="${unit.defenders.slug}-cost"></span>
  62         </td>
  63     </tr>
  64     <tr>
  65         <th>Special Attackers</th>
  66         <td>${city.attackers}</td>
  67         <td>
  68             <form hx-post="/units">
  69                 <input type="number" name="amount" size="6" max="${city.attackers}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.sp_attackers.slug}-cost">
  70                 <input type="hidden" name="type" value="${unit.sp_attackers.slug}">
  71                 <button type="submit" ${city.attackers ? '': 'disabled'}>Train</button>
  72             </form>
  73             <span id="${unit.sp_attackers.slug}-cost"></span>
  74         </td>
  75     </tr>
  76     <tr>
  77         <th>Special Defenders</th>
  78         <td>${city.defenders}</td>
  79         <td>
  80             <form hx-post="/units">
  81                 <input type="number" name="amount" size="6" max="${city.defenders}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.sp_defenders.slug}-cost">
  82                 <input type="hidden" name="type" value="${unit.sp_defenders.slug}">
  83                 <button type="submit" ${city.defenders ? '': 'disabled'}>Train</button>
  84             </form>
  85             <span id="${unit.sp_defenders.slug}-cost"></span>
  86         </td>
  87         </tr>
  88     </table>
  89     `;
  90
  91     const queues = `
  92     <hr>
  93     <h2 data-augmented-ui="tl-clip bl-clip none">Training Queues</h2>
  94     <table>
  95     <tr>
  96     <th>Unit Type</th>
  97     <th>Amount Expected</th>
  98     <th>Progress</th>
  99     </tr>
 100     ${trainingQueues.sort((a, b) => {
 101         return a.due - b.due;
 102     }).map(queue => {
 103         const now = Date.now() - queue.created;
 104         const duration = queue.due - queue.created;
 105
 106         return `
 107         <tr>
 108         <td>${queue.unit_type}</td>
 109         <td>${queue.amount}</td>
 110         <td>${progressBar(now, duration)}</td>
 111         </tr>
 112         `;
 113     }).join("\n")}
 114     </table>
 115     </div>
 116     `;
 117
 118     return html + queues + topbar(city);
 119 }