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

Combat page uses the character sheet's equipment panel

Browse source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
rope 2026-10-20 15:09:09 +01:00
parent 812813c455
commit 648272bdd9
2 changed files with 8 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

38
static/app.js
View file

@ -617,28 +617,8 @@ function animateFight(now) {
}); });
} }
// How you fight with what's in your hands, and what your trade fights best with.
function styleNote(me) {
const weapon = me.equip.weapon, styleId = (weapon && item(weapon).style) || "sword", st = C.styles[styleId];
const own = C.class_style[me.cls], traits = {
sword: `${st.interval}s${me.equip.shield ? `, shield blocks ${Math.round(C.block_chance * 100)}%` : ""}`,
hammer: `${st.interval}s, double crits`,
staff: `${st.interval}s, accurate`,
bow: `${st.interval}s, shoots first`,
};
return `<p class="small">${dmgIcon(st.damage)} ${weapon ? st.name[0].toUpperCase() + st.name.slice(1) : "Fists"}: ${C.damage_types[st.damage].name.toLowerCase()}, ${traits[styleId]}.
${own === styleId ? `<b class="good">Trade weapon: +15% damage.</b>` : `Trade weapon: ${esc(C.styles[own].name)} (+15%).`}</p>`;
}
function combatPanel() { function combatPanel() {
const me = S.me; const me = S.me;
const stat = (id) => gearStats(item(id));
const slot = (name, label) => {
const id = me.equip[name];
return `<div class="gear-slot">${id
? `<span>${item(id).icon} ${esc(item(id).name)} <span class="muted small">${stat(id)}</span></span><button class="btn sm" data-unequip="${name}">Unequip</button>`
: `<span class="muted">No ${label}</span>`}</div>`;
};
const foods = me.edible.map((id) => `<option value="${id}" ${me.food === id ? "selected" : ""}>${esc(item(id).name)} (heals ${item(id).heal}, ${fmt(me.bank[id])} left)</option>`).join(""); const foods = me.edible.map((id) => `<option value="${id}" ${me.food === id ? "selected" : ""}>${esc(item(id).name)} (heals ${item(id).heal}, ${fmt(me.bank[id])} left)</option>`).join("");
const hpPct = me.hp / me.max_hp * 100; const hpPct = me.hp / me.max_hp * 100;
return `<div class="cols"> return `<div class="cols">
@ -652,11 +632,7 @@ function combatPanel() {
<p class="small muted">Eats below half HP, retreats when out of food. <p class="small muted">Eats below half HP, retreats when out of food.
${me.edible.length ? "" : `<b class="warn">No food in your bank.</b>`}</p> ${me.edible.length ? "" : `<b class="warn">No food in your bank.</b>`}</p>
</div> </div>
<div class="panel"><h2>Equipment</h2> ${equipmentPanel(me, true, false)}</div>`;
<div class="gear">${slot("weapon", "weapon")}${slot("shield", "shield")}${slot("helmet", "helmet")}${slot("body", "body armour")}${slot("legs", "leg armour")}</div>
<p class="small muted">Power ${me.power} · armour ${me.armour} (-${Math.round(me.reduction * 100)}% physical) · ward ${me.ward} (-${Math.round(me.ward_reduction * 100)}% magic)</p>
${styleNote(me)}
</div></div>`;
} }
// Power, armour and ward, and the armour's weight. // Power, armour and ward, and the armour's weight.
@ -1242,11 +1218,7 @@ function characterSheet(uid) {
<p class="small">${esc(cls.signature)}.</p> <p class="small">${esc(cls.signature)}.</p>
<p class="small">${esc(cls.combat)}.</p> <p class="small">${esc(cls.combat)}.</p>
</div> </div>
<div class="panel"><h2>Equipment</h2> ${equipmentPanel(p, mine)}
${paperDoll(p, mine)}
<h2 style="margin-top:16px">Tools</h2>
${toolSlots(p)}
</div>
</div> </div>
<div class="panel"><h2>Skills</h2><div class="sheet-skills">${skillRows}</div></div> <div class="panel"><h2>Skills</h2><div class="sheet-skills">${skillRows}</div></div>
</div>`; </div>`;
@ -1303,6 +1275,12 @@ function slot2(slot, p) {
return slot in p.equip ? slot : null; return slot in p.equip ? slot : null;
} }
// The equipment panel, the same on the character sheet and the combat page (which leaves out tools).
function equipmentPanel(p, mine, tools = true) {
return `<div class="panel"><h2>Equipment</h2>${paperDoll(p, mine)}
${tools ? `<h2 style="margin-top:16px">Tools</h2>${toolSlots(p)}` : ""}</div>`;
}
// Tools: one small slot per gathering skill. // Tools: one small slot per gathering skill.
function toolSlots(p) { function toolSlots(p) {
return `<div class="tool-slots">${C.skills.filter((s) => `tool_${s.id}` in p.equip).map((s) => { return `<div class="tool-slots">${C.skills.filter((s) => `tool_${s.id}` in p.equip).map((s) => {

2
static/styles.css
View file

@ -202,8 +202,6 @@ textarea { width: 100%; resize: vertical; min-height: 60px; }
.action .why { font-size: 13px; color: var(--warn); } .action .why { font-size: 13px; color: var(--warn); }
.grid-head { grid-column: 1 / -1; margin: 10px 0 -4px; } .grid-head { grid-column: 1 / -1; margin: 10px 0 -4px; }
.tool-panel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tool-panel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gear { display: flex; flex-direction: column; gap: 6px; }
.gear-slot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--panel-2); }
.hp-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; } .hp-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.bar.hp > span { background: var(--bad); } .bar.hp > span { background: var(--bad); }
.warn { color: var(--warn); } .warn { color: var(--warn); }