OverDraft

⚠️ AI-Generated Code
This project was entirely generated by AI.

⚠️ Prototype Not designed to support more than 10 users per table

OverDraft is a draft helper tool for Overwatch 2, designed to manage player pools and visualize team compositions in real-time.

✨ Features

• 📊 Real-time sync with Google Sheets (1-second polling)
• 📁 Local CSV support — works offline with local files
• 👥 Player pool management — filter by role, rating, heroes
• 🏆 Team compositions — visualize draft picks and team structure
• 🎨 Hero icons & rank badges — official Overwatch 2 assets
• 🌐 Multilingual — English and Russian localization
• 🌙 Dark/Light themes
• 📤 Shareable configs — export/import via URL
• 💾 Persistent settings — saves to localStorage

🚀 Quick Start

Use Online

Visit the live demo — no installation required.

Run Locally

git clone https://github.com/akulinich/OverDraft.git
cd OverDraft/src
npm install
npm run dev

Open http://localhost:3000

📖 Usage

1. Connect a data source:

   • Paste a published Google Sheets URL, or
   • Upload a local CSV file

2. Google Sheets setup:

   • Open your Google Sheet
   • Go to File → Share → Publish to web
   • Select the sheet and click Publish
   • Copy the URL and paste it into OverDraft

3. Expected columns:

   Column	Description
   Nickname	Player name
   Role	tank, dps, or support
   Rating	Numeric SR/rank value
   Heroes	Comma-separated hero names

🧪 Testing

cd src

# Run all tests
npm test

# Watch mode
npm run test:watch

# With coverage
npm run test:coverage

Windows shortcuts: double-click test.bat or run .\test.ps1

🏗️ Build

cd src
npm run build

Output: src/dist/

📁 Project Structure

OverDraft/
├── src/
│   ├── js/              # Application modules
│   │   ├── api/         # Data fetching (Sheets, CSV, OverFast)
│   │   ├── i18n/        # Internationalization
│   │   ├── state/       # State management
│   │   ├── storage/     # localStorage persistence
│   │   ├── ui/          # Rendering & events
│   │   ├── utils/       # Parsing, polling, export
│   │   └── validation/  # Schema validation
│   ├── styles/          # CSS
│   ├── public/          # Static assets (icons, locales)
│   ├── tests/           # Unit & integration tests
│   └── docs/            # Architecture documentation
├── .github/workflows/   # CI/CD (GitHub Actions)
└── .husky/              # Git hooks (pre-commit tests)

🛠️ Tech Stack

• Vanilla JS (ES Modules)
• Vite — build tool
• Vitest — testing framework
• GitHub Pages — hosting
• Google Visualization API — Sheets data (no API key)

📄 License

MIT © 2025 akulinich