vikingowl
1024ba839e
- Document implemented match analysis features (rounds, economy, weapons, etc.) - Add player profile features with Premier rating - Reference MISSING_BACKEND_API.md for backend requirements - Update status to Phase 2 Complete 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
336 lines
9.3 KiB
Markdown
336 lines
9.3 KiB
Markdown
# CS2.WTF
|
|
|
|
[](https://kit.svelte.dev/)
|
|
[](https://www.typescriptlang.org/)
|
|
[](https://tailwindcss.com/)
|
|
[](https://git.harting.dev/CSGOWTF/csgowtf/src/branch/master/LICENSE)
|
|
[](https://liberapay.com/CSGOWTF/)
|
|
[](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 & 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](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
|
|
- **Missing Backend Data**: [`MISSING_BACKEND_API.md`](MISSING_BACKEND_API.md) - Backend features needed for full functionality
|
|
- **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:
|
|
|
|
[](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 2 Complete** - Core match analysis & player profiles functional
|