coderscamp2020 / coderscamp2020.project.javascript.starwarsquiz Goto Github PK

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Wykonanie zaplanowanych zadań (dodane do Projects Tydzień III) zapewni możliwość wyboru trybu gry.

Dodatkowe uwagi

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Umieszczenie loga Star Wars w miejscu docelowym w pliku .html
• Kliknięcie na logo powinno przeładowywać stronę.

Dodatkowe uwagi

Komponent wyświetlający wszystkie elementy gry. W tym zadaniu należy połączyć ze sobą wcześniej wykonaną logikę i komponenty interfejsu użytkownika w spójną i działającą całość.

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Komponent wyświetla przygotowane wcześniej komponenty.
• Komponent umożliwia wywołanie funkcji wyświetlającej określone pytanie.
• Komponent umożliwia wywołanie funkcji wskazującej odpowiedź na wyświetlane na pytanie.
• Komponent umożliwia wywołanie funkcji pokazującej okno modalne konca gry.
• Komponent zdefiniowany w odrębnym pliku .js
• Działanie komponentu zostało pokryte testami jednostkowymi.
• Wygląd wg. projektu:
  

Dodatkowe uwagi

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Komponent zdefiniowany w odrębnym pliku .js
• Komponent przyjmuje na wejściu odpowiedzi na pytanie.
• Komponent przyjmuje na wejściu oznaczenie, która odpowiedź jest prawidłowa.
• Komponent wyświetla odpowiednio przekazane odpowiedzi.
  
• Komponent po wyborze odpowiedzi wykonuje przyjmowany na wejściu callback (funkcję), której argumentem jest wybrana odpowiedź i oznaczenie czy była dobra czy zła.
• Działanie komponentu zostało pokryte testami jednostkowymi.
• Wygląd pojedyńczej odpowiedzi w komponencie wg. projektu:
  
• Po najechaniu myszką na odpowiedź wygląd:
  
• Po kliknięciu na złą odpowiedź wygląd:
  
• Po kliknięciu na dobrą odpowiedź wygląd:
  

Dodatkowe uwagi

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Pobrać obraz tła z projektu z Figma.
• Ustawić obraz jako tło całej aplikacji.
• Tło musi zawsze pokrywać cały ekran, niezależnie od tego ile zajmuje zawartość aplikacji.

Dodatkowe uwagi

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Komponent zdefiniowany w odrębnym pliku .js
• Komponent przyjmuje na wejściu opisową nazwę trybu gry, np. 'Who is this character?'
• Komponent wyświetla przekazany napis po napisie MODE.
• Działanie komponentu zostało pokryte testami jednostkowymi.
• Wygląd komponentu wg. projektu:
  

Dodatkowe uwagi

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Funkcja zwracająca obiekt reprezentujący gracza automatycznego.
• Funkcja wyznacza odpowiedź gracza w sposób losowy (lub inny - zdefiniowany przez zespół).
• Obiekt gracza pozwala zadać graczowi pytanie oraz udzielić odpowiedzi na zadane pytanie.
• Obiekt po zadaniu i udzieleniu pytania wykonuje funkcje (callbacki) informujące o zadaniu pytania / udzieleniu odpowiedzi.
• Po zadaniu pytania obiekt od razu powinien wyznaczyć odpowiedź i jej udzielić. Jest to niezależne od szybkości odpowiedzi człowieka.
• Działanie komponentu pokryte testami jednostkowymi.

Dodatkowe uwagi

Oznacz przeprowadzane daily w każdym z dni:

• Dzień 1
• Dzień 2
• Dzień 3
• Dzień 4
• Dzień 5
• Dzień 6
• Dzień 7

Przeprowadzenie daily to poproszenie na Discord o raport każdego dnia. I wykonanie ewentualnych akcji, aby pomóc w powodzeniu projektu.

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Funkcja zwracająca obiekt reprezentujący gracza - człowieka.
• Obiekt gracza pozwala zadać graczowi pytanie oraz udzielić odpowiedzi na zadane pytanie.
• Obiekt po zadaniu i udzieleniu pytania wykonuje funkcje (callbacki) informujące o zadaniu pytania / udzieleniu odpowiedzi.
• Działanie komponentu pokryte testami jednostkowymi.

Dodatkowe uwagi

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Komponent wyświetla przygotowane wcześniej komponenty.
• Komponent wyświetla Logo Star Wars.
• Komponent wyświetla Menu Główne.
• Komponent wyświetla przykładowy obrazek do odgadnięcia.
• Komponent wyświetla zasady gry.
• Komponent wyświetla dwa przyciski.
• Przycisk prawy to zawsze "PLAY THE GAME".
• Przycisk lewy to "Hall of fame", po naciśnięciu zmienia widok zasad gry na ranking graczy.
• Po naciśnięciu przycisku "Hall of fame" Komponent wyświetla ranking graczy wybranego trybu gry.
• Po naciśnięciu przycisku "Hall of fame" zmienia się w przycisk "Rules", którego naciśnięcie ponownie pokaże zasady wybranego trybu gry.
• Działanie komponentu pokryte testami jednostkowymi.
• Wygląd komponentu wg. projektu:
  
  

