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

Track a recipe under the top bar

Browse source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
rope 2026-10-20 21:13:46 +01:00
parent 722cf0b382
commit a86594594a
5 changed files with 67 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

20
static/app.js
View file

@ -384,7 +384,21 @@ function topbar() {
const w = S.happenings?.weather;
if (w) chips += `<button class="chip" data-nav="town" title="${esc(weatherTip(w))}">${w.icon}</button>`;
if (S.upcoming) chips += `<button class="chip ${["raid", "dragon"].includes(S.upcoming.kind) ? "threat" : ""} ${S.upcoming.at_gates ? "alarm" : ""}" data-nav="council">${eventIcon(S.upcoming.kind)} ${S.upcoming.at_gates ? `<span class="label">${S.upcoming.kind === "dragon" ? "Overhead" : "At the gates"}</span> ` : ""}${eventWhen(S.upcoming, true)}</button>`;
return `<button class="menu-btn" data-menu aria-label="Menu">☰</button><h1>${esc(title)}</h1>${chips}`;
return `<button class="menu-btn" data-menu aria-label="Menu">☰</button><h1>${esc(title)}</h1>${chips}${S.me ? trackedBar() : ""}`;
}
// The recipe you're after, under the top bar on every page: have / need for each input.
function trackedBar() {
const me = S.me, a = me.tracked && C.actions.find((x) => x.id === me.tracked);
if (!a) return "";
const ready = Object.entries(a.inputs).every(([id, q]) => (me.bank[id] || 0) >= q);
const go = !me.blocked[a.id] && me.action?.id !== a.id;
return `<div class="tracked ${ready ? "ready" : ""}">
<button class="tracked-name" data-nav="skill:${a.skill}" data-nav-group="${esc(a.group || "")}" title="${esc(a.name)}">${a.icon}<span class="label">${esc(a.name)}</span></button>
<span class="io">${Object.entries(a.inputs).map(([id, q]) => itemChip(id, q, me.bank[id] || 0)).join("")}</span>
${go ? `<button class="btn sm primary" data-start="${a.id}">Start</button>` : ""}
<button class="pin on" data-track="${a.id}" title="Untrack">📌</button>
</div>`;
}
function eventIcon(kind) {
@ -799,7 +813,7 @@ function actionCard(a) {
<div class="top"><div class="ico">${icon}</div><div>
<div class="name">${esc(a.name)}</div>
<div class="sub">Level ${a.level} · ${dur(time)} · ${a.xp} XP</div>
</div></div>
</div>${Object.keys(a.inputs).length ? `<button class="pin ${me.tracked === a.id ? "on" : ""}" data-track="${a.id}" title="${me.tracked === a.id ? "Untrack" : "Track"}">📌</button>` : ""}</div>
${io ? `<div class="io">${io}</div>` : ""}
${extra}
${me.action?.plot2 && (active || second) ? `<div class="small muted">Plot ${active ? 1 : 2}${growingNow ? " · growing now" : " · next"}</div>` : ""}
@ -1661,6 +1675,7 @@ document.addEventListener("click", (e) => {
if (t.matches("[data-close]") || e.target === $("#modal")) { $("#modal").hidden = true; showThreat(); return; }
if ("menu" in d) { setMenu(!$("#app").classList.contains("open")); return; }
if (d.nav) {
if (d.navGroup) { tabs[d.nav.slice(6)] = d.navGroup; remember(`tab.${d.nav.slice(6)}`, d.navGroup); }
page = d.nav; remember("page", page); selected = null;
history.replaceState(null, "", "#" + page);
setMenu(false);
@ -1716,6 +1731,7 @@ document.addEventListener("click", (e) => {
if (d.garrison) return act("/api/garrison", { join: d.garrison === "1" });
if (d.perk) return act("/api/perk", { perk: d.perk });
if (d.pin) return act("/api/pin", { skill: d.pin });
if (d.track) return act("/api/track", { id: d.track });
if (d.favour) return act("/api/favour", { kind: d.favour });
if (d.food) return act("/api/food", { item: d.food === "cheapest" ? null : d.food });
if (d.potion) return act("/api/potion", { item: d.potion });

15
static/styles.css
View file

@ -110,6 +110,14 @@ a { color: var(--xp); }
.chip.alarm { color: var(--bad); animation: alarm 1.2s ease-in-out infinite; }
@keyframes alarm { 50% { background: rgba(226, 100, 92, .25); border-color: var(--bad); } }
.chip .mini { width: 70px; }
#top { flex-wrap: wrap; }
.tracked { flex-basis: 100%; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
padding-top: 8px; border-top: 1px solid var(--line); font-size: 13.5px; }
.tracked-name { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0;
font-weight: 650; cursor: pointer; }
.tracked-name .gi { width: 1.4em; height: 1.4em; }
.tracked.ready .tracked-name { color: var(--good); }
.tracked .pin { margin-left: auto; }
main { padding: 24px; max-width: 1200px; width: 100%; }
.loading { color: var(--muted); }
@ -183,10 +191,11 @@ textarea { width: 100%; resize: vertical; min-height: 60px; }
.skill-head .info { flex: 1; min-width: 0; }
.skill-head h2 { margin: 0; font-size: 22px; text-transform: none; letter-spacing: 0; color: var(--text); }
.skill-head .lv { font-variant-numeric: tabular-nums; color: var(--muted); margin: 2px 0 8px; }
.skill-head .pin { background: none; border: 0; padding: 0 4px; font-size: 16px; cursor: pointer; vertical-align: middle;
.pin { background: none; border: 0; padding: 0 4px; font-size: 16px; cursor: pointer; vertical-align: middle;
filter: grayscale(1); opacity: .35; }
.skill-head .pin:hover { opacity: .7; }
.skill-head .pin.on { filter: none; opacity: 1; }
.pin:hover { opacity: .7; }
.pin.on { filter: none; opacity: 1; }
.action .top .pin { margin-left: auto; align-self: flex-start; font-size: 14px; }
.action {
background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);