1 import _ from "lodash";
2 import { City } from "../repository/city";
3 import { UnitTrainingQueue } from "../repository/training-queue";
4 import { Unit } from "../repository/unit";
6 function progressBar(current, max): string {
7 const percent = Math.ceil((current/max) * 100);
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}%);">
16 export function renderUnitTraining(city: City, units: Unit[], trainingQueues: UnitTrainingQueue[]): string {
17 const unit = _.keyBy(units, 'slug');
19 <div hx-trigger="reload-unit-training, every 600s" hx-get="/queue/units">
23 <td>${city.population} Avail.</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>
30 <span id="${unit.soldiers.slug}-cost"></span>
35 <td>${city.soldiers} Avail.</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>
42 <span id="${unit.attackers.slug}-cost"></span>
47 <td>${city.soldiers} Avail.</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>
54 <span id="${unit.defenders.slug}-cost"></span>
58 <th>Special Attackers</th>
59 <td>${city.attackers} Avail.</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>
66 <span id="${unit.sp_attackers.slug}-cost"></span>
70 <th>Special Defenders</th>
71 <td>${city.defenders} Avail.</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>
78 <span id="${unit.sp_defenders.slug}-cost"></span>
86 <h2>Training Queues</h2>
90 <th>Amount Expected</th>
94 ${trainingQueues.sort((a, b) => {
97 const now = Date.now() - queue.created;
98 const duration = queue.due - queue.created;
102 <td>${queue.unit_type}</td>
103 <td>${queue.amount}</td>
104 <td>${progressBar(now, duration)}</td>
112 return html + queues;