From 4289d1894c6e7c92c6ef546c8e3b4f1af1422453 Mon Sep 17 00:00:00 2001
From: xangelo <git@xangelo.ca>
Date: Thu, 26 May 2022 10:08:32 -0400
Subject: [PATCH] highlight if you have sufficient resources for
 construction/training

If you have enough resources the values returned are green.. if you
don't then they're red.
---
 public/scifi.css            |  2 +-
 src/api.ts                  |  9 +++++++--
 src/render/costs.ts         | 36 +++++++++++++++++++++++-------------
 src/render/unit-training.ts |  8 ++++----
 4 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/public/scifi.css b/public/scifi.css
index 7fc5c33..d2cf688 100644
--- a/public/scifi.css
+++ b/public/scifi.css
@@ -4,7 +4,7 @@
     --page-bg: #061619;
     --green-bg: #193818;
     --green-border: #32821c;
-    --red-border: #821c1c;
+    --red-border: #bf1212;
     --red-bg: #381818;
     --hl-text: #6ac9db;
 }
diff --git a/src/api.ts b/src/api.ts
index 0c37379..903c235 100644
--- a/src/api.ts
+++ b/src/api.ts
@@ -198,6 +198,9 @@ server.post<{
 		building_type: string
 	}
 }, string>('/cost/construction', async req => {
+	const account = await accountRepo.validate(req.authInfo.accountId, req.authInfo.token);
+	const city = await cityRepo.getUsersCity(account.id);
+
 	const amount = parseInt(req.body.amount.trim(), 10);
 
 	if(isNaN(amount) || amount < 1) {
@@ -217,7 +220,7 @@ server.post<{
 		time: building.time
   };
 
-  return renderCost(cost);
+  return renderCost(cost, city);
 });
 
 server.post<{
@@ -226,6 +229,8 @@ server.post<{
 		type: string;
 	}
 }, string>('/cost/training', async req => {
+	const account = await accountRepo.validate(req.authInfo.accountId, req.authInfo.token);
+	const city = await cityRepo.getUsersCity(account.id);
 	const amount = parseInt(req.body.amount, 10);
 
 	if(isNaN(amount) || amount < 1) {
@@ -245,7 +250,7 @@ server.post<{
 		credits: unit.credits * amount,
 		food: unit.food * amount,
     time: unit.time * amount
-	});
+	}, city);
 });
 
 server.post<{
diff --git a/src/render/costs.ts b/src/render/costs.ts
index 03082a3..b0988af 100644
--- a/src/render/costs.ts
+++ b/src/render/costs.ts
@@ -1,3 +1,5 @@
+import {City} from "../repository/city";
+
 type Cost = {
   credits: number,
   time: number,
@@ -11,44 +13,52 @@ type Cost = {
   defenders?: number
 }
 
-function lineItem(display: string, value: number): string {
+function lineItem(display: string, value: number, available: number): string {
+  let className = '';
+
+  if(available <= value && available >= 0) {
+    className = 'danger-text';
+  }
+  else if(available >= value) {
+    className = 'success-text';
+  }
   return `
   <div>
     <b>${display}:</b>
-    <span class="text">${value.toLocaleString()}</span>
+    <span class="text ${className}">${value.toLocaleString()}</span>
   </div>
   `;
 }
 
-export function renderCost(cost: Cost): string {
+export function renderCost(cost: Cost, city: City): string {
   const costAsArray = [];
 
-  costAsArray.push(lineItem('Credits', cost.credits));
-  costAsArray.push(lineItem('Time', cost.time));
+  costAsArray.push(lineItem('Credits', cost.credits, city.credits));
+  costAsArray.push(lineItem('Time', cost.time, -1));
 
   if(cost.alloys) {
-    costAsArray.push(lineItem('Alloys', cost.alloys));
+    costAsArray.push(lineItem('Alloys', cost.alloys, city.alloys));
   }
   if(cost.food) {
-    costAsArray.push(lineItem('Food', cost.food));
+    costAsArray.push(lineItem('Food', cost.food, city.food));
   }
   if(cost.energy) {
-    costAsArray.push(lineItem('Energy', cost.energy));
+    costAsArray.push(lineItem('Energy', cost.energy, city.energy));
   }
   if(cost.land) {
-    costAsArray.push(lineItem('Space', cost.land));
+    costAsArray.push(lineItem('Space', cost.land, city.totalSpace - city.usedSpace));
   }
   if(cost.population) {
-    costAsArray.push(lineItem('Pop', cost.population));
+    costAsArray.push(lineItem('Pop', cost.population, city.population));
   }
   if(cost.soldiers) {
-    costAsArray.push(lineItem('Soldiers', cost.soldiers));
+    costAsArray.push(lineItem('Soldiers', cost.soldiers, city.soldiers));
   }
   if(cost.attackers) {
-    costAsArray.push(lineItem('Attackers', cost.attackers));
+    costAsArray.push(lineItem('Attackers', cost.attackers, city.attackers));
   }
   if(cost.defenders) {
-    costAsArray.push(lineItem('Defenders', cost.defenders));
+    costAsArray.push(lineItem('Defenders', cost.defenders, city.defenders));
   }
 
 
diff --git a/src/render/unit-training.ts b/src/render/unit-training.ts
index 0214bfe..351bc79 100644
--- a/src/render/unit-training.ts
+++ b/src/render/unit-training.ts
@@ -42,7 +42,7 @@ export function renderUnitTraining(city: CityWithLocation, units: Unit[], traini
         <td>${city.soldiers}</td>
         <td>
             <form hx-post="/units">
-                <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="number" name="amount" size="6" max="${city.soldiers}" hx-trigger="keyup" 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</button>
             </form>
@@ -54,7 +54,7 @@ export function renderUnitTraining(city: CityWithLocation, units: Unit[], traini
         <td>${city.soldiers}</td>
         <td>
             <form hx-post="/units">
-                <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="number" name="amount" size="6" max="${city.soldiers}" hx-trigger="keyup" 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</button>
             </form>
@@ -66,7 +66,7 @@ export function renderUnitTraining(city: CityWithLocation, units: Unit[], traini
         <td>${city.attackers}</td>
         <td>
             <form hx-post="/units">
-                <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="number" name="amount" size="6" max="${city.attackers}" hx-trigger="keyup" 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</button>
             </form>
@@ -79,7 +79,7 @@ export function renderUnitTraining(city: CityWithLocation, units: Unit[], traini
         <td>${city.defenders}</td>
         <td>
             <form hx-post="/units">
-                <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="number" name="amount" size="6" max="${city.defenders}" hx-trigger="keyup" 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</button>
             </form>
-- 
2.25.1