# GoBadminton · #507 · Venue community

Готовый визуальный прототип Phase D. Автор — назначенный Owner UI designer Astra High. Дата — 07.11.2026. Дизайн подготовлен для DEV.

[Открыть интерактивный прототип](index.html) · [Галерея PNG](screenshots.html) · [Manifest](design-manifest.json) · [Browser evidence](browser-evidence.json)

## Вход и проверка

Откройте `index.html` в браузере или запустите из этой папки `python3 -m http.server 8507 --bind 127.0.0.1`. Все ресурсы прототипа локальные. Панель над приложением переключает контекст, состояние и доступ. Каждый выбор имеет копируемый URL с query-параметрами.

Начальный экран показывает «Пока нет оценок». Официальная фотография и адрес взяты из публичной карточки Golden Shuttle — Unischool. Оценки, обсуждение, авторы и расписание в наполненных состояниях — явно обозначенные примеры макета. Иллюстрации заменяют UGC-фотографии. Демонстрационные действия изменяют память открытой страницы. Вход, серверные ответы, модерация, загрузка файлов и отправка жалобы представлены локальными сценариями.

Полноразмерные PNG показывают всю страницу. PNG с `viewport` в имени показывают видимую область с действующей нижней навигацией. В полноразмерном capture браузер фиксирует нижнюю навигацию на позиции исходного viewport.

## Продуктовое решение

- Верхняя официальная галерея содержит источник и авторство. Текущий публичный пример содержит 1 фотографию. Управление официальной галереей следует действующему Admin-процессу с лимитом 8 изображений.
- После информации и игр размещены «Оценки сообщества», «Обсуждение и фотографии», «Отзывы после игры», затем «Фотографии сообщества». Якоря страницы ведут к каждому разделу.
- Компактная карта, выбор площадки и игровые карточки получают краткую сводку оценки при наличии места. Полная страница содержит выбор 1–5, текущий голос, изменение и отзыв. Текст и фото для оценки добровольны.
- Данные привязаны к каноническому физическому залу. Адрес присутствует рядом с названием. Пустая сводка показывает «Пока нет оценок». Пример 4,2 сопровождается 5 оценками и пояснением малой выборки.
- Гость читает публикации и открывает фотографии. CTA входа сохраняет площадку и целевой раздел. Авторизованный пользователь пишет, отвечает, изменяет и удаляет собственную публикацию. Операции доступны согласно текущей capability сервера.
- Публикация с фотографиями и без подписи допустима. Предложен стартовый предел 4 фото на публикацию, по 5 МБ, JPEG/PNG/WebP, 16 Мп и максимум 8192 пикселя по стороне. Число 4 — решение дизайна для bounded first delivery. Остальные пределы сверены с текущим sanitizer.
- Перед отправкой показаны права на собственные фото, согласие узнаваемых людей и удаление метаданных/геометок. Текст направляется в общий процесс #506, изображения проходят существующую проверку OpenAI.
- Новая публикация и отклонённые вложения видны автору с понятным статусом. Удаление публикации скрывает её фотографии в галерее. Отдельные состояния покрывают задержку проверки, старую версию, ограничение частоты, снятие материала и потерю доступа.
- Форма новой площадки получает добровольное предложение фотографии и поле авторства/источника. Фото остаётся кандидатом до модерации и привилегированного принятия. Публичная карточка в это время использует существующую иллюстрацию.
- «Отзывы после игры» используют существующий процесс подтверждения. Точная задержка публикации следует текущему контракту `max(approved_at, last_material_edit_at + 48h)`.

## Покрытие контекстов и маршрутов

Все строки доступны в селекторе прототипа и экспортированы на 390, 430, 1280 и 1440 CSS px.

| Контекст | Текущий вход / компонент | Представление #507 и переход |
|---|---|---|
| Полная площадка | `/venues/:venueId` · `venues/VenuePage.tsx` | Полные разделы и возврат в исходный контекст |
| Компактная карта | `/games?view=map` · `games/VenuePreviewCard.tsx` | Название, адрес, краткая оценка, раскрытие |
| Раскрытая карта | `games/VenueSheet.tsx`, `VenuePopup.tsx`, `DesktopMapInspector.tsx` | Информация и краткая оценка, «О площадке и сообществе», игры |
| Список карты | `games/GamesMapView.tsx` | Фактический fallback «Все площадки города», выбор площадки |
| Расписание | `games/VenueScheduleCard.tsx` | Контекст выбранной площадки, переход к полной карточке |
| Выбор площадки | `games/VenuePickerDialog.tsx` | Поиск имени/адреса, строка с краткой оценкой, выбор и отдельное открытие |
| Создание игры | `pages/CreateGamePage.tsx` | Выбранная площадка, открытие карточки и возврат в черновик |
| Детали игры | `pages/GameDetailPage.tsx`, `games/GameDetailComposition.tsx` (`GameTerms`) | Адрес и оценка площадки рядом с переходом |
| Игра в inspector | `games/DesktopInspectorGame.tsx`, `VenueSheet.tsx` | Возврат к площадке на карте и открытие полной карточки |
| Новая площадка | `pages/CreateGamePage.tsx`, режим `createNewVenue` | Кандидат фотографии в существующей форме создания/предложения |
| Каталог игр | `discovery/DiscoveryGameCard.tsx` | Краткая оценка под адресом при наличии места, основное действие открывает игру |
| Мои игры | `games/GameDetailComposition.tsx` (`PersonalGameCard`) | Краткая информация о площадке и переход к игре |
| Итоги игры | `games/GameResultsComposition.tsx` | Существующий компактный контекст игры с названием площадки |
| Legacy `/venues` | `apps/web/src/app/venues/page.tsx` | Существующий redirect к `/games?view=map` |

