644 lines
33 KiB
JavaScript
644 lines
33 KiB
JavaScript
|
"use strict";
|
|||
|
|
|
|||
|
|
// Guildhall client: renders the server's state and animates progress bars
|
|||
|
|
// between polls. The server is the source of truth for everything.
|
|||
|
|
|
|||
|
|
const POLL_MS = 10000;
|
|||
|
|
const SUMMARY_MODAL_AT = 25;
|
|||
|
|
|
|||
|
|
let C = null; // static content tables
|
|||
|
|
let S = null; // latest state
|
|||
|
|
let skew = 0; // server clock minus client clock, seconds
|
|||
|
|
let page = decodeURIComponent(location.hash.slice(1)) || remember("page") || "town";
|
|||
|
|
let selected = null; // bank item
|
|||
|
|
let pickedClass = null; // registration
|
|||
|
|
let refreshing = false;
|
|||
|
|
let refreshedFor = null; // action start a completion refresh was sent for
|
|||
|
|
|
|||
|
|
const $ = (sel, root = document) => root.querySelector(sel);
|
|||
|
|
const esc = (s) => String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" })[c]);
|
|||
|
|
const fmt = (n) => Math.floor(n).toLocaleString("en-GB");
|
|||
|
|
const serverNow = () => Date.now() / 1000 + skew;
|
|||
|
|
const item = (id) => C.items[id] || { name: id, icon: "❔", value: 0 };
|
|||
|
|
const skillOf = (id) => C.skills.find((s) => s.id === id);
|
|||
|
|
const playerName = (uid) => S.players.find((p) => p.id === uid)?.name || uid;
|
|||
|
|
|
|||
|
|
function remember(key, value) {
|
|||
|
|
try {
|
|||
|
|
if (value === undefined) return localStorage.getItem("gh." + key);
|
|||
|
|
localStorage.setItem("gh." + key, value);
|
|||
|
|
} catch { /* private mode: fine */ }
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- server ---------------------------------------------------------------
|
|||
|
|
|
|||
|
|
async function api(path, body) {
|
|||
|
|
const options = body === undefined ? {} : {
|
|||
|
|
method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body),
|
|||
|
|
};
|
|||
|
|
const res = await fetch(path, options);
|
|||
|
|
const data = await res.json().catch(() => ({ error: "The server didn't answer properly" }));
|
|||
|
|
if (!res.ok) throw new Error(data.error || res.statusText);
|
|||
|
|
return data;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function act(path, body) {
|
|||
|
|
try {
|
|||
|
|
accept(await api(path, body));
|
|||
|
|
} catch (err) {
|
|||
|
|
toast(err.message, "bad");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function refresh() {
|
|||
|
|
if (refreshing) return;
|
|||
|
|
refreshing = true;
|
|||
|
|
try {
|
|||
|
|
accept(await api("/api/state"));
|
|||
|
|
} catch (err) {
|
|||
|
|
toast(err.message, "bad");
|
|||
|
|
} finally {
|
|||
|
|
refreshing = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function accept(state) {
|
|||
|
|
S = state;
|
|||
|
|
skew = state.now - Date.now() / 1000;
|
|||
|
|
if (state.summary) showSummary(state.summary);
|
|||
|
|
render();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- time -----------------------------------------------------------------
|
|||
|
|
|
|||
|
|
function dur(seconds) {
|
|||
|
|
if (seconds > 0 && seconds < 10) return `${+seconds.toFixed(1)}s`;
|
|||
|
|
seconds = Math.max(0, Math.round(seconds));
|
|||
|
|
const d = Math.floor(seconds / 86400), h = Math.floor(seconds % 86400 / 3600);
|
|||
|
|
const m = Math.floor(seconds % 3600 / 60), s = seconds % 60;
|
|||
|
|
if (d) return `${d}d ${h}h`;
|
|||
|
|
if (h) return `${h}h ${m}m`;
|
|||
|
|
if (m) return `${m}m ${s}s`;
|
|||
|
|
return `${s}s`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function clock(t) {
|
|||
|
|
return new Date((t - skew) * 1000).toLocaleString("en-GB", { weekday: "short", hour: "2-digit", minute: "2-digit" });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function ago(t) {
|
|||
|
|
const s = serverNow() - t;
|
|||
|
|
if (s < 60) return "just now";
|
|||
|
|
return dur(s) + " ago";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- toasts & summaries ---------------------------------------------------
|
|||
|
|
|
|||
|
|
function toast(text, kind = "") {
|
|||
|
|
const el = document.createElement("div");
|
|||
|
|
el.className = "toast " + kind;
|
|||
|
|
el.textContent = text;
|
|||
|
|
$("#toasts").append(el);
|
|||
|
|
setTimeout(() => el.remove(), kind === "level" ? 6000 : 3500);
|
|||
|
|
while ($("#toasts").children.length > 5) $("#toasts").firstChild.remove();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function showSummary(sum) {
|
|||
|
|
if (!sum.done && !sum.stopped) return;
|
|||
|
|
if (sum.done >= SUMMARY_MODAL_AT) return awayModal(sum);
|
|||
|
|
const got = Object.entries(sum.items).map(([id, q]) => `+${fmt(q)} ${item(id).icon} ${item(id).name}`);
|
|||
|
|
if (sum.gold) got.push(`+${fmt(sum.gold)} gold`);
|
|||
|
|
if (got.length) toast(got.join(" · "), "good");
|
|||
|
|
if (sum.lucky) toast(sum.lucky === 1 ? "✨ Double yield!" : `✨ ${sum.lucky} double yields!`, "level");
|
|||
|
|
const spilled = Object.entries(sum.overflow);
|
|||
|
|
if (spilled.length) toast(`📦 Bank full: ${spilled.map(([id, q]) => `${fmt(q)} ${item(id).name.toLowerCase()}`).join(", ")} went to the city`);
|
|||
|
|
for (const [skill, level] of sum.levels) toast(`🎉 ${skillOf(skill).name} level ${level}!`, "level");
|
|||
|
|
if (sum.stopped) toast(`Stopped: ${sum.stopped}`, "bad");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function awayModal(sum) {
|
|||
|
|
const items = Object.entries(sum.items).map(([id, q]) => `<li>${item(id).icon} ${fmt(q)} ${esc(item(id).name)}</li>`).join("");
|
|||
|
|
const xp = Object.entries(sum.xp).map(([id, q]) => `<li>${skillOf(id).icon} ${fmt(q)} ${esc(skillOf(id).name)} XP</li>`).join("");
|
|||
|
|
const levels = sum.levels.map(([id, l]) => `<li>🎉 ${esc(skillOf(id).name)} reached level ${l}</li>`).join("");
|
|||
|
|
const spilled = Object.entries(sum.overflow).map(([id, q]) => `<li>${item(id).icon} ${fmt(q)} ${esc(item(id).name)}</li>`).join("");
|
|||
|
|
openModal(`
|
|||
|
|
<h2>While you were away</h2>
|
|||
|
|
<p class="muted">You completed ${fmt(sum.done)} actions${sum.wins || sum.losses ? ` (${sum.wins} fights won, ${sum.losses} lost)` : ""}.</p>
|
|||
|
|
${items ? `<ul>${items}</ul>` : ""}
|
|||
|
|
${sum.gold ? `<p class="gold">+${fmt(sum.gold)} gold</p>` : ""}
|
|||
|
|
${xp ? `<ul>${xp}</ul>` : ""}
|
|||
|
|
${levels ? `<ul>${levels}</ul>` : ""}
|
|||
|
|
${spilled ? `<p class="muted small">Your bank was full, so this went to the city stockpile (you earned favour for it):</p><ul>${spilled}</ul>` : ""}
|
|||
|
|
${sum.stopped ? `<p class="tag bad">Stopped: ${esc(sum.stopped)}</p>` : ""}
|
|||
|
|
<p><button class="btn primary" data-close>Back to work</button></p>`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function openModal(html) {
|
|||
|
|
const modal = $("#modal");
|
|||
|
|
modal.innerHTML = `<div class="modal-box">${html}</div>`;
|
|||
|
|
modal.hidden = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- rendering ------------------------------------------------------------
|
|||
|
|
|
|||
|
|
function render() {
|
|||
|
|
const kept = {};
|
|||
|
|
for (const el of document.querySelectorAll("[data-keep]")) kept[el.dataset.keep] = el.value;
|
|||
|
|
const focus = document.activeElement?.dataset?.keep;
|
|||
|
|
|
|||
|
|
$("#side").innerHTML = S.me ? sidebar() : `<div class="brand"><img src="/static/icon.svg" alt="">Guildhall <small>alpha</small></div>${S.dev ? devbar() : ""}`;
|
|||
|
|
$("#top").innerHTML = topbar();
|
|||
|
|
$("#main").innerHTML = S.me ? pageHtml() : register();
|
|||
|
|
|
|||
|
|
for (const [key, value] of Object.entries(kept)) {
|
|||
|
|
const el = document.querySelector(`[data-keep="${key}"]`);
|
|||
|
|
if (el) el.value = value;
|
|||
|
|
}
|
|||
|
|
if (focus) document.querySelector(`[data-keep="${focus}"]`)?.focus();
|
|||
|
|
const msgs = $(".msgs");
|
|||
|
|
if (msgs) msgs.scrollTop = msgs.scrollHeight;
|
|||
|
|
animate();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function nav(id, icon, label, meta = "", extra = "") {
|
|||
|
|
return `<button class="nav ${page === id ? "on" : ""}" data-nav="${id}"><span class="ic">${icon}</span><span class="label">${label}</span>${extra}<span class="meta">${meta}</span></button>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function sidebar() {
|
|||
|
|
const me = S.me, cls = C.classes[me.cls];
|
|||
|
|
const doing = me.action && C.actions.find((a) => a.id === me.action.id);
|
|||
|
|
const raid = S.upcoming?.kind === "raid";
|
|||
|
|
let html = `
|
|||
|
|
<div class="brand"><img src="/static/icon.svg" alt="">Guildhall <small>alpha</small></div>
|
|||
|
|
<div class="me">
|
|||
|
|
<div class="who">${esc(me.name)}</div>
|
|||
|
|
<div class="cls">${cls.icon} ${cls.name}</div>
|
|||
|
|
<div class="purse"><span class="gold" title="Gold">🪙 ${fmt(me.gold)}</span><span class="favour" title="Favour">✨ ${fmt(me.favour)}</span></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="navhead">City</div>
|
|||
|
|
${nav("town", "🏘️", "Town square", `${S.city.population}`)}
|
|||
|
|
${nav("council", "📜", "Council & threats", "", raid ? `<span class="alert"></span>` : "")}
|
|||
|
|
${nav("board", "💬", "Town board")}
|
|||
|
|
${nav("roster", "👥", "Guild roster", `${S.players.length}`)}
|
|||
|
|
<div class="navhead">You</div>
|
|||
|
|
${nav("bank", "🏦", "Bank", `${Object.keys(me.bank).length}/${me.slots}`)}`;
|
|||
|
|
let group = null;
|
|||
|
|
for (const skill of C.skills) {
|
|||
|
|
if (skill.class && skill.class !== me.cls) continue;
|
|||
|
|
if (skill.group !== group) {
|
|||
|
|
group = skill.group;
|
|||
|
|
html += `<div class="navhead">${group}</div>`;
|
|||
|
|
}
|
|||
|
|
const busy = doing?.skill === skill.id ? `<span class="dot"></span>` : "";
|
|||
|
|
html += nav("skill:" + skill.id, skill.icon, skill.name, `${me.levels[skill.id]}`, busy);
|
|||
|
|
}
|
|||
|
|
return html + (S.dev ? devbar() : "");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function devbar() {
|
|||
|
|
return `<div class="devbar"><b>Dev mode</b> · playing as ${esc(S.uid)}
|
|||
|
|
<form data-form="dev-user"><input type="text" data-keep="dev-user" placeholder="switch user"><button class="btn sm">Go</button></form>
|
|||
|
|
<div class="row">
|
|||
|
|
<button class="btn sm" data-dev-advance="1">+1h</button>
|
|||
|
|
<button class="btn sm" data-dev-advance="8">+8h</button>
|
|||
|
|
<button class="btn sm" data-dev-advance="24">+1d</button>
|
|||
|
|
<button class="btn sm" data-dev-event>Event now</button>
|
|||
|
|
</div></div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const TITLES = { town: "Town square", council: "Council & threats", board: "Town board", roster: "Guild roster", bank: "Bank" };
|
|||
|
|
|
|||
|
|
function topbar() {
|
|||
|
|
let title = TITLES[page] || "Guildhall";
|
|||
|
|
if (page.startsWith("skill:")) title = skillOf(page.slice(6))?.name || title;
|
|||
|
|
if (!S.me) title = "Welcome to Guildhall";
|
|||
|
|
let chips = "";
|
|||
|
|
if (S.me?.action) {
|
|||
|
|
const action = C.actions.find((a) => a.id === S.me.action.id);
|
|||
|
|
chips += `<button class="chip act" data-nav="skill:${action.skill}">${skillOf(action.skill).icon} <span class="label">${esc(action.name)}</span><span class="bar mini"><span data-progress></span></span></button>`;
|
|||
|
|
} else if (S.me) {
|
|||
|
|
chips += `<span class="chip muted">Idle${S.me.stopped ? ` · ${esc(S.me.stopped)}` : ""}</span>`;
|
|||
|
|
}
|
|||
|
|
if (S.upcoming) chips += `<button class="chip ${S.upcoming.kind === "raid" ? "threat" : ""}" data-nav="council">${eventIcon(S.upcoming.kind)} ${eventWhen(S.upcoming, true)}</button>`;
|
|||
|
|
return `<button class="menu-btn" data-menu aria-label="Menu">☰</button><h1>${esc(title)}</h1>${chips}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function eventIcon(kind) {
|
|||
|
|
return { raid: "⚔️", merchant: "🐪", refugees: "🧳" }[kind] || "❗";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function eventWhen(ev, short = false) {
|
|||
|
|
const now = serverNow();
|
|||
|
|
if (ev.exact) return short ? `in ${dur(ev.exact - now)}` : `${clock(ev.exact)} (in ${dur(ev.exact - now)})`;
|
|||
|
|
if (short) return `in ${dur(ev.earliest - now)}–${dur(ev.latest - now)}`;
|
|||
|
|
return `between ${clock(ev.earliest)} and ${clock(ev.latest)}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function pageHtml() {
|
|||
|
|
if (page.startsWith("skill:")) {
|
|||
|
|
const id = page.slice(6);
|
|||
|
|
const skill = skillOf(id);
|
|||
|
|
if (skill && (!skill.class || skill.class === S.me.cls)) return skillPage(id);
|
|||
|
|
page = "town";
|
|||
|
|
}
|
|||
|
|
return ({ town, council, board, roster, bank }[page] || town)();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
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>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- skill pages ----------------------------------------------------------
|
|||
|
|
|
|||
|
|
function skillPage(id) {
|
|||
|
|
const me = S.me, skill = skillOf(id), level = me.levels[id], xp = me.xp[id];
|
|||
|
|
const floor = C.xp_table[level], ceil = C.xp_table[level + 1];
|
|||
|
|
const pct = ceil ? (xp - floor) / (ceil - floor) * 100 : 100;
|
|||
|
|
const cls = C.classes[me.cls];
|
|||
|
|
const fast = cls.fast.includes(id);
|
|||
|
|
let html = `
|
|||
|
|
<div class="panel"><div class="skill-head">
|
|||
|
|
<div class="big">${skill.icon}</div>
|
|||
|
|
<div class="info">
|
|||
|
|
<h2>${skill.name}</h2>
|
|||
|
|
<div class="lv">Level ${level} / 99 · ${fmt(xp)}${ceil ? ` / ${fmt(ceil)}` : ""} XP</div>
|
|||
|
|
<div class="bar xp thick"><span style="width:${pct}%"></span></div>
|
|||
|
|
</div>
|
|||
|
|
${fast ? `<span class="tag gold">${cls.icon} ${cls.name} bonus</span>` : ""}
|
|||
|
|
</div></div>`;
|
|||
|
|
if (id === "combat") html += combatPanel();
|
|||
|
|
if (id === "reconnaissance") html += `<div class="panel small muted">Every ${8} reconnaissance points on an upcoming event raises its intel by one level, on top of what the spymaster's guild provides. The council & threats page shows the progress.</div>`;
|
|||
|
|
html += `<div class="grid">${C.actions.filter((a) => a.skill === id).map(actionCard).join("")}</div>`;
|
|||
|
|
return html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function combatPanel() {
|
|||
|
|
const me = S.me;
|
|||
|
|
const slot = (name, label) => {
|
|||
|
|
const id = me.equip[name];
|
|||
|
|
return `<div class="item-chip">${id ? `${item(id).icon} ${esc(item(id).name)} (+${item(id).power}) <button class="btn sm" data-unequip="${name}">Unequip</button>` : `<span class="muted">No ${label}</span>`}</div>`;
|
|||
|
|
};
|
|||
|
|
return `<div class="panel"><h2>Equipment</h2>
|
|||
|
|
<div class="btns">${slot("weapon", "weapon")} ${slot("shield", "shield")}</div>
|
|||
|
|
<p class="small muted">Combat power ${me.power} = combat level + gear${me.cls === "warrior" ? ". As a warrior you count for ×1.5 in the garrison" : ""}. Equip swords and shields from the bank.</p></div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function actionCard(a) {
|
|||
|
|
const me = S.me;
|
|||
|
|
const active = me.action?.id === a.id;
|
|||
|
|
const why = me.blocked[a.id];
|
|||
|
|
const locked = why && (why.startsWith("Needs") || why.startsWith("Only"));
|
|||
|
|
const out = Object.keys(a.outputs)[0];
|
|||
|
|
const icon = out ? item(out).icon : skillOf(a.skill).icon;
|
|||
|
|
const time = me.times[a.id];
|
|||
|
|
let io = "";
|
|||
|
|
if (Object.keys(a.inputs).length) {
|
|||
|
|
io += Object.entries(a.inputs).map(([id, q]) => itemChip(id, q, me.bank[id] || 0)).join("") + `<span class="arrow">→</span>`;
|
|||
|
|
}
|
|||
|
|
io += Object.entries(a.outputs).map(([id, q]) => itemChip(id, q)).join("");
|
|||
|
|
let extra = "";
|
|||
|
|
if (a.skill === "combat") {
|
|||
|
|
const chance = Math.min(0.97, Math.max(0.15, 0.5 + (me.power - a.difficulty) * 0.04));
|
|||
|
|
extra = `<div class="small">Win chance <b>${Math.round(chance * 100)}%</b>${a.gold ? ` · ${a.gold} gold` : ""}</div>`;
|
|||
|
|
if (a.drops) io += a.drops.map(([id, q, odds]) => `<span class="item-chip" title="${Math.round(odds * 100)}% chance">${item(id).icon} ${q} <span class="have">${Math.round(odds * 100)}%</span></span>`).join("");
|
|||
|
|
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>`;
|
|||
|
|
return `
|
|||
|
|
<div class="action ${active ? "active" : ""} ${locked ? "locked" : ""}">
|
|||
|
|
<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>
|
|||
|
|
${io ? `<div class="io">${io}</div>` : ""}
|
|||
|
|
${extra}
|
|||
|
|
${active ? `<div class="bar thick"><span data-progress></span></div>` : ""}
|
|||
|
|
<div class="foot">
|
|||
|
|
<span class="why">${!active && why ? esc(why) : ""}</span>
|
|||
|
|
${active ? `<button class="btn danger" data-stop>Stop</button>` : `<button class="btn primary" data-start="${a.id}" ${why ? "disabled" : ""}>Start</button>`}
|
|||
|
|
</div>
|
|||
|
|
</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- bank -----------------------------------------------------------------
|
|||
|
|
|
|||
|
|
function bank() {
|
|||
|
|
const me = S.me;
|
|||
|
|
const entries = Object.entries(me.bank).sort((x, y) => Object.keys(C.items).indexOf(x[0]) - Object.keys(C.items).indexOf(y[0]));
|
|||
|
|
if (selected && !me.bank[selected]) selected = null;
|
|||
|
|
let slots = entries.map(([id, q]) => `
|
|||
|
|
<button class="slot ${selected === id ? "on" : ""}" data-select="${id}" title="${esc(item(id).name)}">
|
|||
|
|
<span class="qty ${q >= me.stack ? "full" : ""}">${fmt(q)}</span>${item(id).icon}<span class="nm">${esc(item(id).name)}</span>
|
|||
|
|
</button>`).join("");
|
|||
|
|
for (let i = entries.length; i < me.slots; i++) slots += `<div class="slot empty"></div>`;
|
|||
|
|
return `
|
|||
|
|
<div class="bank-wrap">
|
|||
|
|
<div>
|
|||
|
|
<div class="panel">
|
|||
|
|
<h2>Bank · ${entries.length} / ${me.slots} slots · up to ${fmt(me.stack)} each</h2>
|
|||
|
|
<div class="slots">${slots}</div>
|
|||
|
|
<p class="small muted">When an item doesn't fit:
|
|||
|
|
<button class="btn sm ${me.overflow === "city" ? "gold" : ""}" data-overflow="city">Send it to the city</button>
|
|||
|
|
<button class="btn sm ${me.overflow === "stop" ? "gold" : ""}" data-overflow="stop">Stop working</button>
|
|||
|
|
<br>Raids never touch your bank. Overflow sent to the city still earns favour.</p>
|
|||
|
|
</div>
|
|||
|
|
${favourPanel()}
|
|||
|
|
</div>
|
|||
|
|
<div>${selected ? itemPanel(selected) : goldPanel()}</div>
|
|||
|
|
</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function itemPanel(id) {
|
|||
|
|
const me = S.me, it = item(id), have = me.bank[id];
|
|||
|
|
const merchant = S.city.merchant_until > serverNow();
|
|||
|
|
const price = it.value * (merchant ? 1.5 : 1);
|
|||
|
|
const others = S.players.filter((p) => p.id !== S.uid);
|
|||
|
|
const qtyBtns = (attr) => [1, 10, 100].filter((q) => q <= have).map((q) => `<button class="btn sm" ${attr}="${id}" data-qty="${q}">${q}</button>`).join("")
|
|||
|
|
+ `<button class="btn sm" ${attr}="${id}" data-qty="all">All (${fmt(have)})</button>`;
|
|||
|
|
return `<div class="panel item-panel">
|
|||
|
|
<div class="ico">${it.icon}</div>
|
|||
|
|
<h3>${esc(it.name)}</h3>
|
|||
|
|
<div class="muted small">You have ${fmt(have)} · worth ${price % 1 ? price.toFixed(1) : price} gold each${merchant ? " (merchant in town!)" : ""}</div>
|
|||
|
|
${it.slot ? `<div class="row"><button class="btn gold" data-equip="${id}">Equip ${it.slot} (+${it.power} power)</button></div>` : ""}
|
|||
|
|
${it.food ? `<div class="row small muted">Feeds ${it.food} townsfolk for two days in the city granary.</div>` : ""}
|
|||
|
|
<div class="row"><div class="k">Donate to the city · +${it.value} favour each</div><div class="btns">${qtyBtns("data-donate")}</div></div>
|
|||
|
|
${others.length ? `<div class="row"><div class="k">Give to <select data-keep="give-to">${others.map((p) => `<option value="${esc(p.id)}">${esc(p.name)}</option>`).join("")}</select></div><div class="btns">${qtyBtns("data-give")}</div></div>` : ""}
|
|||
|
|
<div class="row"><div class="k">Sell</div><div class="btns">${qtyBtns("data-sell")}</div></div>
|
|||
|
|
<div class="row"><button class="btn sm" data-select="">Close</button></div>
|
|||
|
|
</div>${goldPanel()}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function goldPanel() {
|
|||
|
|
return `<div class="panel"><h2>Gold</h2>
|
|||
|
|
<p class="gold">🪙 ${fmt(S.me.gold)}</p>
|
|||
|
|
<form data-form="gold" class="btns"><input type="number" min="1" data-keep="gold" placeholder="Amount" style="width:120px"><button class="btn gold">Donate to treasury</button></form>
|
|||
|
|
<p class="small muted">The treasury pays the gold part of new buildings. 1 favour per gold.</p></div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function favourPanel() {
|
|||
|
|
const me = S.me;
|
|||
|
|
return `<div class="panel"><h2>Favour with the council</h2>
|
|||
|
|
<p class="favour">✨ ${fmt(me.favour)} favour · ${fmt(me.donated)} given in total</p>
|
|||
|
|
<div class="btns"><button class="btn" data-perk="bank_slot" ${me.favour < me.perk_costs.bank_slot ? "disabled" : ""}>+1 bank slot (${fmt(me.perk_costs.bank_slot)} favour)</button></div>
|
|||
|
|
<p class="small muted">More perks to come. The council remembers who helped.</p></div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- town -----------------------------------------------------------------
|
|||
|
|
|
|||
|
|
function town() {
|
|||
|
|
const city = S.city;
|
|||
|
|
let html = `<div class="stats">
|
|||
|
|
<div class="stat"><div class="k">Day</div><div class="v">${city.day}</div></div>
|
|||
|
|
<div class="stat"><div class="k">Population</div><div class="v">${city.population} <small>/ ${city.housing} homes</small></div></div>
|
|||
|
|
<div class="stat"><div class="k">Treasury</div><div class="v gold">${fmt(city.treasury)}</div></div>
|
|||
|
|
<div class="stat"><div class="k">Defence</div><div class="v">${fmt(city.defence.total)}</div></div>
|
|||
|
|
<div class="stat"><div class="k">Raids repelled</div><div class="v">${city.repelled}</div></div>
|
|||
|
|
</div>`;
|
|||
|
|
if (city.starving) html += `<div class="banner bad">🍞<div class="grow"><b>The granary is empty.</b> People are leaving and the city defends worse. Donate bread, cooked meat or stew.</div></div>`;
|
|||
|
|
if (city.merchant_until > serverNow()) html += `<div class="banner">🐪<div class="grow"><b>A merchant caravan is in town.</b> Everything sells for 50% more for another ${dur(city.merchant_until - serverNow())}.</div></div>`;
|
|||
|
|
const work = city.construction;
|
|||
|
|
if (work) {
|
|||
|
|
const spec = C.buildings[work.building];
|
|||
|
|
html += `<div class="banner">🏗️<div class="grow"><b>${work.repair ? "Repairing" : "Building"} ${esc(spec.name)}</b> · done in <span data-countdown="${work.done_at}">${dur(work.done_at - serverNow())}</span>
|
|||
|
|
<div class="bar gold" style="margin-top:6px"><span data-span="${work.start},${work.done_at}"></span></div></div></div>`;
|
|||
|
|
}
|
|||
|
|
html += `<div class="section-title">Buildings</div><div class="grid wide">`;
|
|||
|
|
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("") : "";
|
|||
|
|
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>
|
|||
|
|
<div class="name">${esc(spec.name)} <span class="lv muted">${b.level} / ${spec.max}</span> ${b.damaged ? `<span class="tag bad">Damaged</span>` : ""}</div>
|
|||
|
|
<div class="sub">${esc(spec.effect)}</div>
|
|||
|
|
</div></div>
|
|||
|
|
${b.cost ? `<div class="cost">${cost}</div>
|
|||
|
|
<div class="foot"><span class="why">${work ? "Builders busy" : ""}</span>
|
|||
|
|
<button class="btn ${b.damaged ? "danger" : "primary"}" data-build="${key}" ${b.missing.length || work ? "disabled" : ""}>${label}</button></div>`
|
|||
|
|
: `<div class="tag good">Fully built</div>`}
|
|||
|
|
</div>`;
|
|||
|
|
}
|
|||
|
|
html += `</div><div class="section-title">City stockpile</div><div class="panel">`;
|
|||
|
|
const stock = Object.entries(city.stockpile);
|
|||
|
|
html += stock.length ? `<div class="stock">${stock.map(([id, q]) => itemChip(id, q)).join("")}</div>` : `<p class="muted">Empty. Donate from your bank.</p>`;
|
|||
|
|
html += `<p class="small muted">Anyone can start a building once the stockpile and treasury cover it. Until then, the stockpile is what raiders come for.</p></div>`;
|
|||
|
|
return html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- council --------------------------------------------------------------
|
|||
|
|
|
|||
|
|
function pips(level) {
|
|||
|
|
return `<span class="pips" title="Intel level ${level} of 3">${[1, 2, 3].map((i) => `<i class="${i <= level ? "on" : ""}"></i>`).join("")}</span>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function council() {
|
|||
|
|
const ev = S.upcoming, city = S.city, me = S.me;
|
|||
|
|
let html = "";
|
|||
|
|
if (!ev) {
|
|||
|
|
html += `<div class="panel"><h2>All quiet</h2><p class="muted">No news on the roads. The spymasters will report as soon as something stirs.</p></div>`;
|
|||
|
|
} else {
|
|||
|
|
html += `<div class="panel ${ev.kind === "raid" ? "threat-card" : ""}">
|
|||
|
|
<h2>${eventIcon(ev.kind)} ${ev.kind === "raid" ? "Threat" : "News"} · intel ${pips(ev.intel)}</h2>
|
|||
|
|
<div class="headline">${esc(ev.headline)}</div>
|
|||
|
|
<div class="kv">
|
|||
|
|
<span class="k">Expected</span><span>${eventWhen(ev)}</span>
|
|||
|
|
${ev.range ? `<span class="k">Strength</span><span>${ev.strength ?? `${ev.range[0]}–${ev.range[1]}`}</span>` : ""}
|
|||
|
|
${ev.trait ? `<span class="k">Scouts say</span><span>${esc(ev.trait)}</span>` : ""}
|
|||
|
|
${ev.camp ? `<span class="k">Their camp</span><span>Located. Fighters can sabotage it from the combat page${ev.sabotage ? ` (weakened ${ev.sabotage}% so far)` : ""}.</span>` : ""}
|
|||
|
|
${me.cls === "scout" || ev.recon ? `<span class="k">Reconnaissance</span><span>${ev.intel < 3 ? `${ev.recon} points · ${ev.recon_next} more for the next intel level` : `${ev.recon} points · nothing more to learn`}</span>` : ""}
|
|||
|
|
</div>
|
|||
|
|
${ev.intel < 3 ? `<p class="small muted">Better intel comes from the spymaster's guild and scouts' reconnaissance.</p>` : ""}`;
|
|||
|
|
if (ev.kind === "raid") {
|
|||
|
|
const strength = ev.strength ?? (ev.range ? `${ev.range[0]}–${ev.range[1]}` : "?");
|
|||
|
|
html += `<div class="vs"><div class="side"><span class="muted small">Our defence</span><b>${fmt(city.defence.total)}</b></div><span class="muted">vs</span><div class="side"><span class="muted small">Raiders</span><b>${strength}</b></div></div>`;
|
|||
|
|
}
|
|||
|
|
html += `</div>`;
|
|||
|
|
if (ev.kind === "raid") html += raidPrep(ev);
|
|||
|
|
}
|
|||
|
|
html += `<div class="section-title">Past events</div>`;
|
|||
|
|
if (!S.history.length) html += `<p class="muted">Nothing has happened yet.</p>`;
|
|||
|
|
for (const h of S.history) {
|
|||
|
|
if (!h.report) continue;
|
|||
|
|
const win = h.kind !== "raid" || h.report.title.startsWith("Victory");
|
|||
|
|
html += `<div class="report ${h.kind === "raid" ? (win ? "win" : "loss") : ""}">
|
|||
|
|
<b>${eventIcon(h.kind)} ${esc(h.report.title)}</b> <span class="muted small">${ago(h.at)}</span>
|
|||
|
|
${h.kind === "raid" ? `<p class="muted">Defence ${fmt(h.report.defence)} vs raiders ${fmt(h.report.attack)}${h.report.garrison.length ? ` · garrison: ${h.report.garrison.map((g) => esc(g.name)).join(", ")}` : ""}</p>` : ""}
|
|||
|
|
${h.report.lines.map((l) => `<p>${esc(l)}</p>`).join("")}
|
|||
|
|
</div>`;
|
|||
|
|
}
|
|||
|
|
return html;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function raidPrep(ev) {
|
|||
|
|
const city = S.city, me = S.me, d = city.defence;
|
|||
|
|
const names = { townsfolk: "Townsfolk with pitchforks", walls: "Walls", militia: "Militia (barracks)", weapons: "Swords in the armoury", shields: "Shields in the armoury", arrows: "Arrows", garrison: "Garrison" };
|
|||
|
|
const reqs = (ev.requests || []).map((r) => {
|
|||
|
|
const mine = me.bank[r.item] || 0;
|
|||
|
|
return `<div class="req"><span>${item(r.item).icon}</span><span>${r.item === "bread" ? "Food (any)" : esc(item(r.item).name)} <span class="muted small">${fmt(r.have)} / ${fmt(r.want)}</span></span>
|
|||
|
|
${mine ? `<button class="btn sm gold" data-donate="${r.item}" data-qty="all">Give ${fmt(mine)}</button>` : "<span></span>"}
|
|||
|
|
<div class="bar"><span style="width:${Math.min(100, r.have / r.want * 100)}%"></span></div></div>`;
|
|||
|
|
}).join("");
|
|||
|
|
return `<div class="cols">
|
|||
|
|
<div class="panel"><h2>Council requests</h2>${reqs}
|
|||
|
|
<p class="small muted">Arrows, swords and shields in the stockpile arm the defenders. Food keeps them fighting.</p></div>
|
|||
|
|
<div class="panel"><h2>Defence</h2>
|
|||
|
|
<table class="parts">${Object.entries(d.parts).map(([k, v]) => `<tr><td>${names[k]}</td><td>${fmt(v)}</td></tr>`).join("")}
|
|||
|
|
${d.starving ? `<tr><td class="bad">Hungry (×0.8)</td><td></td></tr>` : ""}</table>
|
|||
|
|
<h2 style="margin-top:16px">Garrison</h2>
|
|||
|
|
<p class="small">${d.garrison.length ? d.garrison.map((g) => `${esc(g.name)} (${g.power})`).join(", ") : `<span class="muted">Nobody has signed up yet.</span>`}</p>
|
|||
|
|
${me.garrison ? `<button class="btn" data-garrison="0">Leave the garrison</button>`
|
|||
|
|
: `<button class="btn primary" data-garrison="1">Stand guard (+${me.cls === "warrior" ? me.power * 1.5 : me.power})</button>`}
|
|||
|
|
<p class="small muted">You can keep working while you're signed up. Victory earns the garrison favour and combat XP.</p>
|
|||
|
|
</div></div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- board & roster -------------------------------------------------------
|
|||
|
|
|
|||
|
|
function board() {
|
|||
|
|
const msgs = S.board.map((m) => `<div class="msg"><span class="who">${esc(playerName(m.who))}</span><span class="when">${ago(m.at)}</span><div class="text">${esc(m.text)}</div></div>`).join("");
|
|||
|
|
const ledger = [...S.ledger].reverse().map((l) => `<li>${esc(l.text)}<span class="when">${ago(l.at)}</span></li>`).join("");
|
|||
|
|
return `<div class="cols">
|
|||
|
|
<div class="panel"><h2>Town board</h2>
|
|||
|
|
<div class="msgs">${msgs || `<p class="muted">No messages yet. Say hello, or ask for that iron you need.</p>`}</div>
|
|||
|
|
<form data-form="board"><textarea data-keep="board" maxlength="500" placeholder="Write to the guild…"></textarea>
|
|||
|
|
<p><button class="btn primary">Post</button></p></form></div>
|
|||
|
|
<div class="panel"><h2>Town ledger</h2><ul class="ledger">${ledger || `<li class="muted">Nothing recorded yet.</li>`}</ul></div>
|
|||
|
|
</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function roster() {
|
|||
|
|
return `<div class="grid wide">${S.players.map((p) => {
|
|||
|
|
const cls = C.classes[p.cls];
|
|||
|
|
const levels = C.skills.filter((s) => !s.class || s.class === p.cls).map((s) => `<div>${s.icon} <span>${s.name}</span> ${p.levels[s.id]}</div>`).join("");
|
|||
|
|
return `<div class="panel person"><div class="top"><span class="ico">${cls.icon}</span><div>
|
|||
|
|
<b>${esc(p.name)}</b> <span class="muted small">${cls.name} · total level ${p.total}</span>
|
|||
|
|
<div class="small">${p.doing ? `${skillOf(p.skill).icon} ${esc(p.doing)}` : `<span class="muted">Idle</span>`}${p.garrison ? ` · <span class="tag warn">On guard</span>` : ""}</div>
|
|||
|
|
<div class="small favour">✨ ${fmt(p.donated)} given to the city</div></div></div>
|
|||
|
|
<div class="levels">${levels}</div></div>`;
|
|||
|
|
}).join("")}</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- registration ---------------------------------------------------------
|
|||
|
|
|
|||
|
|
function register() {
|
|||
|
|
const cards = Object.entries(C.classes).map(([id, c]) => `
|
|||
|
|
<button class="class-card ${pickedClass === id ? "on" : ""}" data-class="${id}">
|
|||
|
|
<span class="ico">${c.icon}</span><span><b>${c.name}</b><p>${esc(c.bonus)}.</p><p>${esc(c.signature)}.</p></span>
|
|||
|
|
</button>`).join("");
|
|||
|
|
return `<div class="welcome">
|
|||
|
|
<h2>A new city on the frontier</h2>
|
|||
|
|
<p class="muted">You're one of a handful of adventurers settling a young city at the edge of the kingdom.
|
|||
|
|
Train your skills, supply the council, and keep the place standing when the bandits come.
|
|||
|
|
Your adventurer keeps working while you're away, for up to a day.</p>
|
|||
|
|
<div class="classes">${cards}</div>
|
|||
|
|
<form data-form="register" class="btns">
|
|||
|
|
<input type="text" data-keep="name" maxlength="20" placeholder="Your adventurer's name" style="flex:1;min-width:200px">
|
|||
|
|
<button class="btn primary" ${pickedClass ? "" : "disabled"}>Enter the city</button>
|
|||
|
|
</form>
|
|||
|
|
<p class="small muted">Every class can train every skill. Your class makes some things faster and gives you one thing only you can do.</p>
|
|||
|
|
</div>`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- animation ------------------------------------------------------------
|
|||
|
|
|
|||
|
|
function animate() {
|
|||
|
|
const now = serverNow();
|
|||
|
|
const a = S?.me?.action;
|
|||
|
|
if (a) {
|
|||
|
|
const pct = Math.min(1, (now - a.start) / a.duration);
|
|||
|
|
for (const el of document.querySelectorAll("[data-progress]")) el.style.width = (pct * 100) + "%";
|
|||
|
|
if (pct >= 1 && refreshedFor !== a.start) {
|
|||
|
|
refreshedFor = a.start;
|
|||
|
|
setTimeout(refresh, 150);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
for (const el of document.querySelectorAll("[data-span]")) {
|
|||
|
|
const [start, end] = el.dataset.span.split(",").map(Number);
|
|||
|
|
el.style.width = Math.min(100, (now - start) / (end - start) * 100) + "%";
|
|||
|
|
}
|
|||
|
|
for (const el of document.querySelectorAll("[data-countdown]")) el.textContent = dur(Number(el.dataset.countdown) - now);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function loop() {
|
|||
|
|
if (S) animate();
|
|||
|
|
requestAnimationFrame(loop);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// --- events ---------------------------------------------------------------
|
|||
|
|
|
|||
|
|
document.addEventListener("click", (e) => {
|
|||
|
|
const t = e.target.closest("button, [data-menu], [data-close]");
|
|||
|
|
if (!t) return;
|
|||
|
|
const d = t.dataset;
|
|||
|
|
if (t.matches("[data-close]") || e.target === $("#modal")) { $("#modal").hidden = true; return; }
|
|||
|
|
if ("menu" in d) { $("#app").classList.toggle("open"); return; }
|
|||
|
|
if (d.nav) {
|
|||
|
|
page = d.nav; remember("page", page); selected = null;
|
|||
|
|
history.replaceState(null, "", "#" + page);
|
|||
|
|
$("#app").classList.remove("open");
|
|||
|
|
render(); window.scrollTo(0, 0); return;
|
|||
|
|
}
|
|||
|
|
if (d.start) return act("/api/action", { id: d.start });
|
|||
|
|
if ("stop" in d) return act("/api/stop", {});
|
|||
|
|
if ("select" in d) { selected = d.select || null; render(); return; }
|
|||
|
|
const qty = d.qty === "all" ? "all" : Number(d.qty);
|
|||
|
|
if (d.donate) return act("/api/donate", { item: d.donate, qty });
|
|||
|
|
if (d.sell) return act("/api/sell", { item: d.sell, qty });
|
|||
|
|
if (d.give) return act("/api/give", { item: d.give, qty, to: $("[data-keep=give-to]").value });
|
|||
|
|
if (d.equip) return act("/api/equip", { item: d.equip });
|
|||
|
|
if (d.unequip) return act("/api/equip", { slot: d.unequip });
|
|||
|
|
if (d.build) return act("/api/build", { building: d.build });
|
|||
|
|
if (d.garrison) return act("/api/garrison", { join: d.garrison === "1" });
|
|||
|
|
if (d.perk) return act("/api/perk", { perk: d.perk });
|
|||
|
|
if (d.overflow) return act("/api/settings", { overflow: d.overflow });
|
|||
|
|
if (d.class) { pickedClass = d.class; render(); return; }
|
|||
|
|
if (d.devAdvance) return act("/api/dev/advance", { hours: Number(d.devAdvance) });
|
|||
|
|
if ("devEvent" in d) return act("/api/dev/event", {});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$("#modal").addEventListener("click", (e) => { if (e.target.id === "modal") e.target.hidden = true; });
|
|||
|
|
|
|||
|
|
document.addEventListener("submit", async (e) => {
|
|||
|
|
const form = e.target.closest("[data-form]");
|
|||
|
|
if (!form) return;
|
|||
|
|
e.preventDefault();
|
|||
|
|
const field = form.querySelector("[data-keep]");
|
|||
|
|
const value = field.value.trim();
|
|||
|
|
if (form.dataset.form === "register") {
|
|||
|
|
if (!pickedClass) return toast("Pick a class first", "bad");
|
|||
|
|
return act("/api/register", { name: value, cls: pickedClass });
|
|||
|
|
}
|
|||
|
|
if (form.dataset.form === "board") {
|
|||
|
|
if (!value) return;
|
|||
|
|
field.value = "";
|
|||
|
|
return act("/api/board", { text: value });
|
|||
|
|
}
|
|||
|
|
if (form.dataset.form === "gold") {
|
|||
|
|
field.value = "";
|
|||
|
|
return act("/api/donate", { item: "gold", qty: Number(value) });
|
|||
|
|
}
|
|||
|
|
if (form.dataset.form === "dev-user" && value) {
|
|||
|
|
document.cookie = `gh_user=${encodeURIComponent(value)}; path=/; SameSite=Lax`;
|
|||
|
|
field.value = "";
|
|||
|
|
return refresh();
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
document.addEventListener("visibilitychange", () => { if (!document.hidden) refresh(); });
|
|||
|
|
|
|||
|
|
(async function boot() {
|
|||
|
|
try {
|
|||
|
|
C = await api("/api/content");
|
|||
|
|
await refresh();
|
|||
|
|
} catch (err) {
|
|||
|
|
$("#main").innerHTML = `<p class="loading">Couldn't reach the city: ${esc(err.message)}</p>`;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setInterval(() => { if (!document.hidden) refresh(); }, POLL_MS);
|
|||
|
|
requestAnimationFrame(loop);
|
|||
|
|
})();
|