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>
29 <td>${city.population}</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>
36 <span id="${unit.soldiers.slug}-cost"></span>
41 <td>${city.soldiers}</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>
48 <span id="${unit.attackers.slug}-cost"></span>
53 <td>${city.soldiers}</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>
60 <span id="${unit.defenders.slug}-cost"></span>
64 <th>Special Attackers</th>
65 <td>${city.attackers}</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>
72 <span id="${unit.sp_attackers.slug}-cost"></span>
76 <th>Special Defenders</th>
77 <td>${city.defenders}</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>
84 <span id="${unit.sp_defenders.slug}-cost"></span>
92 <h2 data-augmented-ui="tl-clip bl-clip none">Training Queues</h2>
96 <th>Amount Expected</th>
99 ${trainingQueues.sort((a, b) => {
100 return a.due - b.due;
102 const now = Date.now() - queue.created;
103 const duration = queue.due - queue.created;
107 <td>${queue.unit_type}</td>
108 <td>${queue.amount}</td>
109 <td>${progressBar(now, duration)}</td>
117 return html + queues;