diff --git a/src/routes/match/[id]/details/+page.svelte b/src/routes/match/[id]/details/+page.svelte index 751d746..698c041 100644 --- a/src/routes/match/[id]/details/+page.svelte +++ b/src/routes/match/[id]/details/+page.svelte @@ -42,8 +42,28 @@ // Sort by kills descending const sortedPlayers = hasPlayerData ? playersWithStats.sort((a, b) => b.kills - a.kills) : []; + // Player color mapping for scoreboard indicators + const playerColors: Record = { + green: '#22c55e', + yellow: '#eab308', + purple: '#a855f7', + blue: '#3b82f6', + orange: '#f97316', + grey: '#6b7280' + }; + // Prepare data table columns const detailsColumns = [ + { + key: 'avatar' as keyof (typeof playersWithStats)[0], + label: '', + sortable: false, + align: 'center' as const, + render: (value: string | number | boolean | undefined, row: (typeof playersWithStats)[0]) => { + const avatarUrl = row.avatar || ''; + return `${row.name}`; + } + }, { key: 'name' as keyof (typeof playersWithStats)[0], label: 'Player', @@ -51,9 +71,21 @@ render: (value: string | number | boolean | undefined, row: (typeof playersWithStats)[0]) => { const strValue = value !== undefined ? String(value) : ''; const teamClass = row.team_id === firstTeamId ? 'text-terrorist' : 'text-ct'; - return `${strValue}`; + // Color indicator dot + const colorHex = row.color ? playerColors[row.color] : undefined; + const colorDot = colorHex + ? `` + : ''; + return `${colorDot}${strValue}`; } }, + { + key: 'score' as keyof (typeof playersWithStats)[0], + label: 'Score', + sortable: true, + align: 'center' as const, + class: 'font-mono font-semibold' + }, { key: 'kills' as keyof (typeof playersWithStats)[0], label: 'K',