# Дизайн — «Дело за вечер» Дизайн-пакет продукта: детективный true-crime квиз для команд в бар-формате. Платформа генерирует уникальное «дело» на каждый вечер (canon-first), один ведущий ведёт 8–50 команд по четырём этапам до раскрытия. ИИ-судья проверяет сданные бланки семантически по канону (авто-зачёт при уверенности ≥90%), разгружая ведущего: он ведёт вечер и разбирает лишь 5–10 спорных полей. Внутри команды действует капитанская модель: бланки заполняет и сдаёт капитан, остальные видят живое read-only зеркало (один источник истины по ответам, без конфликтов одновременного редактирования; при неактивности капитана роль перехватывается через 60 сек). Все макеты показывают **одно демо-дело — «Дело о последнем заезде» (KH-0614)** и один и тот же состав из 8 команд. Единый источник контента — [`mockups/sample-case.md`](mockups/sample-case.md): ничего не выдумывается на экранах сверх этого файла. ## Как смотреть Открыть **[`mockups/index.html`](mockups/index.html)** в браузере — это галерея всех 14 экранов со ссылками. Каждый макет самодостаточен (без CDN и внешних запросов), многие содержат переключатели демо-состояний в служебной плашке сверху. ## Что где лежит ``` design/ ├── 01-product-vision.md — видение продукта ├── 02-user-flows.md — пользовательские сценарии (ведущий / команда / зал) ├── 03-screens.md — карта экранов: назначение, элементы, состояния ├── design-system/ │ ├── tokens.css — дизайн-токены (цвета, типографика, отступы, тени) │ └── styleguide.html — стайлгайд компонентов на токенах ├── mockups/ │ ├── index.html — ГАЛЕРЕЯ всех макетов (начинать отсюда) │ ├── sample-case.md — канон демо-дела KH-0614: имена, баллы, команды │ └── *.html — 14 макетов экранов (см. таблицу ниже) └── README.md — этот файл ``` Стиль: тёплый «нуарный» тёмный фон, «бумага» для документов дела, красная нить как акцент действий, латунь для баллов. Все цвета и размеры — только через CSS-переменные из `design-system/tokens.css` (макеты подключают его через ``). ## Экраны | # | Файл | Экран | Аудитория | Устройство | |---|------|-------|-----------|-----------| | 1 | `mockups/landing.html` | Лендинг продукта | public | desktop | | 2 | `mockups/host-setup.html` | Настройка игры / генерация дела | ведущий | desktop | | 3 | `mockups/host-live.html` | Live-пульт этапов | ведущий | desktop | | 4 | `mockups/host-grading.html` | Очередь спорных после ИИ-проверки | ведущий | desktop | | 5 | `mockups/host-reveal.html` | Пульт раскрытия | ведущий | desktop | | 6 | `mockups/team-join.html` | Вход и лобби команды | команда | mobile 390px | | 7 | `mockups/team-case.html` | Материалы дела | команда | mobile 390px | | 8 | `mockups/team-stage1-quiz.html` | Этап 1 — квиз (150 б) | команда | mobile 390px | | 9 | `mockups/team-stage2-map.html` | Этап 2 — карта следствия (200 б) | команда | mobile 390px | | 10 | `mockups/team-stage3-bet.html` | Этап 3 — ставка (150 б) | команда | mobile 390px | | 11 | `mockups/team-stage4-recon.html` | Этап 4 — твист + реконструкция (450 б) | команда | mobile 390px | | 12 | `mockups/team-results.html` | Личные результаты команды | команда | mobile 390px | | 13 | `mockups/hall-screen.html` | Экран зала (live, 6 режимов) | зал | TV 16:9 | | 14 | `mockups/hall-leaderboard.html` | Таблица результатов / победитель | зал | TV 16:9 | Экономика игры: базовый максимум 950 баллов = квиз 150 + карта 200 + ставка 150 + твист 450; механики «уверен ×2 → 300 / штраф −75» и подсказка −50 — см. `mockups/sample-case.md`. ## Следующие шаги к реализации 1. **Извлечь дизайн-систему в код**: перенести `tokens.css` как есть, собрать библиотеку компонентов по `styleguide.html` (кнопки, бейджи этапов, карточки-«бумага», таймер, тосты) — макеты уже используют одни и те же классы-паттерны. 2. **Модель данных дела**: формализовать канон (`sample-case.md` → JSON-схема: дело, подозреваемые, документы по пакетам, эталоны ответов, экономика баллов) — это контракт между генератором дел и всеми клиентами. 3. **Реалтайм-ядро**: комнаты игры (ведущий ↔ команды ↔ экран зала), состояния этапов, таймеры, автосдача черновиков, реконнект по коду команды (сценарии — в `02-user-flows.md`, состояния — в `03-screens.md`). 4. **Клиенты по приоритету**: (а) телефон команды (join → материалы → 4 бланка → результаты), (б) консоль ведущего (setup → live → grading → reveal), (в) экран зала (пассивный рендер режимов с пульта). 5. **ИИ-проверка и очередь спорных**: типы полей (выбор/время/текст ≤300), ИИ-судья сверяет бланк с каноном семантически, вердикт с уверенностью и обоснованием, порог авто-зачёта ≥90% (настройка вечера), очередь спорных и оспариваний, ручные вердикты ✓/½/✗ с хоткеями и логом отката. 6. **Пайплайн генерации дел** (`case-generator`, внутренний инструмент команды продукта — не self-serve для организатора): генерация канона → валидация непротиворечивости → solve-агент (разрешимость) → cheat-агент (устойчивость к гуглу/нейросетям) → комплект вечера (скрипт, цифровые документы дела, аудио, QR-афиша). Организатор получает готовые дела из библиотеки; его собственная генерация по кнопке — в Roadmap. 7. **Проверка на устройствах**: телефонные экраны — на реальных 390px (тап-таргеты ≥44px), зал — с дальней точки бара (контраст и размеры TV-типографики). ## Roadmap - **Self-serve генерация дела из консоли организатора.** Сейчас дела готовит команда продукта внутренним пайплайном `case-generator` (генерация под каждую игру заранее, с валидацией и solve/cheat-плейтестом); организатор выбирает готовое дело из библиотеки или заказывает дело под тему (готовим за 3–5 дней). Генерация дела по кнопке самим организатором — следующий шаг.