1 import _ from "lodash";
2 import { CityWithLocation } 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: var(--green-bg);
10 background: linear-gradient(90deg, var(--green-bg) 0%, var(--green-bg) ${percent}%, #000 ${percent}%); border-color: var(--green-border);">
16 export function renderUnitTraining(city: CityWithLocation, units: Unit[], trainingQueues: UnitTrainingQueue[]): string {
17 const unit = _.keyBy(units, 'slug');
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>
26 <th width="200">Cost</th>
30 <td>${city.population}</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>
38 <td id="${unit.soldiers.slug}-cost"></span>
42 <td>${city.soldiers}</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>
50 <td id="${unit.attackers.slug}-cost"></span>
54 <td>${city.soldiers}</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>
62 <td id="${unit.defenders.slug}-cost"></td>
65 <th>Special Attackers</th>
66 <td>${city.attackers}</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>
73 <span id="${unit.sp_attackers.slug}-cost"></span>
75 <td id="${unit.sp_attackers.slug}-cost"></td>
78 <th>Special Defenders</th>
79 <td>${city.defenders}</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>
87 <td id="${unit.sp_defenders.slug}-cost"></td>
94 <h2 data-augmented-ui="tl-clip bl-clip none">Training Queues</h2>
98 <th>Amount Expected</th>
101 ${trainingQueues.sort((a, b) => {
102 return a.due - b.due;
104 const now = Date.now() - queue.created;
105 const duration = queue.due - queue.created;
109 <td>${queue.unit_type}</td>
110 <td>${queue.amount}</td>
111 <td>${progressBar(now, duration)}</td>
119 return html + queues;