PerplexImage

01 / problem

Układanka, która działa na każdym ekranie

Puzzle z przeciąganiem łatwo zrobić pod mysz, a gdzie indziej bywają kłopotliwe. Celem była gra, która zachowuje się tak samo na telefonie, tablecie i komputerze i nie kończą się w niej obrazy do ułożenia.

02 / rozwiązanie

Puzzle z kafelków na trzech poziomach trudności

Gracz wybiera obraz z API Pexels, ustawia poziom (9×13, 15×23 lub 20×30 kafelków) i przeciąga elementy na miejsce, gdy działa stoper i licznik ruchów. Grę można wstrzymać i zresetować, a widać też postęp. Stan gry trzyma Pinia; trasa serwerowa Nitro pośredniczy w zapytaniach do Pexels, więc klucz API zostaje na serwerze, a obok adaptera Pexels jest adapter do storage’u Supabase.

• [screenshot 1]

  [podpis]

• [screenshot 2]

  [podpis]

03 / architektura

Jak to działa

Nuxt 3 z Composition API Vue 3, podzielony na moduły: core (wspólne narzędzia, store, typy), game (strony, komponenty, logika) i ui (komponenty generyczne). Trasy serwerowe w /server/api pobierają obrazy przez interfejs adaptera. Vitest pokrywa testy jednostkowe, Playwright przepływy end-to-end, a hooki pre-commit Husky uruchamiają linter.

04 / wyniki

Efekt

05 / wnioski

Czego się nauczyłem

• Trzymanie logiki gry w osobnym module, oddzielnie od generycznych komponentów UI, pozwala testować ją zwykłymi testami jednostkowymi.
• Źródło obrazów jest schowane za adapterem, więc Pexels i storage Supabase są dla gry wymienne.