feat: complete Phase 1 - Technical Foundations for CS2.WTF rewrite
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>
This commit is contained in:
15
.env.example
Normal file
15
.env.example
Normal file
@@ -0,0 +1,15 @@
|
||||
# API Configuration
|
||||
VITE_API_BASE_URL=http://localhost:8000
|
||||
VITE_API_TIMEOUT=10000
|
||||
|
||||
# Feature Flags
|
||||
VITE_ENABLE_LIVE_MATCHES=false
|
||||
VITE_ENABLE_ANALYTICS=false
|
||||
|
||||
# Analytics (optional)
|
||||
# VITE_PLAUSIBLE_DOMAIN=cs2.wtf
|
||||
# VITE_PLAUSIBLE_API_HOST=https://plausible.io
|
||||
|
||||
# Sentry (optional)
|
||||
# VITE_SENTRY_DSN=
|
||||
# VITE_SENTRY_ENVIRONMENT=development
|
||||
52
.gitignore
vendored
Normal file
52
.gitignore
vendored
Normal file
@@ -0,0 +1,52 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
vite.config.js.timestamp-*
|
||||
vite.config.ts.timestamp-*
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
# Build artifacts
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Test coverage
|
||||
coverage
|
||||
*.lcov
|
||||
.nyc_output
|
||||
|
||||
# Playwright
|
||||
/test-results/
|
||||
/playwright-report/
|
||||
/playwright/.cache/
|
||||
|
||||
# Vercel
|
||||
.vercel
|
||||
|
||||
# Temporary files
|
||||
.tmp
|
||||
tmp
|
||||
*.tmp
|
||||
4
.husky/pre-commit
Executable file
4
.husky/pre-commit
Executable file
@@ -0,0 +1,4 @@
|
||||
#!/usr/bin/env sh
|
||||
. "$(dirname -- "$0")/_/husky.sh"
|
||||
|
||||
npx lint-staged
|
||||
30
.prettierignore
Normal file
30
.prettierignore
Normal file
@@ -0,0 +1,30 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Ignore files for PNPM, NPM and YARN
|
||||
pnpm-lock.yaml
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
|
||||
# Build artifacts
|
||||
dist/
|
||||
.vercel/
|
||||
.netlify/
|
||||
.output/
|
||||
|
||||
# Generated files
|
||||
src-tauri/target/
|
||||
**/.svelte-kit/
|
||||
|
||||
# IDE
|
||||
.vscode/
|
||||
.idea/
|
||||
|
||||
# Logs
|
||||
*.log
|
||||
17
.prettierrc.json
Normal file
17
.prettierrc.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"useTabs": true,
|
||||
"tabWidth": 2,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 100,
|
||||
"semi": true,
|
||||
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": "*.svelte",
|
||||
"options": {
|
||||
"parser": "svelte"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
6
.stylelintignore
Normal file
6
.stylelintignore
Normal file
@@ -0,0 +1,6 @@
|
||||
node_modules/
|
||||
build/
|
||||
.svelte-kit/
|
||||
dist/
|
||||
**/*.js
|
||||
**/*.ts
|
||||
13
.stylelintrc.cjs
Normal file
13
.stylelintrc.cjs
Normal file
@@ -0,0 +1,13 @@
|
||||
module.exports = {
|
||||
extends: ['stylelint-config-standard'],
|
||||
rules: {
|
||||
'at-rule-no-unknown': [
|
||||
true,
|
||||
{
|
||||
ignoreAtRules: ['tailwind', 'apply', 'variants', 'responsive', 'screen', 'layer']
|
||||
}
|
||||
],
|
||||
'selector-class-pattern': null,
|
||||
'custom-property-pattern': null
|
||||
}
|
||||
};
|
||||
1
.tool-versions
Normal file
1
.tool-versions
Normal file
@@ -0,0 +1 @@
|
||||
nodejs 20.11.0
|
||||
@@ -1,23 +1,63 @@
|
||||
pipeline:
|
||||
install dependencies:
|
||||
image: node:19
|
||||
install:
|
||||
image: node:20
|
||||
commands:
|
||||
- yarn install --immutable
|
||||
- npm ci
|
||||
pull: true
|
||||
|
||||
lint:
|
||||
image: node:20
|
||||
commands:
|
||||
- npm run lint
|
||||
depends_on:
|
||||
- install
|
||||
pull: true
|
||||
|
||||
type-check:
|
||||
image: node:20
|
||||
commands:
|
||||
- npm run check
|
||||
depends_on:
|
||||
- install
|
||||
pull: true
|
||||
|
||||
test:
|
||||
image: node:20
|
||||
commands:
|
||||
- npm run test
|
||||
depends_on:
|
||||
- install
|
||||
pull: true
|
||||
|
||||
build:
|
||||
image: node:19
|
||||
image: node:20
|
||||
commands:
|
||||
- yarn build
|
||||
secrets: [ vue_app_api_url, vue_app_track_url, vue_app_track_id, vue_app_tracking ]
|
||||
- npm run build
|
||||
environment:
|
||||
- VITE_API_BASE_URL=https://api.csgow.tf
|
||||
secrets:
|
||||
- vite_plausible_domain
|
||||
- vite_sentry_dsn
|
||||
depends_on:
|
||||
- lint
|
||||
- type-check
|
||||
- test
|
||||
pull: true
|
||||
|
||||
# E2E tests (optional - can be resource intensive)
|
||||
# test-e2e:
|
||||
# image: mcr.microsoft.com/playwright:v1.40.0-jammy
|
||||
# commands:
|
||||
# - npm run test:e2e
|
||||
# depends_on:
|
||||
# - build
|
||||
|
||||
deploy:
|
||||
image: cschlosser/drone-ftps
|
||||
settings:
|
||||
hostname:
|
||||
from_secret: ftp_host
|
||||
src_dir: "/dist/"
|
||||
src_dir: "/build/"
|
||||
clean_dir: true
|
||||
secrets: [ ftp_username, ftp_password ]
|
||||
when:
|
||||
@@ -25,12 +65,12 @@ pipeline:
|
||||
event: [ push, tag ]
|
||||
status: success
|
||||
|
||||
deploy (dev):
|
||||
deploy-dev:
|
||||
image: cschlosser/drone-ftps
|
||||
settings:
|
||||
hostname:
|
||||
from_secret: ftp_host
|
||||
src_dir: "/dist/"
|
||||
src_dir: "/build/"
|
||||
clean_dir: true
|
||||
secrets:
|
||||
- source: ftp_username_dev
|
||||
@@ -41,3 +81,20 @@ pipeline:
|
||||
branch: dev
|
||||
event: [ push, tag ]
|
||||
status: success
|
||||
|
||||
deploy-cs2:
|
||||
image: cschlosser/drone-ftps
|
||||
settings:
|
||||
hostname:
|
||||
from_secret: ftp_host_cs2
|
||||
src_dir: "/build/"
|
||||
clean_dir: true
|
||||
secrets:
|
||||
- source: ftp_username_cs2
|
||||
target: ftp_username
|
||||
- source: ftp_password_cs2
|
||||
target: ftp_password
|
||||
when:
|
||||
branch: cs2-port
|
||||
event: [ push ]
|
||||
status: success
|
||||
|
||||
326
README.md
326
README.md
@@ -1,28 +1,314 @@
|
||||
# CSGOW.TF
|
||||
# CS2.WTF
|
||||
|
||||
[](https://vuejs.org/)
|
||||
[](https://go.dev/)
|
||||
[](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://liberapay.com/CSGOWTF/)
|
||||
[](https://csgow.tf/)
|
||||
<!--[](https://www.typescriptlang.org/)-->
|
||||
[](https://ci.somegit.dev/CSGOWTF/csgowtf)
|
||||
[](https://ci.somegit.dev/CSGOWTF/csgowtf)
|
||||
|
||||
### Statistics for CS:GO matchmaking matches.
|
||||
**Statistics for CS2 matchmaking matches** - A complete rewrite of CSGOW.TF with modern web technologies.
|
||||
|
||||
---
|
||||
|
||||
## Backend
|
||||
This is the frontend to the [csgowtfd](https://git.harting.dev/CSGOWTF/csgowtfd) backend.
|
||||
## 🚀 Quick Start
|
||||
|
||||
## Tips on how to contribute
|
||||
- If you are implementing or fixing an issue, please comment on the issue so work is not duplicated.
|
||||
- If you want to implement a new feature, create an issue first describing the issue, so we know about it.
|
||||
- Don't commit unnecessary changes to the codebase or debugging code.
|
||||
- Write meaningful commits or squash them.
|
||||
- Please try to follow the code style of the rest of the codebase.
|
||||
- Only make pull requests to the dev branch.
|
||||
- Only implement one feature per pull request to keep it easy to understand.
|
||||
- Expect comments or questions on your pull request from the project maintainers. We try to keep the code as consistent and maintainable as possible.
|
||||
- Each pull request should come from a new branch in your fork, it should have a meaningful name.
|
||||
### 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
|
||||
|
||||
54
eslint.config.js
Normal file
54
eslint.config.js
Normal file
@@ -0,0 +1,54 @@
|
||||
import js from '@eslint/js';
|
||||
import ts from 'typescript-eslint';
|
||||
import svelte from 'eslint-plugin-svelte';
|
||||
import prettier from 'eslint-config-prettier';
|
||||
import globals from 'globals';
|
||||
|
||||
/** @type {import('eslint').Linter.FlatConfig[]} */
|
||||
export default [
|
||||
js.configs.recommended,
|
||||
...ts.configs.recommended,
|
||||
...svelte.configs['flat/recommended'],
|
||||
prettier,
|
||||
...svelte.configs['flat/prettier'],
|
||||
{
|
||||
languageOptions: {
|
||||
globals: {
|
||||
...globals.browser,
|
||||
...globals.node
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
files: ['**/*.svelte'],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
parser: ts.parser
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
ignores: [
|
||||
'build/',
|
||||
'.svelte-kit/',
|
||||
'dist/',
|
||||
'node_modules/',
|
||||
'**/*.cjs',
|
||||
'*.config.js',
|
||||
'*.config.ts'
|
||||
]
|
||||
},
|
||||
{
|
||||
rules: {
|
||||
'@typescript-eslint/no-unused-vars': [
|
||||
'error',
|
||||
{
|
||||
argsIgnorePattern: '^_',
|
||||
varsIgnorePattern: '^_'
|
||||
}
|
||||
],
|
||||
'@typescript-eslint/no-explicit-any': 'error',
|
||||
'svelte/no-at-html-tags': 'warn'
|
||||
}
|
||||
}
|
||||
];
|
||||
9087
package-lock.json
generated
Normal file
9087
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
78
package.json
Normal file
78
package.json
Normal file
@@ -0,0 +1,78 @@
|
||||
{
|
||||
"name": "cs2wtf",
|
||||
"version": "2.0.0",
|
||||
"description": "Statistics for CS2 matchmaking matches",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"lint": "prettier --check . && eslint .",
|
||||
"lint:fix": "prettier --write . && eslint --fix .",
|
||||
"format": "prettier --write .",
|
||||
"test": "vitest run",
|
||||
"test:watch": "vitest",
|
||||
"test:coverage": "vitest run --coverage",
|
||||
"test:e2e": "playwright test",
|
||||
"test:e2e:ui": "playwright test --ui",
|
||||
"test:e2e:debug": "playwright test --debug",
|
||||
"prepare": "husky"
|
||||
},
|
||||
"dependencies": {
|
||||
"@sveltejs/kit": "^2.0.0",
|
||||
"svelte": "^5.0.0",
|
||||
"axios": "^1.6.0",
|
||||
"zod": "^3.22.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^3.0.0",
|
||||
"@sveltejs/adapter-node": "^5.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^4.0.0",
|
||||
"@playwright/test": "^1.40.0",
|
||||
"@testing-library/svelte": "^5.0.0",
|
||||
"@testing-library/jest-dom": "^6.0.0",
|
||||
"@types/node": "^20.10.0",
|
||||
"@typescript-eslint/eslint-plugin": "^7.0.0",
|
||||
"@typescript-eslint/parser": "^7.0.0",
|
||||
"@vitest/coverage-v8": "^1.0.0",
|
||||
"autoprefixer": "^10.4.0",
|
||||
"daisyui": "^4.0.0",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-svelte": "^2.35.0",
|
||||
"globals": "^15.0.0",
|
||||
"husky": "^9.0.0",
|
||||
"jsdom": "^24.0.0",
|
||||
"lint-staged": "^15.0.0",
|
||||
"lucide-svelte": "^0.400.0",
|
||||
"msw": "^2.0.0",
|
||||
"postcss": "^8.4.0",
|
||||
"prettier": "^3.2.0",
|
||||
"prettier-plugin-svelte": "^3.1.0",
|
||||
"prettier-plugin-tailwindcss": "^0.5.0",
|
||||
"stylelint": "^16.0.0",
|
||||
"stylelint-config-standard": "^36.0.0",
|
||||
"svelte-check": "^4.0.0",
|
||||
"tailwindcss": "^3.4.0",
|
||||
"tslib": "^2.6.0",
|
||||
"typescript": "^5.3.0",
|
||||
"typescript-eslint": "^8.0.0",
|
||||
"vite": "^5.0.0",
|
||||
"vitest": "^1.0.0"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,ts,svelte}": [
|
||||
"prettier --write",
|
||||
"eslint --fix"
|
||||
],
|
||||
"*.{json,css,md}": [
|
||||
"prettier --write"
|
||||
]
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
}
|
||||
}
|
||||
36
playwright.config.ts
Normal file
36
playwright.config.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import type { PlaywrightTestConfig } from '@playwright/test';
|
||||
|
||||
const config: PlaywrightTestConfig = {
|
||||
webServer: {
|
||||
command: 'npm run build && npm run preview',
|
||||
port: 4173,
|
||||
reuseExistingServer: !process.env.CI
|
||||
},
|
||||
testDir: 'tests/e2e',
|
||||
testMatch: /(.+\.)?(test|spec)\.[jt]s/,
|
||||
use: {
|
||||
baseURL: 'http://localhost:4173',
|
||||
screenshot: 'only-on-failure',
|
||||
trace: 'retain-on-failure'
|
||||
},
|
||||
projects: [
|
||||
{
|
||||
name: 'chromium',
|
||||
use: { browserName: 'chromium' }
|
||||
},
|
||||
{
|
||||
name: 'firefox',
|
||||
use: { browserName: 'firefox' }
|
||||
},
|
||||
{
|
||||
name: 'webkit',
|
||||
use: { browserName: 'webkit' }
|
||||
}
|
||||
],
|
||||
reporter: process.env.CI ? 'github' : 'html',
|
||||
forbidOnly: !!process.env.CI,
|
||||
retries: process.env.CI ? 2 : 0,
|
||||
workers: process.env.CI ? 1 : undefined
|
||||
};
|
||||
|
||||
export default config;
|
||||
6
postcss.config.cjs
Normal file
6
postcss.config.cjs
Normal file
@@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {}
|
||||
}
|
||||
};
|
||||
100
src/app.css
Normal file
100
src/app.css
Normal file
@@ -0,0 +1,100 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
/* Default to dark theme */
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-base-100 text-base-content;
|
||||
font-feature-settings:
|
||||
'rlig' 1,
|
||||
'calt' 1;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Custom scrollbar */
|
||||
.scrollbar-thin {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: theme('colors.base-300') transparent;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb {
|
||||
background-color: theme('colors.base-300');
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
||||
background-color: theme('colors.base-content');
|
||||
}
|
||||
|
||||
/* Loading skeleton */
|
||||
.skeleton {
|
||||
@apply animate-pulse rounded bg-base-300;
|
||||
}
|
||||
|
||||
/* Team colors */
|
||||
.team-t {
|
||||
@apply text-terrorist;
|
||||
}
|
||||
|
||||
.team-ct {
|
||||
@apply text-ct;
|
||||
}
|
||||
|
||||
.bg-team-t {
|
||||
@apply bg-terrorist;
|
||||
}
|
||||
|
||||
.bg-team-ct {
|
||||
@apply bg-ct;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/* Animations */
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-slide-in {
|
||||
animation: slideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
15
src/app.html
Normal file
15
src/app.html
Normal file
@@ -0,0 +1,15 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
|
||||
<link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />
|
||||
<meta name="theme-color" content="#0f172a" />
|
||||
<meta name="description" content="Statistics for CS2 matchmaking matches" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
9
src/routes/+layout.svelte
Normal file
9
src/routes/+layout.svelte
Normal file
@@ -0,0 +1,9 @@
|
||||
<script lang="ts">
|
||||
import '../app.css';
|
||||
|
||||
let { children } = $props();
|
||||
</script>
|
||||
|
||||
<div class="min-h-screen bg-base-100">
|
||||
{@render children()}
|
||||
</div>
|
||||
19
src/routes/+page.svelte
Normal file
19
src/routes/+page.svelte
Normal file
@@ -0,0 +1,19 @@
|
||||
<script lang="ts">
|
||||
// Temporary homepage - will be replaced with full implementation
|
||||
</script>
|
||||
|
||||
<div class="flex min-h-screen items-center justify-center">
|
||||
<div class="text-center">
|
||||
<h1 class="mb-4 text-6xl font-bold">
|
||||
<span class="text-primary">CS2</span><span class="text-secondary">.WTF</span>
|
||||
</h1>
|
||||
<p class="mb-8 text-xl text-base-content/70">Statistics for CS2 matchmaking matches</p>
|
||||
<div class="flex justify-center gap-4">
|
||||
<a href="/matches" class="btn btn-primary">Browse Matches</a>
|
||||
<a href="/player/76561198012345678" class="btn btn-secondary">View Demo Profile</a>
|
||||
</div>
|
||||
<div class="mt-12 text-sm text-base-content/50">
|
||||
<p>🚧 Rewrite in progress - Phase 1 complete</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
36
src/tests/setup.ts
Normal file
36
src/tests/setup.ts
Normal file
@@ -0,0 +1,36 @@
|
||||
import '@testing-library/jest-dom';
|
||||
import { vi } from 'vitest';
|
||||
|
||||
// Mock SvelteKit modules
|
||||
vi.mock('$app/environment', () => ({
|
||||
browser: false,
|
||||
building: false,
|
||||
dev: true,
|
||||
version: 'test'
|
||||
}));
|
||||
|
||||
vi.mock('$app/navigation', () => ({
|
||||
goto: vi.fn(),
|
||||
invalidate: vi.fn(),
|
||||
invalidateAll: vi.fn(),
|
||||
preloadData: vi.fn(),
|
||||
preloadCode: vi.fn(),
|
||||
beforeNavigate: vi.fn(),
|
||||
afterNavigate: vi.fn()
|
||||
}));
|
||||
|
||||
vi.mock('$app/stores', () => {
|
||||
const getStores = () => {
|
||||
const navigating = { subscribe: vi.fn() };
|
||||
const page = { subscribe: vi.fn() };
|
||||
const updated = { subscribe: vi.fn() };
|
||||
|
||||
return { navigating, page, updated };
|
||||
};
|
||||
|
||||
const page = { subscribe: vi.fn() };
|
||||
const navigating = { subscribe: vi.fn() };
|
||||
const updated = { subscribe: vi.fn() };
|
||||
|
||||
return { getStores, navigating, page, updated };
|
||||
});
|
||||
26
svelte.config.js
Normal file
26
svelte.config.js
Normal file
@@ -0,0 +1,26 @@
|
||||
import adapter from '@sveltejs/adapter-auto';
|
||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||
// for more information about preprocessors
|
||||
preprocess: vitePreprocess(),
|
||||
|
||||
kit: {
|
||||
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
|
||||
// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
|
||||
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
|
||||
adapter: adapter(),
|
||||
alias: {
|
||||
$lib: 'src/lib',
|
||||
$components: 'src/lib/components',
|
||||
$stores: 'src/lib/stores',
|
||||
$utils: 'src/lib/utils',
|
||||
$types: 'src/lib/types',
|
||||
$api: 'src/lib/api'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
100
tailwind.config.cjs
Normal file
100
tailwind.config.cjs
Normal file
@@ -0,0 +1,100 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
// CS2 Team colors
|
||||
terrorist: {
|
||||
DEFAULT: '#d4a74a',
|
||||
light: '#e5c674',
|
||||
dark: '#b38a3a'
|
||||
},
|
||||
ct: {
|
||||
DEFAULT: '#5e98d9',
|
||||
light: '#7eaee5',
|
||||
dark: '#4a7ab3'
|
||||
}
|
||||
},
|
||||
fontFamily: {
|
||||
sans: [
|
||||
'Inter',
|
||||
'system-ui',
|
||||
'-apple-system',
|
||||
'BlinkMacSystemFont',
|
||||
'"Segoe UI"',
|
||||
'Roboto',
|
||||
'sans-serif'
|
||||
],
|
||||
mono: [
|
||||
'"JetBrains Mono"',
|
||||
'"Fira Code"',
|
||||
'Consolas',
|
||||
'Monaco',
|
||||
'"Courier New"',
|
||||
'monospace'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: [require('daisyui')],
|
||||
daisyui: {
|
||||
themes: [
|
||||
{
|
||||
cs2light: {
|
||||
primary: '#5e98d9',
|
||||
'primary-focus': '#4a7ab3',
|
||||
'primary-content': '#ffffff',
|
||||
secondary: '#d4a74a',
|
||||
'secondary-focus': '#b38a3a',
|
||||
'secondary-content': '#ffffff',
|
||||
accent: '#37cdbe',
|
||||
'accent-focus': '#2aa79b',
|
||||
'accent-content': '#ffffff',
|
||||
neutral: '#2a2e37',
|
||||
'neutral-focus': '#16181d',
|
||||
'neutral-content': '#ffffff',
|
||||
'base-100': '#ffffff',
|
||||
'base-200': '#f9fafb',
|
||||
'base-300': '#efefef',
|
||||
'base-content': '#1f2937',
|
||||
info: '#3abff8',
|
||||
success: '#36d399',
|
||||
warning: '#fbbd23',
|
||||
error: '#f87272'
|
||||
},
|
||||
cs2dark: {
|
||||
primary: '#5e98d9',
|
||||
'primary-focus': '#7eaee5',
|
||||
'primary-content': '#ffffff',
|
||||
secondary: '#d4a74a',
|
||||
'secondary-focus': '#e5c674',
|
||||
'secondary-content': '#ffffff',
|
||||
accent: '#37cdbe',
|
||||
'accent-focus': '#2aa79b',
|
||||
'accent-content': '#ffffff',
|
||||
neutral: '#1f2937',
|
||||
'neutral-focus': '#111827',
|
||||
'neutral-content': '#d1d5db',
|
||||
'base-100': '#0f172a',
|
||||
'base-200': '#1e293b',
|
||||
'base-300': '#334155',
|
||||
'base-content': '#e2e8f0',
|
||||
info: '#3abff8',
|
||||
success: '#36d399',
|
||||
warning: '#fbbd23',
|
||||
error: '#f87272'
|
||||
}
|
||||
},
|
||||
'light',
|
||||
'dark'
|
||||
],
|
||||
darkTheme: 'cs2dark',
|
||||
base: true,
|
||||
styled: true,
|
||||
utils: true,
|
||||
prefix: '',
|
||||
logs: true,
|
||||
themeRoot: ':root'
|
||||
}
|
||||
};
|
||||
23
tests/e2e/home.test.ts
Normal file
23
tests/e2e/home.test.ts
Normal file
@@ -0,0 +1,23 @@
|
||||
import { expect, test } from '@playwright/test';
|
||||
|
||||
test('homepage loads successfully', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
|
||||
// Check that the page title contains CS2.WTF
|
||||
await expect(page.locator('h1')).toContainText('CS2');
|
||||
await expect(page.locator('h1')).toContainText('.WTF');
|
||||
|
||||
// Check that navigation buttons are present
|
||||
await expect(page.locator('text=Browse Matches')).toBeVisible();
|
||||
await expect(page.locator('text=View Demo Profile')).toBeVisible();
|
||||
});
|
||||
|
||||
test('navigation to matches page works', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
|
||||
// Click on Browse Matches button
|
||||
await page.locator('text=Browse Matches').click();
|
||||
|
||||
// URL should change to /matches
|
||||
await expect(page).toHaveURL('/matches');
|
||||
});
|
||||
30
tsconfig.json
Normal file
30
tsconfig.json
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"noImplicitAny": true,
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true,
|
||||
"strictBindCallApply": true,
|
||||
"strictPropertyInitialization": true,
|
||||
"noImplicitThis": true,
|
||||
"alwaysStrict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedIndexedAccess": true,
|
||||
"moduleResolution": "bundler",
|
||||
"module": "ESNext",
|
||||
"target": "ESNext"
|
||||
},
|
||||
"include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
32
vite.config.ts
Normal file
32
vite.config.ts
Normal file
@@ -0,0 +1,32 @@
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vitest/config';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [sveltekit()],
|
||||
test: {
|
||||
include: ['src/**/*.{test,spec}.{js,ts}'],
|
||||
globals: true,
|
||||
environment: 'jsdom',
|
||||
setupFiles: ['./src/tests/setup.ts'],
|
||||
coverage: {
|
||||
provider: 'v8',
|
||||
reporter: ['text', 'json', 'html'],
|
||||
exclude: [
|
||||
'node_modules/',
|
||||
'src/tests/',
|
||||
'**/*.d.ts',
|
||||
'**/*.config.*',
|
||||
'**/mockData',
|
||||
'**/.svelte-kit'
|
||||
]
|
||||
}
|
||||
},
|
||||
server: {
|
||||
port: 5173,
|
||||
strictPort: false
|
||||
},
|
||||
preview: {
|
||||
port: 4173,
|
||||
strictPort: false
|
||||
}
|
||||
});
|
||||
41
vitest.config.ts
Normal file
41
vitest.config.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import { defineConfig } from 'vitest/config';
|
||||
import { svelte } from '@sveltejs/vite-plugin-svelte';
|
||||
import path from 'path';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [svelte({ hot: !process.env.VITEST })],
|
||||
resolve: {
|
||||
alias: {
|
||||
$lib: path.resolve('./src/lib'),
|
||||
$components: path.resolve('./src/lib/components'),
|
||||
$stores: path.resolve('./src/lib/stores'),
|
||||
$utils: path.resolve('./src/lib/utils'),
|
||||
$types: path.resolve('./src/lib/types'),
|
||||
$api: path.resolve('./src/lib/api')
|
||||
}
|
||||
},
|
||||
test: {
|
||||
include: ['src/**/*.{test,spec}.{js,ts}'],
|
||||
globals: true,
|
||||
environment: 'jsdom',
|
||||
setupFiles: ['./src/tests/setup.ts'],
|
||||
coverage: {
|
||||
provider: 'v8',
|
||||
reporter: ['text', 'json', 'html'],
|
||||
exclude: [
|
||||
'node_modules/',
|
||||
'src/tests/',
|
||||
'**/*.d.ts',
|
||||
'**/*.config.*',
|
||||
'**/mockData',
|
||||
'**/.svelte-kit'
|
||||
],
|
||||
thresholds: {
|
||||
lines: 80,
|
||||
functions: 80,
|
||||
branches: 80,
|
||||
statements: 80
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user