Fix joining ongoing game

.github/copilot-instructions.md

@@ -0,0 +1,275 @@
+Project Context
+
+    Svelte 5.x with runes system ($state, $derived, $effect, $props, $bindable)
+    SvelteKit for full-stack applications with file-based routing
+    TypeScript for type safety and better developer experience
+    Component-scoped styling with CSS custom properties
+    Progressive enhancement and performance-first approach
+    Modern build tooling (Vite) with optimizations
+
+Development Standards
+Architecture
+
+    Use Svelte 5 runes system for all reactivity instead of legacy stores
+    Organize components by feature or domain for scalability
+    Separate presentation components from logic-heavy components
+    Extract reusable logic into composable functions
+    Implement proper component composition with slots and snippets
+    Use SvelteKit's file-based routing with proper load functions
+
+TypeScript Integration
+
+    Enable strict mode in tsconfig.json for maximum type safety
+    Define interfaces for component props using $props() syntax
+    Type event handlers, refs, and SvelteKit's generated types
+    Use generic types for reusable components
+    Leverage $types.ts files generated by SvelteKit
+    Implement proper type checking with svelte-check
+
+Component Design
+
+    Follow single responsibility principle for components
+    Use <script lang="ts"> with runes syntax as default
+    Keep components small and focused on one concern
+    Implement proper prop validation with TypeScript
+    Use slots and snippets for flexible composition
+    Design components to be testable and reusable
+
+Svelte 5 Runes System
+
+    Use $state() for reactive local state management
+    Implement $derived() for computed values and expensive calculations
+    Use $effect() for side effects with proper cleanup
+    Define component props with $props() and destructuring
+    Use $bindable() for two-way data binding between components
+    Migrate from legacy stores to runes for better performance
+
+State Management
+
+    Use $state() for local component state
+    Implement context API with setContext/getContext for shared state
+    Use SvelteKit stores for global application state when needed
+    Keep state normalized for complex data structures
+    Use derived state for computed values
+    Implement proper state persistence for client-side data
+
+SvelteKit Patterns
+
+    Use +page.svelte for page components with proper SEO
+    Implement +layout.svelte for shared layouts and navigation
+    Use +page.server.ts for server-side data loading and API calls
+    Implement form actions in +page.server.ts for data mutations
+    Use +server.ts for API endpoints and server-side logic
+    Handle routing with SvelteKit's file-based system
+
+Styling
+
+    Use component-scoped styles with <style> blocks
+    Implement CSS custom properties for theming and design systems
+    Use class: directive for conditional styling
+    Follow BEM or utility-first CSS conventions
+    Implement responsive design with mobile-first approach
+    Use :global() sparingly for truly global styles
+
+Performance Optimization
+
+    Use keyed {#each} blocks for efficient list rendering
+    Implement lazy loading with dynamic imports and svelte:component
+    Use $derived() for expensive computations to avoid unnecessary recalculations
+    Leverage SvelteKit's automatic code splitting and preloading
+    Optimize bundle size with tree shaking and proper imports
+    Profile with Svelte DevTools to identify performance bottlenecks
+
+Data Fetching
+
+    Use SvelteKit's load functions for server-side and universal data fetching
+    Implement proper loading, error, and success states
+    Handle streaming data with promises in server load functions
+    Use invalidate() and invalidateAll() for cache management
+    Implement optimistic updates for better user experience
+    Handle offline scenarios and network errors gracefully
+
+Error Handling
+
+    Implement +error.svelte pages for route-level error boundaries
+    Use try/catch blocks in load functions and form actions
+    Provide meaningful error messages and fallback UI
+    Log errors appropriately for debugging and monitoring
+    Handle validation errors in forms with proper user feedback
+    Use SvelteKit's error and redirect helpers
+
+Forms and Validation
+
+    Use SvelteKit's form actions for server-side form handling
+    Implement progressive enhancement with use:enhance
+    Use bind:value for controlled form inputs
+    Validate data both client-side and server-side
+    Handle file uploads and complex form scenarios
+    Implement proper accessibility with labels and ARIA attributes
+
+Testing
+
+    Write unit tests for components using Vitest and Testing Library
+    Test component behavior, not implementation details
+    Use Playwright for end-to-end testing of user workflows
+    Mock SvelteKit's load functions and stores appropriately
+    Test form actions and API endpoints thoroughly
+    Implement accessibility testing with axe-core
+
+Security
+
+    Sanitize user inputs to prevent XSS attacks
+    Use @html directive carefully and validate HTML content
+    Implement proper CSRF protection with SvelteKit
+    Validate and sanitize data in load functions and form actions
+    Use HTTPS for all external API calls and production deployments
+    Store sensitive data securely with proper session management
+
+Accessibility
+
+    Use semantic HTML elements and proper heading hierarchy
+    Implement keyboard navigation for all interactive elements
+    Provide proper ARIA labels and descriptions
+    Ensure color contrast meets WCAG guidelines
+    Test with screen readers and accessibility tools
+    Implement focus management for dynamic content
+
+Implementation Process
+
+    Initialize SvelteKit project with TypeScript and desired adapters
+    Set up project structure with proper folder organization
+    Define TypeScript interfaces and component props
+    Implement core components with Svelte 5 runes
+    Add routing, layouts, and navigation with SvelteKit
+    Implement data loading and form handling
+    Add styling system with custom properties and responsive design
+    Implement error handling and loading states
+    Add comprehensive testing coverage
+    Optimize performance and bundle size
+    Ensure accessibility compliance
+    Deploy with appropriate SvelteKit adapter
+
+Additional Guidelines
+
+    Follow Svelte's naming conventions (PascalCase for components, camelCase for functions)
+    Use ESLint with eslint-plugin-svelte and Prettier for code consistency
+    Keep dependencies up to date and audit for security vulnerabilities
+    Document complex components and logic with JSDoc
+    Use Svelte DevTools for debugging and performance analysis
+    Implement proper SEO with SvelteKit's meta tags and structured data
+    Use environment variables for configuration across different deployment stages
+
+Common Patterns
+
+    Renderless components with slots for flexible UI composition
+    Custom directives for cross-cutting concerns and DOM manipulation
+    Snippet-based composition for reusable template logic
+    Context providers for application-wide state management
+    Progressive enhancement for forms and interactive features
+    Server-side rendering with client-side hydration for optimal performance
+
+Core Intent
+
+    Respect the existing architecture and coding standards.
+    Prefer readable, explicit solutions over clever shortcuts.
+    Extend current abstractions before inventing new ones.
+    Prioritize maintainability and clarity, short methods and classes, clean code.
+
+General Guardrails
+
+    Target TypeScript 5.x / ES2022 and prefer native features over polyfills.
+    Use pure ES modules; never emit require, module.exports, or CommonJS helpers.
+    Rely on the project's build, lint, and test scripts unless asked otherwise.
+    Note design trade-offs when intent is not obvious.
+
+Project Organization
+
+    Follow the repository's folder and responsibility layout for new code.
+    Use kebab-case filenames (e.g., user-session.ts, data-service.ts) unless told otherwise.
+    Keep tests, types, and helpers near their implementation when it aids discovery.
+    Reuse or extend shared utilities before adding new ones.
+
+Naming & Style
+
+    Use PascalCase for classes, interfaces, enums, and type aliases; camelCase for everything else.
+    Skip interface prefixes like I; rely on descriptive names.
+    Name things for their behavior or domain meaning, not implementation.
+
+Formatting & Style
+
+    Run the repository's lint/format scripts (e.g., npm run lint) before submitting.
+    Match the project's indentation, quote style, and trailing comma rules.
+    Keep functions focused; extract helpers when logic branches grow.
+    Favor immutable data and pure functions when practical.
+
+Type System Expectations
+
+    Avoid any (implicit or explicit); prefer unknown plus narrowing.
+    Use discriminated unions for realtime events and state machines.
+    Centralize shared contracts instead of duplicating shapes.
+    Express intent with TypeScript utility types (e.g., Readonly, Partial, Record).
+
+Async, Events & Error Handling
+
+    Use async/await; wrap awaits in try/catch with structured errors.
+    Guard edge cases early to avoid deep nesting.
+    Send errors through the project's logging/telemetry utilities.
+    Surface user-facing errors via the repository's notification pattern.
+    Debounce configuration-driven updates and dispose resources deterministically.
+
+Architecture & Patterns
+
+    Follow the repository's dependency injection or composition pattern; keep modules single-purpose.
+    Observe existing initialization and disposal sequences when wiring into lifecycles.
+    Keep transport, domain, and presentation layers decoupled with clear interfaces.
+    Supply lifecycle hooks (e.g., initialize, dispose) and targeted tests when adding services.
+
+External Integrations
+
+    Instantiate clients outside hot paths and inject them for testability.
+    Never hardcode secrets; load them from secure sources.
+    Apply retries, backoff, and cancellation to network or IO calls.
+    Normalize external responses and map errors to domain shapes.
+
+Security Practices
+
+    Validate and sanitize external input with schema validators or type guards.
+    Avoid dynamic code execution and untrusted template rendering.
+    Encode untrusted content before rendering HTML; use framework escaping or trusted types.
+    Use parameterized queries or prepared statements to block injection.
+    Keep secrets in secure storage, rotate them regularly, and request least-privilege scopes.
+    Favor immutable flows and defensive copies for sensitive data.
+    Use vetted crypto libraries only.
+    Patch dependencies promptly and monitor advisories.
+
+Configuration & Secrets
+
+    Reach configuration through shared helpers and validate with schemas or dedicated validators.
+    Handle secrets via the project's secure storage; guard undefined and error states.
+    Document new configuration keys and update related tests.
+
+UI & UX Components
+
+    Sanitize user or external content before rendering.
+    Keep UI layers thin; push heavy logic to services or state managers.
+    Use messaging or events to decouple UI from business logic.
+
+Testing Expectations
+
+    Add or update unit tests with the project's framework and naming style.
+    Expand integration or end-to-end suites when behavior crosses modules or platform APIs.
+    Run targeted test scripts for quick feedback before submitting.
+    Avoid brittle timing assertions; prefer fake timers or injected clocks.
+
+Performance & Reliability
+
+    Lazy-load heavy dependencies and dispose them when done.
+    Defer expensive work until users need it.
+    Batch or debounce high-frequency events to reduce thrash.
+    Track resource lifetimes to prevent leaks.
+
+Documentation & Comments
+
+    Add JSDoc to public APIs; include @remarks or @example when helpful.
+    Write comments that capture intent, and remove stale notes during refactors.
+    Update architecture or design docs when introducing significant patterns.