CS2.WTF

Statistics for CS2 matchmaking matches - A complete rewrite of CSGOW.TF with modern web technologies.

---

🚀 Quick Start

Prerequisites

• Node.js ≥ 18.0.0 (v20.11.0 recommended - see .nvmrc)
• npm or yarn

Installation

# Clone the repository
git clone https://somegit.dev/CSGOWTF/csgowtf.git
cd csgowtf

# Switch to the cs2-port branch
git checkout cs2-port

# Install dependencies
npm install

# Copy environment variables
cp .env.example .env

# Start development server
npm run dev

The app will be available at http://localhost:5173

---

📦 Tech Stack

Core Framework

• SvelteKit 2.0 - Full-stack framework with SSR/SSG
• Svelte 5 - Reactive UI framework
• TypeScript 5.3 - Type safety (strict mode)
• Vite 5 - Build tool and dev server

Styling

• Tailwind CSS 3.4 - Utility-first CSS framework
• DaisyUI 4.0 - Component library with CS2 custom themes
• PostCSS - CSS processing

Data & State

• Axios - HTTP client for API requests
• Zod - Runtime type validation and parsing
• Svelte Stores - State management

Testing

• Vitest - Unit and component testing
• Playwright - End-to-end testing
• Testing Library - Component testing utilities
• MSW - API mocking

Code Quality

• ESLint - Linting (TypeScript + Svelte)
• Prettier - Code formatting
• Stylelint - CSS linting
• Husky - Git hooks
• lint-staged - Pre-commit linting

---

🛠️ Development

Available Scripts

# Development
npm run dev              # Start dev server
npm run dev -- --host    # Expose to network

# Type Checking
npm run check            # Run type check
npm run check:watch      # Type check in watch mode

# Linting & Formatting
npm run lint             # Run ESLint + Prettier check
npm run lint:fix         # Auto-fix linting issues
npm run format           # Format code with Prettier

# Testing
npm run test             # Run unit tests
npm run test:watch       # Run tests in watch mode
npm run test:coverage    # Generate coverage report
npm run test:e2e         # Run E2E tests (headless)
npm run test:e2e:ui      # Run E2E tests with UI
npm run test:e2e:debug   # Debug E2E tests

# Building
npm run build            # Build for production
npm run preview          # Preview production build

Project Structure

csgowtf/
├── src/
│   ├── lib/
│   │   ├── api/              # API client & endpoints
│   │   ├── components/       # Reusable Svelte components
│   │   │   ├── layout/       # Header, Footer, Nav
│   │   │   ├── ui/           # Base UI components
│   │   │   ├── charts/       # Data visualization
│   │   │   ├── match/        # Match-specific components
│   │   │   └── player/       # Player-specific components
│   │   ├── stores/           # Svelte stores (state)
│   │   ├── types/            # TypeScript types
│   │   ├── utils/            # Helper functions & utilities
│   │   │   └── economyUtils.ts  # CS2 economy classification
│   │   └── i18n/             # Internationalization
│   ├── routes/               # SvelteKit routes (pages)
│   ├── mocks/                # MSW mock handlers
│   ├── tests/                # Test setup
│   ├── app.html              # HTML shell
│   └── app.css               # Global styles
├── tests/
│   ├── unit/                 # Unit tests
│   ├── integration/          # Integration tests
│   └── e2e/                  # E2E tests
├── docs/                     # Documentation
│   ├── API.md                # Backend API reference
│   └── TODO.md               # Project roadmap
├── public/                   # Static assets
└── static/                   # Additional static files

---

🎨 Features

Current (Phase 2 - ✅ Core Features Complete)

Match Analysis

• ✅ Match listing with filtering and pagination
• ✅ Match detail pages with neon esports aesthetic
• ✅ Rounds page with Economy Overview toggle
  • Round-by-round player economy breakdown
  • Economy flow charts showing advantage over time
  • Equipment value trends per team
  • Team-aware buy type classification (Pistol/Eco/Force/Full Buy)
  • Halftime team swap handling
