rope/guildhall
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Townsfolk: steady rows, effects as percentages

Browse source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
rope 2026-10-28 10:51:51 +00:00
parent 58a3e66454
commit 485008a9fa
2 changed files with 2 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

3
static/app.js
View file

@ -2023,13 +2023,12 @@ function moodStat() {
function moodPanel() {
const h = S.city.happiness, e = h.effects;
const x = (v) => `×${+v.toFixed(2)}`;
const needs = Object.entries(h.needs).map(([key, n]) => `<div class="need">
<div class="need-head"><b>${NEED_NAMES[key][0]} ${NEED_NAMES[key][1]}</b><span class="muted small">${pct(n.score)}</span></div>
${n.rows.map(reqRow).join("")}</div>`).join("");
const locked = h.locked.map((key) => `<span class="tag" title="Needed from ${NEED_TIERS[key]}">🔒 ${NEED_NAMES[key][1]} · ${NEED_TIERS[key]}</span>`).join("");
const mods = h.mods.map((m) => `<span class="tag ${m.value < 0 ? "bad" : "good"}">${esc(m.name)} ${m.value > 0 ? "+" : "−"}${pct(Math.abs(m.value))}</span>`).join("");
const effects = [`🌱 Growth ${x(e.growth)}`, `🛡️ Guards ${x(e.militia)}`, `🔨 Labour ${x(e.work)}`, `${COIN} Taxes ${x(e.work)}`,
const effects = [`🌱 Growth ${pct(e.growth)}`, `🛡️ Guards ${pct(e.militia)}`, `🔨 Labour ${pct(e.work)}`, `${COIN} Taxes ${pct(e.work)}`,
...(e.leave ? [`<span class="bad">🚶 ${pct(e.leave)} leave a day</span>`] : [])];
return `<div class="panel mood"><h2>${h.icon} Townsfolk · ${h.name}</h2>
<div class="mood-bar" title="${esc(`Now ${pct(h.score)} · heading to ${pct(h.target)}`)}"><span style="width:${h.score * 100}%;--c:var(--${h.score < .4 ? "bad" : h.score < .6 ? "warn" : "good"})"></span><i style="left:${h.target * 100}%"></i></div>

2
static/styles.css
View file

@ -293,7 +293,7 @@ select { background: var(--bg); border: 1px solid var(--line); border-radius: 8p
.vs { display: flex; gap: 12px; align-items: center; margin: 12px 0 4px; }
.vs .side { flex: 1; text-align: center; padding: 10px; border-radius: 8px; background: var(--panel-2); }
.vs .side b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; }
.req { display: grid; grid-template-columns: 26px 1fr auto; gap: 4px 10px; align-items: center; margin-bottom: 10px; }
.req { display: grid; grid-template-columns: 26px 1fr auto; grid-template-rows: minmax(27px, auto) auto; gap: 4px 10px; align-items: center; margin-bottom: 10px; }
.req .bar { grid-column: 2 / 4; }
table.parts { width: 100%; border-collapse: collapse; font-size: 14px; }
table.parts td { padding: 4px 0; border-bottom: 1px solid var(--line); }