Zespół pracował w ramach kursu CodersCamp. Aplikację wykonali uczestnicy kursu przy pomocy mentora. Zachęcamy do odwiedzenia profili członków zespołu, w celu zapoznania się z ich portfolio.
Mentor: Hubert Kawałek
Uczestnicy:
CodersCamp (coderscamp.edu.pl) - Największy otwarty kurs programowania webowego
Wersja demonstracyjna aplikacji jest dostępna TUTAJ.
Celem projektu było napisanie aplikacji wykorzystującej dotychczas nabytą wiedzę z następujących technologi: html, css, javascript, typescript. Zespół projektowy zdecydował się na aplikacje - gra w szachy z motywem gry Cyberpunk 2077. Aplikacja umożliwia grę w szachy, rywalizację z graczem i komputerem umożliwiając grę w wyznacznym czasie.
Aplikacja została wykonana wg dostarczonych przez organizatorów CodersCamp wymagań. Szablon projektu dostępny jest TUTAJ.
W menu głównym należy wybrać tryb gry, czas rozgrywki oraz wpisać imię gracza. Możliwe tryby gry:
- Computer — możliwość gry z komputerem
- Other user — możliwość gry z innym graczem
Następnie długość trwania gry rozgrywki dla jednego gracza. Możliwe opcje do wyboru:
- 3 min
- 5 min
- 10 min
- 30 min
Ostatnia opcja to podanie nazw graczy. Możliwe opcje do wyboru:
- Player1 - pole w którym użytkownik podaje swoją nazwę
- Player2 - pole w którym podajemy nazwę drugiego gracza. Pole to jest opcjonalne, nie wymaga wypełnienia w przypadku gry z komputerem
Zasady gry wyświetlane są w formie modalu z lewej strony po naciśnięciu przycisku RULES na ekranie menu głownego jak i również można podejrzeć je w trakcie rozgrywki.
Użytkowik w dowolnym momencie jest w stanie podejrzeć informacje dotyczące projektu. Zostały one przygotowane w formie modalu z prawej strony po naciśnięciu przycisku INFO na ekranie menu głownego jak i podczas rozgrywki.
Partie rozgrywa się na planszy nazywanej szachownicą. Szachownica składa się z 64 pól, na przemian białych i czarnych. Pola w pionie opisane są za pomocą cyfr od 1 do 8, natomiast pola w poziomie za pomocą liter od A do H. Opis alfanumeryczny pozwala na określenie współrzędnych każdej figury na szachownicy. Na szachownicy umieszczone są 32 bierki (w sześciu rodzajach, w tym po 8 pionów i 8 figur, łącznie 16 dla każdego z graczy). Celem gry jest danie mata, tzn. zagrożenie królowi przeciwnika usunięciem z dalszej rozgrywki („zbiciem”). Gra może zakończyć się na trzy sposoby.
- Wykonany zostaje szach-mat
- Skończy się czas rozgrywki dla jednej ze stron
- Wykonany zostaje pat
Aby wykonać ruch należy umieścić kursor na wybranej bierce. Następnie kliknać w celu wyświetlenia możliwych ruchów bierki. Na koniec wybrać jedno z podświetlonych pól, by przesunięcia bierki.
Aplikacja umożliwia sterowanie pionkami w języku polskim. W celu wykonania ruchu wywołujemy głosowo pole na jakim znajduje się pionek. Następnie wyświelane zostają możliwe ruchy wybranym pionkiem, a następnie podajemy pole na jakim ma stanąć pionek
Lekkim wizualnym zmianom uległ projekt dostarczony przez grafika.
Nasz zespół zrealizował także zadania dodatkowe, wykraczające poza zakres kursu
-
Utowrzony został szablon graficzny aplikacji w programie Figma.
-
Wykorzystaliśmy Web Speech API w celu umożliwieniu gry za pomocą głosem.
Jeśli chcesz pomóc, w dalszym rozwoju aplikacji, z chęcią przyjmiemy Twoje Pull Requesty.
W trakcie developmentu wykorzystujemy:
- TypeScript
- CSS & SCSS, do stylowania aplikacji
- HTML, do definiowania struktury aplikacji
Pozostałe narzędzia wspomagające pracę:
- Lodash do pracy z tablicami/obiektami
- Web speech API (SpeechRecognition, SpeechSynthesis)
Aby uruchomić aplikację na lokalnej maszynie, wykonaj następujące kroki:
- Zainstaluj zależności za pomocą komendy:
npm install - Wystartuj serwer developerski
npm run dev
Aplikacja będzie dostępna pod adresem localhost:8080/
Kod produkcyjny aplikacji umieszczamy w katalogu dist.
Dodając swoje 5 groszy do naszej aplikacji, pamiętaj o pokryciu kodu testami. Aby uruchomić testy aplikacji, wykonaj następujące kroki:
- Zainstaluj zależności za pomocą komendy:
npm install(jeśli nie zrobiłeś już tego wcześniej). - Uruchom testy, wykonując komendę:
npm run test. Testy z raportem pokrycia uruchomisz za pomocą:npm run test:cov.
Kod testów umieszczamy w katalogu test.
zmieni adres, z jakiego aplikacja będzie korzystać, aby łączyć się z SWApi. Domyślnie jest to zdefiniowane w pliku .env na wartość: https://swapi.dev/api.
Praca zespołu była organizowana przy użyciu narzędzi dostarczanych przez GitHub. Zadania opisywaliśmy za pomocą GitHub Issues i dzieliśmy czas ich wykonania na tygodnie za pomocą GitHub Projects. Każde z zadań było estymowane przez mentora, dzięki czemu staraliśmy się, aby liczba punktów przypadająca w danym tygodniu na każdą osobę w zespole była podobna. Jeśli chcesz zaproponować, jakąś zmianę w aplikacji, utwórz nowy Issue, wzorując się na poprzednich.