import { BuildQueue } from "../repository/build-queue";
-import { City } from "../repository/city";
+import { CityWithLocation } from "../repository/city";
import { Building } from '../repository/buildings';
import _ from "lodash";
`;
}
-export function renderLandDevelopment(city: City, buildings: Building[], buildQueues: BuildQueue[]): string {
+export function renderLandDevelopment(city: CityWithLocation, buildings: Building[], buildQueues: BuildQueue[]): string {
const freeSpace = city.totalSpace - city.usedSpace;
let html = `
<div hx-trigger="reload-construction-queue, every 600s" hx-get="/poll/construction">
<h2 data-augmented-ui="tl-clip bl-clip none">Construction</h2>
<table>
<tr>
- <th>Free Land</th>
+ <th>Type</th>
<th>Current</th>
- <td colspan="2">${(city.totalSpace - city.usedSpace).toLocaleString()} (${Math.ceil(freeSpace/city.totalSpace * 100)}% available)</td>
+ <th>Space Available: ${(city.totalSpace - city.usedSpace).toLocaleString()} (${Math.ceil(freeSpace/city.totalSpace * 100)}% available)</th>
+ <th width="200">Cost</th>
</tr>
${
buildings.map(building => {
<td>${city[building.slug]}</td>
<td>
<form hx-post="/build">
- <input type="number" size="6" name="amount" hx-post="/cost/construction" hx-trigger="change" hx-target="#${building.slug}-cost">
+ <input type="number" size="6" name="amount" hx-post="/cost/construction" hx-trigger="keyup" hx-target="#${building.slug}-cost">
<input type="hidden" name="building_type" value="${building.slug}">
<button type="submit">Build</button>
</form>
- <span id="${building.slug}-cost"></span>
</td>
+ <td id="${building.slug}-cost"></td>
</tr>
`;
}).join("\n")
</table>
</div>
`;
-
return html + queues;
-}
\ No newline at end of file
+}