Yuliya/family-games-v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
9b8236f4f3
family-games-v3/PRD.md
Yuliya 9b8236f4f3 docs: PRD
2026-06-26 06:49:42 +00:00

18 KiB
Raw Blame History

PRD — Семейные игры (каталог для всей семьи)

Версия: 3.0 Дата: 26 июня 2026 Платформа: статический лендинг (HTML + CSS + JS) URL: https://pages.git.vibe42.kz/Yuliya/family-games-v3/ Репозиторий: https://git.vibe42.kz/Yuliya/family-games-v3

1. Описание продукта

«Семейные игры» — одностраничный каталог игр и активностей для семейного времяпрепровождения. Помогает семье быстро найти, во что поиграть вместе: по сезону, по категории, по возрасту ребёнка. Включает готовые загадки, шарады и сценарии для больших компаний (праздники, дни рождения).

Продукт решает проблему «не знаем, чем заняться всей семьёй» и подбирает активности так, чтобы было интересно одновременно и трёхлетнему ребёнку, и родителям, и взрослому ребёнку, и даже кошкам.

2. Цели и задачи

Цели

  • G1. Дать семье единый источник идей для совместного досуга — без поиска в интернете каждый раз.
  • G2. Подобрать игры, которые развивают ребёнка 3 лет и одновременно интересны взрослым (43, 44, 22 года).
  • G3. Покрыть все сезоны и типы активности (улица, настольные, развивающие, компьютерные, прочие).
  • G4. Обеспечить мгновенный доступ с любого устройства, в первую очередь с телефона.

Задачи (внутри продукта)

  • Каталог игр с фильтрами и поиском.
  • Группировка игр по сезонам года.
  • Подборка игр, доступных 3-летнему ребёнку.
  • Раздел «шарады и загадки» для устных игр без подготовки.
  • Раздел для больших компаний (торжества, дни рождения).
  • Функция «Сюрприз» — случайная игра, когда не могут выбрать.

3. Целевая аудитория

Основная семья (пользователи продукта)

Член семьи Возраст Роль в играх
Папа 43 года Ведущий, организатор, партнёр в настольных и компьютерных
Мама 44 года Наставник малыша, кулинарные и развивающие активности
Взрослый ребёнок 22 года Партнёр в компьютерных и сложных настольных, помощь с малышом
Малыш 3 года Главный участник развивающих и подвижных игр
2 кошки молодые, игривые Участники «кошачьих» активностей 🐱

Дополнительная аудитория

  • Гости на праздниках и днях рождения (6+ человек) — для раздела «Большая компания».

Ключевые потребности

  • Игры должны быть доступны 3-летке (упрощённые правила, помощь взрослых).
  • Игры должны быть не скучны взрослым (есть слой стратегии/юмора).
  • Минимум подготовки — играть «здесь и сейчас».

4. Пользовательские сценарии

Сценарий 1 — «Вечер пятницы, не знаем чем заняться». Пользователь открывает сайт на телефоне → нажимает «🎲 Сюрприз» → получает случайную игру с описанием → семья играет.

Сценарий 2 — «Зима, хочется на улицу». Пользователь открывает «📅 По сезонам» → раздел «❄️ Зима» → выбирает игру (например, «Снежинки под лупой») → читает «как играть» и «что развивает».

Сценарий 3 — «Чем занять 3-летку». В каталоге включается фильтр «👶 Для 3-летки» → остаются только игры 2+/3+ → родитель выбирает подходящую.

Сценарий 4 — «День рождения, пришли гости». Открывается раздел «🎂 Для большой компании» → выбирается сценарий (квест по станциям, квиз, фотобудка) для 6–20 человек.

Сценарий 5 — «Устная игра без подготовки». Открывается «🤔 Шарады и загадки» → семья по очереди открывает карточки и угадывает ответы.

5. Структура продукта

