Zespół pracował w ramach kursu CodersCamp. Aplikację wykonali uczestnicy kursu przy pomocy mentora.
Mentor | |
---|---|
Hubert Kawałek (@htk4) |
Uczestnicy | |||
---|---|---|---|
Marta Mejer (@mmejer) | Tomasz Chojnacki (@tchojnacki) | ||
Tech Lead | Project Manager | ||
Justyna Skrajna (@jskrajna) | Kamil Dudek (@KamilDudek) | ||
Designer | Scrum Master |
Celem projektu było stworzenie gry platformowej dostępnej online. W tym celu wykorzystaliśmy darmowy pakiet grafik ze strony itch.io. Aplikacja została wykonana według wymagań dostarczonych przez organizatorów CodersCamp.
Menu główne stanowi zbiór przycisków przenoszących użytkownika do innych sekcji aplikacji.
Popup ze sterowaniem wyjaśnia użytkownikowi w jaki sposób poruszać się po poziomach oraz jak atakować przeciwników.
Widok spisu autorów przedstawia autorów projektu, mentora zespołu oraz zawiera odnośniki do stron repozytorium projektu i autora grafik.
Na tym ekranie użytkownik może wybrać poziom spośród odblokowanych, na którym będzie grał.
Postać użytkownika - król zaczyna rozgrywkę w miejscu drzwi wejściowych i musi dostać się do drugich drzwi pokonując po drodze przeciwników. Zgodnie z popupem wyjaśniającym sterowanie, gracz porusza się korzystając ze strzałek, a atakuje naciskając przycisk X na klawiaturze. Życie króla jest ograniczone i reprezentowane przez serduszka wyświetlane w lewym górnym rogu ekranu. Przeciwnicy - świnki, zaczynają gonić gracza po zauważeniu go oraz atakują gdy do niego dobiegną. Każdy atak świnki zmniejsza zdrowie króla o jeden, po straceniu wszystkich punktów życia gracz przegrywa poziom i musi go rozegrać od początku.
Z tego ekranu gracz może również powrócić do ekranu wyboru poziomu.
Do stworzenia aplikacji wykorzystaliśmy:
- JavaScript z biblioteką React
- Canvas API do stworzenia silnika gry
- CSS oraz Emotion, aby umieścić CSS w JS
- HTML
Pozostałe narzędzia wspomagające pracę to:
- Yarn - zarządzanie pakietami
- Vite - bundler
- Jest + React Testing Library - testowanie
- Storybook - do podglądu komponentów
- ESLint - linting
- Prettier - formatowanie plików
- VS Code - edytor tekstu
- Git - system kontroli wersji
- GitHub - hostowanie repozytorium i demo projektu
- Figma - mockupy
Aby uruchomić aplikację na lokalnej maszynie, wykonaj następujące kroki:
- Zainstaluj projekt za pomocą:
yarn install
- Uruchom serwer developerski:
yarn dev
Aby uruchomić testy aplikacji, wykonaj następujące kroki:
- Zainstaluj projekt za pomocą komendy:
yarn install
- Uruchom testy, wykonując komendę:
yarn test
(yarn test --coverage
aby wyświetlić informacje o pokryciu testami)
Aby uruchomić Storybook, wykonaj następujące kroki:
- Zainstaluj projekt za pomocą komendy:
yarn install
- Uruchom Storybook, wykonując komendę:
yarn storybook
Spośród członków zespołu wyznaczyliśmy osoby pełniące następujące role:
- Scrum Master: @KamilDudek
- rozpisywanie zadań poprzez GitHub Issues
- prowadzenie daily w trakcie spotkań na kanale głosowym
- Project Manager: @tchojnacki
- daily poprzez kanał tekstowy
- tworzenie dokumentacji
- Tech Lead: @mmejer
- przeprowadzanie code review
- pomoc innym członkom zespołu
Do organizacji wykorzystaliśmy rozwiązania dostarczane przez GitHub, głównie GitHub Issues oraz GitHub Projects. Pracę nad projektem podzieliliśmy na cztery tygodniowe sprinty, podczas których wykonywaliśmy daną część zadań rozpisanych uprzednio w zakładce Issues. Postęp nad zadaniami wizualizowaliśmy za pomocą tablicy kanban oferowanej jako funkcjonalność GitHub Projects. Kod integrowaliśmy do projektu otwierając pull requesty, w których zmiany musiały być zaakceptowane przez co najmniej dwóch członków zespołu. Członkowie wzajemnie wykonywali code review swoich rozwiązań. Zwracaliśmy również uwagę na pokrycie kodu testami.
Projekty interfejsu użytkownika wykonywaliśmy za pomocą narzędzia o nazwie Figma. Poszczególne widoki implementowaliśmy w oparciu o wykonane wcześniej projekty.
Dwa razy w tygodniu odbywały się zdalne spotkania zespołu. Dodatkowo, raz w tygodniu każdy uczestnik relacjonował postęp swoich prac oraz ewentualne problemy poprzez kanał tekstowy.