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

feat(dashboard): click-to-highlight rows + character column auto-sizes

Browse source 
Two small UX improvements to the Player Dashboard table (works in both
the new-tab fullscreen page and the deprecated in-app window since they
share PlayerDashboardContent):

1. Row highlight: click anywhere on a row to highlight it (blue tint +
   thin outline). Click again to unhighlight. Single selection — useful
   for tracking one character down a long sorted list.

2. Character column no longer truncates: removed maxWidth/overflow/
   textOverflow on the name cell. Column now sizes to the longest
   character name (still no wrapping; container scrolls horizontally
   if names are extreme).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Erik 2026-05-23 19:35:09 +02:00
parent 5bda2b64f4
commit 5f43ddce93
15 changed files with 62 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

18
frontend/src/components/windows/PlayerDashboardWindow.tsx
View file

@ -15,6 +15,9 @@ type SortCol = 'name' | 'kills' | 'kph' | 'rares' | 'deaths' | 'uptime' | 'state
export const PlayerDashboardContent: React.FC<ContentProps> = ({ characters }) => {
const [sortCol, setSortCol] = useState<SortCol>('kph');
const [sortAsc, setSortAsc] = useState(false);
// Click-to-highlight one row at a time. Click again to unhighlight.
// Helps when watching a specific character across a long list.
const [selectedName, setSelectedName] = useState<string | null>(null);
const players = useMemo(() => {
const list = Array.from(characters.values()).filter(c => c.telemetry).map(c => {
@ -88,9 +91,20 @@ export const PlayerDashboardContent: React.FC<ContentProps> = ({ characters }) =
{players.map(p => {
const stateLC = p.state.toLowerCase();
const isActive = stateLC === 'combat' || stateLC === 'hunt';
const isSelected = selectedName === p.name;
return (
<tr key={p.name} style={{ borderBottom: '1px solid #1a1a1a' }}>
<td style={{ padding: '3px 6px', color: '#ccc', fontWeight: 500, maxWidth: 180, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.name}</td>
<tr
key={p.name}
onClick={() => setSelectedName(isSelected ? null : p.name)}
style={{
borderBottom: '1px solid #1a1a1a',
cursor: 'pointer',
background: isSelected ? 'rgba(102, 170, 255, 0.18)' : undefined,
outline: isSelected ? '1px solid rgba(102, 170, 255, 0.55)' : undefined,
outlineOffset: '-1px',
}}
>
<td style={{ padding: '3px 10px 3px 6px', color: '#ccc', fontWeight: 500, whiteSpace: 'nowrap' }}>{p.name}</td>
<td style={{ textAlign: 'center', padding: '3px 6px' }}>
<span style={{ fontSize: '0.6rem', padding: '1px 6px', borderRadius: 3,
background: isActive ? 'rgba(68,204,68,0.15)' : stateLC === 'idle' || stateLC === 'default' ? 'rgba(100,100,100,0.2)' : 'rgba(204,68,68,0.15)',