SawatoMosswartsEnjoyersClub/MosswartOverlord
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add mana tracker panel to inventory

Browse source 
Derive equipped item mana state and time-remaining data in inventory-service, then render a Mana panel inside the inventory window with live icon, state, mana, and countdown display.
This commit is contained in:
Erik 2026-03-11 20:02:52 +01:00
parent 4e73a5d07d
commit 0e8186b8e5
4 changed files with 3930 additions and 2283 deletions
Download patch file Download diff file Expand all files Collapse all files

118
static/style.css
View file

@ -908,11 +908,17 @@ body.noselect, body.noselect * {
.inv-bottom-section {
flex: 1;
display: flex;
flex-direction: column;
flex-direction: row;
margin-top: 10px;
margin-right: 52px;
overflow: hidden;
min-height: 0;
gap: 8px;
}
.inv-bottom-section > :first-child,
.inv-bottom-section > :nth-child(2) {
flex-shrink: 0;
}
.inv-contents-header {
@ -924,6 +930,12 @@ body.noselect, body.noselect * {
padding-bottom: 2px;
}
.inv-item-section {
display: flex;
flex-direction: column;
min-width: 0;
}
.inv-item-grid {
display: grid;
grid-template-columns: repeat(6, 36px);
@ -939,6 +951,110 @@ body.noselect, body.noselect * {
justify-content: start;
}
.inv-mana-panel {
width: 118px;
min-width: 118px;
display: flex;
flex-direction: column;
background: rgba(6, 10, 18, 0.92);
border: 1px solid var(--ac-border-light);
padding: 4px;
min-height: 0;
}
.inv-mana-header {
color: var(--ac-gold);
font-size: 14px;
text-align: center;
border-bottom: 1px solid var(--ac-border-light);
padding-bottom: 2px;
}
.inv-mana-summary {
color: var(--ac-text-dim);
font-size: 10px;
line-height: 1.2;
padding: 4px 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
margin-bottom: 4px;
}
.inv-mana-list {
flex: 1;
min-height: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 4px;
}
.inv-mana-row {
display: grid;
grid-template-columns: 36px 1fr;
grid-template-rows: auto auto auto;
gap: 1px 6px;
align-items: center;
background: rgba(18, 24, 34, 0.9);
border: 1px solid rgba(255,255,255,0.08);
padding: 3px;
}
.inv-mana-icon {
grid-row: 1 / span 3;
width: 36px;
height: 36px;
}
.inv-mana-icon .inventory-slot {
width: 36px;
height: 36px;
}
.inv-mana-name {
color: #f2e6c9;
font-size: 10px;
line-height: 1.15;
word-break: break-word;
}
.inv-mana-state,
.inv-mana-value,
.inv-mana-time {
font-size: 10px;
line-height: 1.1;
}
.inv-mana-value {
color: #98d7ff;
}
.inv-mana-time {
color: #cfe6a0;
}
.mana-state-active {
color: #76d17f;
}
.mana-state-not_active {
color: #ff8e6f;
}
.mana-state-unknown {
color: #d4c27a;
}
.mana-state-not_activatable {
color: #97a1ad;
}
.inv-mana-empty {
color: var(--ac-text-dim);
font-size: 11px;
text-align: center;
padding: 12px 6px;
}
.inv-item-grid::-webkit-scrollbar {
width: 12px;
}