overhaul using augmented-ui

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

diff --git a/src/render/land-development.ts b/src/render/land-development.ts
index 18b64a7f5f5a0562e8ed9704fcaa7eaae4152f5f..0f584427112e1dcafdf6581546461e1a5590fa7c 100644 (file)
--- a/src/render/land-development.ts
+++ b/src/render/land-development.ts
@@ -6,8 +6,8 @@ import _ from "lodash";
 function progressBar(current, max): string {
     const percent = Math.ceil((current/max) * 100);
     return `
-    <div class="progress-bar construction" style="background: background: rgb(0,102,0);
-    background: linear-gradient(90deg, rgba(0,102,0,1) 0%, rgba(0,102,0,1) ${percent}%, rgba(0,0,0,1) ${percent}%);">
+    <div class="progress-bar construction" style="background: background: var(--green-bg);
+    background: linear-gradient(90deg, var(--green-bg) 0%, var(--green-bg) ${percent}%, #000 ${percent}%); border-color: var(--green-border); ">
     ${percent}%
     </div>
     `;
@@ -16,7 +16,8 @@ function progressBar(current, max): string {
 export function renderLandDevelopment(city: City, buildings: Building[], buildQueues: BuildQueue[]): string {
     const freeSpace = city.totalSpace - city.usedSpace;
     let html = `
-    <div hx-trigger="reload-construction-queue, every 600s" hx-get="/queue/construction">
+    <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>
@@ -31,7 +32,7 @@ export function renderLandDevelopment(city: City, buildings: Building[], buildQu
                 <td>${city[building.slug]}</td>
                 <td>
                     <form hx-post="/build">
-                        <input type="number" 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="change" hx-target="#${building.slug}-cost">
                         <input type="hidden" name="building_type" value="${building.slug}">
                         <button type="submit">Build</button>
                     </form>
@@ -48,14 +49,13 @@ export function renderLandDevelopment(city: City, buildings: Building[], buildQu
 
     const queues = `
     <hr>
-    <h2>Build Queues</h2>
+    <h2 data-augmented-ui="tl-clip bl-clip none">Build Queues</h2>
     <table>
     <tr>
     <th>Building</th>
     <th>Amount Expected</th>
     <th>Progress</th>
     </tr>
-    <tr>
     ${buildQueues.sort((a, b) => {
         return a.due - b.due;
     }).map(queue => {