forked from CSGOWTF/csgowtf
vikingowl
523136ffbc
This commit implements significant portions of Phase 5 (Feature Delivery) including: Chart Components (src/lib/components/charts/): - LineChart.svelte: Line charts with Chart.js integration - BarChart.svelte: Vertical/horizontal bar charts with stacking - PieChart.svelte: Pie/Doughnut charts with legend - All charts use Svelte 5 runes ($effect) for reactivity - Responsive design with customizable options Data Display Components (src/lib/components/data-display/): - DataTable.svelte: Generic sortable, filterable table component - TypeScript generics support for type safety - Custom formatters and renderers - Sort indicators and column alignment options Match Detail Pages: - Match layout with header, tabs, and score display - Economy tab: Equipment value charts, buy type classification, round-by-round table - Details tab: Multi-kill distribution charts, team performance, top performers - Chat tab: Chronological messages with filtering, search, and round grouping Additional Components: - SearchBar, ThemeToggle (layout components) - MatchCard, PlayerCard (domain components) - Modal, Skeleton, Tabs, Tooltip (UI components) - Player profile page with stats and recent matches Dependencies: - Installed chart.js for data visualization - Created Svelte 5 compatible chart wrappers Phase 4 marked as complete, Phase 5 at 50% completion. Flashes and Damage tabs deferred for future implementation. Note: Minor linting warnings to be addressed in follow-up commit. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
76 lines
2.5 KiB
Svelte
76 lines
2.5 KiB
Svelte
<script lang="ts">
|
|
import { User, TrendingUp, Target } from 'lucide-svelte';
|
|
import Badge from '$lib/components/ui/Badge.svelte';
|
|
import type { PlayerMeta } from '$lib/types';
|
|
|
|
interface Props {
|
|
player: PlayerMeta;
|
|
showStats?: boolean;
|
|
}
|
|
|
|
let { player, showStats = true }: Props = $props();
|
|
|
|
const kd = player.deaths > 0 ? (player.kills / player.deaths).toFixed(2) : player.kills.toFixed(2);
|
|
const winRate = player.wins + player.losses > 0
|
|
? ((player.wins / (player.wins + player.losses)) * 100).toFixed(1)
|
|
: '0.0';
|
|
</script>
|
|
|
|
<a
|
|
href={`/player/${player.id}`}
|
|
class="block overflow-hidden rounded-lg border border-base-300 bg-base-100 shadow-md transition-all hover:scale-[1.02] hover:shadow-xl"
|
|
>
|
|
<!-- Header -->
|
|
<div class="bg-gradient-to-r from-primary/20 to-secondary/20 p-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-base-100">
|
|
<User class="h-6 w-6 text-primary" />
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<h3 class="truncate text-lg font-bold text-base-content">{player.name}</h3>
|
|
<p class="text-sm text-base-content/60">ID: {player.id}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{#if showStats}
|
|
<!-- Stats -->
|
|
<div class="grid grid-cols-3 gap-4 p-4">
|
|
<div class="text-center">
|
|
<div class="mb-1 flex items-center justify-center">
|
|
<Target class="mr-1 h-4 w-4 text-primary" />
|
|
</div>
|
|
<div class="text-xl font-bold text-base-content">{kd}</div>
|
|
<div class="text-xs text-base-content/60">K/D</div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="mb-1 flex items-center justify-center">
|
|
<TrendingUp class="mr-1 h-4 w-4 text-success" />
|
|
</div>
|
|
<div class="text-xl font-bold text-base-content">{winRate}%</div>
|
|
<div class="text-xs text-base-content/60">Win Rate</div>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div class="mb-1 flex items-center justify-center">
|
|
<User class="mr-1 h-4 w-4 text-info" />
|
|
</div>
|
|
<div class="text-xl font-bold text-base-content">{player.wins + player.losses}</div>
|
|
<div class="text-xs text-base-content/60">Matches</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div class="border-t border-base-300 bg-base-200 px-4 py-3">
|
|
<div class="flex items-center justify-between text-sm">
|
|
<span class="text-base-content/60">Record:</span>
|
|
<div class="flex gap-2">
|
|
<Badge variant="success" size="sm">{player.wins}W</Badge>
|
|
<Badge variant="error" size="sm">{player.losses}L</Badge>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
</a>
|