vMix Tournament Bracket Overlay

Теперь проект работает в двух режимах:

• control.html - страница управления турниром, командами, стадиями и layer-ссылками.
• index.html?scene=... - готовый overlay для конкретного Browser input в vMix.

Что уже есть

• отдельные scene-пресеты с разными ссылками;
• режимы full, focus, list;
• размещение сцены left, center, right;
• ширина narrow, medium, wide, full;
• включение или отключение верхнего HUD;
• быстрый глобальный rename команд;
• редактирование секций, раундов и матчей через UI;
• сохранение проекта в storage/project.json.

Запуск

node server.mjs

После запуска:

• панель управления: http://127.0.0.1:8181/control.html
• overlay по сцене: http://127.0.0.1:8181/index.html?scene=main-full

Если порт 8181 уже занят, можно запустить так:

$env:PORT='8182'
node server.mjs

Тогда и ссылки будут на 8182.

Как работать

1. Открываешь control.html.
2. Меняешь название турнира, subtitle, event, время обновления, цвета.
3. Создаёшь scene-пресеты:
   • например main-full
   • left-focus
   • right-list
   • grand-final
4. Для каждого scene выбираешь:
   • view
   • position
   • width
   • показывать ли HUD
   • нужную секцию и нужный раунд
5. В редакторе ниже меняешь команды, seed, score, status, note и winner.
6. Нажимаешь Save Project.
7. Копируешь нужную ссылку сцены в отдельный Browser input в vMix.

Примеры сцен

Полная сетка:

http://127.0.0.1:8181/index.html?scene=main-full

Левый фокус-блок:

http://127.0.0.1:8181/index.html?scene=left-focus

Правый компактный список матчей:

http://127.0.0.1:8181/index.html?scene=right-list

Финал:

http://127.0.0.1:8181/index.html?scene=grand-final

Где что лежит

• control.html, control.js, control.css - UI для настройки;
• index.html, app.js, styles.css - сам overlay;
• server.mjs - локальный сервер и API;
• storage/project.json - сохранённый проект;
• data/*.json, data/*.tsv - старые примеры данных, если захочешь использовать их отдельно.

API

Сервер отдаёт:

• GET /api/project - весь проект;
• PUT /api/project - сохранить проект;
• GET /api/state?scene=scene-id - готовое состояние overlay для конкретной сцены.

Идея для vMix

Самый удобный сценарий:

1. Сделать несколько Browser inputs.
2. В каждый вставить свою scene ссылку.
3. Переключать их как отдельные графические элементы в зависимости от матча и стадии турнира.

Так ты один раз собираешь структуру турнира, а потом просто используешь разные ссылки под разные layer-задачи.