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>
This commit is contained in:
32
src/routes/match/[id]/flashes/+page.svelte
Normal file
32
src/routes/match/[id]/flashes/+page.svelte
Normal file
@@ -0,0 +1,32 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user