vikingowl
05a6c10458
- Update Zod schemas to match raw API response formats - Create transformation layer (rounds, weapons, chat) to convert raw API to structured format - Add player name mapping in transformers for better UX - Fix Svelte 5 reactivity issues in chat page (replace $effect with $derived) - Fix Chart.js compatibility with Svelte 5 state proxies using JSON serialization - Add economy advantage chart with halftime perspective flip (WIP) - Remove stray comment from details page - Update layout to load match data first, then pass to API methods 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
409 lines
13 KiB
Svelte
409 lines
13 KiB
Svelte
<script lang="ts">
|
|
import { Trophy, Target, Flame, AlertCircle } from 'lucide-svelte';
|
|
import Card from '$lib/components/ui/Card.svelte';
|
|
import Badge from '$lib/components/ui/Badge.svelte';
|
|
import DataTable from '$lib/components/data-display/DataTable.svelte';
|
|
import BarChart from '$lib/components/charts/BarChart.svelte';
|
|
import type { PageData } from './$types';
|
|
|
|
let { data }: { data: PageData } = $props();
|
|
const { match } = data;
|
|
|
|
// Check if we have player data to display
|
|
const hasPlayerData = match.players && match.players.length > 0;
|
|
|
|
// Get unique team IDs dynamically
|
|
const uniqueTeamIds = match.players ? [...new Set(match.players.map((p) => p.team_id))] : [];
|
|
const firstTeamId = uniqueTeamIds[0] ?? 2;
|
|
const secondTeamId = uniqueTeamIds[1] ?? 3;
|
|
|
|
// Calculate additional stats for players
|
|
const playersWithStats = hasPlayerData
|
|
? (match.players || []).map((player) => {
|
|
const kd =
|
|
player.deaths > 0 ? (player.kills / player.deaths).toFixed(2) : player.kills.toFixed(2);
|
|
const hsPercent =
|
|
player.kills > 0 ? ((player.headshot / player.kills) * 100).toFixed(1) : '0.0';
|
|
const adr = player.dmg_enemy
|
|
? (player.dmg_enemy / (match.max_rounds || 24)).toFixed(1)
|
|
: '0.0';
|
|
|
|
return {
|
|
...player,
|
|
kd: parseFloat(kd),
|
|
hsPercent: parseFloat(hsPercent),
|
|
adr: parseFloat(adr),
|
|
totalMultiKills:
|
|
(player.mk_2 || 0) + (player.mk_3 || 0) + (player.mk_4 || 0) + (player.mk_5 || 0)
|
|
};
|
|
})
|
|
: [];
|
|
|
|
// Sort by kills descending
|
|
const sortedPlayers = hasPlayerData ? playersWithStats.sort((a, b) => b.kills - a.kills) : [];
|
|
|
|
// Player color mapping for scoreboard indicators
|
|
const playerColors: Record<string, string> = {
|
|
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 `<img src="${avatarUrl}" alt="${row.name}" class="h-10 w-10 rounded-full border-2 border-base-300" />`;
|
|
}
|
|
},
|
|
{
|
|
key: 'name' as keyof (typeof playersWithStats)[0],
|
|
label: 'Player',
|
|
sortable: true,
|
|
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';
|
|
// Color indicator dot
|
|
const colorHex = row.color ? playerColors[row.color] : undefined;
|
|
const colorDot = colorHex
|
|
? `<span class="inline-block h-3 w-3 rounded-full mr-2" style="background-color: ${colorHex}"></span>`
|
|
: '';
|
|
return `<a href="/player/${row.id}" class="flex items-center font-medium hover:underline ${teamClass}">${colorDot}${strValue}</a>`;
|
|
}
|
|
},
|
|
{
|
|
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',
|
|
sortable: true,
|
|
align: 'center' as const,
|
|
class: 'font-mono font-semibold'
|
|
},
|
|
{
|
|
key: 'deaths' as keyof (typeof playersWithStats)[0],
|
|
label: 'D',
|
|
sortable: true,
|
|
align: 'center' as const,
|
|
class: 'font-mono'
|
|
},
|
|
{
|
|
key: 'assists' as keyof (typeof playersWithStats)[0],
|
|
label: 'A',
|
|
sortable: true,
|
|
align: 'center' as const,
|
|
class: 'font-mono'
|
|
},
|
|
{
|
|
key: 'kd' as keyof (typeof playersWithStats)[0],
|
|
label: 'K/D',
|
|
sortable: true,
|
|
align: 'center' as const,
|
|
class: 'font-mono',
|
|
format: (v: string | number | undefined, _row: (typeof playersWithStats)[0]) =>
|
|
v !== undefined ? (v as number).toFixed(2) : '0.00'
|
|
},
|
|
{
|
|
key: 'adr' as keyof (typeof playersWithStats)[0],
|
|
label: 'ADR',
|
|
sortable: true,
|
|
align: 'center' as const,
|
|
class: 'font-mono',
|
|
format: (v: string | number | undefined, _row: (typeof playersWithStats)[0]) =>
|
|
v !== undefined ? (v as number).toFixed(1) : '0.0'
|
|
},
|
|
{
|
|
key: 'hsPercent' as keyof (typeof playersWithStats)[0],
|
|
label: 'HS%',
|
|
sortable: true,
|
|
align: 'center' as const,
|
|
class: 'font-mono',
|
|
format: (v: string | number | undefined, _row: (typeof playersWithStats)[0]) =>
|
|
v !== undefined ? (v as number).toFixed(1) : '0.0'
|
|
},
|
|
{
|
|
key: 'kast' as keyof (typeof playersWithStats)[0],
|
|
label: 'KAST%',
|
|
sortable: true,
|
|
align: 'center' as const,
|
|
class: 'font-mono',
|
|
format: (v: string | number | undefined, _row: (typeof playersWithStats)[0]) =>
|
|
v !== undefined ? (v as number).toFixed(1) : '-'
|
|
},
|
|
{
|
|
key: 'mvp' as keyof (typeof playersWithStats)[0],
|
|
label: 'MVP',
|
|
sortable: true,
|
|
align: 'center' as const,
|
|
class: 'font-mono'
|
|
},
|
|
{
|
|
key: 'mk_5' as keyof (typeof playersWithStats)[0],
|
|
label: 'Aces',
|
|
sortable: true,
|
|
align: 'center' as const,
|
|
render: (
|
|
value: string | number | boolean | undefined,
|
|
_row: (typeof playersWithStats)[0]
|
|
) => {
|
|
const numValue = value !== undefined ? (value as number) : 0;
|
|
if (numValue > 0) return `<span class="badge badge-warning badge-sm">${numValue}</span>`;
|
|
return '<span class="text-base-content/40">-</span>';
|
|
}
|
|
},
|
|
{
|
|
key: 'vac' as keyof (typeof playersWithStats)[0],
|
|
label: 'Status',
|
|
sortable: true,
|
|
align: 'center' as const,
|
|
render: (
|
|
_value: string | number | boolean | undefined,
|
|
row: (typeof playersWithStats)[0]
|
|
) => {
|
|
const badges = [];
|
|
if (row.vac) {
|
|
badges.push('<span class="badge badge-error badge-sm" title="VAC Banned">VAC</span>');
|
|
}
|
|
if (row.game_ban) {
|
|
badges.push('<span class="badge badge-error badge-sm" title="Game Banned">BAN</span>');
|
|
}
|
|
if (badges.length > 0) {
|
|
return `<div class="flex gap-1 justify-center">${badges.join('')}</div>`;
|
|
}
|
|
return '<span class="text-base-content/40">-</span>';
|
|
}
|
|
}
|
|
];
|
|
|
|
// Multi-kill chart data
|
|
const multiKillData = {
|
|
labels: sortedPlayers.map((p) => p.name),
|
|
datasets: [
|
|
{
|
|
label: '2K',
|
|
data: sortedPlayers.map((p) => p.mk_2 || 0),
|
|
backgroundColor: 'rgba(34, 197, 94, 0.8)'
|
|
},
|
|
{
|
|
label: '3K',
|
|
data: sortedPlayers.map((p) => p.mk_3 || 0),
|
|
backgroundColor: 'rgba(59, 130, 246, 0.8)'
|
|
},
|
|
{
|
|
label: '4K',
|
|
data: sortedPlayers.map((p) => p.mk_4 || 0),
|
|
backgroundColor: 'rgba(249, 115, 22, 0.8)'
|
|
},
|
|
{
|
|
label: '5K (Ace)',
|
|
data: sortedPlayers.map((p) => p.mk_5 || 0),
|
|
backgroundColor: 'rgba(239, 68, 68, 0.8)'
|
|
}
|
|
]
|
|
};
|
|
|
|
// Calculate team totals
|
|
const teamAPlayers = hasPlayerData
|
|
? playersWithStats.filter((p) => p.team_id === firstTeamId)
|
|
: [];
|
|
const teamBPlayers = hasPlayerData
|
|
? playersWithStats.filter((p) => p.team_id === secondTeamId)
|
|
: [];
|
|
|
|
const teamAStats =
|
|
hasPlayerData && teamAPlayers.length > 0
|
|
? {
|
|
totalDamage: teamAPlayers.reduce((sum, p) => sum + (p.dmg_enemy || 0), 0),
|
|
totalUtilityDamage: teamAPlayers.reduce(
|
|
(sum, p) => sum + (p.ud_he || 0) + (p.ud_flames || 0),
|
|
0
|
|
),
|
|
totalFlashAssists: teamAPlayers.reduce((sum, p) => sum + (p.flash_assists || 0), 0),
|
|
avgKAST:
|
|
teamAPlayers.length > 0
|
|
? (
|
|
teamAPlayers.reduce((sum, p) => sum + (p.kast || 0), 0) / teamAPlayers.length
|
|
).toFixed(1)
|
|
: '0.0'
|
|
}
|
|
: { totalDamage: 0, totalUtilityDamage: 0, totalFlashAssists: 0, avgKAST: '0.0' };
|
|
|
|
const teamBStats =
|
|
hasPlayerData && teamBPlayers.length > 0
|
|
? {
|
|
totalDamage: teamBPlayers.reduce((sum, p) => sum + (p.dmg_enemy || 0), 0),
|
|
totalUtilityDamage: teamBPlayers.reduce(
|
|
(sum, p) => sum + (p.ud_he || 0) + (p.ud_flames || 0),
|
|
0
|
|
),
|
|
totalFlashAssists: teamBPlayers.reduce((sum, p) => sum + (p.flash_assists || 0), 0),
|
|
avgKAST:
|
|
teamBPlayers.length > 0
|
|
? (
|
|
teamBPlayers.reduce((sum, p) => sum + (p.kast || 0), 0) / teamBPlayers.length
|
|
).toFixed(1)
|
|
: '0.0'
|
|
}
|
|
: { totalDamage: 0, totalUtilityDamage: 0, totalFlashAssists: 0, avgKAST: '0.0' };
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Match Details - CS2.WTF</title>
|
|
</svelte:head>
|
|
|
|
{#if !hasPlayerData}
|
|
<Card padding="lg">
|
|
<div class="text-center">
|
|
<AlertCircle class="mx-auto mb-4 h-16 w-16 text-warning" />
|
|
<h2 class="mb-2 text-2xl font-bold text-base-content">No Player Data Available</h2>
|
|
<p class="mb-4 text-base-content/60">
|
|
Detailed player statistics are not available for this match.
|
|
</p>
|
|
<Badge variant="warning" size="lg">Player data unavailable</Badge>
|
|
</div>
|
|
</Card>
|
|
{:else}
|
|
<div class="space-y-6">
|
|
<!-- Team Performance Summary -->
|
|
<div class="grid gap-6 md:grid-cols-2">
|
|
<!-- Terrorists Stats -->
|
|
<Card padding="lg">
|
|
<h3 class="mb-4 text-xl font-bold text-terrorist">Terrorists Performance</h3>
|
|
<div class="grid grid-cols-2 gap-4 text-sm">
|
|
<div>
|
|
<div class="text-base-content/60">Total Damage</div>
|
|
<div class="text-2xl font-bold">{teamAStats.totalDamage.toLocaleString()}</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-base-content/60">Utility Damage</div>
|
|
<div class="text-2xl font-bold">{teamAStats.totalUtilityDamage.toLocaleString()}</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-base-content/60">Flash Assists</div>
|
|
<div class="text-2xl font-bold">{teamAStats.totalFlashAssists}</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-base-content/60">Avg KAST</div>
|
|
<div class="text-2xl font-bold">{teamAStats.avgKAST}%</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
<!-- Counter-Terrorists Stats -->
|
|
<Card padding="lg">
|
|
<h3 class="mb-4 text-xl font-bold text-ct">Counter-Terrorists Performance</h3>
|
|
<div class="grid grid-cols-2 gap-4 text-sm">
|
|
<div>
|
|
<div class="text-base-content/60">Total Damage</div>
|
|
<div class="text-2xl font-bold">{teamBStats.totalDamage.toLocaleString()}</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-base-content/60">Utility Damage</div>
|
|
<div class="text-2xl font-bold">{teamBStats.totalUtilityDamage.toLocaleString()}</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-base-content/60">Flash Assists</div>
|
|
<div class="text-2xl font-bold">{teamBStats.totalFlashAssists}</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-base-content/60">Avg KAST</div>
|
|
<div class="text-2xl font-bold">{teamBStats.avgKAST}%</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- Multi-Kills Chart -->
|
|
<Card padding="lg">
|
|
<div class="mb-4">
|
|
<h2 class="text-2xl font-bold text-base-content">Multi-Kill Distribution</h2>
|
|
<p class="text-sm text-base-content/60">
|
|
Double kills (2K), triple kills (3K), quad kills (4K), and aces (5K) per player
|
|
</p>
|
|
</div>
|
|
<BarChart data={multiKillData} height={300} />
|
|
</Card>
|
|
|
|
<!-- Detailed Player Statistics Table -->
|
|
<Card padding="none">
|
|
<div class="p-6">
|
|
<h2 class="text-2xl font-bold text-base-content">Detailed Player Statistics</h2>
|
|
<p class="mt-1 text-sm text-base-content/60">
|
|
Complete performance breakdown for all players
|
|
</p>
|
|
</div>
|
|
|
|
<DataTable data={sortedPlayers} columns={detailsColumns} striped hoverable />
|
|
</Card>
|
|
|
|
<!-- Top Performers -->
|
|
<div class="grid gap-6 md:grid-cols-3">
|
|
{#if sortedPlayers.length > 0 && sortedPlayers[0]}
|
|
<!-- Most Kills -->
|
|
<Card padding="lg">
|
|
<div class="mb-3 flex items-center gap-2">
|
|
<Trophy class="h-5 w-5 text-warning" />
|
|
<h3 class="font-semibold text-base-content">Most Kills</h3>
|
|
</div>
|
|
<div class="text-2xl font-bold text-base-content">{sortedPlayers[0].name}</div>
|
|
<div class="mt-1 font-mono text-3xl font-bold text-primary">
|
|
{sortedPlayers[0].kills}
|
|
</div>
|
|
<div class="mt-2 text-xs text-base-content/60">
|
|
{sortedPlayers[0].deaths} deaths, {sortedPlayers[0].kd.toFixed(2)} K/D
|
|
</div>
|
|
</Card>
|
|
|
|
<!-- Best K/D -->
|
|
{@const bestKD = [...sortedPlayers].sort((a, b) => b.kd - a.kd)[0]}
|
|
{#if bestKD}
|
|
<Card padding="lg">
|
|
<div class="mb-3 flex items-center gap-2">
|
|
<Target class="h-5 w-5 text-success" />
|
|
<h3 class="font-semibold text-base-content">Best K/D Ratio</h3>
|
|
</div>
|
|
<div class="text-2xl font-bold text-base-content">{bestKD.name}</div>
|
|
<div class="mt-1 font-mono text-3xl font-bold text-success">{bestKD.kd.toFixed(2)}</div>
|
|
<div class="mt-2 text-xs text-base-content/60">
|
|
{bestKD.kills}K / {bestKD.deaths}D
|
|
</div>
|
|
</Card>
|
|
{/if}
|
|
|
|
<!-- Most Utility Damage -->
|
|
{@const bestUtility = [...sortedPlayers].sort(
|
|
(a, b) => (b.ud_he || 0) + (b.ud_flames || 0) - ((a.ud_he || 0) + (a.ud_flames || 0))
|
|
)[0]}
|
|
{#if bestUtility}
|
|
<Card padding="lg">
|
|
<div class="mb-3 flex items-center gap-2">
|
|
<Flame class="h-5 w-5 text-error" />
|
|
<h3 class="font-semibold text-base-content">Most Utility Damage</h3>
|
|
</div>
|
|
<div class="text-2xl font-bold text-base-content">{bestUtility.name}</div>
|
|
<div class="mt-1 font-mono text-3xl font-bold text-error">
|
|
{((bestUtility.ud_he || 0) + (bestUtility.ud_flames || 0)).toLocaleString()}
|
|
</div>
|
|
<div class="mt-2 text-xs text-base-content/60">
|
|
HE: {bestUtility.ud_he || 0} | Fire: {bestUtility.ud_flames || 0}
|
|
</div>
|
|
</Card>
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
{/if}
|