Dodatkowe uwagi

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Komponent zdefiniowany w odrębnym pliku .js
• Komponent przyjmuje na wejściu posortowaną listę 3 najlepszych wyników dla danego trybu gry. Wynik zawiera imię gracza oraz punktację.
• Komponent wyświetla przekazaną listę rankingową.
• Działanie komponentu zostało pokryte testami jednostkowymi.
• Wygląd komponentu wg. projektu:
  

Dodatkowe uwagi

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Funkcja pozwalająca zapisać nick gracza i jego punktację w LocalStorage przeglądarki.
• Funkcja pozwalająca odczytać z local storage ranking dla danego trybu gry.
• Ranking powinien nie być globalny, ale oddzielny dla każdego trybu gry.
• Działanie komponentu pokryte testami jednostkowymi.

Dodatkowe uwagi

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Funkcja generująca nowe pytanie dla podanego trybu gry (People / Starships / Vehicles)
• Funkcja działa w następujący sposób:

1. Generuje 4 losowe i niepowtarzające się id w zakresie zasobów dla danego trybu. (Np. dla People jest to 1-82, czyli tyle ile w SWApi mamy zasobów dla people)
2. Z wcześniej wygenerowanych 4 liczb wybiera losowo jedną, która będzie prawidłową odpowiedzią.
3. Dla każdej z liczb pobieramy z SWApi zasób, np. dla liczby 50 i trybu People https://swapi.dev/api/people/50/
4. Dla prawidłowej odpowiedzi pobieramy obraz, wykorzystując FETCH API i ścieżkę (np. dla trybu People) static/assets/img/modes/people/${id}.jpg
5. Obraz należy zakodować jako string w formacie base64.

• Obiekt pytania powinien wyglądać następująco (z pobranych wcześniej danych):

  {
  "image": "base64imagestring",
  "answers": ["Luke Skywalker", "Leia Organa", "Darth Vader", "Darth Sidious"],
  "rightAnswer": "Darth Vader"
  }
  

• Testy jednostkowe dla implementowanej funkcjonalności. Poradzić się mentora w jaki sposób testować połączenie z SWApi.

Dodatkowe uwagi

UWAGA!
Jest to zadanie dodatkowe, jeśli się na nie decydujesz - pamiętaj, aby zadbać, żeby Twoje konto nie zostało obciążone za korzystanie z Google Cloud Platform.

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Założenie konta Google Cloud. Załóż nowe konto Google Cloud (jeśli go jeszcze nie masz). Google Cloud daje tzw. okres Free Trial na 90 dni. Więcej tutaj: https://cloud.google.com/free/docs/gcp-free-tier Z pewnością wystarczy to na okres realizacji tego projektu. Konto z Free Trial powinno zapewnić brak kosztów tak jak mówi cytowana strona:

To complete your Free Trial signup, you must provide a credit card or other payment method to set up a Cloud Billing account and verify your identity. Don't worry, setting up a Cloud Billing account does not enable us to charge you. You are not charged unless you explicitly enable billing by upgrading your Cloud Billing account to a paid account. You can upgrade to a paid account at any time during the trial. After you have upgraded, you can still use any remaining credits (within the 90-day period).

Możecie posiłkować się instrukcją dostępną tutaj: https://flyonthecloud.com/pl/blog/konto-gcp-rejestracja-konfiguracja/#Zakladanie_konta_Google_Cloud_Platform

• Wykonanie kroków https://cloud.google.com/vision/docs/setup.
• Uzyskanie ApiKey dla utworzonego projektu na tym ekranie: https://console.cloud.google.com/apis/credentials
• Podpięcie karty do konta Google. Jest to wymagane, ale jeśli korzystamy z planu darmowego, Google nie spowoduje żadnych kosztów.
• Wykonanie przykładowego zapytania do Google Vision API z poziomu kodu JavaScript.

Dodatkowe uwagi

Zadanie jest do wykonania przez wszystkich członków zespołu.
Możecie też organizować spotkanie z mentorem i zrobić to wszyscy razem.
Każdy będzie używał swojego własnego klucza do działania aplikacji.
W celu potwierdzenia wykonania zadania każdy członek zespołu powinien zamieścić screenshot wykonanego przykładowego zapytania do Google Vision API.

