src/render/unit-training.ts

   1 import _ from "lodash";
   2 import { City } 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: rgb(0,102,0);
  10     background: linear-gradient(90deg, rgba(0,102,0,1) 0%, rgba(0,102,0,1) ${percent}%, rgba(0,0,0,1) ${percent}%);">
  11     ${percent}%
  12     </div>
  13     `;
  14 }
  15
  16 export function renderUnitTraining(city: City, 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="/queue/units">
  20     <table>
  21     <tr>
  22         <th>Soldiers</th>
  23         <td>${city.population} Avail.</td>
  24         <td>
  25             <form hx-post="/units">
  26                 <input type="number" name="amount" max="${city.population}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.soldiers.slug}-cost">
  27                 <input type="hidden" name="type" value="${unit.soldiers.slug}">
  28                 <button type="submit" ${city.population ? '' : 'disabled'}>Train Units</button>
  29             </form>
  30             <span id="${unit.soldiers.slug}-cost"></span>
  31         </td>
  32     </tr>
  33     <tr>
  34         <th>Attackers</th>
  35         <td>${city.soldiers} Avail.</td>
  36         <td>
  37             <form hx-post="/units">
  38                 <input type="number" name="amount" max="${city.soldiers}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.attackers.slug}-cost">
  39                 <input type="hidden" name="type" value="${unit.attackers.slug}">
  40                 <button type="submit" ${city.soldiers ? '' : 'disabled'}>Train Units</button>
  41             </form>
  42             <span id="${unit.attackers.slug}-cost"></span>
  43         </td>
  44     </tr>
  45     <tr>
  46         <th>Defenders</th>
  47         <td>${city.soldiers} Avail.</td>
  48         <td>
  49             <form hx-post="/units">
  50                 <input type="number" name="amount" max="${city.soldiers}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.defenders.slug}-cost">
  51                 <input type="hidden" name="type" value="${unit.defenders.slug}">
  52                 <button type="submit" ${city.soldiers ? '' : 'disabled'}>Train Units</button>
  53             </form>
  54             <span id="${unit.defenders.slug}-cost"></span>
  55         </td>
  56     </tr>
  57     <tr>
  58         <th>Special Attackers</th>
  59         <td>${city.attackers} Avail.</td>
  60         <td>
  61             <form hx-post="/units">
  62                 <input type="number" name="amount" max="${city.attackers}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.sp_attackers.slug}-cost">
  63                 <input type="hidden" name="type" value="${unit.sp_attackers.slug}">
  64                 <button type="submit" ${city.attackers ? '': 'disabled'}>Train Units</button>
  65             </form>
  66             <span id="${unit.sp_attackers.slug}-cost"></span>
  67         </td>
  68     </tr>
  69     <tr>
  70         <th>Special Defenders</th>
  71         <td>${city.defenders} Avail.</td>
  72         <td>
  73             <form hx-post="/units">
  74                 <input type="number" name="amount" max="${city.defenders}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.sp_defenders.slug}-cost">
  75                 <input type="hidden" name="type" value="${unit.sp_defenders.slug}">
  76                 <button type="submit" ${city.defenders ? '': 'disabled'}>Train Units</button>
  77             </form>
  78             <span id="${unit.sp_defenders.slug}-cost"></span>
  79         </td>
  80         </tr>
  81     </table>
  82     `;
  83
  84     const queues = `
  85     <hr>
  86     <h2>Training Queues</h2>
  87     <table>
  88     <tr>
  89     <th>Unit Type</th>
  90     <th>Amount Expected</th>
  91     <th>Progress</th>
  92     </tr>
  93     <tr>
  94     ${trainingQueues.sort((a, b) => {
  95         return a.due - b.due;
  96     }).map(queue => {
  97         const now = Date.now() - queue.created;
  98         const duration = queue.due - queue.created;
  99
 100         return `
 101         <tr>
 102         <td>${queue.unit_type}</td>
 103         <td>${queue.amount}</td>
 104         <td>${progressBar(now, duration)}</td>
 105         </tr>
 106         `;
 107     }).join("\n")}
 108     </table>
 109     </div>
 110     `;
 111
 112     return html + queues;
 113 }