53bb1ba9cf
- 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>
67 lines
3.1 KiB
TypeScript
67 lines
3.1 KiB
TypeScript
import React from 'react';
|
||
import { formatCoord } from '../../utils/coordinates';
|
||
import type { TelemetrySnapshot, VitalsMessage } from '../../types';
|
||
|
||
interface Props {
|
||
player: TelemetrySnapshot;
|
||
vitals: VitalsMessage | null;
|
||
color: string;
|
||
onSelect: () => void;
|
||
}
|
||
|
||
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 }}>
|
||
{/* Row 1: Name + coords */}
|
||
<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">
|
||
<div className="ml-vital-bar hp">
|
||
<div className="ml-vital-fill" style={{ width: `${v?.health_percentage ?? 0}%` }} />
|
||
</div>
|
||
<div className="ml-vital-bar sta">
|
||
<div className="ml-vital-fill" style={{ width: `${v?.stamina_percentage ?? 0}%` }} />
|
||
</div>
|
||
<div className="ml-vital-bar mana">
|
||
<div className="ml-vital-fill" style={{ width: `${v?.mana_percentage ?? 0}%` }} />
|
||
</div>
|
||
</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>
|
||
|
||
<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 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>
|
||
);
|
||
});
|
||
|
||
PlayerRow.displayName = 'PlayerRow';
|