csgowtf/TODO.md

CS2.WTF Rewrite TODO

Phase 0 – Kickoff & Research

• Create and push the cs2-port branch from the current default branch.
• Capture the legacy stack (Vue 3 SPA + Go backend) and existing route map (/, /matches, /player/[id], /match/[id]/{economy|details|flashes|damage|chat}) for reference.
• Host workshops with stakeholders, shoutcasters, and data consumers to gather CS2-specific requirements (new stats, volumetric smokes, MR12 changes).
• Audit the csgowtfd backend APIs and data models; decide whether to extend or replace services for CS2 telemetry.
• Document CS2 demo parsing pipeline expectations, storage strategy, and data freshness SLAs.

Phase 1 – Technical Foundations

• Standardize on Node.js ≥ 18 (add .nvmrc / .tool-versions) and npm or yarn (lock the choice in documentation).
• Scaffold a new SvelteKit project with TypeScript in strict mode and commit the baseline to cs2-port.
• Integrate Tailwind CSS with DaisyUI; configure theme tokens, base styles, and dark/light mode support.
• Add project tooling: ESLint (with Svelte + TypeScript rules), Prettier, svelte-check, Stylelint (for Tailwind), and git hooks via Husky + lint-staged.
• Configure Vitest for unit/component tests and Playwright for E2E smoke tests (headless + CI modes).
• Set up Vite aliases, environment variable handling, and TypeScript path mappings for domain-driven organization.
• Update Woodpecker (or preferred CI) pipelines to run install, lint, type-check, test, and build jobs on every push.

Phase 2 – Design System & UX Direction

• Produce a Figma (or Penpot) design system: typography scale, spacing, color ramps, iconography inspired by modern Counter-Strike 2 visuals.
• Define DaisyUI themes aligned with CS2 branding, including semantic color tokens for teams, utility types, and economy states.
• Establish responsive layout grids (mobile-first up to ultrawide) and interaction patterns (hover, focus, press states).
• Design core components: global navigation, search, tabs, data tables, filters, cards, charts, modals, toasts, and timeline elements.
• Create motion guidelines (micro-interactions, transitions) that reinforce hierarchy without compromising performance.
• Run accessibility review on mockups (contrast, color blindness variants, keyboard flows).

Phase 3 – Domain Modeling & Data Layer

• Define TypeScript interfaces and Zod schemas for CS2 entities: matches, rounds, players, utility events, economy states, chat logs, and metadata.
• Decide on data access strategy (REST, GraphQL, WebSocket) and outline API contracts with backend engineers.
• Build a typed API client module with error boundaries, retry/backoff, caching, and cancellation support.
• Prepare mocked fixtures and MSW handlers for offline development and automated tests.
• Explore real-time update requirements (live match polling or push) and capture API changes needed on the backend.

Phase 4 – Application Architecture & Routing

• Plan a route hierarchy using SvelteKit layouts (src/routes/+layout.svelte, routes/matches/+page.svelte, nested routes/match/[id]/+page.svelte, etc.).
• Implement the global shell: header, footer, persistent search, language switcher, theme toggle, and notification area.
• Configure load functions, universal load guards, and error/skeleton states per route for resilient UX.
• Introduce cross-route state management (Svelte stores) for filters, user preferences, and shared data caches.
• Establish analytics and consent handling architecture compatible with SSR.

Phase 5 – Feature Delivery (Parity + Enhancements)

• Home/Dashboard: featured matches, live queue, top performers, and quick filters with real-time indicators.
• Matches Index: searchable, filterable list with virtualized tables, map/side filters, rank tiers, and date range pickers.
• Player Profile (/player/[id]): career summary, map win rates, weapon performance, clutch stats, and timeline cards.
• Match Overview (/match/[id]): scoreboard, round-by-round timeline, win probability graph, and MR12 adjustments.
• Economy View: spend/equipment charts, save rounds, utility purchases, and loss-bonus visualization.
• Utility/Flashes View: breakdown of utility effectiveness, pop flash timings, volumetric smoke coverage (heatmap/webgl overlays).
• Damage View: per-round damage charts, headshot percentages, spatial heatmaps using Canvas/WebGL.
• Chat View: chronological chat feed with role badges, highlight detection, and translation toggle.
• Introduce CS2-exclusive insights (sky smoke bloom, loadout value changes, new grenade types) and align labels accordingly.
• Add sharing/export features (downloadable stats, social cards) respecting privacy constraints.

Phase 6 – Localization & Personalization

• Integrate sveltekit-i18n (or equivalent) for multi-language support, starting with English plus priority locales.
• Externalize all copy into translation files, including validation messages and chart labels.
• Persist language preference (cookie/localStorage) and sync with SSR.
• Localize formatting (dates, currency, ranks) using Intl APIs and server-aware utilities.
• Provide user preference storage for theme, metric units, and favorite players/teams.

Phase 7 – Performance, Accessibility & Observability

• Define and enforce performance budgets (LCP ≤ 2.5s, CLS ≤ 0.1, TTI ≤ 4s) with automated Lighthouse checks.
• Optimize assets: code splitting, prefetching strategies, image/CDN pipeline, and font loading.
• Implement progressive enhancement for charts/tables and graceful degradation when JS is disabled.
• Add runtime error monitoring (e.g., Sentry), structured logging, and privacy-aware analytics.
• Conduct comprehensive accessibility audits with axe, manual keyboard testing, and screen reader passes.

Phase 8 – Testing & Quality Assurance

• Write unit tests for components, stores, and utilities (Vitest + Testing Library).
• Develop integration/E2E scenarios (Playwright) covering match search, player view, and match detail tabs.
• Set up visual regression snapshots for critical pages via Playwright or Loki.
• Build load-testing scripts for APIs powering live dashboards (k6 or artillery).
• Coordinate QA playbook: test matrices, release checklists, and bug triage workflow.

Phase 9 – Deployment & Release Strategy

• Choose hosting strategy (Node SSR on Fly.io/Vercel/Render or self-hosted) and provision staging/production environments.
• Configure CI/CD deployment pipelines with environment promotion gates and feature flag toggles.
• Establish secrets management (e.g., Doppler, Vault, SSM) for API keys and telemetry tokens.
• Plan data migration/backfill from CS:GO to CS2, including schema evolution and archive policies.
• Organize beta program, feedback channels, and phased rollout (legacy vs CS2 opt-in).

Phase 10 – Documentation & Handover

• Update README.md with setup, development, testing, and deployment instructions for CS2.WTF.
• Create architecture decision records (ADRs) for key choices (SvelteKit adoption, data strategy, hosting).
• Document API contracts, rate limits, and error semantics in an accessible format (OpenAPI + human-readable docs).
• Prepare contributor guidelines, coding standards, and project board workflow.
• Schedule knowledge transfer sessions and record walkthrough videos for onboarding.

Stretch Goals

• Add authenticated user features: saved searches, match alerts, personalized dashboards.
• Offer real-time live match viewer with timeline scrubbing and auto-updating stats.
• Deliver PWA enhancements (offline read-only cache, push notifications when favorites go live).
• Explore integrations with tournament APIs (Valve, HLTV, FACEIT) to enrich match context.