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

fix(v2): aligned stat grid + correct icons + action buttons

Browse source 
- Stats now use a 3-column CSS Grid so values align across rows
- Fixed icons: ☠️ for deaths (was 💀), prismatic-taper-icon.png
  for tapers (was wrong emoji 🔮), 🕐 for time (was 🕑)
- Added action buttons row (Chat, Stats, Inv, Char, Radar) matching
  v1's button bar — accent-colored for primary actions
- Buttons are present but not wired to windows yet (Phase 3)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Erik 2026-04-12 15:46:47 +02:00
parent 7890ab477f
commit 53bb1ba9cf
5 changed files with 90 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

46
frontend/src/components/sidebar/PlayerRow.tsx
View file

@ -12,12 +12,17 @@ interface Props {
export const PlayerRow: React.FC<Props> = React.memo(({ player: p, vitals: v, color, onSelect }) => {
const vtState = (p.vt_state || 'idle').toLowerCase();
const isActive = vtState === 'combat' || vtState === 'hunt';
const kpr = (p.total_rares ?? 0) > 0
? Math.round((p.total_kills ?? 0) / (p.total_rares ?? 1)).toLocaleString()
: null;
return (
<li className="ml-player-row" style={{ borderLeftColor: color }} onClick={onSelect}>
<li className="ml-player-row" style={{ borderLeftColor: color }}>
{/* Row 1: Name + coords */}
<div className="ml-pr-name">{p.character_name}</div>
<div className="ml-pr-coords">{formatCoord(p.ns, p.ew)}</div>
<div className="ml-pr-header" onClick={onSelect}>
<span className="ml-pr-name">{p.character_name}</span>
<span className="ml-pr-coords">{formatCoord(p.ns, p.ew)}</span>
</div>
{/* Row 2: Vital bars */}
<div className="ml-pr-vitals">
@ -32,27 +37,28 @@ export const PlayerRow: React.FC<Props> = React.memo(({ player: p, vitals: v, co
</div>
</div>
{/* Row 3: Kills + KPH */}
<div className="ml-pr-stats">
<span className="ml-stat" title="Session kills"><span className="ml-icon">⚔️</span>{p.kills?.toLocaleString() ?? 0}</span>
<span className="ml-stat" title="Total kills"><span className="ml-icon">🏆</span>{(p.total_kills ?? 0).toLocaleString()}</span>
<span className="ml-stat" title="Kills per hour">{p.kills_per_hour ?? '0'} <span className="ml-suffix">KPH</span></span>
</div>
{/* Row 3-5: Stats grid — 3 columns × 3 rows for alignment */}
<div className="ml-pr-grid">
<span className="ml-gs" title="Session kills">⚔️ {p.kills?.toLocaleString() ?? 0}</span>
<span className="ml-gs" title="Total kills">🏆 {(p.total_kills ?? 0).toLocaleString()}</span>
<span className="ml-gs" title="Kills per hour">{p.kills_per_hour ?? '0'} <span className="ml-suffix">KPH</span></span>
{/* Row 4: Rares + KPR + meta */}
<div className="ml-pr-stats">
<span className="ml-stat" title="Rares (session / total)"><span className="ml-icon">💎</span>{p.session_rares ?? 0} / {p.total_rares ?? 0}</span>
{(p.total_rares ?? 0) > 0 && (
<span className="ml-stat" title="Kills per rare"><span className="ml-icon">📊</span>{Math.round((p.total_kills ?? 0) / (p.total_rares ?? 1)).toLocaleString()} <span className="ml-suffix">KPR</span></span>
)}
<span className="ml-gs" title="Rares (session / total)">💎 {p.session_rares ?? 0} / {p.total_rares ?? 0}</span>
<span className="ml-gs" title="Kills per rare">{kpr ? <>📊 {kpr} <span className="ml-suffix">KPR</span></> : ''}</span>
<span className={`ml-meta-pill ${isActive ? 'active' : ''}`}>{p.vt_state || 'idle'}</span>
<span className="ml-gs" title="Online time">🕐 {p.onlinetime?.replace(/^00\./, '') ?? '--'}</span>
<span className="ml-gs" title="Deaths">☠️ {p.deaths ?? '0'}</span>
<span className="ml-gs" title="Prismatic tapers"><img src="/prismatic-taper-icon.png" className="ml-taper-icon" alt="" />{p.prismatic_taper_count ?? '0'}</span>
</div>
{/* Row 5: Time + deaths + tapers */}
<div className="ml-pr-stats">
<span className="ml-stat" title="Online time"><span className="ml-icon">🕑</span>{p.onlinetime?.replace(/^00\./, '') ?? '--'}</span>
<span className="ml-stat" title="Deaths"><span className="ml-icon">💀</span>{p.deaths ?? '0'}</span>
<span className="ml-stat" title="Prismatic tapers"><span className="ml-icon">🔮</span>{p.prismatic_taper_count ?? '0'}</span>
{/* Row 6: Action buttons */}
<div className="ml-pr-buttons">
<button className="ml-btn accent" title="Chat">Chat</button>
<button className="ml-btn accent" title="Stats">Stats</button>
<button className="ml-btn accent" title="Inventory">Inv</button>
<button className="ml-btn" title="Character">Char</button>
<button className="ml-btn" title="Radar">Radar</button>
</div>
</li>
);