# CryptoCards **Zdecentralizowana aplikacja (dApp) do rozgrywania wieloosobowych gier karcianych (pan) na sieci blockchain (aktualnie: Ethereum Rinkeby)** _Praca magisterska: Adam Drabik - Platforma do udostępniania gier w formie dApps na platformach blockchain_ --- ## Korzystanie z aplikacji webowej Projekt został przygotowany do wersji produkcyjnej na sieci testowej Rinkeby i jest dostępny publicznie. Poniżej instukacja korzystania. > **Warning** > UWAGA! (wrzesień 2022) testowa sieć Etherum Rinkeby zostanie wkrótce zdeprecjonowana (shutdown Q2/Q3 2023), co może uniemożliwić korzystanie z aplikacji. W tym wypadku należy uruchomić projekt lokalnie (patrz rodział _1. Uruchomienie projektu (lokalnie)_) 1. Otwórz aplikację wchodzą na stronę: [CryptoCards](https://crypto-cards-game.netlify.app) 2. Pobierz rozszerzenie do przeglądarki MetaMask (zarejestruj swoje konto do obsługi portfela kryptowalutowego) 3. W ustawieniach MetaMask przejdź do zaawansowanych i zaznacz opcję wyświetlania sieci testowych 4. W panelu MetaMask wybierz sieć _Rinkeby Test Network_ 5. W panelu MetaMask kliknij opcję _Connect_, aby zezwolić aplikacji webowej na interakcję z twoim portfelem 6. Odśwież stronę w przeglądarce, a następnie w interfejsie aplikacji klienta, w prawym dolnym rogu wciśnij przycisk _Connect_, aby połączyć aplikację z MetaMask. 7. Jeżeli wszystko przebiegło pomyślnie, widżet w aplikacji klienta powinien wyświetlić zielony napis _Connected_, adres portfela oraz balans konta Metamask 8. W celu doładowania portfela kryptowalutą ETH przejdź na stronę [https://faucets.chain.link/rinkeby](https://faucets.chain.link/rinkeby) i wklej adres twojego portfela wyświetlanego w MetaMask 9. Teraz możesz stworzyć nową grę lub dołączyć do wcześniej wygenerowanych 10. Jeżeli nie ma dostępnych graczy, możesz rozegrać partię ze sobą. W tym celu należy powtórzyć powyższe punkty na innym urządzeniu lub uruchomić drugą przeglądarkę (lub kolejne konto przeglądarkowe - możliwe w Google Chrome), gdzie należy utworzyć inne konto MetaMask. 11. Każda interakcja ze smart kontrakem wymaga potwierdzenia transakcji z pomocą MetaMask. 12. Miłej rozgrywki! --- ## 1. Uruchomienie projektu (lokalnie) W celu uruchomienia komplikacji kodu Solidity do kodu maszynowego sieci Ethereum, deployowania kontraktów do sieci Rinkeby, przeprowadzenia testów, uruchomienia symulacji, analizy danych symulacji aplikacji na lokalnej sieci ganache. 1. Zainstaluj środowisko Node.js oraz npm (Node Package Manager) 2. Wywołaj komendę **npm install** w głównym folderze aplikacji (komenda jednorazowa - do zaktualizowania modułów używać komendy **npm update**) 3. Skompiluj kontrakty komendą **npm run build** 4. Uruchom testy komendą **npm run test** 5. Uruchom symulator komendą **npm run simulation** (symulator można konfigurować edytując parametry funkcji _start()_ w pliku _/analytics/simulation.js_) 6. Uruchom analitykę zasymulowanych danych komendą **npm run analyzer** 7. Sprawdź pozostałe komendy w pliku **_package.json_** pod atrybutem **_"scripts"_** --- ## 2. Uruchomienie sieci Ethereum (lokalnej) 0. (Jeżeli wcześniej nie wykonano) Skompiluj smart kontrakty (patrz rozdział _1. Uruchomienie projektu (punkty od 1 do 3)_) 1. Zainstaluj środowisko Ganache do uruchomienia lokalnej sieci blockchain wpisując komendę **npm install -g ganache-cli** 2. Uruchom lokalną sieć komendą **ganache-cli** będąc w głowym folderze projektu 3. Zapisz (np. w notatniku) wyświetlonych w terminalu listę prywatnych kluczy _(Private Keys)_ wygenerowanych 10 kont testowych (każde posiada balans 100ETH). 4. Skopiuj wartość parametru _Mnemonic_ wyświetlonego w terminalu w zakładce _HD Wallet_. 5. Wkej _Mnemonic_ jako wartość parametru _LOCAL_MNEMONIC_ po znaku _=_ w pliku środowiskowym _.env_ (np. _LOCAL_MNEMONIC=\_chat bind patient square you stuff bless sunny cloud sense limit steak_) 6. Deployuj wcześniej zbudowane kontrakty do lokalnej sieci ganache wywołując komendą **npm run deploy** w nowej karcie terminalu (nie zamykaj okna terminal z uruchomioną siecią ganache) --- ## 3. Uruchomienie aplikacji klienta (lokalnej) 0. Uruchom lokalną sieć Ethereum (patrz rozdział _2. Uruchomienie lokalnej sieci Ethereum_) 1. W nowym oknie terminalu, przejdź do folderu _client_ i wywołaj komendę **npm install** w (komenda jednorazowa) 2. Wywołaj komendę **npm start** w folderze _client_ 3. W przeglądarce wejdź na adres **[localhost:3000](http://localhost:3000)** 4. Pobierz rozszerzenie do przeglądarki MetaMask (zarejestruj swoje konto do obsługi portfela kryptowalutowego) 5. W ustawieniach MetaMask przejdź do zaawansowanych i zaznacz opcję wyświetlania sieci testowych 6. W panelu MetaMask wybierz sieć _Localhost 8545_ 7. W panelu MetaMask kliknij ikonę menu w prawy górnym rogu, wybierz opcję _Import Account_ o typie _Private Key_ i wklej wcześniej zapisany adres portfela (_punkt 2.3_) 8. Po zaimportowaniu konta, w MetaMask kliknij opcję _Connect_, będąc w aplikacji klienta pod adresem **localhost:3000**, aby zezwolić aplikacji webowej na interakcję z twoim portfelem 9. Odśwież stronę w przeglądarce, a następnie w interfejsie aplikacji klienta, w prawym dolnym rogu wciśnij przycisk _Connect_, aby połączyć aplikację z MetaMask. 10. Jeżeli wszystko przebiegło pomyślnie, widżet w aplikacji klienta powinien wyświetlić zielony napis _Connected_, adres użytego portfela oraz balans konta, taki sam, jak w MetaMask (ok. 100ETH w zależności od wybranego konta z sieci lokalnej ganache) 11. Teraz możesz stworzyć nową grę lub dołączyć do nowo wygenerowanej (jej właścicielem jest pierwszy adres wyświetlony w terminalu podczas uruchamiania lokalnej sieci). 12. Aby rozegrać partię należy uruchomić drugą przeglądarkę (lub kolejne konto przeglądarkowe - możliwe w Google Chrome), powtórzyć instalację i rejestrację MetaMask, następie zaimportować inny konto (patrz _punkt 2.3_) i dołączyć do tej samej gry na dwóch przeglądarkach z innymi kontami. 13. Każda interakcja ze smart kontrakem wymaga potwierdzenia transakcji z pomocą MetaMask. 14. Miłej rozgrywki! --- ### (Dodatek) 4. API + GUI W celu ręcznego testowania funkcjonalności aplikacji za pomocą interfejsu Remix 1. Uruchom aplikację [Remix Ethereum IDE](https://remix.ethereum.org/) w przeglądarce 2. W **File Explorer** (1 ikona na lewym pasku nawigacyjnym) przejdź do folderu **_contracts_** 3. Dla każdego pliku **.sol** w folderze projektu **_/ethereum/contracts/_**, w aplikacji Remix: - Utwórz nowy plik **_[NAZWA_KONTRAKTU].sol_** - Skopiuj kod z pliku kontraktu i wklej do nowo utworzonego pliku - Skompluj kontakty: - Przejdź do zakładki **Solidity Compiler** (2 ikona na lewym pasku nawigacyjnym) - Wybierz kompilator w wersji **0.8.10** - Uruchom kompilację wciskając przycisk **Compile \*.sol** 4. Przejdź do zakładki **Deploy & Run Transactions** (3 ikona na lewym pasku nawigacyjnym) 5. Ustaw środowisko (Environment) na **JavaScript VM** 6. Wybierz kontrakt **Factory** 7. Uruchom kontrakt wciskając przycisk **Deploy** 8. Poniżej, pod zakładką **_Deployed Contracts_** rozszerz utworzony kontrakt wciskając strzałkę 9. Stwórz nową poczekalnię podając nazwę **_(string name)_** oraz kwotę wejścia do poczekalni **_(uint bet)_**, a następnie wciskając przycisk **createLobby** 10. Wywołaj funkcję **getLobbies** i skopiuj adres nowo utworzonej poczekalni np. **_0x5C9eb5D6a6C2c1B3EFc52255C0b356f116f6f66D_** 11. Wybierz inny **Contract**, tym razem **Lobby** 12. Wklej adres poczekalni w polu **At Address** i wciśnij przycisk 13. Poniżej, pod zakładką **_Deployed Contracts_** rozszerz utworzony kontrakt wciskając strzałkę 14. Testuj funkcjonalności kontraktu **Lobby** (poczekalni) Testując niektóre funkcjonalności, oznaczone kolorem czerownym, czyli tzw. payable - wymagające przesłania kryptowaluty, należy pamiętać o przesyłaniu pieniędzy. Przed wywołaniem metody należy wcześniej podać kwotę, jaką chce się wysłać w transakcji (np. wywołując **_lobbyJoin_** należy podać ustawioną kwotę **bet** poczekalni). Wartość **WEI** lub **ETH** należy ustawiać w zakładce **Value**. Aplikacja udostępnia 10 portfeli z kwotą 100 ETH na każdym z nich. ---