Wersja MVP dla TMA

Specyfikacja techniczna

Projekt: Tworzenie ekranów gry D dla platformy Telegram

Technologia: Vue.js, Telegram Mini App

Cel projektu:

Stworzenie gry na Telegram Mini App. Ekrany powinny być funkcjonalne, estetyczne, zgodne z designem gry i responsywne. Integracja z API przy użyciu dokumentacji Swagger w celu realizacji funkcjonalności.

Główne wymagania:

1. Wymagania ogólne:

• Rozwój z użyciem Vue 3.

• Kod powinien być uporządkowany i łatwy do utrzymania.

• Zapewnienie responsywności dla różnych urządzeń (urządzenia mobilne).

• Uwzględnienie ograniczeń i zaleceń Telegram dla wbudowanych botów i gier.

• Użycie SCSS do stylizacji.

2. Komponenty i ekrany (łącznie około 20 ekranów):

2.1. Ekran główny (3 stany):

• Wyświetlanie tekstu powitalnego, kart do gry i przycisków nawigacyjnych:

  • Przycisk "Rozpocznij grę".

  • Przycisk "Moja przestrzeń".

  • Przycisk "Subskrypcja Premium".

• Integracja animacji podczas ładowania.

2.2. Ekran wyboru gier (Puzzle Selection):

• Integracja animacji podczas ładowania.

2.3. Ekran gry (Game Screen):

• Pole zagadki (np. struktura tabeli dla trybu "Tab" lub osobny blok dla trybu "Rozwiąż").

• Timer gry.

• Przyciski sterujące:

  • "Podpowiedź".

  • "Reset".

  • "Wstecz".

• Wskazanie aktualnego poziomu, punktów i postępu.

2.4. Ekran "Moja przestrzeń” (2 stany):

• Lista ukończonych puzzli z wyświetlaniem statusu (np. punkty lub nagrody).

• Przycisk przejścia do statystyk użytkownika.

2.5. Ekran subskrypcji Premium Subscription:

• Informacje o korzyściach subskrypcji.

• Przycisk "Złóż subskrypcję".

2.5. Ekran Ustawienia:

• Informacje o produkcie

• Wybór języka

• Formularze opinii
  
  
  

3. Integracja:

• Przygotować wszystkie ekrany do późniejszej integracji z Telegram Bot API.

Wymagania techniczne:

• Vue.js: Używać Composition API.

• UnoCSS

• Git: Regularne commitowanie z zrozumiałymi wiadomościami.

• Dokumentacja: Obowiązkowe komentowanie skomplikowanych fragmentów kodu.

Design:

• Makiety ekranów dostarczane w formacie: Figma.

• Wszystkie elementy interfejsu muszą ściśle odpowiadać projektowi.

Kryteria akceptacji pracy:

• Wszystkie ekrany są poprawnie zrealizowane i działają na różnych modelach urządzeń mobilnych.

• Kod przechodzi testy na czytelność i spełnia standardy Vue.js.

Komunikacja:

• Omówienie etapów pracy.

• Regularne raporty o wykonanych zadaniach co 2 dni.