# План работ Порядок — «сперва основа, редактор потом». Каждая фаза даёт результат, которым уже можно пользоваться; ни одна не требует от пользователя терминала. **Сквозные правила** (следуют из требований): zero-build · работает с `file://` · правка кликом · тема отделена от разметки · раскладка декларативна · виджеты внутри оверлея. --- ## Фаза 0 — Фундамент ✅ *(сделано)* * Паки разобраны → `docs/analysis/00-packs-teardown.md` * Требования зафиксированы → `docs/analysis/01-discovery.md` * Черновик формата пака → `docs/spec/pack-format.md` --- ## Фаза 1 — Ядро движка (`runtime/`) ✅ *(сделано)* Сердце конструктора. Один `overlay.js` + `overlay.css`, без сборки и зависимостей. 1. **Канва и масштаб** — сцена верстается в 1920×1080, ужимается под окно (`--scale = min(w/1920, h/1080)`), прозрачный фон. 2. **Рендер раскладки** — из `layout` строятся окна: `cam` / `slot` / `panel`, подписи, порядок слоёв. 3. **Альфа-дырки** — SVG-маска по фактическим координатам окон, пересчёт на resize. Режимы: `holes` (по умолчанию) · `artless` · `chroma`. 4. **Подписи и рамки окон** — оформление дырки: подпись, уголки, свечение, состояние «источник не поставлен» в демо-режиме. 5. **Данные и подстановки** — `show` → `data-bind`, шаблоны `{title}`, `{char1}`… 6. **Правка кликом** — `data-edit` + `contenteditable`, запись в `localStorage`, `Esc`/`Enter`, подсветка правимого (`E`), сброс. 7. **Синхронизация сцен** — общий ключ + событие `storage`, живое обновление. 8. **Таймеры** — таймкод (`run`/`clock`/`from`), обратный отсчёт, «до конца паузы». 9. **Слой помех** — скан-линии, зерно, пыль, трекинг, виньетка, глитч; уровни из `theme.fx`. 10. **Служебное** — `?align=1` (посадочные рамки), `?demo=1` (заглушки окон), `?obs=1`. **Готово, когда:** файл сцены с объектом `PACK` открывается двойным кликом, показывает раскладку с дырками, тексты правятся кликом и синхронизируются между вкладками. ## Фаза 2 — Темы (`themes/`) ✅ *(готово)* **Готово:** 6 готовых стилей в `themes/presets.js` (Неон, VHS, Мрачное фэнтези, Бумага, Чистая, Зелёный терминал), панель «Стиль» в редакторе — цвета, шрифты, скругление, толщина рамок и эффекты плёнки ползунками, всё с живым превью. Стиль уезжает в экспортированный `.html` вместе со сценой. **Готово также:** 16 стилей, 11 форм рамок, эффекты разделены на группы — «Среда в кадре» (пыль, искры, снег, дождь, туман, дрожь свечи, пульс), «Плёнка и видео» (полосы, зерно, развод), «Свет». Плюс 10 наборов атмосферы под жанр одной кнопкой: Подземелье, Таверна, Зима, Гроза, Мистика и т.д. **Готово также:** свой шрифт файлом (data-URI, `@font-face` в сцене) и проверка читаемости в панели «OBS» — предупреждение, не запрет. * Токены → CSS-переменные; **смена темы не трогает разметку**. * Наборы рамок: `neon` · `steel` · `wood` · `paper` · `none`. * Свои фоны из `theme.backgrounds`, дефолт — процедурный фон на CSS/SVG. * ~~3–4 стартовые темы по мотивам старых паков.~~ ✅ сделано 6 * Проверка контраста подписей на любом фоне. **Готово, когда:** одна и та же сцена меняет облик сменой одной строки `theme`. ## Фаза 3 — Библиотека сцен (`scenes/`) ✅ *(набор для эфира собран)* **Готово:** в демо- и стартовом паке есть `intro`, `start`, `game`, `pause`, `end`, `solo`, `talk`, `podcast`, `map`, `desk`. Заставка — слой `.ov-intro`, не текстовый объект: шесть роликов, длительность, повтор по `R`, после ролика остаётся титр из данных шоу. Пустое название не подменяется демо-текстом. Доска улик живёт в эфире (таскать, нити, записка и фото). Карта — окно `slot`. Ролевые: `intro` · `start` · `game` · `pause` · `end` · `desk` · `map`. Неролевые: `solo` (одна камера + чат) · `talk` · `podcast`. * **Интро — набор сменных анимаций** (по требованию «нужно разнообразие»): glitch-boot · typewriter · film-leader · neon-sign · slide-panels · tape-rewind. Общий контракт: `duration`, `replay` по `R`, автопереход в статичный кадр. * `desk` (стол улик) — самая трудоёмкая: карточки, подписи, наклон, нитки, сохранение. Делаем после того, как остальное работает. * `map` — окно под VTT/карту (`slot`). **Готово, когда:** из одного пака собирается полный набор экранов для эфира. ## Фаза 4 — Сборка пака (`build/`) ✅ *(папка и ZIP)* * Лаунчер (`index.html`) — список сцен, ссылки, подсказки. * ~~**Самодостаточный файл на сцену** — инлайн CSS/JS/картинок в data-URI.~~ ✅ Кнопка «Скачать папку» отдаёт ZIP (store, без библиотек): `.html` каждой сцены, инструкция и шрифты, вшитые в тему. Замечания проверки в архив не мешают. * **Автогенерация инструкции** — таблица координат строится **из `layout`**: камеры (под оверлей) и слоты под браузерные источники (поверх). Разойтись с кодом не может. * Проверки перед выдачей: пересечения окон, выход за канву, пустые `src`, нечитаемые подписи. **Готово, когда:** на выходе — папка/ZIP, который кидаешь в OBS и он просто работает. ## Фаза 5 — Визуальный редактор (`editor/`) ✅ *(можно собрать оверлей мышкой)* То, ради чего всё затевалось. Прототип поднят раньше срока по запросу пользователя, поверх уже готового ядра — то есть порядок «сначала основа» не нарушен. **Готово:** перетаскивание и ресайз объектов мышкой, привязка к краям/центру/соседям, добавление камер, источников и панелей, удаление, дубль, правка координат числами, стрелки с шагом 1/10 px, Ctrl+Z, фоновая картинка через выбор файла, переключение сцен, автосохранение в браузере, выгрузка `pack.js`. **Готово также:** выгрузка готовых сцен — по кнопке редактор собирает самодостаточный `.html` на каждую сцену (движок, стили, фон и тексты вшиты внутрь). Именно такой файл указывается в OBS как «Локальный файл». **Готово также:** панель «Шоу» (название, игроки, ведущий), порядок слоёв, выравнивание группы, отмена глубже раскладки (тема, шоу, заставка), открытие проекта файлом. Замечания перед выдачей — во вкладке «OBS», без жаргона. * ~~Канва 1920×1080: перетаскивание окон, ресайз, привязка к сетке и к соседям.~~ ✅ * ~~Палитра: добавить камеру / слот / панель.~~ ✅ * Панели: данные шоу · тема · сцены. * Живое превью — та же сцена, что уйдёт в эфир (общий рантайм, не имитация). * Хранение проекта в браузере + «скачать проект» / «открыть проект» файлом. * Выгрузка готового пака одной кнопкой. * Язык интерфейса — русский, без жаргона; подсказки «что это и зачем». **Готово, когда:** нетехнический человек делает свой оверлей мышкой, ни разу не увидев кода. ## Фаза 6 — Док-панель ✅ *(пульт ведущего)* Вторая страница, не сцена. В скачанной папке это `пульт.html`. В OBS: меню «Доки» → «Пользовательские доки браузера». С пульта правятся название, состав, таймеры, режим картинки и видимость окон. Сцена подхватывает сама: и по событию хранилища, и сверкой раз в треть секунды — между источником и доком событие иногда не приходит. Окно прячется только на своей сцене. Если пульт и сцена — разные файлы и браузер их не связывает, тот же файл сцены с `?dock=1` становится пультом: память точно общая. Хостинг и окна `embed` по-прежнему отложены. --- ## Что решить по ходу 1. **Хостинг конструктора.** Pages бесплатен только для публичных репозиториев, `overlay` сейчас приватный. Варианты: сделать публичным · GitHub Pro · Cloudflare Pages (бесплатно и из приватных) · **никак — работать с диска**. Архитектура zero-build оставляет выбор открытым: решение ничего не ломает. 2. **Встраивание виджетов (отложено).** Пока виджеты — отдельные браузерные источники в OBS, как в старых паках. Если позже захочется, чтобы оверлей показывал их сам, добавлю тип окна `embed` со ссылкой — это надстройка, ядро не меняется. 3. **Судьба `_research/`.** Копии старых паков пока остаются справочником. Ссылки на архивы с Диска закрыты. Выводы — в `docs/analysis/00-packs-teardown.md`.