display the total number of queues availabe to the user

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

diff --git a/src/render/land-development.ts b/src/render/land-development.ts
index 9cd4eb7418c2f601412311bcd19176a168f4b767..e3643a9fc8732bc28d0b1cafcb15217ba43b07b3 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,6 +24,10 @@ 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>
@@ -47,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;
 
@@ -70,6 +97,7 @@ export function renderLandDevelopment(city: CityWithLocation, buildings: Buildin
         <td>${progressBar(now, duration)}</td>
         </tr>
         `;
+      }
     }).join("\n")}
     </table>
     </div>