• ✅ Weapons stats with kill/death analysis
• ✅ Flash effectiveness tracking
• ✅ Damage matrix (who damaged whom)
• ✅ Match chat log

Player Profiles

• ✅ Player profile pages with stats overview
• ✅ Premier rating display with tier badges
• ✅ Recent matches list
• ✅ Performance statistics

Infrastructure

• ✅ SvelteKit 2.0 with Svelte 5 runes
• ✅ TypeScript strict mode throughout
• ✅ Tailwind CSS + DaisyUI with custom neon theme
• ✅ Unified economy utilities (economyUtils.ts)
• ✅ Zod schema validation for API responses
• ✅ CI/CD pipeline (Woodpecker)

Planned

• 🏠 Homepage with featured matches
• 🌍 Multi-language support (i18n)
• 📱 Enhanced mobile responsiveness
• 🎯 Round winner/win reason display (requires backend update - see MISSING_BACKEND_API.md)

---

🔗 Backend

This frontend connects to the csgowtfd backend.

• Language: Go
• Framework: Gin
• Database: PostgreSQL
• Cache: Redis
• API Docs: See docs/API.md

Default API endpoint: http://localhost:8000

---

🧪 Testing

Unit & Component Tests

# Run all tests
npm run test

# Watch mode for TDD
npm run test:watch

# Generate coverage report
npm run test:coverage

End-to-End Tests

# Run E2E tests (headless)
npm run test:e2e

# Run with Playwright UI
npm run test:e2e:ui

# Debug mode
npm run test:e2e:debug

---

🚢 Deployment

Build for Production

npm run build

The built app will be in the build/ directory, ready to be deployed to any Node.js hosting platform.

Environment Variables

See .env.example for all available configuration options:

• VITE_API_BASE_URL - Backend API URL
• VITE_API_TIMEOUT - API request timeout
• VITE_ENABLE_LIVE_MATCHES - Feature flag for live matches
• VITE_ENABLE_ANALYTICS - Feature flag for analytics

CI/CD

Woodpecker CI automatically builds and deploys:

• master branch → Production
• dev branch → Development/Staging
• cs2-port branch → CS2 Preview (during rewrite)

---

🤝 Contributing

We welcome contributions! Please follow these guidelines:

Before You Start

• Check existing issues or create one describing your feature/fix
• Comment on the issue to avoid duplicate work
• Fork the repository and create a feature branch

Code Standards

• Follow TypeScript strict mode (no any types)
• Write tests for new features
• Follow existing code style (enforced by ESLint/Prettier)
• Keep components under 300 lines
• Write meaningful commit messages (Conventional Commits)

Pull Request Process

1. Create a feature branch: feature/your-feature-name
2. Make your changes and commit with clear messages
3. Run linting and tests: npm run lint && npm run test
4. Push to your fork and create a PR to the cs2-port branch
5. Ensure CI passes and address review feedback

Git Workflow

• Branch naming: feature/, fix/, refactor/, docs/
• Commit messages: feat:, fix:, docs:, test:, refactor:
• Only one feature/fix per PR
• Squash commits before merging

---

📚 Documentation

• API Reference: docs/API.md - Complete backend API documentation
• Missing Backend Data: MISSING_BACKEND_API.md - Backend features needed for full functionality
• Project Roadmap: docs/TODO.md - Detailed implementation plan
• SvelteKit Docs: kit.svelte.dev
• Tailwind CSS: tailwindcss.com
• DaisyUI: daisyui.com

---

📄 License

GPL-3.0 © CSGOW.TF Team

---

💖 Support

If you find this project helpful, consider supporting us:

---

🔗 Links

• Website: csgow.tf (legacy CS:GO version)
• Backend: csgowtfd
• Issues: Report a bug

---

Status: 🎮 Phase 2 Complete - Core match analysis & player profiles functional