X-Git-Url: https://git.xangelo.ca/?a=blobdiff_plain;f=src%2Frender%2Fland-development.ts;h=0c1fad915890fe43330a3feb61683a9a6443a117;hb=9c0287740b282030291008cd9cf204c7f1ca8958;hp=0f584427112e1dcafdf6581546461e1a5590fa7c;hpb=eec9780142ca4cc052d9575528d6dc6f3bfc4fe6;p=browser-rts.git

diff --git a/src/render/land-development.ts b/src/render/land-development.ts
index 0f58442..0c1fad9 100644
--- a/src/render/land-development.ts
+++ b/src/render/land-development.ts
@@ -1,5 +1,5 @@
 import { BuildQueue } from "../repository/build-queue";
-import { City } from "../repository/city";
+import { CityWithLocation } from "../repository/city";
 import { Building } from '../repository/buildings';
 import _ from "lodash";
 
@@ -13,16 +13,17 @@ function progressBar(current, max): string {
     `;
 }
 
-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 => {
@@ -32,12 +33,12 @@ export function renderLandDevelopment(city: City, buildings: Building[], buildQu
                 <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")
@@ -73,6 +74,5 @@ export function renderLandDevelopment(city: City, buildings: Building[], buildQu
     </table>
     </div>
     `;
-
     return html + queues;
-}
\ No newline at end of file
+}