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

fix(v2): pack capacity bars visible + mana item icons

Browse source 
1. Pack capacity bars: gave the fill bar div explicit height (30px)
   instead of relying on alignItems:stretch which produced 0 height.
   Bar now visibly fills green/orange/red beside each pack icon.

2. Mana panel: added 20px item icons back to each mana row, between
   the status dot and item name. Uses the same ItemIcon component
   with 3-layer compositing.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Erik 2026-04-12 22:06:10 +02:00
parent bc247aa9b3
commit e6adb5cb68
3 changed files with 43 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

7
frontend/src/components/windows/InventoryWindow.tsx
View file

@ -143,13 +143,13 @@ function PackIcon({ iconSrc, isActive, fillPct, label, onClick }: {
const fillColor = fillPct > 90 ? '#b7432c' : fillPct > 70 ? '#d8a431' : '#00ff00';
return (
<div onClick={onClick} title={label}
style={{ display: 'flex', alignItems: 'stretch', gap: 2, cursor: 'pointer', flexShrink: 0, marginTop: 3, position: 'relative' }}>
style={{ display: 'flex', alignItems: 'flex-start', gap: 2, cursor: 'pointer', flexShrink: 0, marginTop: 3, position: 'relative' }}>
{isActive && <span style={{ position: 'absolute', left: -11, top: 8, color: gold, fontSize: 10 }}>▶</span>}
<div style={{ width: 30, height: 30, border: isActive ? '1px solid #00ff00' : '1px solid #333', boxShadow: isActive ? '0 0 4px #00ff00' : 'none', background: '#000', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<img src={iconSrc} alt="" style={{ width: 26, height: 26, objectFit: 'contain', imageRendering: 'pixelated' }}
onError={e => { (e.target as HTMLImageElement).src = '/icons/06001080.png'; }} />
</div>
<div style={{ width: 4, background: '#111', border: '1px solid #333', position: 'relative', overflow: 'hidden' }}>
<div style={{ width: 5, height: 30, background: '#111', border: '1px solid #333', position: 'relative', overflow: 'hidden', borderRadius: 1 }}>
<div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: `${fillPct}%`, background: fillColor, transition: 'height 0.3s' }} />
</div>
</div>
@ -340,8 +340,9 @@ export const InventoryWindow: React.FC<Props> = ({ id, charName, zIndex }) => {
.filter((i: any) => (i.current_mana > 0 || i.max_mana > 0))
.sort((a: any, b: any) => (a.current_mana ?? 999999) - (b.current_mana ?? 999999))
.map((item: any, i: number) => (
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '3px 6px', borderBottom: '1px solid #1a1a1a', cursor: 'pointer' }}
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '2px 4px', borderBottom: '1px solid #1a1a1a', cursor: 'pointer' }}
onMouseEnter={e => handleHover(item, e)} onMouseMove={e => handleHover(item, e)} onMouseLeave={() => handleHover(null)}>
<div style={{ width: 20, height: 20, flexShrink: 0 }}><ItemIcon item={item} size={20} /></div>
<div style={{ width: 8, height: 8, borderRadius: '50%', background: item.current_mana > 0 ? '#4c4' : '#c44', flexShrink: 0 }} />
<div style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: '0.68rem', color: '#ccc' }}>{item.name}</div>
<div style={{ fontSize: '0.65rem', color: '#88bbff', whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums' }}>{item.current_mana ?? 0}/{item.max_mana ?? 0}</div>

76
static/v2/assets/index-rajXNGCo.js → static/v2/assets/index-DXm3K60h.js
View file

File diff suppressed because one or more lines are too long

2
static/v2/index.html
View file

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mosswart Overlord v2</title>
<link rel="icon" type="image/png" href="/icons/7735.png" />
<script type="module" crossorigin src="/v2/assets/index-rajXNGCo.js"></script>
<script type="module" crossorigin src="/v2/assets/index-DXm3K60h.js"></script>
<link rel="stylesheet" crossorigin href="/v2/assets/index-DrsM2PEe.css">
</head>
<body>