Zespół pracował w ramach kursu CodersCamp. Aplikację wykonali uczestnicy kursu z pomocą mentora. Zachęcamy do odwiedzenia profili członków zespołu, w celu zapoznania się z ich portfolio.
Celem projektu było dostarczenie aplikacji pozwalającej sprawdzić swoją wiedzę o uczniach, nauczycielach i domach Hogwartu.
Aplikacja została wykonana wg dostarczonych przez organizatorów CodersCamp wymagań.
Na głównej stronie znajdują się przyciski prowadzące do rozpoczęcia gry, zasad oraz rankingu z najlepszymi uczestnikami. Również tutaj w górnym prawym rogu, pojawia się opcja wyboru języka.
W tej zakładce należy wybrać tryb gry oraz wpisać swój nick(bez niego gra się nie uruchomi):
- Students — rozpoznawanie postaci uczniów z Hogwartu na podstawie wyświetlanych zdjęć
- Staff — rozpoznawanie postaci nauczycieli i innych pracowników Hogwartu na podstawie wyświetlanych zdjęć
- Houses— rozpoznawanie do jakiego domu przynależy dana postać
Rozgrywka polega na odgadywaniu kto wyświetla się na obrazie lub odpowiadaniu do którego domu postać przynależy. Do wyboru są 3 opcje, z czego zawsze tylko jedna jest prawidłowa.Za każdą poprawną odpowiedź gracz dostaje 10pkt. Czas pozostały do końca rozgrywki odlicza gasnący płomień na różdżce oraz timer.
- wpisanie nazwy użytkownika oraz wybór trybu quizu (Students, Staff, Houses),
- Po rozpoczęciu gry rozpoczyna się odliczanie czasu (1 minuty).
- Zadaniem gracza jest odpowiedzieć na jak najwięcej pytań w ciągu ustalonego czasu. (max. 20 pytań)
- W trakcie trwania quizu gasnący płomień na różdżce oraz timer pokazuje, ile jeszcze czasu zostało. Po wybraniu odpowiedzi zostaje ukazane przez dwie sekundy czy odpowiedź była dobra czy zła. Następnie pytanie zostaje zmienione na kolejne i tak do końca czasu.
- Pytania są generowane w następujący sposób:
- zostaje pobrany losowy zasób z danego trybu (np students)
- dla wylosowanego zasobu zostanie pobrane zdjęcie
- losowane są 3 odpowiedzi z zapytania do HarryPotter API - jedna poprawna.
- Pytania nie powtarzają się
- Po ukończeniu czasu lub wykorzystaniu wszystkich pytań, wynik gracza zapisywany jest w rankingu dla danej przeglądarki (LocalStorage) i wyświetlana jest strona z wynikiem gracza oraz trzema najlepszymi wynikami w danej kategorii.
- w zakładce ranking pokazane są najlepsze wyniki ze wszystkich trzech kategorii.
W zakładce Rules wytłumaczone są zasady gry.
'Naciśnij przycisk Start, następnie wpisz nazwę gracza i wybierz jedną z trzech kategorii. Odpowiadaj na pytania klikając w jedną z trzech odpowiedzi. Otrzymasz: 10 pkt za każdą poprawną odpowiedź; 0 za każdą błędną. Pamiętaj! Masz minutę na udzielenie jak największej liczby odpowiedzi.'
Po przejściu do 'Best Scores' pokazywane są najlepsze wyniki graczy, grających na danym komputerze. Wyniki są pokazywane dla każdego z trybów. Dodatkowo po ukończeniu gry, na stronie z wynikiem znajduje się lista trzech najlepszych graczy z kategorii wybranej przez użytkownika.
Nasz zespół zrealizował także responsywność stron oraz możliwość wyboru języka: polski lub angielski
- Nasza aplikacja została wdrożona na GitHub Pages.
- Aplikacja jest budowana przy pomocy narzędzia Parcel.
- Biorąc pod uwagę fakt, iż nasza aplikacja jest implementowana przez kilku deweloperów, zdecydowaliśmy się na użycie biblioteki Prettier, służącej do formatowania kodu. Niniejsza biblioteka jest świetnym narzędziem, który wyłapuje błędy składni, automatycznie poprawia linie kodu według zdefiniowanej konfiguracji.
- Zdecydowaliśmy się również na użycie narzędzia statycznej analizy kodu ESLint, który identyfikuje problematyczne fragmenty kodu JS. Obejmuje jakość kodu oraz problemy ze stylem kodowania.
- Nasz projekt wykorzystuje także transpilator kodu JS Babel, który przekształca kod JS do takiej postaci, aby był kompatybilny ze wszystkimi przeglądarkami, a także zadziałał na starszych wersjach przeglądarek.
- HTML
- SCSS
- JavaScript
- Node.js
- Harry Potter API
- Visual Studio Code
- Git
- Figma
- Trello
Aby uruchomić aplikację na lokalnej maszynie, wykonaj następujące kroki:
- Sklonuj sobie repozytorium.
- Otwórz repozytorium w ulubionym edytorze.
- Zainstaluj zależności za pomocą komendy: npm install
- Utwórz w głównym katalogu plik o nazwie: .env i następnie wklej następującą treść: BASE_API_URL: 'http://hp-api.herokuapp.com/', QUIZ_MAX_TIME: 60
- Wystartuj serwer za pomocą komendy: npm run start
Aplikacja będzie dostępna pod adresem localhost:8080
