LysetsRev/csgowtf
1
0
Fork 0
forked from CSGOWTF/csgowtf
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Implement Phase 1 critical features and fix API integration

Browse Source 
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>
This commit is contained in:
vikingowl
2025-11-12 19:31:18 +01:00
parent a861b1c1b6
commit 8f3b652740
422 changed files with 106174 additions and 102193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
docs/LOCAL_DEVELOPMENT.md
View File

@@ -21,6 +21,7 @@ npm install
The `.env` file already exists in the project. You can use it as-is or modify it:
**Option A: Use Production API** (Recommended for frontend development)
```env
# Use the live production API - no local backend needed
VITE_API_BASE_URL=https://api.csgow.tf
@@ -30,6 +31,7 @@ VITE_ENABLE_ANALYTICS=false
```
**Option B: Use Local Backend** (For full-stack development)
```env
# Use local backend (requires csgowtfd running on port 8000)
VITE_API_BASE_URL=http://localhost:8000
@@ -47,13 +49,12 @@ npm run dev
The frontend will be available at `http://localhost:5173`
You should see output like:
```
[Vite Config] API Proxy target: https://api.csgow.tf
[API Client] Development mode - using Vite proxy
[API Client] Frontend requests: /api/*
[API Client] Proxy target: https://api.csgow.tf
VITE v5.x.x ready in xxx ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
```
### 4. (Optional) Start Local Backend
@@ -67,45 +68,57 @@ go run cmd/csgowtfd/main.go
```
Or use Docker:
```bash
docker-compose up csgowtfd
```
## How the CORS Proxy Works
## How SvelteKit API Routes Work
The Vite dev server includes a **built-in proxy** that eliminates CORS issues during development:
All API requests go through **SvelteKit server routes** which proxy to the backend. This works consistently in all environments.
### Request Flow (All Environments)
### Development Mode Flow
```
1. Browser makes request to: http://localhost:5173/api/matches
2. Vite intercepts and proxies to: ${VITE_API_BASE_URL}/matches
3. Backend responds
4. Vite forwards response to browser
2. SvelteKit routes to: src/routes/api/[...path]/+server.ts
3. Server handler reads VITE_API_BASE_URL environment variable
4. Server fetches from backend: ${VITE_API_BASE_URL}/matches
5. Backend responds
6. Server handler forwards response to browser
```
### Benefits
- ✅ **No CORS errors** - All requests appear same-origin to the browser
- ✅ **Works with any backend** - Local or remote
- ✅ **No backend CORS config needed** - Proxy handles it
- ✅ **Simple configuration** - Just set `VITE_API_BASE_URL`
### Proxy Logs
- ✅ **No CORS errors** - All requests are server-side
- ✅ **Works in all environments** - Dev, preview, and production
- ✅ **Single code path** - Same behavior everywhere
- ✅ **Easy backend switching** - Change one environment variable
- ✅ **Future-proof** - Can add caching, rate limiting, auth later
- ✅ **Backend URL not exposed** - Hidden from client
You'll see detailed proxy activity in the terminal:
### Switching Between Backends
Simply update `.env` and restart the dev server:
```bash
[Proxy] GET /api/matches?limit=6 -> https://api.csgow.tf/matches?limit=6
[Proxy ✓] GET /api/matches?limit=6 -> 200
[Proxy] GET /api/match/123 -> https://api.csgow.tf/match/123
[Proxy ✓] GET /api/match/123 -> 200
# Use production API
echo "VITE_API_BASE_URL=https://api.csgow.tf" > .env
npm run dev
# Use local backend
echo "VITE_API_BASE_URL=http://localhost:8000" > .env
npm run dev
```
### Production vs Development
### Development vs Production
| Mode | API Base URL | CORS |
|------|-------------|------|
| **Development** (`npm run dev`) | `/api` (proxied to `VITE_API_BASE_URL`) | ✅ No issues |
| **Production** (`npm run build`) | `VITE_API_BASE_URL` (direct) | ✅ Backend has CORS enabled |
| Mode | Request Flow | Backend URL From |
| -------------------------------- | ---------------------------------------------- | ------------------------------ |
| **Development** (`npm run dev`) | Browser → `/api/*` → SvelteKit Route → Backend | `.env` → `VITE_API_BASE_URL` |
| **Production** (`npm run build`) | Browser → `/api/*` → SvelteKit Route → Backend | Build-time `VITE_API_BASE_URL` |
**Note**: The flow is identical in both modes - this is the key advantage over the old Vite proxy approach.
## Troubleshooting
@@ -116,34 +129,40 @@ You'll see detailed proxy activity in the terminal:
**Solutions**:
1. **Check what backend you're using**:
```bash
# Look at your .env file
cat .env | grep VITE_API_BASE_URL
```
2. **If using production API** (`https://api.csgow.tf`):
```bash
# Test if production API is accessible
curl https://api.csgow.tf/matches?limit=1
```
Should return JSON data. If not, production API may be down.
3. **If using local backend** (`http://localhost:8000`):
```bash
# Test if local backend is running
curl http://localhost:8000/matches?limit=1
```
If you get "Connection refused", start the backend service.
4. **Check proxy logs**:
- Look at the terminal running `npm run dev`
- You should see `[Proxy]` messages showing requests being forwarded
- If you see `[Proxy Error]`, check the error message
5. **Check browser console**:
4. **Check browser console**:
- Open DevTools → Console tab
- Look for `[API Client]` messages showing proxy configuration
- Look for `[API Route]` error messages from the server route handler
- Network tab should show requests to `/api/*` (not external URLs)
- Check if requests return 503 (backend unreachable) or 500 (server error)
5. **Check server logs**:
- Look at the terminal running `npm run dev`
- Server route errors will appear with `[API Route] Error fetching...`
- This will show you the exact backend URL being requested
6. **Restart dev server**:
```bash
@@ -151,22 +170,20 @@ You'll see detailed proxy activity in the terminal:
npm run dev
```
### CORS Errors (Should Not Happen)
### CORS Errors (Should Never Happen)
If you see CORS errors in the browser console, the proxy isn't working:
CORS errors should be impossible with SvelteKit server routes since all requests are server-side.
**Symptoms**:
- Browser console shows: `CORS policy: No 'Access-Control-Allow-Origin' header`
- Network tab shows requests going to `https://api.csgow.tf` directly (not `/api`)
**If you somehow see CORS errors:**
**Fix**:
1. Verify you're in development mode (not production build)
2. Check API client logs show: `Development mode - using Vite proxy`
3. Restart dev server with clean cache:
```bash
rm -rf .svelte-kit
npm run dev
```
- This means the API client is bypassing the `/api` routes
- Check that `src/lib/api/client.ts` has `API_BASE_URL = '/api'`
- Verify `src/routes/api/[...path]/+server.ts` exists
- Clear cache and restart:
```bash
rm -rf .svelte-kit
npm run dev
```
### Port Already in Use
@@ -196,6 +213,7 @@ Then restart the dev server.
### 1. Make Changes
Edit files in `src/`. The dev server has hot module replacement (HMR):
- Component changes reload instantly
- Route changes reload the page
- Store changes reload affected components
@@ -243,33 +261,32 @@ The backend provides these endpoints (see `docs/API.md` for full details):
### How Requests Work
**In Development** (`npm run dev`):
**All Environments** (dev, preview, production):
```
Frontend code: api.matches.getMatches()
↓
API Client: GET /api/matches
↓
Vite Proxy: GET https://api.csgow.tf/matches
SvelteKit Route: src/routes/api/[...path]/+server.ts
↓
Server Handler: GET ${VITE_API_BASE_URL}/matches
↓
Response: ← Data returned to frontend
```
**In Production** (deployed app):
```
Frontend code: api.matches.getMatches()
↓
API Client: GET https://api.csgow.tf/matches (direct)
↓
Response: ← Data returned to frontend
```
The request flow is identical in all environments. The only difference is which backend URL `VITE_API_BASE_URL` points to:
The API client automatically uses the correct URL based on environment.
- Development: Usually `https://api.csgow.tf` (production API)
- Local full-stack: `http://localhost:8000` (local backend)
- Production: `https://api.csgow.tf` (or custom backend URL)
## Mock Data (Alternative: No Backend)
If you want to develop without any backend (local or production), enable MSW mocking:
1. Update `.env`:
```env
VITE_ENABLE_MSW_MOCKING=true
```
@@ -294,14 +311,14 @@ The preview server runs on `http://localhost:4173` and uses the production API c
## Environment Variables Reference
| Variable | Default | Description |
|----------|---------|-------------|
| `VITE_API_BASE_URL` | `http://localhost:8000` | Backend API base URL |
| `VITE_API_TIMEOUT` | `10000` | Request timeout (ms) |
| `VITE_ENABLE_LIVE_MATCHES` | `false` | Enable live match polling |
| `VITE_ENABLE_ANALYTICS` | `false` | Enable analytics tracking |
| `VITE_DEBUG_MODE` | `false` | Enable debug logging |
| `VITE_ENABLE_MSW_MOCKING` | `false` | Use mock data instead of API |
| Variable | Default | Description |
| -------------------------- | ----------------------- | ---------------------------- |
| `VITE_API_BASE_URL` | `http://localhost:8000` | Backend API base URL |
| `VITE_API_TIMEOUT` | `10000` | Request timeout (ms) |
| `VITE_ENABLE_LIVE_MATCHES` | `false` | Enable live match polling |
| `VITE_ENABLE_ANALYTICS` | `false` | Enable analytics tracking |
| `VITE_DEBUG_MODE` | `false` | Enable debug logging |
| `VITE_ENABLE_MSW_MOCKING` | `false` | Use mock data instead of API |
## Getting Help