vikingowl
8f3b652740
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>
72 lines
2.0 KiB
Svelte
72 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import { Moon, Sun, Monitor } from 'lucide-svelte';
|
|
import { preferences } from '$lib/stores';
|
|
import { browser } from '$app/environment';
|
|
import { onMount } from 'svelte';
|
|
|
|
const themes = [
|
|
{ value: 'cs2light', label: 'Light', icon: Sun },
|
|
{ value: 'cs2dark', label: 'Dark', icon: Moon },
|
|
{ value: 'auto', label: 'Auto', icon: Monitor }
|
|
] as const;
|
|
|
|
// Get current theme data
|
|
const currentTheme = $derived(themes.find((t) => t.value === $preferences.theme) || themes[2]);
|
|
|
|
const applyTheme = (theme: 'cs2light' | 'cs2dark' | 'auto') => {
|
|
if (!browser) return;
|
|
|
|
let actualTheme = theme;
|
|
|
|
if (theme === 'auto') {
|
|
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
actualTheme = isDark ? 'cs2dark' : 'cs2light';
|
|
}
|
|
|
|
document.documentElement.setAttribute('data-theme', actualTheme);
|
|
};
|
|
|
|
const handleThemeChange = (theme: 'cs2light' | 'cs2dark' | 'auto') => {
|
|
preferences.setTheme(theme);
|
|
applyTheme(theme);
|
|
};
|
|
|
|
// Apply theme on mount and when system preference changes
|
|
onMount(() => {
|
|
applyTheme($preferences.theme);
|
|
|
|
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
|
const handler = () => {
|
|
if ($preferences.theme === 'auto') {
|
|
applyTheme('auto');
|
|
}
|
|
};
|
|
|
|
mediaQuery.addEventListener('change', handler);
|
|
return () => mediaQuery.removeEventListener('change', handler);
|
|
});
|
|
</script>
|
|
|
|
<!-- Theme Toggle Dropdown -->
|
|
<div class="dropdown dropdown-end">
|
|
<button tabindex="0" class="btn btn-circle btn-ghost" aria-label="Theme">
|
|
<currentTheme.icon class="h-5 w-5" />
|
|
</button>
|
|
<ul class="menu dropdown-content z-[1] mt-3 w-52 rounded-box bg-base-100 p-2 shadow-lg">
|
|
{#each themes as theme}
|
|
<li>
|
|
<button
|
|
class:active={$preferences.theme === theme.value}
|
|
onclick={() => handleThemeChange(theme.value)}
|
|
>
|
|
<theme.icon class="h-4 w-4" />
|
|
{theme.label}
|
|
{#if theme.value === 'auto'}
|
|
<span class="text-xs text-base-content/60">(System)</span>
|
|
{/if}
|
|
</button>
|
|
</li>
|
|
{/each}
|
|
</ul>
|
|
</div>
|