Переходы реализации сохраняют `day`, `activity`, выбранную площадку и исходный map query через существующие `gamesMapReturnPath` / `venueCreatePath`. Возврат из площадки в игру или picker использует разрешённый локальный route и сохранённый черновик. Auth handoff хранит canonical venue ID и якорь целевого раздела.

`GameHero`, preview игры и короткие заголовки результатов используют название места в своём текущем игровом контексте. Основной доступ к полной площадке идёт через `GameTerms` или родительский `VenueSheet`. Самостоятельный каталог площадок в baseline отсутствует.

## Состояния

| Группа | Сценарии в прототипе |
|---|---|
| Доступ | Гость, авторизован, действия ограничены, повторный вход |
| Сводка | Пусто, 4,2 / 5 голосов как пример, загрузка, ошибка, пересчёт, объединение, закрытая площадка |
| Собственный голос | Выбор, ожидание подтверждения, сохранение, ошибка, изменение, отзыв |
| Обсуждение | Пусто, текст и фото, только фото, ответ, изменение, удаление |
| Модерация | На проверке, отклонено, снято, задержка проверки, доступное решение |
| Галерея | Пусто, несколько изображений, неизвестный полный размер, следующая страница, retry, конец, фото снято при просмотре |
| Официальное медиа | Реальное одобренное фото и credit, отсутствие фото с иллюстрацией |
| Кандидат медиа | Предложение, источник/автор, статус ожидания |
| Существующий отзыв | Пустой опубликованный список и описание проверяемого права |

Таблица «Состояния и модерация» в селекторе показывает версии статусов рядом. Для спорных операций используются серверный текст причины, актуальная версия, capability, retry interval и доступные действия решения.

## Поведение просмотрщика и доступность

- Полноэкранный native dialog имеет доступное имя, фокус внутри, SVG `CloseButton` 44×44, Escape и возврат фокуса к исходной миниатюре. Фон inert, прокрутка документа заблокирована.
- ←/→ и кнопки переходят по всем допустимым фотографиям этой площадки. Данные курсора запрашиваются по мере движения. Пока полный размер неизвестен, показано «Фото N». После известного окончания показано «Фото N из 9» в примере.
- Горизонтальный свайп требует 48 px и преобладания горизонтальной оси. Вертикальное движение сохраняет текущую фотографию. Жест раскрытия sheet относится к его handle.
- Авторство и «К публикации» ведут к конкретному исходному комментарию, включая комментарий с последующей страницы. Удалённое фото имеет отдельный статус и доступ к следующему разрешённому.
- Ошибка следующей страницы сохраняет текущий снимок и кнопку повтора. Прокрутка карты под просмотрщиком исключена из взаимодействия.
- Оценка реализована как радиогруппа с именами «N из 5», стрелками и Home/End. Цвет дополнен текстом и состояниями. Загрузка и подтверждение используют live status.
- CSS учитывает safe-area, нижнюю навигацию 76 px, мобильную шапку 72 px и reduced motion. Проверка проведена Chromium на заданных CSS ширинах. Физическое iPhone/Safari-тестирование относится к реализации.

## Bounded frontend implementation map

| Предлагаемая часть | Переиспользование текущего кода | Граница |
|---|---|---|
| `VenueCommunityRating` с compact/full вариантами | `Button`, `Surfaces`, inputs/radio, Notice; существующие `consumer-types` и read API | Вывод полученной сводки, независимый текущий голос, управление pending/error |
| Вложения публикации | `comments/CommentsSection.tsx` и текущие composer/reply/edit/delete | До 4 вложений, фото-only, состояния медиа, подтверждение удаления |
| `VenueCommunityPhotos` | `VenueGallery` axis-lock/threshold/media/fallback, `CloseButton`, действующий modal lifecycle | Отдельный источник UGC, курсор, источник комментария, focus return |
| `VenueCandidatePhotoField` | Текущий create/proposal flow и существующий upload feedback | Добровольный кандидат, source/rights, pending/approved/rejected |
| Composition | `VenuePage`, `VenueSheet`, `VenuePreviewCard`, `VenuePickerDialog`, `GameTerms`, card families | Вставка краткой сводки и ссылок в существующие поверхности |
| Verified review | `VenueReviewsPanel`, `VenueReviewComposer`, `VenueReviewsDialog` | Самостоятельный существующий блок «Отзывы после игры» |

