Верстка MVP для TMA

Техническое задание

Проект: Верстка экранов игры D для платформы Telegram

Технология: Vue.js, Telegram Mini App

Цель проекта:

Создать игру на TeIegram Mini App. Экраны должны быть функциональными, эстетичными, соответствовать игровому дизайну и быть адаптивными. Интеграция с API используя документацию Swagger для реализации функционала.

Основные требования:

1. Общие требования:

• Разработка с использованием Vue 3.

• Код должен быть структурированным и легко поддерживаемым.

• Обеспечить адаптивность для различных устройств (мобильные устройства).

• Учитывать ограничения и рекомендации Telegram для встроенных ботов и игр.

• Использование SCSS для стилизации.

2. Компоненты и экраны (всего около 20 экранов):

2.1. Главный экран (3 состояния):

• Отображение приветственного текста, игровых карточек и навигационных кнопок:

  • Кнопка "Начать игру".

  • Кнопка "Мое пространство".

  • Кнопка "Подписка Premium".

• Интеграция анимации при загрузке.

2.2. Экран выбора игр (Puzzle Selection):

• Интеграция анимации при загрузке.

2.3. Экран игры (Game Screen):

• Поле головоломки (например, табличная структура для режима "Tab" или отдельный блок для режима "Solve").

• Таймер игры.

• Кнопки управления:

  • "Подсказка".

  • "Сброс".

  • "Назад".

• Индикация текущего уровня, очков и прогресса.

2.4. Экран "My Space” (2 состояния):

• Список завершенных пазлов с отображением статуса (например, очки или награды).

• Кнопка перехода к статистике пользователя.

2.5. Экран подписки Premium Subscription:

• Информация о преимуществах подписки.

• Кнопка "Оформить подписку".

2.5. Экран Settings:

• Информация о продукте

• Выбор языка

• Формы отзывов
  
  
  

3. Интеграция:

• Подготовить все экраны к последующей интеграции с Telegram Bot API.

Технические требования:

• Vue.js: Использовать Composition API.

• UnoCSS

• Git: Регулярное коммитирование с понятными сообщениями.

• Документация: Обязательное комментирование сложных участков кода.

Дизайн:

• Макеты экранов предоставляются в формате: Figma.

• Все элементы интерфейса должны строго соответствовать дизайну.

Критерии приема работы:

• Все экраны сверстаны и работают корректно на разных моделях мобильных устройств.

• Код проходит проверку на читаемость и соответствует стандартам Vue.js.

Коммуникация:

• Обсуждение этапов работы.

• Регулярные отчеты о выполненных задачах раз в 2 дня.