Frontend

Ogólny opis warstwy Frontend

Uruchamianie

Oficjalna domena: wmi-adventure.pl
Środowisko testowe: http://wmiadventure.westeurope.cloudapp.azure.com/

Środowisko developerskie

Uwaga: Aby aplikacja odpowiednio pobierała dane należy uruchomić również warstwę backend.

Docker

Komendy dla środowiska deweloperskiego w katalogu WMIAdventure/WMIAdventure/frontend/:

1. docker build -t wmiadventure_frontend . (budowanie)
2. docker run wmiadventure_frontend

Bez dockera

1. Jeśli nie mamy, instalujemy node js - link
2. Podrzebny również npm - link
3. npm install (przy pierwszym uruchomieniu)
4. npm start

Narzędzia

Node js

Node js to javascript, którego możemy używać poza przeglądarką - dokumentacja

React

React to biblioteka js, którą używamy do budowania frontendu Wmi Adventure - dokumentacja.

Webpack

Webpack to narzędzie pomagające zbudować aplikację webową z plików źródłowych - dokumentacja.

Npm modules

Npm pomaga w zarządzaniu bibliotekami js - dokumentacja.

Styled-components

Styled-components pozwala wygodnie stylować aplikację łącząc js ze składnią css - dokumentacja.

Eslint

Eslint pomaga zachować porządek w kodzie za pomocą dodatkowych reguł - dokumentacja.

Moduły

Edytor kart

Edytor kart służy do tworzenia kart, za pomocą których przebiega walka w trybie battle.
Edytor kart składa się z następujących komponentów:

/src
    /pages
        /creative
            /CardsCreator
            /CardsCreatorStart

• /CardsCreator - przedstawia widok, gdzie możemy stworzyć lub edytować kartę
• /CardsCreatorStart - przedstawia widok, gdzie wybieramy czy chcemy stworzyć nową kartę czy edytować już istniejącą