1 import { BuildQueue } from "../repository/build-queue";
2 import { City } from "../repository/city";
3 import { Building } from '../repository/buildings';
4 import _ from "lodash";
6 function progressBar(current, max): string {
7 const percent = Math.ceil((current/max) * 100);
9 <div class="progress-bar construction" 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 renderLandDevelopment(city: City, buildings: Building[], buildQueues: BuildQueue[]): string {
17 const freeSpace = city.totalSpace - city.usedSpace;
19 <div hx-trigger="reload-construction-queue, every 600s" hx-get="/poll/construction">
20 <h2 data-augmented-ui="tl-clip bl-clip none">Construction</h2>
25 <td colspan="2">${(city.totalSpace - city.usedSpace).toLocaleString()} (${Math.ceil(freeSpace/city.totalSpace * 100)}% available)</td>
28 buildings.map(building => {
31 <th>${building.display}</th>
32 <td>${city[building.slug]}</td>
34 <form hx-post="/build">
35 <input type="number" size="6" name="amount" hx-post="/cost/construction" hx-trigger="change" hx-target="#${building.slug}-cost">
36 <input type="hidden" name="building_type" value="${building.slug}">
37 <button type="submit">Build</button>
39 <span id="${building.slug}-cost"></span>
48 const quickFindBuilding = _.keyBy(buildings, 'slug');
52 <h2 data-augmented-ui="tl-clip bl-clip none">Build Queues</h2>
56 <th>Amount Expected</th>
59 ${buildQueues.sort((a, b) => {
62 const now = Date.now() - queue.created;
63 const duration = queue.due - queue.created;
67 <td>${quickFindBuilding[queue.building_type].display}</td>
68 <td>${queue.amount}</td>
69 <td>${progressBar(now, duration)}</td>