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         <th width="200">Cost</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="keyup" 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         </td>
  38         <td id="${unit.soldiers.slug}-cost"></span>
  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         </td>
  50         <td id="${unit.attackers.slug}-cost"></span>
  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         </td>
  62         <td id="${unit.defenders.slug}-cost"></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         <td id="${unit.sp_attackers.slug}-cost"></td>
  76     </tr>
  77     <tr>
  78         <th>Special Defenders</th>
  79         <td>${city.defenders}</td>
  80         <td>
  81             <form hx-post="/units">
  82                 <input type="number" name="amount" size="6" max="${city.defenders}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.sp_defenders.slug}-cost">
  83                 <input type="hidden" name="type" value="${unit.sp_defenders.slug}">
  84                 <button type="submit" ${city.defenders ? '': 'disabled'}>Train</button>
  85             </form>
  86         </td>
  87         <td id="${unit.sp_defenders.slug}-cost"></td>
  88         </tr>
  89     </table>
  90     `;
  91
  92     const queues = `
  93     <hr>
  94     <h2 data-augmented-ui="tl-clip bl-clip none">Training Queues</h2>
  95     <table>
  96     <tr>
  97     <th>Unit Type</th>
  98     <th>Amount Expected</th>
  99     <th>Progress</th>
 100     </tr>
 101     ${trainingQueues.sort((a, b) => {
 102         return a.due - b.due;
 103     }).map(queue => {
 104         const now = Date.now() - queue.created;
 105         const duration = queue.due - queue.created;
 106
 107         return `
 108         <tr>
 109         <td>${queue.unit_type}</td>
 110         <td>${queue.amount}</td>
 111         <td>${progressBar(now, duration)}</td>
 112         </tr>
 113         `;
 114     }).join("\n")}
 115     </table>
 116     </div>
 117     `;
 118
 119     return html + queues;
 120 }