# CS2.WTF

[![SvelteKit](https://img.shields.io/badge/SvelteKit-5.0-FF3E00?style=flat-square&logo=svelte)](https://kit.svelte.dev/)
[![TypeScript](https://img.shields.io/badge/TypeScript-5.3-3178C6?style=flat-square&logo=typescript)](https://www.typescriptlang.org/)
[![Tailwind CSS](https://img.shields.io/badge/Tailwind-3.4-06B6D4?style=flat-square&logo=tailwindcss)](https://tailwindcss.com/)
[![GPL3](https://img.shields.io/badge/licence-GPL3-%23007ec6?style=flat-square)](https://git.harting.dev/CSGOWTF/csgowtf/src/branch/master/LICENSE)
[![Liberapay](https://img.shields.io/badge/donate%20on-LiberaPay-%23f6c915?style=flat-square)](https://liberapay.com/CSGOWTF/)
[![status-badge](https://ci.somegit.dev/api/badges/CSGOWTF/csgowtf/status.svg?branch=cs2-port)](https://ci.somegit.dev/CSGOWTF/csgowtf)

**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

```bash
# 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

```bash
# 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
│   │   └── 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 1 - ✅ Complete)

- ✅ SvelteKit project scaffolded with TypeScript strict mode
- ✅ Tailwind CSS + DaisyUI with CS2-themed color palette
- ✅ Complete development tooling (ESLint, Prettier, Husky)
- ✅ Testing infrastructure (Vitest + Playwright)
- ✅ CI/CD pipeline (Woodpecker)
- ✅ Backend API documented

### Planned (See `docs/TODO.md` for details)

- 🏠 Homepage with featured matches
- 📊 Match listing with advanced filters
- 👤 Player profiles with stats & charts
- 🎮 Match detail pages (overview, economy, flashes, damage, chat)
- 🌍 Multi-language support (i18n)
- 🌙 Dark/Light theme toggle (default: dark)
- 📱 Mobile-responsive design
- ♿ WCAG 2.1 AA accessibility
- 🎯 CS2-specific features (MR12, Premier rating, volumetric smokes)

---

## 🔗 Backend

This frontend connects to the [csgowtfd](https://somegit.dev/CSGOWTF/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

```bash
# 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

```bash
# 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

```bash
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`](docs/API.md) - Complete backend API documentation
- **Project Roadmap**: [`docs/TODO.md`](docs/TODO.md) - Detailed implementation plan
- **SvelteKit Docs**: [kit.svelte.dev](https://kit.svelte.dev/)
- **Tailwind CSS**: [tailwindcss.com](https://tailwindcss.com/)
- **DaisyUI**: [daisyui.com](https://daisyui.com/)

---

## 📄 License

[GPL-3.0](LICENSE) © CSGOW.TF Team

---

## 💖 Support

If you find this project helpful, consider supporting us:

[![Liberapay](https://img.shields.io/badge/donate%20on-LiberaPay-%23f6c915?style=for-the-badge)](https://liberapay.com/CSGOWTF/)

---

## 🔗 Links

- **Website**: [csgow.tf](https://csgow.tf) (legacy CS:GO version)
- **Backend**: [csgowtfd](https://somegit.dev/CSGOWTF/csgowtfd)
- **Issues**: [Report a bug](https://somegit.dev/CSGOWTF/csgowtf/issues)

---

**Status**: 🚧 **Phase 1 Complete** - Active rewrite for CS2 support