From e3b70c1e3a20c7198f1385f86667f9b2bd76ccbc Mon Sep 17 00:00:00 2001
From: rope <fredrik@nordhammer.it>
Date: Sun, 18 Oct 2026 14:44:48 +0100
Subject: [PATCH] Town square costs read have / need

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 static/app.js | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/static/app.js b/static/app.js
index 74f826b..17ae8b2 100644
--- a/static/app.js
+++ b/static/app.js
@@ -281,6 +281,11 @@ function itemChip(id, qty, have) {
   return `<span class="item-chip ${short ? "short" : ""}" title="${esc(item(id).name)}">${item(id).icon} ${fmt(qty)}${have !== undefined ? ` <span class="have">/ ${fmt(have)}</span>` : ""}</span>`;
 }
 
+// Progress towards a building cost: "have / need".
+function costChip(icon, name, need, have) {
+  return `<span class="item-chip ${have < need ? "short" : ""}" title="${esc(name)}">${icon} ${fmt(have)} <span class="have">/ ${fmt(need)}</span></span>`;
+}
+
 // --- skill pages ----------------------------------------------------------
 
 function skillPage(id) {
@@ -439,8 +444,8 @@ function town() {
   for (const [key, b] of Object.entries(city.buildings)) {
     const spec = C.buildings[key];
     const cost = b.cost ? Object.entries(b.cost).map(([id, q]) => id === "gold"
-      ? `<span class="item-chip ${city.treasury < q ? "short" : ""}">🪙 ${fmt(q)} <span class="have">/ ${fmt(city.treasury)}</span></span>`
-      : itemChip(id, q, city.stockpile[id] || 0)).join("") : "";
+      ? costChip("🪙", "Gold", q, city.treasury)
+      : costChip(item(id).icon, item(id).name, q, city.stockpile[id] || 0)).join("") : "";
     const label = b.damaged ? "Repair" : `Build level ${b.level + 1}`;
     html += `<div class="action building ${b.damaged ? "damaged" : ""}">
       <div class="top"><div class="ico">${spec.icon}</div><div>