Tooltips pass: weather, purse, badges, chips, sheet
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
parent
cdb109e554
commit
400d8a2657
2 changed files with 24 additions and 18 deletions
|
|
@ -217,8 +217,8 @@ function setMenu(open) {
|
|||
document.documentElement.classList.toggle("menu-open", open);
|
||||
}
|
||||
|
||||
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 nav(id, icon, label, meta = "", extra = "", tip = "") {
|
||||
return `<button class="nav ${page === id ? "on" : ""}" data-nav="${id}"${tip ? ` title="${esc(tip)}"` : ""}><span class="ic">${icon}</span><span class="label">${label}</span>${extra}<span class="meta">${meta}</span></button>`;
|
||||
}
|
||||
|
||||
function sidebar() {
|
||||
|
|
@ -230,16 +230,16 @@ function sidebar() {
|
|||
<div class="me">
|
||||
<div class="who">${esc(me.name)}</div>
|
||||
<div class="cls">${cls.icon} ${cls.name} · ${HEART} ${fmt(me.hp)}/${me.max_hp}</div>
|
||||
<div class="purse"><span class="gold" title="Gold">${COIN} ${fmt(me.gold)}</span><span class="favour" title="Favour">${FAVOUR} ${fmt(me.favour)}</span></div>
|
||||
<div class="purse"><span class="gold" title="Gold: from fights and selling. Fund buildings with it or give it to the treasury">${COIN} ${fmt(me.gold)}</span><span class="favour" title="Favour: earned by giving to the city. Spend it on the Council page, or on extra bank slots">${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("town", "🏘️", "Town square", `${S.city.population}`, "", `Population ${S.city.population}`)}
|
||||
${nav("council", "📜", "Council & threats", "", raid ? `<span class="alert"></span>` : "", raid ? "A threat is coming" : "")}
|
||||
${nav("board", "💬", "Town board")}
|
||||
${nav("roster", "👥", "Guild roster", `${S.players.length}`)}
|
||||
${nav("roster", "👥", "Guild roster", `${S.players.length}`, "", `${S.players.length} ${S.players.length === 1 ? "adventurer" : "adventurers"}`)}
|
||||
<div class="navhead">You</div>
|
||||
${nav("character", cls.icon, "Character", `${skillOf("combat").icon} ${me.levels.combat}`)}
|
||||
${nav("bank", "🏦", "Bank", `${me.slots_used}/${me.slots}`)}`;
|
||||
${nav("character", cls.icon, "Character", `${skillOf("combat").icon} ${me.levels.combat}`, "", `Combat level ${me.levels.combat}`)}
|
||||
${nav("bank", "🏦", "Bank", `${me.slots_used}/${me.slots}`, "", `${me.slots_used} of ${me.slots} bank slots used`)}`;
|
||||
let group = null;
|
||||
for (const skill of C.skills) {
|
||||
if (skill.class && skill.class !== me.cls) continue;
|
||||
|
|
@ -283,7 +283,7 @@ function topbar() {
|
|||
chips += `<span class="chip muted">Idle${S.me.stopped ? ` · ${esc(S.me.stopped)}` : ""}</span>`;
|
||||
}
|
||||
const w = S.happenings?.weather;
|
||||
if (w) chips += `<button class="chip" data-nav="town" title="${esc(w.name)}: ${esc(w.text)}">${w.icon}</button>`;
|
||||
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" : ""}" 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}`;
|
||||
}
|
||||
|
|
@ -317,7 +317,7 @@ function itemChip(id, qty, have) {
|
|||
|
||||
// Progress towards a building cost: "have / need".
|
||||
function costChip(icon, name, need, have) {
|
||||
return `<span class="item-chip ${have < need ? "short" : ""}" title="${esc(name)}">${icon} ${fmt(have)} <span class="have">/ ${fmt(need)}</span></span>`;
|
||||
return `<span class="item-chip ${have < need ? "short" : ""}" title="${esc(`${name}: ${have < need ? `${fmt(need - have)} more needed` : "done"}`)}">${icon} ${fmt(have)} <span class="have">/ ${fmt(need)}</span></span>`;
|
||||
}
|
||||
|
||||
// --- skill pages ----------------------------------------------------------
|
||||
|
|
@ -532,7 +532,7 @@ function bank() {
|
|||
return parts;
|
||||
});
|
||||
let slots = stacks.map(([id, q]) => `
|
||||
<button class="slot ${selected === id ? "on" : ""}" data-select="${id}" title="${esc(item(id).name)}: ${fmt(me.bank[id])} in all">
|
||||
<button class="slot ${selected === id ? "on" : ""}" data-select="${id}" title="${esc(item(id).name)}: ${fmt(me.bank[id])}${me.bank[id] > me.stack ? ` across ${Math.ceil(me.bank[id] / me.stack)} slots` : ""}">
|
||||
<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 = stacks.length; i < me.slots; i++) slots += `<div class="slot empty"></div>`;
|
||||
|
|
@ -665,9 +665,15 @@ function siteBanner() {
|
|||
</div></div>`;
|
||||
}
|
||||
|
||||
// "Rain: farming 10% faster. Clear skies in 3h 20m."
|
||||
function weatherTip(w) {
|
||||
const next = w.next === w.kind ? `Staying ${w.name.toLowerCase()}` : w.next_name;
|
||||
return `${w.name}: ${w.text.charAt(0).toLowerCase()}${w.text.slice(1)}. ${next} in ${dur(w.until - serverNow())}.`;
|
||||
}
|
||||
|
||||
function weatherCard() {
|
||||
const h = S.happenings, w = h.weather;
|
||||
return `<div class="stat" title="${esc(w.text)}"><div class="k">${h.season.icon} ${h.season.name}, day ${h.season.day}</div>
|
||||
return `<div class="stat" title="${esc(`${weatherTip(w)} Weather changes every few hours; each season lasts a week.`)}"><div class="k">${h.season.icon} ${h.season.name}, day ${h.season.day}</div>
|
||||
<div class="v">${w.icon} <small>${esc(w.name)}</small></div>
|
||||
<div class="note">${w.next === w.kind ? `Staying ${esc(w.name.toLowerCase())}` : `${w.next_icon} ${esc(w.next_name)}`} in ${countdown(w.until)}</div></div>`;
|
||||
}
|
||||
|
|
@ -883,7 +889,7 @@ function board() {
|
|||
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 class="lvl ${p.levels[s.id] <= 1 ? "low" : ""}" title="${s.name}"><span class="ico">${s.icon}</span><span class="nm">${s.name}</span><b>${p.levels[s.id]}</b></div>`).join("");
|
||||
const levels = C.skills.filter((s) => !s.class || s.class === p.cls).map((s) => `<div class="lvl ${p.levels[s.id] <= 1 ? "low" : ""}" title="${s.name} level ${p.levels[s.id]}"><span class="ico">${s.icon}</span><span class="nm">${s.name}</span><b>${p.levels[s.id]}</b></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>
|
||||
|
|
@ -925,8 +931,8 @@ function characterSheet(uid) {
|
|||
const floor = C.xp_table[level], ceil = C.xp_table[level + 1];
|
||||
const pct = ceil ? (xp - floor) / (ceil - floor) * 100 : 100;
|
||||
const tool = p.equip[`tool_${s.id}`];
|
||||
const marks = (cls.fast.includes(s.id) ? `<span title="${cls.name} bonus">${cls.icon}</span>` : "")
|
||||
+ (tool ? `<span title="${esc(item(tool).name)}">${item(tool).icon}</span>` : "");
|
||||
const marks = (cls.fast.includes(s.id) ? `<span title="${cls.name}: ${Math.round((1 - C.class_speed) * 100)}% faster">${cls.icon}</span>` : "")
|
||||
+ (tool ? `<span title="${esc(`${item(tool).name}: ${Math.round(item(tool).speed * 100)}% faster`)}">${item(tool).icon}</span>` : "");
|
||||
return `<${mine ? `button data-nav="skill:${s.id}"` : "div"} class="sheet-skill">
|
||||
<span class="ico">${s.icon}</span>
|
||||
<span class="grow"><span class="row1"><b>${s.name}</b><span class="marks">${marks}</span><span class="lv">${level}</span></span>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue