Files
sigra/SPEC.md

3.6 KiB
Raw Permalink Blame History

Своя игра: Уроки французского

1. Project Overview

Веб-игра по типу "Своя игра" (Jeopardy) на тему рассказа Валентина Распутина "Уроки французского". Игроки выбирают вопросы разной сложности, отвечают на них и набирают очки.

2. UI/UX Specification

Layout Structure

  • Header: Название игры, текущий счёт
  • Game Board: Сетка 5x6 (5 тем × 6 вопросов)
  • Question Modal: Всплывающее окно с вопросом
  • Score Panel: Отображение очков игрока

Responsive Breakpoints

  • Desktop: 1200px+
  • Tablet: 768px - 1199px
  • Mobile: < 768px

Visual Design

Color Palette:

  • Background: #1a1a2e (тёмно-синий)
  • Primary: #e94560 (красный акцент)
  • Secondary: #16213e (тёмно-синий вторичный)
  • Surface: #0f3460 (карточки)
  • Text: #eaeaea (светлый текст)
  • Gold: #ffd700 (для очков)
  • Success: #4ade80 (правильный ответ)
  • Error: #f87171 (неправильный ответ)

Typography:

  • Headings: "Playfair Display", serif
  • Body: "Source Sans Pro", sans-serif
  • Sizes: H1 2.5rem, H2 1.5rem, Body 1rem

Visual Effects:

  • Box-shadow на карточках
  • Hover эффект scale(1.05) на кнопках
  • Анимация появления модального окна
  • Fade transition для переходов

Components

  1. Category Card - Заголовок темы
  2. Question Cell - Ячейка с вопросом (отображает стоимость)
  3. Question Modal - Модальное окно с вопросом и вариантами ответов
  4. Score Display - Показ очков
  5. Final Score Screen - Итоговый экран

3. Functionality Specification

Темы и вопросы (5 тем × 6 вопросов = 30 вопросов)

Темы:

  1. Автор и произведение (100-500)
  2. Персонажи (100-500)
  3. События (100-500)
  4. Цитаты (100-500)
  5. География и детали (100-500)

Сложность:

  • 100 - самый лёгкий
  • 500 - самый сложный

Core Features

  1. Выбор вопроса из сетки
  2. Отображение вопроса с вариантами ответов (4 варианта)
  3. Проверка правильности ответа
  4. Начисление/списание очков
  5. Отслеживание отыгранных вопросов
  6. Финальный экран с результатом

User Flow

  1. Стартовый экран → Начать игру
  2. Игровое поле → Выбор вопроса
  3. Модальное окно → Выбор ответа
  4. Результат → Возврат на поле
  5. Все вопросы отыграны → Финальный счёт

4. Acceptance Criteria

  • Все 30 вопросов отображаются корректно
  • Вопросы открываются по клику
  • Правильный ответ показывает +очки, неправильный -очки
  • Отыгранные вопросы затемняются
  • Финальный экран показывает итоговый счёт
  • Кнопка "Играть снова" сбрасывает игру
  • Адаптивный дизайн работает на мобильных