91 lines
3.6 KiB
Markdown
91 lines
3.6 KiB
Markdown
# Своя игра: Уроки французского
|
||
|
||
## 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 вопросов отображаются корректно
|
||
- [ ] Вопросы открываются по клику
|
||
- [ ] Правильный ответ показывает +очки, неправильный -очки
|
||
- [ ] Отыгранные вопросы затемняются
|
||
- [ ] Финальный экран показывает итоговый счёт
|
||
- [ ] Кнопка "Играть снова" сбрасывает игру
|
||
- [ ] Адаптивный дизайн работает на мобильных
|