From e3a5f519fcbec294d48a9c3cde2cd698a21e1eeb Mon Sep 17 00:00:00 2001
From: rope <fredrik@nordhammer.it>
Date: Sun, 18 Oct 2026 22:36:00 +0100
Subject: [PATCH] Show what food heals and what gear does on recipe cards

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 static/app.js     | 17 ++++++++++++++++-
 static/styles.css |  1 +
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/static/app.js b/static/app.js
index 474d85a..a32adde 100644
--- a/static/app.js
+++ b/static/app.js
@@ -287,7 +287,7 @@ function pageHtml() {
 
 function itemChip(id, qty, have) {
   const short = have !== undefined && have < qty;
-  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>`;
+  return `<span class="item-chip ${short ? "short" : ""}" title="${esc([item(id).name, itemStats(id)].filter(Boolean).join(": "))}">${item(id).icon} ${fmt(qty)}${have !== undefined ? ` <span class="have">/ ${fmt(have)}</span>` : ""}</span>`;
 }
 
 // Progress towards a building cost: "have / need".
@@ -378,6 +378,19 @@ function combatPanel() {
     </div></div>`;
 }
 
+// What an item does once made: healing, defence, tool speed, and who can use it.
+function itemStats(id) {
+  const it = item(id);
+  const parts = [];
+  if (it.heal) parts.push(`❤️ Heals ${it.heal}`);
+  if (it.food) parts.push(`feeds ${it.food} ${it.food === 1 ? "person" : "people"} for two days`);
+  if (it.power) parts.push(`+${it.power} power`);
+  if (it.armour) parts.push(`+${it.armour} armour`);
+  if (it.tool) parts.push(`${Math.round(it.speed * 100)}% faster ${skillOf(it.tool).name.toLowerCase()}`);
+  if (it.req && it.req[1] > 1) parts.push(`needs ${skillOf(it.req[0]).name.toLowerCase()} ${it.req[1]}`);
+  return parts.join(", ");
+}
+
 function actionCard(a) {
   const me = S.me;
   const active = me.action?.id === a.id;
@@ -399,6 +412,8 @@ function actionCard(a) {
     if (a.special === "sabotage") extra += `<div class="small muted">Each win weakens the coming raid by 3%, up to 30%.</div>`;
   }
   if (a.special === "recon") extra = `<div class="small muted">+${a.recon} recon on the next event</div>`;
+  const made = Object.keys(a.outputs).map(itemStats).filter(Boolean);
+  if (made.length) extra += `<div class="small makes">${made.join(" · ")}</div>`;
   return `
     <div class="action ${active ? "active" : ""} ${locked ? "locked" : ""}">
       <div class="top"><div class="ico">${icon}</div><div>
diff --git a/static/styles.css b/static/styles.css
index c71b585..016f340 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -378,3 +378,4 @@ button.sheet-skill:hover { background: var(--panel-2); }
 .tab { border: 1px solid var(--line); background: var(--panel); border-radius: 999px; padding: 5px 14px; font-weight: 600; font-size: 14px; }
 .tab.on { background: var(--gold); border-color: var(--gold); color: var(--bg); }
 .tab.dim:not(.on) { opacity: .5; }
+.makes { color: var(--muted); }