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