ApiKey, który wykorzystacie do dema z powodów bezpieczeństwa nie powinien zostać commitowany do repozytorium.
Dlatego też aplikacja posiada ekran Settings, gdzie trzeba go wprowadzić i nie jest nigdzie zapisywany, oprócz w pamięci aplikacji na czas korzystania.

Pomocna może być także ta instrukcja:
https://support.foxtrotalliance.com/hc/en-us/articles/360024282351-How-To-Use-Google-Cloud-Vision-API-OCR-Image-Analysis-

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Komponent zdefiniowany w odrębnym pliku .js
• Komponent przyjmuje na wejściu napis do wyświetlenia.
• Komponent wyświetla przekazany napis, wyśrodkowany i dużymi literami.
• Działanie komponentu zostało pokryte testami jednostkowymi.
• Wygląd komponentu wg. projektu:
  

Dodatkowe uwagi

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Rozpoznawanie przekazanego do funkcji obrazu poprzez Google Vision API.
• Do Google Vision API powinien być wysyłany obraz w formacie Base64.
• Funkcja powinna zwracać jedno najbardziej trafne rozpoznanie Google Vision API.
• Działanie komponentu pokryte testami jednostkowymi. Warto poradzić się mentora w jaki sposób przetestować. Ponieważ łączymy się z zewnętrznym serwisem jakim jest Google Vision API.

Dodatkowe uwagi

Wykonać dopiero po zadaniu o nazwie Google Vision API | Uzyskanie klucza dostępu i wykonanie przykładowego zapytania.

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Komponent zdefiniowany w odrębnym pliku .js
• Komponent umożliwia wyświetlenie okna modalnego z zawartością przekazaną jako inny komponent na wejściu do funkcji.
• Komponent wyświetla przekazaną zawartość.
• Komponent przyjmuje także funkcję, której wywołanie powoduje zamknięcie okna.
• Działanie komponentu zostało pokryte testami jednostkowymi.
• Okno powinno wyświetlić się na środku ekranu.
• Okno powinno się wyświetlić nad całą resztą aplikacji.
• Reszta aplikacji pod oknem powinna zostać przyciemniona.
• Wygląd komponentu wg. projektu:

Dodatkowe uwagi

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Komponent zdefiniowany w odrębnym pliku .js
• Komponent przyjmuje na wejściu obraz w formacie base64.
• Komponent wyświetla przekazany obraz i odpowiednio go pozycjonuje.
• Komponent przeznaczony jest dla trybu People, gdyż inne tryby mogą mieć obrazy wymagające innego pozycjonowania.
• Działanie komponentu zostało pokryte testami jednostkowymi.
• Wygląd komponentu wg. projektu:
  

Dodatkowe uwagi

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Funkcja przyjmuje odpowiedź prawidłową i odpowiedź udzieloną przez gracza (człowieka lub komputer).
• Funkcja zwraca informację czy odpowiedź jest prawidłowa, czy błędna.
• Wewnątrz funkcji należy zaproponować i zaimplementować algorytm decydujący o poprawności odpowiedzi.
• Działanie komponentu pokryte testami jednostkowymi.

Dodatkowe uwagi

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Komponent zdefiniowany w odrębnym pliku .js.
• Style dla komponentu zdefinowane w odrębnym pliku .css i dołączone do projektu.
• Menu zawiera 3 opcje: People, Vehicles, Spaceships.
• Opcja aktualnie wybrana jest odpowiednio wyróżniona.
• Umożliwić przekazanie do komponentu funkcji callback dla wybranych opcji.
• Po wyborze danej opcji komponent powinien o tym informować "na zewnątrz" poprzez wywołanie funkcji działającej jak callback.
• Działanie komponentu zostało pokryte testami jednostkowymi.
• Komponent powinien zostać wyświetlony w miejscu docelowym, lub gdy nie jest ono jeszcze gotowe, to w odrębnym pliku .html.
• Wygląd komponentu wg. projektu:
  

Dodatkowe uwagi

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Wykonanie zaplanowanych zadań (dodane do Projects Tydzień III) zapewni responsywność aplikacji.

Dodatkowe uwagi

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Komponent zdefiniowany w odrębnym pliku .js
• Komponent przyjmuje na wejściu listę odpowiedzi gracza, listę odpowiedzi Komputera wraz z oznaczeniami czy odpowiedzi były poprawne.
• Komponent wyświetla napis, w którym podsumowuje grę oraz liczbę poprawnych odpowiedzi i liczbę pytań, jakie zostały zadane każdemu z graczy. Przykładowy tekst to: The force is strong in you young Padawan! During 1 minute you have answered 10 / 23 questions. And Google quessed 5 / 23.
• Komponent wyświetla listę szczegółowych odpowiedzi. Lista powinna być przewijana pionowo i mieć ograniczoną wysokość.
• Element listy szczegółowych odpowiedzi wygląda, jak pokazano poniżej. Zawiera odgadywany obraz, odpowiedź gracza i odpowiedź Komputera. Czerwony kolor oznacza nieprawidłową odpowiedź, a zielony prawidłową.
  
