Верстка 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. Екран Налаштування:

• Інформація про продукт

• Вибір мови

• Форми відгуків
  
  
  

3. Інтеграція:

• Підготувати всі екрани до подальшої інтеграції з Telegram Bot API.

Технічні вимоги:

• Vue.js: Використовувати Composition API.

• UnoCSS

• Git: Регулярне коміттування з зрозумілими повідомленнями.

• Документація: Обов'язкове коментування складних ділянок коду.

Дизайн:

• Макети екранів надаються у форматі: Figma.

• Всі елементи інтерфейсу повинні строго відповідати дизайну.

Критерії прийому роботи:

• Всі екрани сверстані та працюють коректно на різних моделях мобільних пристроїв.

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

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

• Обговорення етапів роботи.

• Регулярні звіти про виконані завдання раз на 2 дні.