Компактные списки получают сводки пакетно вместе с данными списка или одним батчем по canonical venue IDs. UI показывает среднее и число действующих голосов из ответа сервера. Успешная запись повторно получает актуальную сводку для всех поверхностей одной площадки. Подтверждённый старый ответ, скрытая/пересчитываемая сводка и ошибка имеют явные состояния. Браузерный прототип использует заранее заданные ответные fixtures для иллюстрации этих переходов.

Существующий `sanitizeAvatar(..., 'cover')` создаёт crop 1200×400. Для полноэкранных UGC-фото нужен согласованный вариант производной с сохранением полного кадра, используя текущие проверки типа/размера, очистку, moderation и WebP delivery. Это конкретный пункт reconciliation перед реализацией.

## STYLE_GUIDE_PARITY

Применены Onest, paper `#f5f6f2`, ink `#13221a`, lime `#a7f447`, purple `#7945de`, line `#dfe4dc`, радиусы 12/18/28, кнопки 48 px, общая сетка, ContentCard/SurfacePanel, SectionHeader, ListRow, Empty/Error/Skeleton/Notice, bottom nav и Modal. SVG логотип и навигационные иконки скопированы из frozen Guide.

Desktop picker использует ширину 680 px. Map inspector использует 450 px на проверенных desktop-ширинах. Header/body/footer следуют «Просторный40», X в 24 px от края shell, один внутренний вертикальный scroll owner. Мобильные inset 16/20 px и safe-area сохранены.

STYLE_GUIDE_GAP — новая семантика звёзд и страничная UGC-галерея. Они скомпонованы из текущих кнопок, радио-паттерна, медиа и модального chrome. Расширение остаётся в текущей системе компонентов. Owner visual override для этой работы не потребовался.

## Источники и provenance

- Canonical scope получен read-only через GitHub connector. [Issue #507](https://github.com/anpavel84-afk/gobadminton-clean/issues/507) · [Owner addendum](https://github.com/anpavel84-afk/gobadminton-clean/issues/507#issuecomment-6708483107)
- Read-only source root — `/home/agentagency-dev/owner-media406-webp-expansion-20261107`. Переданный accepted DEV alpha.44 SHA — `b27f91beceee24029311b9be2e26eca12b343ccb`. Переданный HEAD snapshot — `f0d3a3e`, product tree эквивалентен accepted DEV согласно assignment. SHA исходных файлов зафиксированы в manifest.
- Прочитаны `AGENTS.md`, `apps/web/AGENTS.md`, `START_HERE.md`, `docs/decisions/OWNER_DECISION_FRONTEND_STYLE_GUIDE_FIRST_V001.md`, `docs/product/DESKTOP_OVERLAY_STYLE_GUIDE.md`, `docs/product/VENUE_REVIEWS_CONTRACT.md` и фактические UI-файлы таблицы выше.
- Frozen Guide — `/opt/gobadminton-clean-qa/style-guide/src/{App.tsx,index.css}`. Публичный reference — [Style Guide](https://nougat-wise-76949869.figma.site/#guide). Font URL взят из этого CSS, локальная копия включена в assets.
- Дополнительные принятые references — [Desktop overlays](https://files.anpavel.ru/projects/gobadminton/design/style-guide/desktop-overlays/20261028-astra-v1/index.html), [Reviews](https://files.anpavel.ru/projects/gobadminton/design/style-guide/reviews/20261102-astra-v1/index.html). Локальный каталог `execution-20261027/design-inputs` проверен для map/venue inputs.
- Official media read-only GET — [Публичная карточка Unischool](https://dev.gobadminton.ru/venues/84603a7c-5160-595e-b52e-f242e826585c). Ответ сохранён в `assets/official-venue-public.json`, media в `assets/official-unischool.webp`. Credit в API — «Фото: Golden Shuttle — зал Unischool». [Источник](https://goldenshuttle.ru/)
- UGC previews — существующие `apps/web/public/discovery/venue-illustrations/*-v1.webp`, все показаны с подписью иллюстрации для макета.

## Проверка и передача

`browser-evidence.json` содержит результат интеракций, 92 проверки ширины и список PNG. `validate.cjs` воспроизводит локальную проверку установленным Chromium/Playwright. `design-manifest.json` фиксирует исходные материалы, SHA256 и комплектацию.

Проверка выполнялась автором дизайна. Независимая QA, implementation, CI, DEV release и Owner UAT ожидают дальнейших фаз #507. Физические устройства, реальные аккаунты, загрузки и провайдеры в этой фазе представлены макетом.

Материальных новых продуктовых конфликтов не выявлено. Решения дизайнера для проверки PMA — максимум 4 фотографии на публикацию, порядок секций, краткая сводка в доступном месте карточек, раскрытие полного сообщества через VenuePage.

Существующая конвенция публикации — `https://files.anpavel.ru/projects/gobadminton/design/style-guide/<topic>/<YYYYMMDD-astra-vN>/index.html`. Для trusted publisher подготовлен self-contained каталог, рекомендуемый путь `venue-community/20261107-astra-v1/`. Факт публикации и точный URL добавляет trusted publisher после размещения.