refactor: tighten inventory mana panel layout

Move the Mana panel to the right of the backpack column, widen the inventory window, and switch to a smaller Mag-Tools-style row layout with compact icons and status dots.
This commit is contained in:
Erik 2026-03-11 20:09:05 +01:00
parent 0e8186b8e5
commit 63ea242167
2 changed files with 129 additions and 46 deletions

View file

@ -1562,8 +1562,8 @@ function renderInventoryManaPanel(state) {
const stateEl = document.createElement('div');
const stateName = item.mana_state || 'unknown';
stateEl.className = `inv-mana-state mana-state-${stateName}`;
stateEl.textContent = stateName.replace(/_/g, ' ');
stateEl.className = `inv-mana-state-dot mana-state-${stateName}`;
stateEl.title = stateName.replace(/_/g, ' ');
const manaEl = document.createElement('div');
manaEl.className = 'inv-mana-value';
@ -1641,6 +1641,20 @@ function showInventoryWindow(name) {
const sidebar = document.createElement('div');
sidebar.className = 'inv-sidebar';
const manaPanel = document.createElement('div');
manaPanel.className = 'inv-mana-panel';
const manaHeader = document.createElement('div');
manaHeader.className = 'inv-mana-header';
manaHeader.textContent = 'Mana';
const manaSummary = document.createElement('div');
manaSummary.className = 'inv-mana-summary';
manaSummary.textContent = 'Mana: loading';
const manaListBody = document.createElement('div');
manaListBody.className = 'inv-mana-list';
manaPanel.appendChild(manaHeader);
manaPanel.appendChild(manaSummary);
manaPanel.appendChild(manaListBody);
const burdenContainer = document.createElement('div');
burdenContainer.className = 'inv-burden-bar';
const burdenFill = document.createElement('div');
@ -1658,26 +1672,13 @@ function showInventoryWindow(name) {
topSection.appendChild(equipGrid);
topSection.appendChild(sidebar);
topSection.appendChild(manaPanel);
const bottomSection = document.createElement('div');
bottomSection.className = 'inv-bottom-section';
const itemSection = document.createElement('div');
itemSection.className = 'inv-item-section';
const manaPanel = document.createElement('div');
manaPanel.className = 'inv-mana-panel';
const manaHeader = document.createElement('div');
manaHeader.className = 'inv-mana-header';
manaHeader.textContent = 'Mana';
const manaSummary = document.createElement('div');
manaSummary.className = 'inv-mana-summary';
manaSummary.textContent = 'Mana: loading';
const manaListBody = document.createElement('div');
manaListBody.className = 'inv-mana-list';
manaPanel.appendChild(manaHeader);
manaPanel.appendChild(manaSummary);
manaPanel.appendChild(manaListBody);
const contentsHeader = document.createElement('div');
contentsHeader.className = 'inv-contents-header';
@ -1689,7 +1690,6 @@ function showInventoryWindow(name) {
itemSection.appendChild(contentsHeader);
itemSection.appendChild(itemGrid);
bottomSection.appendChild(itemSection);
bottomSection.appendChild(manaPanel);
invContent.appendChild(topSection);
invContent.appendChild(bottomSection);