Add TODO document for CS2.WTF rewrite

TODO.md

@@ -0,0 +1,93 @@
+# 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.
+