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>
27 lines
660 B
Svelte
27 lines
660 B
Svelte
<script lang="ts">
|
|
interface Props {
|
|
variant?: 'text' | 'circular' | 'rectangular';
|
|
width?: string;
|
|
height?: string;
|
|
class?: string;
|
|
}
|
|
|
|
let { variant = 'rectangular', width, height, class: className = '' }: Props = $props();
|
|
|
|
const baseClasses = 'animate-pulse bg-base-300';
|
|
|
|
const variantClasses = {
|
|
text: 'rounded h-4',
|
|
circular: 'rounded-full',
|
|
rectangular: 'rounded'
|
|
};
|
|
|
|
const style = [width ? `width: ${width};` : '', height ? `height: ${height};` : '']
|
|
.filter(Boolean)
|
|
.join(' ');
|
|
</script>
|
|
|
|
<div class="{baseClasses} {variantClasses[variant]} {className}" {style} role="status">
|
|
<span class="sr-only">Loading...</span>
|
|
</div>
|