• Komponent wyświetla input, do którego można wpisać nick gracza. Wypełnienie pola jest obowiązkowe.
• Komponent przyjmuje na wejściu także funkcję, która zostanie wywołana po naciśnięciu przycisku.
• Naciśnięcie przycisku powoduje zamknięcie okna.
• Komponent wyświetla przycisk, którego naciśnięcie powoduje wywołanie przekazanej funkcji. Funkcja jako argument otrzymuje wpisany nick gracza oraz jego punktację.
• Działanie komponentu zostało pokryte testami jednostkowymi.
• Wygląd komponentu wg. projektu:
  

Dodatkowe uwagi

Samo wyświetlanie okna jest realizowane w zadaniu o nazwie UI Komponent | Okno modalne.

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Komponent zdefiniowany w odrębnym pliku .js
• Działanie komponentu zostało pokryte testami jednostkowymi. Zastanów się sam lub wspólnie z mentorem jak przetestować działanie nie używając funkcji operujących na prawdziwym czasie. Jak zapewne wiesz z kursu, wszystkie testy jednostkowe aplikacji powinny trwać około sekundy.
• Komponent powinien pokazywać cały zapalony miecz świetlny, gdy jeszcze nie upłynęła ani sekunda czasu.
• Komponent nie powinien pokazywać zapalonego miecza świetlnego, gdy upłynął już cały czas.
• Zapalone ostrze miecza zmniejsza się co wyznaczoną jednostkę czasu.
• Wygląd komponentu wg. projektu:
  

Dodatkowe uwagi

• Mile widziane np. dodatkowe efekty dźwiękowe.

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Komponent zdefiniowany w odrębnym pliku .js
• Komponent przyjmuje na wejściu napis do wyświetlenia.
• Komponent wyświetla przekazany napis.
• Komponent wyświetla nagłówek "Mode Rules".
• Komponent wyświetla odpowiednią ikonę na lewo od nagłówka.
• Działanie komponentu zostało pokryte testami jednostkowymi.
• Wygląd komponentu wg. projektu:
  

Dodatkowe uwagi

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Komponent zdefiniowany w odrębnym pliku .js
• Działanie komponentu zostało pokryte testami jednostkowymi. Zastanów się sam lub wspólnie z mentorem jak przetestować działanie nie używając funkcji operujących na prawdziwym czasie. Jak zapewne wiesz z kursu, wszystkie testy jednostkowe aplikacji powinny trwać około sekundy.
• Pokazany czas do końca zmniejsza się co wyznaczoną jednostkę czasu.
• Wygląd komponentu wg. projektu:
  

Dodatkowe uwagi

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Rozpoczynanie rozgrywki.
• Generowanie pytań dla graczy.
• Odliczanie czasu do końca rozgrywki.
• Zadawanie pytań graczom.
• Zapisywanie odpowiedzi graczy.
• Informowanie o zakończeniu rozgrywki.
• Pokrycie działania testami jednostkowymi.

Dodatkowe uwagi

Przed wykonaniem powinny zostać zakończone zadania o nazwach:

• Logika | Weryfikowanie poprawności odpowiedzi
• Logika | Gracz Komputer - Losowe odpowiedzi
• Logika | Gracz - człowiek

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Komponent zdefiniowany w odrębnym pliku .js
• Komponent przyjmuje na wejściu napis i ikonę do wyświetlenia.
• Komponent wyświetla przekazany napis, dużymi literami.
• Komponent po lewej stronie wyświetla przekazaną ikonę.
• Działanie komponentu zostało pokryte testami jednostkowymi.
• Wygląd komponentu wg. projektu:
  

Dodatkowe uwagi

Kryteria akceptacji

Należy zweryfikować i skonsultować, a także ewentualnie uaktualnić przed rozpoczęciem prac nad zgłoszeniem.

• Funkcja zwracająca obiekt reprezentujący gracza automatycznego - google vision.
• Funkcja korzysta z zaimplementowanej wcześniej możliwości odpytywania Google Vision API o zadany obraz.
• Obiekt gracza pozwala zadać graczowi pytanie oraz udzielić odpowiedzi na zadane pytanie.
• Obiekt po zadaniu i udzieleniu pytania wykonuje funkcje (callbacki) informujące o zadaniu pytania / udzieleniu odpowiedzi.
• Po zadaniu pytania obiekt od razu powinien odpytać o obraz Google Vision API i udzielić odpowiedzi.
• Działanie komponentu pokryte testami jednostkowymi.

Dodatkowe uwagi

Wykonać dopiero po zadaniu o nazwie Logika | Google Vision API - rozpoznawanie obrazu