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

Master builder: striped boosted stretch under the site bar

Browse source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
rope 2026-10-20 12:13:01 +01:00
parent f60be605cf
commit 76778a660a
2 changed files with 10 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

8
static/app.js
View file

@ -790,6 +790,9 @@ function siteBanner() {
const hire = S.favours.builders; const hire = S.favours.builders;
const working = me.action?.id === "labour"; const working = me.action?.id === "labour";
const builders = S.players.filter((p) => p.skill === "construction" && p.doing === "Work on the building site").map((p) => esc(p.name)); const builders = S.players.filter((p) => p.skill === "construction" && p.doing === "Work on the building site").map((p) => esc(p.name));
// A master builder doubles the next `boost` labour players put in: that stretch of the bar fills twice as fast.
const done = Math.min(100, work.labour / work.needed * 100);
const boosted = Math.min(100, (work.labour + 2 * hire.boost) / work.needed * 100);
return `<div class="banner"><span class="banner-ico">${skillOf("construction").icon}</span><div class="grow"> return `<div class="banner"><span class="banner-ico">${skillOf("construction").icon}</span><div class="grow">
<div class="site-head"><b>${work.repair ? "Repairing" : "Building"} ${esc(spec.name)}</b> <div class="site-head"><b>${work.repair ? "Repairing" : "Building"} ${esc(spec.name)}</b>
<span class="muted small">${fmt(work.labour)} / ${fmt(work.needed)} labour</span> <span class="muted small">${fmt(work.labour)} / ${fmt(work.needed)} labour</span>
@ -797,8 +800,9 @@ function siteBanner() {
${working ? `<span class="btn sm working">Working</span>` : `<button class="btn sm primary" data-start="labour">Work on it</button>`} ${working ? `<span class="btn sm working">Working</span>` : `<button class="btn sm primary" data-start="labour">Work on it</button>`}
${hire.why ? "" : `<button class="btn sm gold" data-favour="builders" ${me.favour < hire.cost ? "disabled" : ""} title="×2 labour and XP for the next ${hire.labour}">Master builder ${FAVOUR} ${fmt(hire.cost)}</button>`} ${hire.why ? "" : `<button class="btn sm gold" data-favour="builders" ${me.favour < hire.cost ? "disabled" : ""} title="×2 labour and XP for the next ${hire.labour}">Master builder ${FAVOUR} ${fmt(hire.cost)}</button>`}
</span></div> </span></div>
<div class="bar gold" style="margin-top:6px"><span style="width:${Math.min(100, work.labour / work.needed * 100)}%"></span></div> <div class="bar gold thick site-bar" style="margin-top:6px"${hire.boost ? ` title="Master builder: this stretch builds twice as fast"` : ""}>
<div class="small muted" style="margin-top:6px">${builders.length ? `On site: ${builders.join(", ")}. ` : ""}${hire.boost ? `<b class="boosted">Master builder: ×2 for the next ${fmt(hire.boost)}.</b> ` : ""}Townsfolk +${fmt(city.townsfolk_labour)}/h.${queued ? ` Next: ${queued}.` : ""}</div> ${hire.boost ? `<span class="boost" style="width:${boosted}%"></span>` : ""}<span style="width:${done}%"></span></div>
<div class="small muted" style="margin-top:6px">${builders.length ? `On site: ${builders.join(", ")}. ` : ""}Townsfolk +${fmt(city.townsfolk_labour)}/h.${queued ? ` Next: ${queued}.` : ""}</div>
</div></div>`; </div></div>`;
} }

4
static/styles.css
View file

@ -142,6 +142,10 @@ main { padding: 24px; max-width: 1200px; width: 100%; }
.bar.xp > span { background: var(--xp); } .bar.xp > span { background: var(--xp); }
.bar.gold > span { background: var(--gold); } .bar.gold > span { background: var(--gold); }
.bar.thick { height: 12px; } .bar.thick { height: 12px; }
.site-bar { position: relative; }
.site-bar > span { position: relative; z-index: 1; }
.site-bar > span.boost { position: absolute; left: 0; top: 0; z-index: 0;
background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--gold) 45%, transparent) 0 6px, color-mix(in srgb, var(--gold) 20%, transparent) 6px 12px); }
.btn { .btn {
border: 1px solid var(--line); background: var(--panel-2); border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); border-radius: 8px;