Files
csgowtf/src/routes/match/[id]/flashes/+page.svelte
vikingowl 523136ffbc feat: Implement Phase 5 match detail tabs with charts and data visualization
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>
2025-11-04 21:17:32 +01:00

33 lines
1.1 KiB
Svelte

<script lang="ts">
import { Zap, Eye } from 'lucide-svelte';
import Card from '$lib/components/ui/Card.svelte';
import Badge from '$lib/components/ui/Badge.svelte';
</script>
<div class="space-y-6">
<Card padding="lg">
<div class="text-center">
<Eye class="mx-auto mb-4 h-16 w-16 text-warning" />
<h2 class="mb-2 text-2xl font-bold text-base-content">Flash Analysis</h2>
<p class="mb-4 text-base-content/60">
Flash effectiveness, enemies blinded, flash assists, and positioning heatmaps.
</p>
<Badge variant="warning" size="lg">Coming in Future Update</Badge>
</div>
</Card>
<div class="grid gap-6 md:grid-cols-2">
<Card padding="lg">
<Zap class="mb-2 h-8 w-8 text-warning" />
<h3 class="mb-1 text-lg font-semibold">Flash Effectiveness</h3>
<p class="text-sm text-base-content/60">Enemies blinded and average blind duration</p>
</Card>
<Card padding="lg">
<Eye class="mb-2 h-8 w-8 text-success" />
<h3 class="mb-1 text-lg font-semibold">Flash Assists</h3>
<p class="text-sm text-base-content/60">Blinded enemies killed by teammates</p>
</Card>
</div>
</div>