⚔ BRAWL ARENA — Турнірна сітка

Кіберпанк-інтерфейс для проведення турнірів з автоматичною генерацією сітки, жеребкуванням і відстеженням прогресу.

🌐 Демо

Відкрити BRAWL ARENA

✨ Можливості

• 🎰 Випадкове жеребкування — у першому раунді команди обираються рандомно з ефектом «слот-машини»
• 🏆 Повна турнірна сітка — від 1/16 фіналу до гранд-фіналу з матчем за 3-тє місце
• 📊 Імпорт команд — завантаження з Excel (.xlsx), CSV, або просто вставка тексту
• 💾 Збереження прогресу — автоматичне збереження в localStorage + експорт/імпорт у JSON
• 📺 Масштабування для стрімів — адаптивний інтерфейс для захвату в OBS на 2K/4K
• 🎯 Ручний вибір bye — при непарній кількості команд організатор сам обирає, хто проходить далі
• 🔒 Фіксована сітка після 1-го раунду — подальші пари визначаються позицією у сітці, без додаткової рандомізації

🚀 Як використовувати

1. Завантажте команди

Є три способи додати команди:

• Вставити текст — по одній команді на рядок у текстове поле
• Завантажити Excel/CSV — система знайде стовпець «Назва команди» автоматично
• Демо — натисніть «🎲 Демо (16 команд)» для тестування

2. Запустіть турнір

Натисніть «🚀 Старт турніру» — команди перемішаються випадковим чином.

3. Проведіть матчі

• Натисніть «🎰 Випадковий вибір матчу» для жеребкування пари
• Клікніть на картку команди-переможця на екрані VS
• Після завершення раунду переходьте до наступного

4. Фінальні етапи

• Півфінал → Матч за 3-тє місце → Гранд-фінал
• Після фіналу відображається подіум з 1–4 місцями

🛠 Технічний стек

Технологія	Призначення
HTML + Vanilla JS	Ядро застосунку (single-file)
TailwindCSS (CDN)	Утилітарні CSS-класи
SheetJS (XLSX)	Парсинг Excel-файлів
Google Fonts	Orbitron + Rajdhani шрифти
localStorage	Автозбереження стану

🎨 Дизайн

• Glassmorphism — напівпрозорі панелі з блюром
• Neon-ефекти — світіння тексту та кнопок у кіберпанк-стилі
• Анімації — пульсація VS-бейджа, «слот-машина» при жеребкуванні, плавні переходи
• Кольорова палітра — фіолетовий, жовтий, ціановий, рожевий на темному фоні

📁 Структура проєкту

tournament.html    — єдиний файл з усім кодом (HTML + CSS + JS)
README.md          — цей файл

🌐 Деплой

Оскільки проєкт — це один HTML-файл, його можна розмістити будь-де:

• GitHub Pages — просто увімкніть у налаштуваннях репозиторію
• Локально — відкрийте tournament.html у браузері
• Будь-який хостинг — завантажте файл на сервер