Display average Premier rating for each team in match statistics cards.
## Changes
### Average Rating Calculation
- Calculate average rank_new across all ranked players on each team
- Filter out unranked players (rating = 0 or null/undefined)
- Round to nearest integer for clean display
### UI Display
- Add PremierRatingBadge below team name in statistics cards
- Small size badge with trophy icon
- Automatically styled with tier colors (gray/blue/purple/pink/red/gold)
- Only show badge if team has at least one ranked player
## Implementation Details
Extended `calcTeamStats()` function to compute `avgRating` by:
1. Filtering players with valid rank_new > 0
2. Computing average if any ranked players exist
3. Returning undefined if no players are ranked
The PremierRatingBadge component handles all tier styling automatically based
on the rating value using the existing formatPremierRating utility.
Team badges provide quick visual indication of match skill level and help
identify skill disparities between teams.
This completes Phase 2 Feature 2 - team ratings now prominently displayed.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Enhance match details scoreboard with additional visual information for better
player identification and context.
## Changes
### Avatar Column
- Display player profile images in first column (40x40px)
- Rounded style with border for consistent appearance
- Non-sortable for visual continuity
### Score Column
- Show in-game score for each player
- Sortable to identify top performers
- Monospace font for numeric alignment
### Player Color Indicators
- Add colored dot next to player names
- Map CS2 player colors (green, yellow, purple, blue, orange, grey) to hex values
- Visual indicator helps identify specific players during match review
## Implementation Details
Created `playerColors` mapping object to convert CS2's player color names to
hex color codes for display. Updated Player name column render function to
include inline colored dot element.
All columns maintain existing team color styling (terrorist/CT) for consistency.
Note: MVP and K/D ratio columns already existed in scoreboard.
This completes Phase 2 Feature 1 - scoreboard now provides comprehensive player
information at a glance.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implement localStorage-based player visit tracking with display on home page.
## New Features
### Recently Visited Players Component
- **RecentPlayers.svelte**: Grid display of up to 10 recently visited players
- **Responsive Layout**: 1-4 columns based on screen size
- **Player Cards**: Avatar, name, and time since last visit
- **Remove Functionality**: Individual player removal with X button
- **Auto-show/hide**: Component only renders when players have been visited
### Player Visit Tracking
- **recentPlayers utility**: localStorage management functions
- `getRecentPlayers()`: Retrieve sorted list by most recent
- `addRecentPlayer()`: Add/update player visit with timestamp
- `removeRecentPlayer()`: Remove specific player from list
- `clearRecentPlayers()`: Clear entire history
- **Auto-tracking**: Player profile page automatically records visits on mount
- **Smart deduplication**: Visiting same player updates timestamp, no duplicates
- **Max limit**: Maintains up to 10 most recent players
### Time Display
- Relative time formatting: "Just now", "5m ago", "2h ago", "3d ago"
- Real-time updates when component mounts
- Human-readable timestamps
### UX Features
- **Hover Effects**: Border highlights and shadow on card hover
- **Team Colors**: Player names inherit team colors from profiles
- **Remove on Hover**: X button appears only on hover for clean interface
- **Click Protection**: Remove button prevents navigation when clicked
- **Footer Info**: Shows count of displayed players
## Implementation Details
- **localStorage Key**: `cs2wtf_recent_players`
- **Data Structure**: Array of `{id, name, avatar, visitedAt}` objects
- **Sort Order**: Most recently visited first
- **SSR Safe**: All localStorage operations check for browser environment
- **Error Handling**: Try-catch wraps all storage operations with console errors
## Integration
- Added to home page between hero and featured matches
- Integrates seamlessly with existing layout and styling
- No data fetching required - pure client-side functionality
- Persists across sessions via localStorage
This completes Phase 1 (6/6) - all critical features now implemented!
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implement detailed weapon performance tracking and visualization.
## New Features
### Weapons Tab
- Added "Weapons" tab to match layout navigation
- Created `/match/[id]/weapons` route with server-side data loading
- Displays weapon statistics for all players in the match
### Statistics Displayed
**Overview Cards:**
- Total kills across all weapons
- Total damage dealt
- Total hits landed
**Charts & Visualizations:**
- Bar chart: Top 10 most-used weapons by kills
- Pie chart: Hit location distribution (head, chest, stomach, arms, legs)
- Legend with exact hit counts for each body part
**Player Performance Table:**
- Player name (with team color coding)
- Top weapon for each player
- Total kills per player
- Total damage per player
- Total hits per player
- Sortable columns for easy comparison
### Technical Implementation
- **Data Loading**: Server-side fetch of weapons data via `getMatchWeapons()` API
- **Type Safety**: Full TypeScript types with WeaponStats, PlayerWeaponStats, MatchWeaponsResponse
- **Error Handling**: Graceful fallback when weapons data unavailable
- **Aggregation**: Weapon stats aggregated across all players for match-wide insights
- **Team Colors**: Player names colored by team (terrorist/CT)
### UX Improvements
- Empty state with helpful message when no weapons data exists
- Responsive grid layouts for cards and charts
- Consistent styling with existing tabs
- Interactive data table with hover states and sorting
This completes Phase 1 feature 5 of 6 - comprehensive weapon performance analysis
gives players insight into their weapon choices and accuracy.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Add per-player VAC and game ban status display in match details scoreboard.
## Changes
- **Types & Schema**: Add vac and game_ban optional boolean fields to MatchPlayer
- **Transformer**: Extract vac and game_ban from legacy player.vac and player.game_ban
- **UI**: Add "Status" column to details table showing VAC/BAN badges
- **Mocks**: Update mock player data with ban status fields
## Implementation Details
The backend API provides per-player ban status in match details via the player
object (player.vac and player.game_ban). These were previously not being extracted
by the transformer.
The new Status column displays:
- Red "VAC" badge if player has VAC ban
- Red "BAN" badge if player has game ban
- Both badges if player has both bans
- "-" if player has no bans
Users can identify banned players at a glance in the scoreboard, improving
transparency and match context.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
This commit completes the first phase of feature parity implementation and
resolves all API integration issues to match the backend API format.
## API Integration Fixes
- Remove all hardcoded default values from transformers (tick_rate, kast, player_count, steam_updated)
- Update TypeScript types to make fields optional where backend doesn't guarantee them
- Update Zod schemas to validate optional fields correctly
- Fix mock data to match real API response format (plain arrays, not wrapped objects)
- Update UI components to handle undefined values with proper fallbacks
- Add comprehensive API documentation for Match and Player endpoints
## Phase 1 Features Implemented (3/6)
### 1. Player Tracking System ✅
- Created TrackPlayerModal.svelte with auth code input
- Integrated track/untrack player API endpoints
- Added UI for providing optional share code
- Displays tracked status on player profiles
- Full validation and error handling
### 2. Share Code Parsing ✅
- Created ShareCodeInput.svelte component
- Added to matches page for easy match submission
- Real-time validation of share code format
- Parse status feedback with loading states
- Auto-redirect to match page on success
### 3. VAC/Game Ban Status ✅
- Added VAC and game ban count/date fields to Player type
- Display status badges on player profile pages
- Show ban count and date when available
- Visual indicators using DaisyUI badge components
## Component Improvements
- Modal.svelte: Added Svelte 5 Snippet types, actions slot support
- ThemeToggle.svelte: Removed deprecated svelte:component usage
- Tooltip.svelte: Fixed type safety with Snippet type
- All new components follow Svelte 5 runes pattern ($state, $derived, $bindable)
## Type Safety & Linting
- Fixed all ESLint errors (any types → proper types)
- Fixed form label accessibility issues
- Replaced error: any with error: unknown + proper type guards
- Added Snippet type imports where needed
- Updated all catch blocks to use instanceof Error checks
## Static Assets
- Migrated all files from public/ to static/ directory per SvelteKit best practices
- Moved 200+ map icons, screenshots, and other assets
- Updated all import paths to use /images/ (served from static/)
## Documentation
- Created IMPLEMENTATION_STATUS.md tracking all 15 missing features
- Updated API.md with optional field annotations
- Created MATCHES_API.md with comprehensive endpoint documentation
- Added inline comments marking optional vs required fields
## Testing
- Updated mock fixtures to remove default values
- Fixed mock handlers to return plain arrays like real API
- Ensured all components handle undefined gracefully
## Remaining Phase 1 Tasks
- [ ] Add VAC status column to match scoreboard
- [ ] Create weapons statistics tab for matches
- [ ] Implement recently visited players on home page
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add LegacyPlayerProfile transformer to handle API response format mismatch
- Transform avatar hashes to full Steam CDN URLs
- Map team IDs correctly (API 1/2 -> Schema 2/3)
- Calculate aggregate stats (avg_kills, avg_deaths, win_rate) from matches
- Reduce featured matches on homepage from 6 to 3
- Show 4 recent matches on player profile instead of 10
- Display recent matches in 4-column grid on desktop (side-by-side)
Fixes "Player not found" error for all player profiles.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Enable SSR for match pages by detecting server vs client context in API client
- Fix 500 errors on economy, chat, and details tabs by adding data loaders
- Handle unparsed matches gracefully with "Match Not Parsed" messages
- Fix dynamic team ID detection instead of hardcoding team IDs 2/3
- Fix DataTable component to properly render HTML in render functions
- Add fixed column widths to tables for visual consistency
- Add meta titles to all tab page loaders
- Fix Svelte 5 $derived syntax errors
- Fix ESLint errors (unused imports, any types, reactive state)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Adds client-side sorting and filtering capabilities:
Sorting options:
- Date (newest/oldest)
- Duration (shortest/longest)
- Score difference (close games/blowouts)
- Toggle ascending/descending order
Result filters:
- All matches
- Wins only (Team A won)
- Losses only (Team B won)
- Ties only
Features:
- Reactive $derived computed matches list
- Shows filtered count vs total matches
- Empty state when no matches match filters
- Clear filter button when results are empty
- Works seamlessly with pagination (Load More)
Completes Phase 5.2 advanced features from TODO.md.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
JavaScript's Number type cannot accurately represent uint64 values exceeding
Number.MAX_SAFE_INTEGER (2^53-1). Converting these IDs to numbers causes
precision loss and API errors.
Root cause found:
- match/[id]/+layout.ts: `Number(params.id)` corrupted match IDs
- player/[id]/+page.ts: `Number(params.id)` corrupted player IDs
Example of the bug:
- URL param: "3638078243082338615" (correct)
- After Number(): 3638078243082339000 (rounded!)
- API response: "Match 3638078243082339000 not found"
Changes:
- Remove Number() conversions in route loaders
- Keep params.id as string throughout the application
- Update API functions to only accept string (not string | number)
- Update MatchesQueryParams.player_id type to string
- Add comprehensive transformers for legacy API responses
- Transform player stats: duo→mk_2, triple→mk_3, steamid64→id
- Build full Steam avatar URLs
- Make share_code optional (not always present)
This ensures uint64 IDs maintain full precision from URL → API → response.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add pagination state management (matches, hasMore, nextPageTime)
- Create loadMore() function to fetch and append next page of results
- Replace placeholder "pagination coming soon" with functional Load More button
- Add loading spinner during pagination requests
- Show total matches count and "all loaded" message when complete
- Use $effect to reset pagination state when filters change
Completes Phase 5.2 pagination requirement from TODO.md.
Users can now browse through large match lists efficiently.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Create transformers.ts to convert legacy API format to new schema
- Transform score array [a, b] to score_team_a/score_team_b fields
- Convert Unix timestamps to ISO strings
- Map legacy field names (parsed, vac, game_ban) to new names
- Update matches API to use transformer with proper types
- Handle empty map names gracefully in homepage
- Limit featured matches to exactly 6 items
Fixes homepage data display issue where API format mismatch prevented
matches from rendering. API returns legacy CSGO:WTF format while frontend
expects new CS2.WTF schema.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implemented comprehensive performance analysis for player profiles with interactive charts
and detailed statistics visualization.
Key Features:
- Performance Trend Chart (K/D and KAST over last 15 matches)
- Map Performance Chart (win rate per map with color coding)
- Utility Effectiveness Stats (flash assists, enemies blinded, HE/flame damage)
- Responsive charts using Chart.js LineChart and BarChart components
Technical Updates:
- Enhanced page loader to fetch 15 detailed matches with player stats
- Fixed DataTable Svelte 5 compatibility and type safety
- Updated MatchCard and PlayerCard to use PlayerMeta properties
- Proper error handling and typed data structures
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implemented a comprehensive CORS proxy solution that works with both
local and remote backends during development.
## Changes
### Vite Configuration (vite.config.ts)
- Use loadEnv() to properly read VITE_API_BASE_URL from .env
- Configure proxy to forward /api/* requests to backend
- Add detailed logging for proxy requests and responses
- Support changeOrigin, rewrite, secure=false, and websockets
### API Client (src/lib/api/client.ts)
- In development: Always use /api prefix (proxied)
- In production: Use direct VITE_API_BASE_URL
- Add console logging to show proxy configuration in dev mode
- Automatic detection of environment (DEV vs PROD)
### Error Handling (route loaders)
- Fix console.error() calls that caused TypeError with circular refs
- Use error.message instead of logging full error objects
- Affects: +page.ts, matches/+page.ts
### Documentation
- docs/LOCAL_DEVELOPMENT.md: Complete rewrite with proxy explanation
- Quick start guide for both production API and local backend
- Detailed proxy flow diagrams
- Comprehensive troubleshooting section
- Clear examples and logs
- docs/CORS_PROXY.md: Technical deep-dive on proxy implementation
- How the proxy works internally
- Configuration options explained
- Testing procedures
- Common issues and solutions
- .env.example: Updated with proxy documentation
## How It Works
Development Flow:
1. Frontend makes request: /api/matches
2. Vite proxy intercepts and forwards to: ${VITE_API_BASE_URL}/matches
3. Backend responds (no CORS headers needed)
4. Proxy returns response to frontend (same-origin)
Production Flow:
1. Frontend makes request directly to: https://api.csgow.tf/matches
2. Backend responds with CORS headers
3. Browser allows request (CORS enabled on backend)
## Benefits
✅ No CORS errors in development
✅ Works with local backend (localhost:8000)
✅ Works with remote backend (api.csgow.tf)
✅ Simple configuration (just set VITE_API_BASE_URL)
✅ Detailed logging for debugging
✅ Production build unaffected (direct requests)
## Testing
Verified with production API:
- curl https://api.csgow.tf/matches ✓
- Dev server proxy logs show successful forwarding ✓
- Browser Network tab shows /api/* requests ✓
- No CORS errors in console ✓
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Replace invalid {@const} usage with proper <svelte:component this={...}> syntax.
The {@const} tag must be an immediate child of specific block structures,
not directly inside regular HTML elements.
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>
Phase 4 establishes the core application structure with SvelteKit routing,
data loading, error handling, and state management.
## Routing & Data Loading
- Created root layout load function (+layout.ts) with app version and feature flags
- Implemented comprehensive error boundary (+error.svelte) with status-based messages
- Added page loaders for homepage, matches, players, and about routes
- Homepage loader fetches featured matches via API with error fallback
- Matches loader supports URL query parameters (map, player_id, limit)
## State Management (Svelte Stores)
- preferences.ts: User settings with localStorage persistence
* Theme selection (cs2dark, cs2light, auto)
* Favorite players tracking
* Advanced stats toggle, date format preferences
- search.ts: Search state with recent searches (localStorage)
- toast.ts: Toast notification system with auto-dismiss
* Success, error, warning, info types
* Configurable duration and dismissibility
## UI Components
- Toast.svelte: Individual notification with Lucide icons
- ToastContainer.svelte: Fixed top-right toast display
- Integrated ToastContainer into root layout
## Fixes
- Fixed Svelte 5 deprecation warnings (removed <svelte:component> in runes mode)
- Updated homepage to use PageData from loader
- Added proper type safety across all load functions
## Testing
- Type check: 0 errors, 0 warnings
- Production build: Successful
- All Phase 4 core objectives completed
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Phase 3 (Domain Modeling & Data Layer) is now 100% complete:
- ✅ TypeScript interfaces for all data models
- ✅ Zod schemas with runtime validation
- ✅ API client with error handling and cancellation
- ✅ MSW mock handlers for testing
- Real-time features deferred to Phase 5
Now starting Phase 4: Application Architecture & Routing
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Implements comprehensive type system, runtime validation, API client,
and testing infrastructure for CS2.WTF.
TypeScript Interfaces (src/lib/types/):
- Match.ts: Match, MatchPlayer, MatchListItem types
- Player.ts: Player, PlayerMeta, PlayerProfile types
- RoundStats.ts: Round economy and performance data
- Weapon.ts: Weapon statistics with hit groups (HitGroup, WeaponType enums)
- Message.ts: Chat messages with filtering support
- api.ts: API responses, errors, and APIException class
- Complete type safety with strict null checks
Zod Schemas (src/lib/schemas/):
- Runtime validation for all data models
- Schema parsers with safe/unsafe variants
- Special handling for backend typo (looses → losses)
- Share code validation regex
- CS2-specific validations (rank 0-30000, MR12 rounds)
API Client (src/lib/api/):
- client.ts: Axios-based HTTP client with error handling
- Request cancellation support (AbortController)
- Automatic retry logic for transient failures
- Timeout handling (10s default)
- Typed APIException errors
- players.ts: Player endpoints (profile, meta, track/untrack, search)
- matches.ts: Match endpoints (parse, details, weapons, rounds, chat, search)
- Zod validation on all API responses
MSW Mock Handlers (src/mocks/):
- fixtures.ts: Comprehensive mock data for testing
- handlers/players.ts: Mock player API endpoints
- handlers/matches.ts: Mock match API endpoints
- browser.ts: Browser MSW worker for development
- server.ts: Node MSW server for Vitest tests
- Realistic responses with delays and pagination
- Safe integer IDs to avoid precision loss
Configuration:
- .env.example: Complete environment variable documentation
- src/vite-env.d.ts: Vite environment type definitions
- All strict TypeScript checks passing (0 errors, 0 warnings)
Features:
- Cancellable requests for search (prevent race conditions)
- Data normalization (backend typo handling)
- Comprehensive error types (NetworkError, Timeout, etc.)
- Share code parsing and validation
- Pagination support for players and matches
- Mock data for offline development and testing
Build Status: ✓ Production build successful
Type Check: ✓ 0 errors, 0 warnings
Lint: ✓ All checks passed
Phase 3 Completion: 100%
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
Reflect backend audit findings in TODO.md:
- 12 REST endpoints documented for player, match, matches, and sitemap
- Data models aligned with backend schemas (Match, Player, MatchPlayer,
etc.)
- CS2 compatibility confirmed with Premier rating support (0-30000)
Add comprehensive API documentation covering:
- Endpoint specifications and response structures
- Integration guide with TypeScript examples
- Error handling and caching strategies
- CS2 migration notes for rank system and MR12 changes
