Тактическая карта с сеткой, токенами и инструментами рисования. Работает на десктопе и телефоне с полной поддержкой жестов. Реалтайм-синхронизация между мастером и игроками.
Начало боя
Переключитесь в Режим мастера и включите Режим сессии
Откройте Поле битвы из бокового меню
Добавьте участников:
+ Игрок — имя, класс, цвет
+ Враг — имя, тип (Обычный/Босс), цвет. Счётчик «Количество» (1–10) позволяет добавить сразу нескольких одинаковых врагов — они автоматически пронумеруются («Гоблин 1», «Гоблин 2», «Гоблин 3») и разместятся на разных клетках
+ Спутник — имя и цвет (пунктирная рамка)
+ Партия — одной кнопкой все запиненные персонажи
Токены расставляются компактно: враги слева, игроки справа — оба видны на экране телефона.
Токены
Обычные токены — 40px
Боссы — 56px с пульсирующей анимацией
При совпадении позиций фигуры автоматически смещаются
Размер сетки настраивается от 4 до 30 клеток
Зум: 0.5x — 2.5x
Рисование
Нажмите «Маркер» — рисуйте поверх сетки:
6 цветов, 3 толщины линии, ластик
Курсор меняется на карандаш/ластик
Рисунки сохраняются в localStorage
Кнопка «Очистить» стирает рисунок полностью
Туман войны
Скрывайте карту туманом, чтобы игроки исследовали её постепенно.
Для мастера
Нажмите кнопку ☁ справа от карты — всё поле покроется полупрозрачным туманом
Нажмите ☁ ещё раз → режим редактирования: рисуйте кистью по клеткам, чтобы открывать или закрывать области
Кнопки «Скрыть всё» и «Открыть всё» для быстрых операций
Кнопка ✕ — убрать туман полностью
Как работает кисть:
Действие определяется первой клеткой: если она была закрыта — кисть открывает; если открыта — кисть закрывает
Просто нажмите и ведите мышью (или пальцем на тач-экране) — все клетки под курсором обработаются
Кисть работает корректно при любом уровне зума
Взаимодействие с другими инструментами:
Туман и маркер — взаимоисключающие режимы (включение одного выключает другой)
Панорамирование и зум заблокированы в режиме редактирования тумана, чтобы не двигать карту случайно
Зоны дальности отображаются поверх тумана — боевые дистанции всегда видны
Состояние тумана синхронизируется с игроками в реальном времени через Supabase
Для игрока
Закрытые клетки — непрозрачный чёрный фон
Зона 3×3 вокруг каждого живого игрока и спутника автоматически открывается — это «поле зрения» персонажа
Видимость двигается вместе с токеном: когда мастер перемещает фигуру, зона зрения следует за ней
Токены в тумане полностью скрыты (не просто невидимы — удалены из интерфейса, их нельзя увидеть через DevTools)
Лог боя скрыт, пока туман активен (чтобы записи вроде «Гоблин — при смерти» не раскрывали информацию)
Панель участников и заголовок «Текущий ход» не показывают имена скрытых токенов
Авто-фит камеры работает только по видимым токенам — камера не улетит к скрытому врагу
Победа / поражение срабатывают только когда все враги (включая скрытых) действительно мертвы — ложных побед не бывает
Управление очерёдностью
В панели «Участники» кнопками перемещайте участников вверх/вниз для установки порядка хода.
Жесты на телефоне
Жест
Действие
Быстрый свайп по полю
Прокрутка страницы
Удержание 0.4с + свайп
Перемещение камеры (вибрация при активации)
Щипок двумя пальцами
Зум карты
Тап по токену
Выделение (подсветка + увеличение)
Удержание токена 0.35с
Меню: Убить / Воскресить / Удалить
Перетаскивание токена
Перемещение по сетке
Десктоп
Зажать мышь на пустом месте + тянуть — перемещение камеры
Ползунок слева — ручной зум
Тулбар и список участников зафиксированы — двигается только карта
Реалтайм
При включённой сессии все изменения на поле (перемещение токенов, рисунки, добавление/удаление участников) синхронизируются с игроками через Supabase Edge Functions.