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

fix(v2): add emoji icons + labels to player row stats

Browse source 
Stats were bare numbers with no visual hint what they represent.
Now each stat has the same emoji prefix as v1:
  ⚔️ session kills, 🏆 total kills, KPH suffix
  💎 rares (session/total), 📊 KPR suffix
  🕑 online time, 💀 deaths, 🔮 prismatic tapers

Meta state pill still color-coded (green=active, gray=idle).

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

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

@ -32,25 +32,27 @@ export const PlayerRow: React.FC<Props> = React.memo(({ player: p, vitals: v, co
</div>
</div>
{/* Row 3: Stats */}
{/* Row 3: Kills + KPH */}
<div className="ml-pr-stats">
<span className="ml-stat" title="Session kills">{p.kills?.toLocaleString() ?? 0}</span>
<span className="ml-stat" title="Total kills">{(p.total_kills ?? 0).toLocaleString()}</span>
<span className="ml-stat" title="Kills per hour">{p.kills_per_hour ?? '0'} kph</span>
<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 4: Rares + meta */}
{/* Row 4: Rares + KPR + meta */}
<div className="ml-pr-stats">
<span className="ml-stat" title="Session rares">{p.session_rares ?? 0}r</span>
<span className="ml-stat" title="Total rares">{p.total_rares ?? 0}r</span>
<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-meta-pill ${isActive ? 'active' : ''}`}>{p.vt_state || 'idle'}</span>
</div>
{/* Row 5: Time + deaths + tapers */}
<div className="ml-pr-stats">
<span className="ml-stat" title="Online time">{p.onlinetime?.replace(/^00\./, '') ?? '--'}</span>
<span className="ml-stat" title="Deaths">{p.deaths ?? '0'}d</span>
<span className="ml-stat" title="Prismatic tapers">{p.prismatic_taper_count ?? '0'}t</span>
<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>
</div>
</li>
);

15
frontend/src/styles/map-layout.css
View file

@ -221,6 +221,21 @@
.ml-stat {
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: center;
gap: 2px;
}
.ml-icon {
font-size: 0.7rem;
line-height: 1;
}
.ml-suffix {
font-size: 0.58rem;
color: #888;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.ml-meta-pill {

2
static/v2/assets/index-Dfeaqu0o.css → static/v2/assets/index-BUBcTCvh.css
View file

File diff suppressed because one or more lines are too long

100
static/v2/assets/index-D9dGqbQ9.js → static/v2/assets/index-Csnbhaia.js
View file

File diff suppressed because one or more lines are too long

4
static/v2/index.html
View file

@ -5,8 +5,8 @@
<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-D9dGqbQ9.js"></script>
<link rel="stylesheet" crossorigin href="/v2/assets/index-Dfeaqu0o.css">
<script type="module" crossorigin src="/v2/assets/index-Csnbhaia.js"></script>
<link rel="stylesheet" crossorigin href="/v2/assets/index-BUBcTCvh.css">
</head>
<body>
<div id="root"></div>