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

Combat stats grid pinned under the slot details; damage type on the equipped weapon

Browse source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
rope 2026-10-20 15:45:33 +01:00
parent 8f44557076
commit 50f069b069
5 changed files with 52 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

39
static/app.js
View file

@ -1246,31 +1246,46 @@ function dollSlot(p, slot, label, outline, picked) {
const tip = !known ? `${label}: not in the game yet` : id ? `${label}: ${item(id).name}` : `${label}: empty`;
return `<button class="doll-slot ${known ? "" : "future"} ${id ? "" : "empty"} ${two ? "ghost" : ""} ${picked ? "on" : ""}"
${known ? `data-doll="${slot}"` : "disabled"} title="${esc(tip)}">
${id ? item(id).icon : glyph(outline, "#98a1b4")}${two ? `<span class="hands">2H</span>` : ""}</button>`;
${id ? item(id).icon : glyph(outline, "#98a1b4")}${two ? `<span class="hands">2H</span>` : ""}
${slot === "weapon" && id ? `<span class="slot-type">${dmgIcon(C.styles[item(id).style || "sword"].damage)}</span>` : ""}</button>`;
}
function paperDoll(p, mine) {
const pick = dollPick && slot2(dollPick, p);
const totals = `<div class="doll-stats">
<span class="muted">${glyph("biceps", "#e06a6a")} Power</span><b>${p.power}</b>
<span class="muted">${glyph("checked-shield", "#d4dae2")} Armour</span><b>${p.armour}</b>
<span class="muted">${glyph("magic-shield", "#a77be8")} Ward</span><b>${p.ward}</b>
</div>`;
let side = totals;
let slot = "";
if (pick) {
const label = DOLL.find(([slot]) => slot === pick)[1];
const label = DOLL.find(([s]) => s === pick)[1];
const two = pick === "shield" && p.equip.weapon && item(p.equip.weapon).two_handed;
const id = two ? p.equip.weapon : p.equip[pick], it = id && item(id);
side = `<div class="worn-head">${it ? `<span class="ico">${it.icon}</span><b>${esc(it.name)}</b>` : `<b>${label}</b><span class="muted small">empty</span>`}</div>
${it ? gearChips(it, p) : ""}${mine ? swapGrid(p, pick, two) : ""}${totals}`;
slot = `<div class="worn-head">${it ? `<span class="ico">${it.icon}</span><b>${esc(it.name)}</b>` : `<b>${label}</b><span class="muted small">empty</span>`}</div>
${it ? gearChips(it, p) : ""}${mine ? swapGrid(p, pick, two) : ""}`;
}
return `<div class="doll-wrap">
<div class="doll"><span class="doll-figure">${glyph("swordman", "#e6e8ee")}</span>
${DOLL.map(([slot, name, outline]) => dollSlot(p, slot, name, outline, slot === pick)).join("")}</div>
<div class="doll-side">${side}</div>
${DOLL.map(([s, name, outline]) => dollSlot(p, s, name, outline, s === pick)).join("")}</div>
<div class="doll-side"><div class="doll-slot-info">${slot}</div>${combatStats(p)}</div>
</div>`;
}
// Your fighting numbers, always in the same place under the slot details: icons and numbers,
// with what each means on hover.
function combatStats(p) {
const f = p.fighter, pct = (x) => `${Math.round(x * 100)}%`, dt = C.damage_types[f.damage];
const cell = (icon, value, tip) => `<span class="gstat" title="${esc(tip)}">${icon}<span>${value}</span></span>`;
const cells = [
cell(glyph("biceps", "#e06a6a"), p.power, "Power: from your level and gear"),
cell(glyph("checked-shield", "#d4dae2"), p.armour, `Armour: ${pct(p.reduction)} less damage from blows`),
cell(glyph("magic-shield", "#a77be8"), p.ward, `Ward: ${pct(p.ward_reduction)} less damage from magic`),
cell(glyph(dt.glyph, dt.tint), f.max_hit, `Max hit (${dt.name.toLowerCase()})`),
cell(glyph("striking-diamonds", "#f0d060"), pct(f.crit), "Crit chance"),
cell(glyph("stopwatch", "#9fb3c8"), `${f.interval}s`, `A swing every ${f.interval}s`),
cell(glyph("archery-target", "#e0a050"), fmt(f.accuracy), "Accuracy"),
cell(glyph("dodging", "#8fd0e0"), fmt(f.evasion), "Evasion"),
cell(glyph("shield-reflect", "#e0b04a"), pct(f.block), "Block chance (with a shield)"),
];
return `<div class="combat-stats"><div class="muted small">Combat stats</div><div class="stat-grid">${cells.join("")}</div></div>`;
}
// What else in the bank fits the picked slot, best first: click one to put it on. For weapons the
// corner shows the damage type, so you can pick one for what you're about to fight.
function swapGrid(p, slot, two) {