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

Combat stats under the doll at its width; empty food slot shows red instead of a warning

Browse source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
rope 2026-10-20 15:50:54 +01:00
parent 7c87978d12
commit ac73fa996d
2 changed files with 15 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

16
static/app.js
View file

@ -561,7 +561,6 @@ function combatFrame() {
const you = `<div class="fighter"> const you = `<div class="fighter">
<div class="fighter-name"><b>${esc(me.name)}</b><span class="small muted">${HEART} <span data-f="you-hp">${fmt(me.hp)} / ${me.max_hp}</span></span></div> <div class="fighter-name"><b>${esc(me.name)}</b><span class="small muted">${HEART} <span data-f="you-hp">${fmt(me.hp)} / ${me.max_hp}</span></span></div>
${bars("you")} ${bars("you")}
${me.edible.length ? "" : `<div class="small warn">No food in your bank.</div>`}
</div>`; </div>`;
let foe = `<div class="foe-idle muted">Not fighting.</div>`; let foe = `<div class="foe-idle muted">Not fighting.</div>`;
if (f) { if (f) {
@ -1263,9 +1262,9 @@ function paperDoll(p, mine) {
${it ? gearChips(it, p) : ""}${mine ? swapGrid(p, pick, two) : ""}`; ${it ? gearChips(it, p) : ""}${mine ? swapGrid(p, pick, two) : ""}`;
} }
return `<div class="doll-wrap"> return `<div class="doll-wrap">
<div class="doll"><span class="doll-figure">${glyph("swordman", "#e6e8ee")}</span> <div class="doll-col"><div class="doll"><span class="doll-figure">${glyph("swordman", "#e6e8ee")}</span>
${DOLL.map(([s, name, outline]) => dollSlot(p, s, name, outline, s === pick)).join("")}</div> ${DOLL.map(([s, name, outline]) => dollSlot(p, s, name, outline, s === pick)).join("")}</div>${combatStats(p)}</div>
<div class="doll-side"><div class="doll-slot-info">${slot}</div>${combatStats(p)}</div> <div class="doll-side"><div class="doll-slot-info">${slot}</div></div>
</div>`; </div>`;
} }
@ -1285,7 +1284,7 @@ function combatStats(p) {
cell(glyph("dodging", "#8fd0e0"), fmt(f.evasion), "Evasion"), cell(glyph("dodging", "#8fd0e0"), fmt(f.evasion), "Evasion"),
cell(glyph("shield-reflect", "#e0b04a"), pct(f.block), "Block chance (with a shield)"), 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>`; return `<div class="combat-stats stat-grid">${cells.join("")}</div>`;
} }
// What else in the bank fits the picked slot, best first: click one to put it on. For weapons the // What else in the bank fits the picked slot, best first: click one to put it on. For weapons the
@ -1316,9 +1315,10 @@ function slot2(slot, p) {
function foodSlot(p, picked) { function foodSlot(p, picked) {
if (!("food" in p)) return `<span class="doll-slot future" title="Food"></span>`; if (!("food" in p)) return `<span class="doll-slot future" title="Food"></span>`;
const id = p.food && p.bank[p.food] ? p.food : null; const id = p.food && p.bank[p.food] ? p.food : null;
const tip = id ? `Food: ${item(id).name}, heals ${item(id).heal}` : "Food: cheapest first"; const none = !p.edible.length;
return `<button class="doll-slot ${picked ? "on" : ""} ${p.edible.length ? "" : "empty"}" data-doll="food" title="${esc(tip)}"> const tip = none ? "No food in your bank" : id ? `Food: ${item(id).name}, heals ${item(id).heal}` : "Food: cheapest first";
${id ? item(id).icon : glyph("two-coins", "#e0b04a")}${id ? `<span class="swap-qty">${fmt(p.bank[id])}</span>` : ""}</button>`; return `<button class="doll-slot ${picked ? "on" : ""} ${none ? "starving" : ""}" data-doll="food" title="${esc(tip)}">
${none ? glyph("hot-meal", "#e2645c") : id ? item(id).icon : glyph("two-coins", "#e0b04a")}${id ? `<span class="swap-qty">${fmt(p.bank[id])}</span>` : ""}</button>`;
} }
function foodPanel(p) { function foodPanel(p) {

10
static/styles.css
View file

@ -543,11 +543,15 @@ button.sheet-skill:hover { background: var(--panel-2); }
.doll-wrap { align-items: stretch; } .doll-wrap { align-items: stretch; }
.doll-side { display: flex; flex-direction: column; gap: 12px; } .doll-side { display: flex; flex-direction: column; gap: 12px; }
.doll-slot-info { display: grid; gap: 10px; } .doll-slot-info { display: grid; gap: 10px; }
.combat-stats { margin-top: auto; display: grid; gap: 4px; } .doll-col { display: grid; gap: 10px; align-content: start; }
.combat-stats { margin: 0; padding: 6px 8px; gap: 4px 6px; }
.combat-stats .gstat { gap: 4px; font-size: 12px; }
.combat-stats .gi { width: 14px; height: 14px; }
.slot-type { position: absolute; bottom: -4px; left: -4px; } .slot-type { position: absolute; bottom: -4px; left: -4px; }
.slot-type .dmg { width: 16px; height: 16px; background: var(--panel); border-radius: 4px; } .slot-type .dmg { width: 16px; height: 16px; background: var(--panel); border-radius: 4px; }
.doll-slot .slot-type .gi { width: 11px; height: 11px; } .doll-slot .slot-type .gi { width: 11px; height: 11px; }
.doll { align-self: start; } .doll { align-self: start; }
.doll-slot-info { min-height: 200px; align-content: start; }
.swap-grid { flex-wrap: nowrap; overflow-x: auto; padding: 4px 4px 6px 0; scrollbar-width: thin; }
.doll-slot.swap { flex: none; } .doll-slot.swap { flex: none; }
.doll-slot.starving { border-color: rgba(226, 100, 92, .7); background: rgba(226, 100, 92, .12); }
.doll-slot.starving .gi { opacity: .9; }
@media (max-width: 520px) { .doll-col { justify-items: center; } }