import _ from "lodash";
-import { City } from "../repository/city";
+import { CityWithLocation } from "../repository/city";
import { UnitTrainingQueue } from "../repository/training-queue";
import { Unit } from "../repository/unit";
function progressBar(current, max): string {
const percent = Math.ceil((current/max) * 100);
return `
- <div class="progress-bar unit-training" style="background: background: rgb(0,102,0);
- background: linear-gradient(90deg, rgba(0,102,0,1) 0%, rgba(0,102,0,1) ${percent}%, rgba(0,0,0,1) ${percent}%);">
+ <div class="progress-bar unit-training" style="background: background: var(--green-bg);
+ background: linear-gradient(90deg, var(--green-bg) 0%, var(--green-bg) ${percent}%, #000 ${percent}%); border-color: var(--green-border);">
${percent}%
</div>
`;
}
-export function renderUnitTraining(city: City, units: Unit[], trainingQueues: UnitTrainingQueue[]): string {
+export function renderUnitTraining(city: CityWithLocation, units: Unit[], trainingQueues: UnitTrainingQueue[]): string {
const unit = _.keyBy(units, 'slug');
let html = `
- <div hx-trigger="reload-unit-training, every 600s" hx-get="/queue/units">
+ <div hx-trigger="reload-unit-training, every 600s" hx-get="/poll/unit-training">
+ <h2 data-augmented-ui="tl-clip bl-clip none">Unit Training</h2>
<table>
+ <tr>
+ <th>Unit</th>
+ <th>Avail.</td>
+ <th></th>
+ <th width="200">Cost</th>
+ </tr>
<tr>
<th>Soldiers</th>
- <td>${city.population} Avail.</td>
+ <td>${city.population}</td>
<td>
<form hx-post="/units">
- <input type="number" name="amount" max="${city.population}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.soldiers.slug}-cost">
+ <input type="number" name="amount" size="6" max="${city.population}" hx-trigger="keyup" hx-post="/cost/training" hx-target="#${unit.soldiers.slug}-cost">
<input type="hidden" name="type" value="${unit.soldiers.slug}">
- <button type="submit" ${city.population ? '' : 'disabled'}>Train Units</button>
+ <button type="submit" ${city.population ? '' : 'disabled'}>Train</button>
</form>
- <span id="${unit.soldiers.slug}-cost"></span>
</td>
+ <td id="${unit.soldiers.slug}-cost"></span>
</tr>
<tr>
<th>Attackers</th>
- <td>${city.soldiers} Avail.</td>
+ <td>${city.soldiers}</td>
<td>
<form hx-post="/units">
- <input type="number" name="amount" max="${city.soldiers}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.attackers.slug}-cost">
+ <input type="number" name="amount" size="6" max="${city.soldiers}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.attackers.slug}-cost">
<input type="hidden" name="type" value="${unit.attackers.slug}">
- <button type="submit" ${city.soldiers ? '' : 'disabled'}>Train Units</button>
+ <button type="submit" ${city.soldiers ? '' : 'disabled'}>Train</button>
</form>
- <span id="${unit.attackers.slug}-cost"></span>
</td>
+ <td id="${unit.attackers.slug}-cost"></span>
</tr>
<tr>
<th>Defenders</th>
- <td>${city.soldiers} Avail.</td>
+ <td>${city.soldiers}</td>
<td>
<form hx-post="/units">
- <input type="number" name="amount" max="${city.soldiers}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.defenders.slug}-cost">
+ <input type="number" name="amount" size="6" max="${city.soldiers}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.defenders.slug}-cost">
<input type="hidden" name="type" value="${unit.defenders.slug}">
- <button type="submit" ${city.soldiers ? '' : 'disabled'}>Train Units</button>
+ <button type="submit" ${city.soldiers ? '' : 'disabled'}>Train</button>
</form>
- <span id="${unit.defenders.slug}-cost"></span>
</td>
+ <td id="${unit.defenders.slug}-cost"></td>
</tr>
<tr>
<th>Special Attackers</th>
- <td>${city.attackers} Avail.</td>
+ <td>${city.attackers}</td>
<td>
<form hx-post="/units">
- <input type="number" name="amount" max="${city.attackers}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.sp_attackers.slug}-cost">
+ <input type="number" name="amount" size="6" max="${city.attackers}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.sp_attackers.slug}-cost">
<input type="hidden" name="type" value="${unit.sp_attackers.slug}">
- <button type="submit" ${city.attackers ? '': 'disabled'}>Train Units</button>
+ <button type="submit" ${city.attackers ? '': 'disabled'}>Train</button>
</form>
<span id="${unit.sp_attackers.slug}-cost"></span>
</td>
+ <td id="${unit.sp_attackers.slug}-cost"></td>
</tr>
<tr>
<th>Special Defenders</th>
- <td>${city.defenders} Avail.</td>
+ <td>${city.defenders}</td>
<td>
<form hx-post="/units">
- <input type="number" name="amount" max="${city.defenders}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.sp_defenders.slug}-cost">
+ <input type="number" name="amount" size="6" max="${city.defenders}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.sp_defenders.slug}-cost">
<input type="hidden" name="type" value="${unit.sp_defenders.slug}">
- <button type="submit" ${city.defenders ? '': 'disabled'}>Train Units</button>
+ <button type="submit" ${city.defenders ? '': 'disabled'}>Train</button>
</form>
- <span id="${unit.sp_defenders.slug}-cost"></span>
</td>
+ <td id="${unit.sp_defenders.slug}-cost"></td>
</tr>
</table>
`;
const queues = `
<hr>
- <h2>Training Queues</h2>
+ <h2 data-augmented-ui="tl-clip bl-clip none">Training Queues</h2>
<table>
<tr>
<th>Unit Type</th>
<th>Amount Expected</th>
<th>Progress</th>
</tr>
- <tr>
${trainingQueues.sort((a, b) => {
return a.due - b.due;
}).map(queue => {
`;
return html + queues;
-}
\ No newline at end of file
+}