1 import _ from "lodash";
2 import { CityWithLocation } from "../repository/city";
3 import { UnitTrainingQueue } from "../repository/training-queue";
4 import { Unit } from "../repository/unit";
5 import { topbar } from "./topbar";
7 function progressBar(current, max): string {
8 const percent = Math.ceil((current/max) * 100);
10 <div class="progress-bar unit-training" style="background: background: var(--green-bg);
11 background: linear-gradient(90deg, var(--green-bg) 0%, var(--green-bg) ${percent}%, #000 ${percent}%); border-color: var(--green-border);">
17 export function renderUnitTraining(city: CityWithLocation, units: Unit[], trainingQueues: UnitTrainingQueue[]): string {
18 const unit = _.keyBy(units, 'slug');
20 <div hx-trigger="reload-unit-training, every 600s" hx-get="/poll/unit-training">
21 <h2 data-augmented-ui="tl-clip bl-clip none">Unit Training</h2>
30 <td>${city.population}</td>
32 <form hx-post="/units">
33 <input type="number" name="amount" size="6" max="${city.population}" hx-trigger="change" 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>
37 <span 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>
49 <span 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>
61 <span id="${unit.defenders.slug}-cost"></span>
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>
77 <th>Special Defenders</th>
78 <td>${city.defenders}</td>
80 <form hx-post="/units">
81 <input type="number" name="amount" size="6" max="${city.defenders}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.sp_defenders.slug}-cost">
82 <input type="hidden" name="type" value="${unit.sp_defenders.slug}">
83 <button type="submit" ${city.defenders ? '': 'disabled'}>Train</button>
85 <span id="${unit.sp_defenders.slug}-cost"></span>
93 <h2 data-augmented-ui="tl-clip bl-clip none">Training Queues</h2>
97 <th>Amount Expected</th>
100 ${trainingQueues.sort((a, b) => {
101 return a.due - b.due;
103 const now = Date.now() - queue.created;
104 const duration = queue.due - queue.created;
108 <td>${queue.unit_type}</td>
109 <td>${queue.amount}</td>
110 <td>${progressBar(now, duration)}</td>
118 return html + queues + topbar(city);