Одна страница, прокрутка вниз. Секции:

  1. Header (липкий) — лого «🎲 Семейные игры» + кнопка «🎲 Сюрприз».
  2. Hero — заголовок, описание, бейджи состава семьи, кнопки навигации по разделам.
  3. Каталог игр (#catalog) — фильтры + сетка карточек игр.
  4. Игры по сезонам (#seasons) — игры, сгруппированные по 5 временам года.
  5. Шарады и загадки (#riddles) — интерактивные карточки с ответами.
  6. Для большой компании (#big) — витрина игр для 6+ человек.
  7. Footer.

6. Функциональные требования

6.1. Каталог игр

  • Фильтр по категории: Все / 🌳 На улице / ♟️ Настольные / 🧠 Развивающие / 💻 Компьютерные / ✨ Прочие.
  • Фильтр по сезону: В любое время / 🌸 Весна / ☀️ Лето / 🍂 Осень / ❄️ Зима.
  • Фильтр по возрасту: Все возраста / 👶 Для 3-летки (показывает только игры с возрастом 2+ или 3+).
  • Текстовый поиск по названию игры.
  • Кнопка «Сбросить» — обнуляет все фильтры.
  • Счётчик «Найдено игр: N» — обновляется при фильтрации.
  • Пустое состояние — если ничего не найдено, показывается подсказка сбросить фильтры.

6.2. Карточка игры

Каждая карточка содержит:

  • Эмодзи-иконка.
  • Чип категории (с цветом категории).
  • Название.
  • Метаданные: сезон, 👥 количество игроков, 🎂 возраст.
  • Описание «как играть» (2–4 предложения).
  • Блок «🎯 Развивает: …» — какие навыки развивает (особенно важно для развивающих и игр малыша).

6.3. Игры по сезонам

  • 5 групп с заголовками: 🌸 Весна / ☀️ Лето / 🍂 Осень / ❄️ Зима / 🔄 В любое время.
  • В каждой группе — счётчик количества игр.
  • Сетка карточек внутри группы (та же карточка, что в каталоге).

6.4. Шарады и загадки

  • Подраздел «Загадки» — карточки с текстом загадки; клик по карточке открывает ответ.
  • Подраздел «Шарады» — карточки с частями слова; клик открывает ответ-слово.
  • Состояние «ответ скрыт / показан» переключается повторным кликом.

6.5. Для большой компании

  • Витрина из 6 сценариев для 6+ человек (Мафия, Крокодил, Музыкальные стулья, Семейный квиз, Квест по станциям, Фотобудка).
  • Карточки с описанием и «что развивает».
  • Без фильтров (статичная витрина).

6.6. «Сюрприз» (модальное окно)

  • Кнопка в header и доступна с любой точки страницы.
  • Открывает модал со случайной игрой из текущей отфильтрованной выборки (или из всех, если фильтры пусты).
  • Внутри модала: кнопка «🎲 Другая игра» (новый случайный выбор) и «Закрыть».
  • Закрытие: клик по фону, кнопка «Закрыть», клавиша Escape.

7. Контент

7.1. Каталог игр (≈44 игры)

Распределение по категориям:

  • 🌳 На улице — 19 игр (по всем сезонам).
  • ♟️ Настольные — 5 игр.
  • 🧠 Развивающие — 12 игр.
  • 💻 Компьютерные — 4 игры.
  • ✨ Прочие — 4 игры.

7.2. Загадки — 20 штук

  • 15 простых для малыша 3+ (животные, предметы, природа).
  • 5 логических для взрослых и 22-летнего.

7.3. Шарады — 6 штук

На сложение слов: ПАР+УС=ПАРУС, БАР+СУК=БАРСУК, ЛИСТ+ПАД=ЛИСТОПАД, САМ+ЛЁТ=САМОЛЁТ, ПАР+ВОЗ=ПАРОВОЗ, ЛЁД+КОЛ=ЛЕДОКОЛ.

7.4. Большая компания — 6 сценариев

Мафия, Крокодил/Шарады, Музыкальные стулья, Семейный квиз, Квест по станциям, Фотобудка + челленджи.

8. Нефункциональные требования

8.1. Адаптивность

  • Mobile-first. Корректно отображается на телефоне (от 320px), планшете и десктопе.
  • Сетка карточек: 1 колонка на телефоне, 2 на планшете, 3 на десктопе (repeat(auto-fill, minmax(290px, 1fr))).
  • Hero-заголовок уменьшается на мобиле (48px → 33px).

8.2. Производительность

  • Один файл index.html (HTML + CSS + JS inline), без внешних зависимостей и сборщиков.
  • Без тяжёлых библиотек (никакого Bootstrap, jQuery, npm-зависимостей).
  • Мгновенная загрузка и работа офлайн после открытия.

8.3. Доступность и удобство

  • Крупные тап-зоны (чипы, карточки, кнопки).
  • Контрастный текст, читаемые шрифты системного стека.
  • Эмодзи как иконки (не требуют шрифтовых загрузок).

8.4. Браузеры

  • Современные браузеры с поддержкой CSS custom properties и grid (все актуальные Chrome/Safari/Firefox/Edge).

9. Технологический стек

Слой Технология
Разметка HTML5
Стили CSS3 (inline, custom properties, grid, media queries)
Логика Vanilla JavaScript (ES6+, template literals)
Данные Встроенные JS-массивы (GAMES, RIDDLES, CHARADES, BIG)
Сборка отсутствует
Хостинг Gitea Pages (ветка pages), обслуживается Caddy
Контроль версий Git, self-hosted Gitea на git.vibe42.kz

Ограничения платформы (песочница Vibe42):

  • Только статика. Никакого бэкенда, БД, аутентификации, Docker, сборщиков.
  • Публикация — push/загрузка файлов в ветку pages репозитория Gitea.

10. Дизайн-система

Палитра (тёплая, дружелюбная)

Token Hex Назначение
--bg #FFF9F0 Основной фон (кремовый)
--ink #2A2530 Основной текст (тёмный тёплый)
--card #FFFFFF Фон карточек
--muted #7A7382 Вторичный текст
--line #EEE6D8 Границы, сепараторы
--accent #FF6B5B Основной акцент (коралл)
--accent-soft #FFE7E2 Мягкий фон акцента
--accent2 #2EC4B6 Вторичный акцент (бирюза)
--accent2-soft #DDF6F3 Мягкий фон бирюзы
--gold #FFB627 Декоративный

Цвета категорий

  • На улице #5BBF8A · Настольные #8B6FD0 · Развивающие #FF9149 · Компьютерные #4A90E2 · Прочие #E85A8C · Большая компания #F2A900

Типографика

  • Шрифт: системный стек -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif.
  • h1 (hero) — 48px / 800 (мобила 33px); h2 (секции) — 30–34px / 800; h3 (карточки) — 19px / 800; body — 17px / 400.

Лейаут

  • Контейнер max-width: 1140px.
  • Карточки border-radius: 16–18px, кнопки и чипы — 8–999px.

11. Метрики успеха

  • M1. Все запланированные разделы (5 шт.) присутствуют и работают.
  • M2. Каталог содержит ≥ 40 игр, из них ≥ 15 доступных 3-летке.
  • M3. Все фильтры (категория, сезон, возраст, поиск) корректно фильтруют и сбрасываются.
  • M4. Страница открывается на телефоне без горизонтального скролла.
  • M5. Время до полной интерактивности < 1 сек (один файл, без внешних запросов).

12. Roadmap (что можно добавить)

Ближайшее (P1)

  • Картинки/иллюстрации к играм (плейсхолдеры или эмодзи-сцены).
  • Фильтр «по количеству игроков» (2 / 3–4 / 5+).
  • Возможность «сохранить» любимые игры (localStorage, без бэкенда).
  • Печатная версия карточек (печать выбранного набора).

Среднесрочное (P2)

  • Больше загадок и шарад (по темам: про кошек, про еду, про транспорт).
  • Режим «счётчик очков» для большой компании (квиз, шарады по командам).
  • Звуковые эффекты / анимации для малыша.
  • Генератор «план выходного дня» — подборка 3 игр на сезон.

Долгосрочное (P3)

  • Многоязычность (русский / казахский / английский).
  • Загрузка собственных игр семьёй через редактор (localStorage).
  • PWA-установка на телефон как приложение.

13. Известные ограничения и риски

  • Публикация через Gitea API. git push для аккаунта заблокирован pre-receive hook сервера («User permission denied»). Обход — загрузка файлов через Gitea Contents API напрямую в ветку pages. Требует ручного шага при каждом обновлении.
  • Нет редактирования контента пользователем. Все данные зашиты в index.html. Добавление игр требует правки кода.
  • Офлайн-данные. Нет синхронизации между устройствами — каждый открывает свою копию.
  • Эмодзи-рендеринг зависит от ОС устройства (на старых Windows могут отличаться).

14. Статус реализации

Раздел Статус
Hero + навигация ✅ Готово
Каталог с фильтрами (категория/сезон/возраст/поиск) ✅ Готово
Карточка игры (как играть + что развивает) ✅ Готово
Игры по сезонам ✅ Готово
Фильтр «Для 3-летки» ✅ Готово
Шарады и загадки ✅ Готово
Для большой компании ✅ Готово
«Сюрприз» (модал) ✅ Готово
Адаптив под телефон ✅ Готово
Публикация на Pages ✅ Готово (через API)
Картинки к играм ⏳ Не сделано (roadmap P1)
Сохранение избранного ⏳ Не сделано (roadmap P1)

Документ сформирован на основе реализованного продукта. Обновлять при добавлении разделов из roadmap.