MVP layout for TMA

Technical Assignment

Project: Layout of Game D Screens for the Telegram Platform

Technology: Vue.js, Telegram Mini App

Project Goal:

Create a game on Telegram Mini App. The screens should be functional, aesthetic, match the game design, and be responsive. Integration with the API using Swagger documentation for functionality implementation.

Main Requirements:

1. General Requirements:

• Development using Vue 3.

• Code must be structured and easily maintainable.

• Ensure responsiveness for various devices (mobile devices).

• Consider the limitations and recommendations of Telegram for embedded bots and games.

• Use SCSS for styling.

2. Components and Screens (approximately 20 screens total):

2.1. Main Screen (3 states):

• Display welcome text, game cards, and navigation buttons:

  • "Start Game" button.

  • "My Space" button.

  • "Premium Subscription" button.

• Integration of loading animation.

2.2. Game Selection Screen (Puzzle Selection):

• Integration of loading animation.

2.3. Game Screen:

• Puzzle field (e.g., table structure for "Tab" mode or separate block for "Solve" mode).

• Game timer.

• Control buttons:

  • "Hint".

  • "Reset".

  • "Back".

• Indication of current level, points, and progress.

2.4. "My Space" Screen (2 states):

• List of completed puzzles with status display (e.g., points or rewards).

• Button to go to user statistics.

2.5. Premium Subscription Screen:

• Information about subscription benefits.

• "Subscribe" button.

2.6. Settings Screen:

• Product information

• Language selection

• Feedback forms
  
  
  

3. Integration:

• Prepare all screens for subsequent integration with Telegram Bot API.

Technical Requirements:

• Vue.js: Use Composition API.

• UnoCSS

• Git: Regular commits with clear messages.

• Documentation: Mandatory commenting of complex code sections.

Design:

• Screen layouts are provided in Figma format.

• All interface elements must strictly adhere to the design.

Acceptance Criteria:

• All screens are laid out and function correctly on different mobile device models.

• Code passes readability checks and meets Vue.js standards.

Communication:

• Discussion of work stages.

• Regular reports on completed tasks every 2 days.