X-Git-Url: https://git.xangelo.ca/?a=blobdiff_plain;f=src%2Frender%2Funit-training.ts;h=0214bfe301402ff31de4ad328a4a1c5cd9b5ac54;hb=9c0287740b282030291008cd9cf204c7f1ca8958;hp=85cf78d8c1a5ef00d1b75c738ea60d6ccf8eb6a1;hpb=516deaa637cb322ddbb4fb9121d56d23fef5d7a8;p=browser-rts.git

diff --git a/src/render/unit-training.ts b/src/render/unit-training.ts
index 85cf78d..0214bfe 100644
--- a/src/render/unit-training.ts
+++ b/src/render/unit-training.ts
@@ -1,96 +1,103 @@
 import _ from "lodash";
-import { City } from "../repository/city";
+import { CityWithLocation } from "../repository/city";
 import { UnitTrainingQueue } from "../repository/training-queue";
 import { Unit } from "../repository/unit";
 
 function progressBar(current, max): string {
     const percent = Math.ceil((current/max) * 100);
     return `
-    <div class="progress-bar unit-training" 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 unit-training" 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>
     `;
 }
 
-export function renderUnitTraining(city: City, units: Unit[], trainingQueues: UnitTrainingQueue[]): string {
+export function renderUnitTraining(city: CityWithLocation, units: Unit[], trainingQueues: UnitTrainingQueue[]): string {
     const unit = _.keyBy(units, 'slug');
     let html = `
-    <div hx-trigger="reload-unit-training, every 600s" hx-get="/queue/units">
+    <div hx-trigger="reload-unit-training, every 600s" hx-get="/poll/unit-training">
+    <h2 data-augmented-ui="tl-clip bl-clip none">Unit Training</h2>
     <table>
+    <tr>
+        <th>Unit</th>
+        <th>Avail.</td>
+        <th></th>
+        <th width="200">Cost</th>
+    </tr>
     <tr>
         <th>Soldiers</th>
-        <td>${city.population} Avail.</td>
+        <td>${city.population}</td>
         <td>
             <form hx-post="/units">
-                <input type="number" name="amount" max="${city.population}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.soldiers.slug}-cost">
+                <input type="number" name="amount" size="6" max="${city.population}" hx-trigger="keyup" hx-post="/cost/training" hx-target="#${unit.soldiers.slug}-cost">
                 <input type="hidden" name="type" value="${unit.soldiers.slug}">
-                <button type="submit" ${city.population ? '' : 'disabled'}>Train Units</button>
+                <button type="submit" ${city.population ? '' : 'disabled'}>Train</button>
             </form>
-            <span id="${unit.soldiers.slug}-cost"></span>
         </td>
+        <td id="${unit.soldiers.slug}-cost"></span>
     </tr>
     <tr>
         <th>Attackers</th>
-        <td>${city.soldiers} Avail.</td>
+        <td>${city.soldiers}</td>
         <td>
             <form hx-post="/units">
-                <input type="number" name="amount" max="${city.soldiers}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.attackers.slug}-cost">
+                <input type="number" name="amount" size="6" max="${city.soldiers}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.attackers.slug}-cost">
                 <input type="hidden" name="type" value="${unit.attackers.slug}">
-                <button type="submit" ${city.soldiers ? '' : 'disabled'}>Train Units</button>
+                <button type="submit" ${city.soldiers ? '' : 'disabled'}>Train</button>
             </form>
-            <span id="${unit.attackers.slug}-cost"></span>
         </td>
+        <td id="${unit.attackers.slug}-cost"></span>
     </tr>
     <tr>
         <th>Defenders</th>
-        <td>${city.soldiers} Avail.</td>
+        <td>${city.soldiers}</td>
         <td>
             <form hx-post="/units">
-                <input type="number" name="amount" max="${city.soldiers}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.defenders.slug}-cost">
+                <input type="number" name="amount" size="6" max="${city.soldiers}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.defenders.slug}-cost">
                 <input type="hidden" name="type" value="${unit.defenders.slug}">
-                <button type="submit" ${city.soldiers ? '' : 'disabled'}>Train Units</button>
+                <button type="submit" ${city.soldiers ? '' : 'disabled'}>Train</button>
             </form>
-            <span id="${unit.defenders.slug}-cost"></span>
         </td>
+        <td id="${unit.defenders.slug}-cost"></td>
     </tr>
     <tr>
         <th>Special Attackers</th>
-        <td>${city.attackers} Avail.</td>
+        <td>${city.attackers}</td>
         <td>
             <form hx-post="/units">
-                <input type="number" name="amount" max="${city.attackers}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.sp_attackers.slug}-cost">
+                <input type="number" name="amount" size="6" max="${city.attackers}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.sp_attackers.slug}-cost">
                 <input type="hidden" name="type" value="${unit.sp_attackers.slug}">
-                <button type="submit" ${city.attackers ? '': 'disabled'}>Train Units</button>
+                <button type="submit" ${city.attackers ? '': 'disabled'}>Train</button>
             </form>
             <span id="${unit.sp_attackers.slug}-cost"></span>
         </td>
+        <td id="${unit.sp_attackers.slug}-cost"></td>
     </tr>
     <tr>
         <th>Special Defenders</th>
-        <td>${city.defenders} Avail.</td>
+        <td>${city.defenders}</td>
         <td>
             <form hx-post="/units">
-                <input type="number" name="amount" max="${city.defenders}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.sp_defenders.slug}-cost">
+                <input type="number" name="amount" size="6" max="${city.defenders}" hx-trigger="change" hx-post="/cost/training" hx-target="#${unit.sp_defenders.slug}-cost">
                 <input type="hidden" name="type" value="${unit.sp_defenders.slug}">
-                <button type="submit" ${city.defenders ? '': 'disabled'}>Train Units</button>
+                <button type="submit" ${city.defenders ? '': 'disabled'}>Train</button>
             </form>
-            <span id="${unit.sp_defenders.slug}-cost"></span>
         </td>
+        <td id="${unit.sp_defenders.slug}-cost"></td>
         </tr>
     </table>
     `;
 
     const queues = `
     <hr>
-    <h2>Training Queues</h2>
+    <h2 data-augmented-ui="tl-clip bl-clip none">Training Queues</h2>
     <table>
     <tr>
     <th>Unit Type</th>
     <th>Amount Expected</th>
     <th>Progress</th>
     </tr>
-    <tr>
     ${trainingQueues.sort((a, b) => {
         return a.due - b.due;
     }).map(queue => {
@@ -110,4 +117,4 @@ export function renderUnitTraining(city: City, units: Unit[], trainingQueues: Un
     `;
 
     return html + queues;
-}
\ No newline at end of file
+}