vikingowl
288438a953
Initialize SvelteKit project with complete modern web development stack: ## Core Framework - SvelteKit 2.0 with Svelte 5 and TypeScript strict mode - Vite 5 for blazing fast dev server and builds - Node.js 20 standardized via .nvmrc ## Styling & Theming - Tailwind CSS 3.4 with utility-first approach - DaisyUI 4.0 with custom CS2 themes (cs2dark/cs2light) - CS2-branded color palette (T-side orange, CT-side blue) - PostCSS for CSS processing ## Code Quality & Tooling - ESLint 8 with TypeScript + Svelte plugins - Prettier 3 with Svelte + Tailwind plugins - Stylelint 16 for CSS linting - Husky 9 + lint-staged for pre-commit hooks - TypeScript 5.3 with all strict flags enabled ## Testing Infrastructure - Vitest 1.0 for unit/component tests with jsdom - Playwright 1.40 for E2E tests (3 browsers) - Testing Library for component testing - MSW 2.0 for API mocking - Coverage thresholds set to 80% ## Project Structure - Organized src/ with lib/, routes/, mocks/, tests/ - Component directories: layout, ui, charts, match, player - Path aliases configured: $lib, $components, $stores, $types, $api - Separate test directories: unit, integration, e2e ## CI/CD & Deployment - Updated Woodpecker CI pipeline with quality gates - Pipeline steps: install → lint → type-check → test → build - Deploy targets: master (prod), dev (staging), cs2-port (preview) ## Documentation - Comprehensive README.md with setup guide - API.md with complete backend documentation (12 endpoints) - TODO.md updated with Phase 0 & 1 completion - Environment variables template (.env.example) ## Development Experience - Hot module reloading configured - Dev server running on port 5173 - All npm scripts defined for dev, test, build workflows - Pre-commit hooks prevent broken code commits Project is now ready for feature development (Phase 2+). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
315 lines
8.6 KiB
Markdown
315 lines
8.6 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
|
|
│ │ └── 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:
|
|
|
|
[](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
|