allow cancelling of training queues

[browser-rts.git] / src / render / land-development.ts

diff --git a/src/render/land-development.ts b/src/render/land-development.ts
index 935ff74dbdd74868b9dedda76480e209e9467f68..d0b5e7f1157460eba318713ce9430a6475e93fb1 100644 (file)
--- a/src/render/land-development.ts
+++ b/src/render/land-development.ts
@@ -3,7 +3,16 @@ import { CityWithLocation } from "../repository/city";
 import { Building } from '../repository/buildings';
 import _ from "lodash";
 
-function progressBar(current, max): string {
+const emptyBuilding: BuildQueue = {
+  id: '',
+  owner: '',
+  amount: 0,
+  created: 0,
+  due: 0,
+  building_type: 'empty',
+};
+
+function progressBar(current: number, max: number): string {
     const percent = Math.ceil((current/max) * 100);
     return `
     <div class="progress-bar construction" style="background: background: var(--green-bg);
@@ -15,14 +24,19 @@ function progressBar(current, max): string {
 
 export function renderLandDevelopment(city: CityWithLocation, buildings: Building[], buildQueues: BuildQueue[]): string {
     const freeSpace = city.totalSpace - city.usedSpace;
+    const sortedBuildQueues = buildQueues.sort((a, b) => {
+        return a.due - b.due;
+    });
+
     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 => {
@@ -31,13 +45,13 @@ export function renderLandDevelopment(city: CityWithLocation, buildings: Buildin
                 <th>${building.display}</th>
                 <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">
+                    <form hx-post="/build" hx-swap="innerHTML" hx-target="#notifications">
+                        <input type="number" size="6" name="amount" hx-post="/cost/construction" hx-trigger="keyup" hx-target="#${building.slug}-cost" hx-swap="innerHTML">
                         <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")
@@ -46,19 +60,33 @@ export function renderLandDevelopment(city: CityWithLocation, buildings: Buildin
     `;
 
     const quickFindBuilding = _.keyBy(buildings, 'slug');
+    const finalBuildQueues = sortedBuildQueues;
+
+    if (finalBuildQueues.length < city.max_construction_queue) {
+      while(finalBuildQueues.length < city.max_construction_queue) {
+        finalBuildQueues.push(emptyBuilding);
+      }
+    }
+
 
     const queues = `
     <hr>
     <h2 data-augmented-ui="tl-clip bl-clip none">Build Queues</h2>
     <table>
     <tr>
-    <th>Building</th>
-    <th>Amount Expected</th>
-    <th>Progress</th>
+    <th align="left">Building</th>
+    <th align="left">Amount Expected</th>
+    <th colspan="2">Progress</th>
     </tr>
-    ${buildQueues.sort((a, b) => {
-        return a.due - b.due;
-    }).map(queue => {
+    ${sortedBuildQueues.map(queue => {
+      if(queue.building_type === 'empty') {
+        return `
+        <tr>
+        <td colspan="4">You have sufficient capacity to build something.</td>
+        </tr>
+        `
+      }
+      else {
         const now = Date.now() - queue.created;
         const duration = queue.due - queue.created;
 
@@ -67,12 +95,15 @@ export function renderLandDevelopment(city: CityWithLocation, buildings: Buildin
         <td>${quickFindBuilding[queue.building_type].display}</td>
         <td>${queue.amount}</td>
         <td>${progressBar(now, duration)}</td>
+        <td width="50">
+        <a href="#" hx-post="/construction/${queue.id}/cancel" hx-trigger="click" class="danger-text close" title="Cancel Construction">&times;</a>
+        </td>
         </tr>
         `;
+      }
     }).join("\n")}
     </table>
     </div>
     `;
-
     return html + queues;
-}
\ No newline at end of file
+}