fix: refine burden meter display

This commit is contained in:
Erik 2026-03-13 11:08:30 +01:00
parent 40217572b1
commit 8bea346a57
2 changed files with 24 additions and 3 deletions

View file

@ -1379,13 +1379,22 @@ function renderInventoryState(state) {
const burdenUnits = Number(stats.burden_units || 0); const burdenUnits = Number(stats.burden_units || 0);
const encumbranceCapacity = Number(stats.encumbrance_capacity || 0); const encumbranceCapacity = Number(stats.encumbrance_capacity || 0);
const burdenPct = encumbranceCapacity > 0 const burdenPct = encumbranceCapacity > 0
? Math.max(0, Math.min(100, (burdenUnits / encumbranceCapacity) * 100)) ? Math.max(0, Math.min(200, (burdenUnits / encumbranceCapacity) * 100))
: 0; : 0;
state.burdenLabel.textContent = `${Math.round(burdenPct)}%`; const burdenDisplay = Math.floor(burdenPct);
state.burdenLabel.textContent = `${burdenDisplay}%`;
state.burdenLabel.title = burdenUnits > 0 && encumbranceCapacity > 0 state.burdenLabel.title = burdenUnits > 0 && encumbranceCapacity > 0
? `${burdenUnits}/${encumbranceCapacity}` ? `${burdenUnits}/${encumbranceCapacity}`
: ''; : '';
state.burdenFill.style.height = `${burdenPct}%`; state.burdenFill.style.height = `${Math.min(100, burdenPct / 2)}%`;
state.burdenFill.className = 'inv-burden-fill';
if (burdenPct > 150) {
state.burdenFill.classList.add('is-danger');
} else if (burdenPct > 100) {
state.burdenFill.classList.add('is-warning');
} else {
state.burdenFill.classList.add('is-safe');
}
// 4. Sort containers for stable sidebar order (by unsigned item_id) // 4. Sort containers for stable sidebar order (by unsigned item_id)
containers.sort((a, b) => { containers.sort((a, b) => {

View file

@ -838,6 +838,18 @@ body.noselect, body.noselect * {
transition: height 0.3s ease; transition: height 0.3s ease;
} }
.inv-burden-fill.is-safe {
background: var(--ac-green);
}
.inv-burden-fill.is-warning {
background: #d8a431;
}
.inv-burden-fill.is-danger {
background: #b7432c;
}
.inv-burden-label { .inv-burden-label {
position: absolute; position: absolute;
top: -18px; top: -18px;