Mng 118 readme file

README.md

@@ -1,136 +1,83 @@
-**UWAGA! Zaczynając pracę nad projektem — nie róbcie forka.
-Jedna osoba z zespołu (np. Mentor) powinna użyć przycisku `Use this template` i dodać innych członków zespołu jako Collaborators do tego repozytorium.
-Mentorzy mogą dowolnie zmieniać zakres projektu lub zdecydować się na zupełnie inny temat.**
-
 # CodersCamp 2020 - Projekt TypeScript
-**CodersCamp (coderscamp.edu.pl) - Największy otwarty kurs programowania webowego** 
-
-![Szachy - Ekrany](./.github/images/SzachyEkrany.png)
-Proponowany projekt — Szachy (opis poniżej).
-
-### Zasady wykonywania projektu (wspólne dla wszystkich grup i mentorów): 
-
-##### W projekcie każdy z uczestników powinien zaprezentować praktyczną znajomość poniższych zagadnień związanych z TypeScript:
-- typy podstawowe
-- definiowanie własnych typów
-- składanie typów
-- typy / klasy / interfejsy
-- implementacja / dziedziczenie / kompozycja / implementacja interfejsu
-- modyfikatory dostępu 
-- typy generyczne
-- testy jednostkowe i TDD
-
-Do realizacji założeń projektowych nie używajcie żadnej biblioteki, która np. implementuje silnik szachów. Ten projekt ma za zadanie właśnie nauczyć jak planować takie systemy :) Wraz z mentorem spróbujcie się skupić na właściwej architekturze aplikacji i podziale odpowiedzialności. 
-Co więcej, coraz częściej w czasie rekrutacji programistów pojawia się etap "System Design" poleagający na dyskusji i projektowaniu rozwiązania jakiegoś prostego systemu. Częstym przykładem jest właśnie gra w szachy.
-W zadaniach dodatkowych jest gra przeciwko komputerowi - oczywiście AI nie jest zakresem kursu, więc tutaj możecie użyć jakiegoś gotowca lub zaimplementować własny prosty algorytm - proponujemy np. MINIMAX :)
-Powodzenia!
-
-##### W trakcie trwania projektu należy wyznaczyć w zespole następujące role
-tak jak opisano w przypadku poprzedniego projektu.
-
-Product Owner & Dev Manager odpowiada za ustalenie zadań dla zespołu, które umożliwią wykonanie aplikacji zgodnie z wymaganiami. 
-Oczywiście nie musi, a nawet nie powinien tego robić sam (nieoceniona będzie pomoc Tech Leadera i oczywiście opinia Klienta - pamiętajcie o jego cennym czasie i nie angażujcie w każdą dyskusję).
-Można zorganizować spotkanie osób pełniących role w zespole, albo nawet całego zespołu. 
-W tym projekcie dobrze też zacząć estymować zadania wspólnie z zespołem. Jednakże mentor może zaproponować swój tryb pracy.
-Skupcie się na jakości wykonania i pracy zespołowej. Niektóre wymagania mogą przypominać Wam poprzedni projekt, więc czasem może być warto wykorzystać już posiadaną wiedzę.
-
-##### Sposób oceny projektu (i wszystkich kolejnych projektów na CodersCamp)
-tak jak opisano w przypadku poprzedniego projektu.
-
-## Gra w Szachy
-Teraz przechodzimy do przykładowego projektu, który został przygotowany przez organizatorów kursu.
-Proponowany projekt pozwala na zastosowania większości umiejętności, jakie powinniście posiąść w trakcie przerabiania działu.
-Jednakże jeśli macie pomysł na projekt podobnej skali, który spełni opisane na górze wymagania i czujecie się na siłach
-w zdefiniowaniu funkcjonalności, przygotowaniu ekranów i podzieleniu go na zadania — to nic nie stoi na przeszkodzie,
-aby wykonać np. coś związanego z zainteresowaniami Waszej grupy :)
-Przykładem może być też jakaś inna gra — np. Chińczyk. Niech nic nie stoi na przeszkodzie waszej kreatywności.
-Pamiętajcie tylko, że czas jest ograniczony i musicie zdążyć z aplikacją do prezentacji. Powodzenia!
-
-Czas porzucić narrację CodersCamp i wcielić się w członka zespołu projektowego...
-
-### Założenia projektowe
-W trakcie projektu stajecie przed większym (lub mniejszym — jak kto woli) wyzwaniem.
-Teraz nie macie niestety ani linijki już gotowego kodu. Brak też podzielonych zadań. Swoją pracę zaczynacie w tzw. projekcie greenfield, czyli totalnie od zera.
-Pozwala to na większą dowolność, ale też wymaga na początku większego nakładu pracy i jest wąskim gardłem. 
-Jako zespół musicie podjąć odpowiednie decyzje na samym początku i postarać się jak najszybciej umożliwić pracę wielu osobom naraz.
-
-Szachy są coraz bardziej popularne wśród przedsiębiorców. Odbywają się nawet Mistrzostwa Polski dla osób prowadzące własne działalności.
-Niestety, obecna sytuacja z pandemią pokrzyżowała trochę plany zorganizowania kolejnych mistrzostw.
-Po sukcesie waszego ostatniego projektu wiele osób z tego środowiska usłyszało o waszych usługach.
-Dlatego wasz zespół został poproszony o przygotowanie mechanizmu szachów, który pomógłby w organizacji tych mistrzostw online.
-Oczywiście jest to o wiele większy projekt, dlatego Wy odpowiadacie tylko za sam mechanizm szachów w przeglądarce.
-Nie skupiacie się na kwestiach gry wielu graczy przez internet. Zostanie to na bazie waszego prototypu zrealizowanie później.
-
-Ponieważ aplikacja ma być sygnowana przez CodersCrew, spróbujcie przygotować ją zgodnie z identyfikacją wizualną stowarzyszenia - Brand Book znajdziecie [TUTAJ](https://www.behance.net/gallery/94155751/Brand-Book-Project). 
-Nie jest to konieczność, ale fajna możliwość wypróbowania swojej skuteczności z takim wymaganiem (które jest częste w praktyce). 
-
-
-Lista funkcjonalności, jakie należy zaimplementować w silniku gry:
-1. Ruchy wszystkich bierek (wykonanie ruchu, jak i pokazywanie możliwych):
-   - Pionek
-   - Hetman
-   - Wieża
-   - Goniec
-   - Król.
-1. Promowanie pionka na dowolną inną figurę (oprócz króla) na końcu planszy.
-1. Roszada: https://pl.wikipedia.org/wiki/Roszada
-1. Szachowanie króla: https://pl.wikipedia.org/wiki/Szach_(szachy)
-1. Szach mat: https://pl.wikipedia.org/wiki/Mat_(szachy)
-1. Kończenie gry przez Pat: https://www.chess.com/pl/article/view/czym-jest-pat-szachowe-terminy
-1. Bicie w przelocie: https://www.chess.com/pl/article/view/bicie-w-przelocie-specjalne-ruchy-w-szachach
-1. Możliwość cofania ruchów (aż do początkowego układu).
-
-Uwaga: Pamiętajcie, że na ruchy bierek, promocję pionka i możliwość roszady wpływa na szachowanie króla. Najlepiej zagrajcie kilka partii w zespole, żeby zapoznać się z tą domeną. No chyba, że macie w swoim zespole eksperta?
-Dokładnie poznajcie domenę, w jakiej działa wasze oprogramowanie, czyli grę w szachy, aby nie wprowadzić jakiegoś zachowania niezgodnego z zasadami i żeby nic nie przeoczyć. 
-Starajcie się przewidzieć przypadki brzegowe i zaimplementujcie do nich odpowiednie testy.
-
-**Jeśli macie w swoim zespole osobę chętną na przygotowanie designów, to także możecie UI zrobić kompletnie inaczej.**
-A jeśli nie, to możecie się wzorować na przedstawionych [TUTAJ - Link do Figma](https://www.figma.com/file/ZllWbpJCCCCKVl7QEfNWbl/CodersCamp2020.Project.TypeScript.Chess?node-id=4461%3A3896). 
-Jednakże brakuje takich rzeczy jak np. wczytywanie / zapisywanie partii, wyświetlanie możliwych ruchów, podświetlanie wybranego pionka, zaznaczenie szachowanego króla czy wybór podczas promowania pionka. Co powinniście zaprojektować w ramach wykonywania aplikacji. Na projekcie z Figmy znalazło się też kilka rzeczy związanych z dodatkowymi funkcjonalnościami. Szczegóły co będziecie realizować - ustalcie z klientem.
-
-Waszym zadaniem będzie zaimplementować aplikację, aby działała wg wymagań klienta, a także przygotować i wykonać
-wersję responsywną aplikacji (dostosowaną do wyświetlania na Tabletach i Telefonach — możecie przygotować najpierw projekt interfejsu, lub od razu przejść do implementacji).
-W celu zaprezentowania działania aplikacja musi być możliwa do odwiedzenia w internecie.
-Klient nie chce ponosić za to żadnych dodatkowych kosztów, dlatego należy wykorzystać jedną z usług oferujących darmowe
-uruchomienie takiej aplikacji (np. GitHub Pages lub Netlify).
-Klient wymaga także, aby aplikacja nie tylko działała, ale była odpowiednio pokryta testami.
-Naprawdę macie szczęście co do klienta! Wielu uważa testy za niepotrzebne i jedynie stratę pieniędzy.
-A co znaczy „odpowiednio pokryta”, to już należy właśnie ustalić z samym Klientem :) 
-
-## Możliwe usprawnienia i dodatkowe funkcjonalności:
-Jeśli starczy czasu, dla własnego rozwoju warto rozważyć wykonanie poniższych funkcjonalności. 
-
-1. Wczytywanie i zapisywanie stanu partii (szachownica, czas graczy itp.) - po wczytaniu musi być możliwe cofanie ruchów. Stan partii powinien zapisywać się automatycznie co wykonany ruch.
-1. Tworzenie nowej partii z aktualnego stanu partii. Gra nie może być zakończona.
-1. Tekstowe komentarze do gry (przykładowo):
-   - `Gracz Biały wykonał ruch "Koń z C1 na D3"`
-   - `Gracz Czarny dokonał promocji Pionka na Hetmana na polu A1. Szach białego Króla!`
-   - `Gracz Biały wykonał roszadę po stronie królowej.`
-1. Możliwość wyboru nieskończonego czasu gry lub szachów błyskawicznych (czas ograniczony dla każdego z graczy).
-1. Odliczanie czasu dla każdej ze stron (cofanie ruchu musi cofać czas do stanu sprzed ruchu) w przypadku szachów błyskawicznych.
-1. Dodatkowy czas doliczany do limitu czasowego gracza za każdy ruch (propocjonalny do długości całej patrii). 
-1. Kończenie gry przez limit czasowy - gracz, któremu skończył się czas przegrywa. Nie rozpatrujemy przypadku remisu.
-1. Dwie wersje językowe gry — Polska i Angielska.
-1. Ładowanie stanu początkowego z np. notacji FEN (https://pl.wikipedia.org/wiki/Notacja_Forsytha-Edwardsa) i/lub tablicy emojis.
-1. Zaimplementuj różne strategie Pat opisane na Wikipedii: https://pl.wikipedia.org/wiki/Pat Np. stare zasady mówiły, że pat powodował wygraną strony, która zapatowała przeciwnika.
-1. Głosowe wykonywanie ruchów. Np. gracz mówi: "Pion na A3".
-
-## Dodatkowe zadania (wykraczające poza zakres kursu):
-1. Rozgrywka z komputerem - sztuczna inteligencja. Można wykorzystać np. algorytm minimax. Skorzystajcie z źródeł:
-   - https://alialaa.com/blog/tic-tac-toe-js-minimax
-   - https://www.youtube.com/watch?v=l-hh51ncgDI
-   - https://www.freecodecamp.org/news/simple-chess-ai-step-by-step-1d55a9266977/
-   - https://towardsdatascience.com/create-ai-for-your-own-board-game-from-scratch-minimax-part-2-517e1c1e3362
-   - https://dev.to/zeyu2001/build-a-simple-chess-ai-in-javascript-18eg
-1. Wykonanie testów E2E, przy użyciu odpowiedniego narzędzia. Proponujemy np. Cypress.
-
-Wszelkie inne dodane przez Was funkcjonalności czy usprawnienia infrastrukturalne należy przedstawić w README.md projektu :)
-Template znajdziecie w poprzednim projekcie.
-
-## Porady odnośnie do projektu
-- Warto zapozań się z możliwościami kończenia partii szachowych (nie wszystko jest wymagane).
-   - [How Chess Games Can End: 8 Ways Explained](https://www.chess.com/article/view/how-chess-games-can-end-8-ways-explained)
-- Jako inspirację można wykorzystać też działanie szachów zaimplementowanych przez zespół mentora Marcina Wosia na poprzednim CodersCamp (UWAGA: Wymagania mogły ulec zmianie)
-   - https://captainobjective.github.io/chessGame/
-- Dla testów może warto wykorzystać trochę reprezentacji wizualnej. Co powiecie na emoji :) ? Post mentora Mateusza Nowaka.
-   - [Emoji-Driven Development | ZycieNaKodach.pl](https://zycienakodach.pl/tdd-dsl-szachy-emojis)
+## Pokemon Fight
+Aplikacja pozwala na walkę pokemon dwóch osób. Każdy z graczy może wybrać 3 stworki, które pomogą mu osiągnąć sukces w walce z przeciwnikiem. Ten, który przeprowadzi grę lepiej wygra - o ile drugi gracz mu na to pozwoli!
+
+Aplikacja została stworzona w oparciu o TypeScript w ramach kursu CodersCamp2020.
+
+# [DEMO - kliknij by zagrać.](https://lukaszdutka.github.io/CodersCamp2020.Project.TypeScript.pokemonfight/)
+
+**Pokemon Figth** wzorowany był na popularnej grze Pokemon.<br>
+Design projektu: [Figma](https://www.figma.com/file/q0IcE7FOL1GEi7sXvhE5WE/Pokemon-Fight?node-id=0%3A1)<br>
+
+Pokemon Fight - start screen|Pokemon Fight - choose screen
+:-------------------------:|:-------------------------:
+![Pokemon Fight - start screen](./.github/images/2.gif)  |  ![Pokemon Fight - choose screen](./.github/images/3.gif)
+
+Pokemon Fight - fight screen|Pokemon Fight - end screen
+:-------------------------:|:-------------------------:
+![Pokemon Fight - fight screen](./.github/images/4.gif)  |  ![Pokemon Fight - end screen](./.github/images/5.png)
+
+### Zespół projektowy
+Mentor:
+[Łukasz Dutka](https://github.com/lukaszdutka)
+
+Uczestnicy:
+* [Aleksandra Cypko](https://github.com/AleksandraCyp) (Product Owner)
+* [Małgorzata Dziewit](https://github.com/memeraki) (UX Designer)
+* [Daria Dziubałtowska](https://github.com/daria305) 
+* [Agata Ludwiczyńska](https://github.com/AgataLudwiczynska) (Develepment Manager)
+* [Mariusz Smarż](https://github.com/mariusz-sm) (Tech Lead)
+
+### Wykorzystane technologie:
+- TypeScript
+- HTML
+- CSS - SASS
+
+### Narzędzia z jakimi pracowaliśmy:
+- Visual Studio Code
+- Git
+- GitHub Desktop
+- Figma
+- Trello
+
+#### Wymagania funkcjonalne
+1. Ekran ładowania - śpiący Snorlax
+2. Ekran startowy - pola do wpisania imion graczy, którzy będą grają obok siebie na komputerze
+3. Ekran wyboru pokemonów - gracze wybierają naprzemiennie po 3 pokemony z puli 12 pokemonów.
+4. Ekran walki - jedno menu dla obu graczy, zmieniają się imiona. Gracz pierwszy zaczyna. 
+    - w jednym czasie walczą tylko dwa pokemony (domyślnym, pierwszym pokemonem jest ten wybrany przez gracza jako pierwszy)
+    - menu wyboru akcji: 3 buttony
+        - atak (wyświetla dwie opcje wyboru ataku oraz jedną powrotu do menu wyboru akcji)
+        - switch (wyświetla dostępne opcje zmiany pokemona na inny oraz jedną powtoru do menu wyboru akcji)
+        - heal - "eat mango" (bezpośrednia akcja odnawiająca życie aktywnego pokemona do maximum HP - gracz może skorzystać z tej opcji tylko jeden raz w ciągu gry)
+5. UI - czytelny, interaktywny i responsywny 
+6. Pokemon posiada:
+    - Punkty Życia/HP
+    - Atak i Obronę 
+    - Typy (np. Bulbasaur: grass, poison) 
+    - Moves / Ruchy (ataki mają swoje typy np. tackle: normal, fire blast: fire)
+7. Algorytm obliczania obrażeń uwzględniający typ pokemona przeciwnika oraz typ ataku aktywnego pokemona
+    - obrażenia są normalne, mało skuteczne lub bardzo skuteczne - w zależności od typu pokemona i typu ataku
+8. Okno z informacjami o przebiegu gry
+9. Gra kończy się, kiedy wszystkie pokemony jednego z graczy będą niezdolne do walki (0 hp)
+10. Komunikat końcowy - kto wygrał, powrót do ekranu startowego
+11. Animacje:
+    - ataki - domyślna animacja wspólna dla wszystkich
+    - zmiana pokemona
+    - zaznaczanie aktywnego gracza
+12. Spójne kolory i czcionki oraz style dla przycisków i interfejsu.
+13. Wybrane pokemony do implementacji (id, nazwa, typy):
+    - 1 Bulbasaur - Grass/Poison
+    - 4 Charmander - Fire
+    - 7 Squirtle - Water
+    - 13 Weedle - Bug
+    - 16 Pidgey - Normal/Flying
+    - 19 Rattata - Normal
+    - 25 Pikachu - Electric
+    - 27 Sandshrew - Ground
+    - 35 Clefairy - Fairy
+    - 63 Abra - Psychic
+    - 66 Machop - Fighting
+    - 73 Geodude - Rock/Ground
+
+![Pikachu](./.github/images/pikachuwithmango.png)

index.html

@@ -89,6 +89,7 @@
                 <p id="modal-paragraph" class="modalParagraph">
                     Application made as part of the CodersCamp2020 project.<br>
                     <a href="https://github.com/lukaszdutka/CodersCamp2020.Project.TypeScript.pokemonfight/" target="_blank">Visit Github for more information.</a></p>
+                    <img src="./assets/pikachuwithmango.png" alt="Pikachu" width="50%" object-fit="contain">
         </div>
     </template>
 
@@ -191,7 +192,7 @@ <h2>HP:</h2>
     <template id="gameresult-modal-template">
         <div class="popupScreenResult" id='gameresult-modal-screen'>
                 <p id="modal-header" class="modalHeader">Ash won!</p>
-                <p id="modal-paragraph" class="modalParagraph">It was an amazing fight, thank you both. Press Play again button if you want to go back to the starting page.</p>
+                <p id="modal-paragraph" class="modalParagraph">It was an amazing fight, thank you both. Press <span>Play again</span> button if you want to go back to the starting page.</p>
                 <button id="modal-playagain-button" class="modalPlayAgainButton">Play again</button>
         </div>
     </template>

styles/SASS/_animations.scss

@@ -1,5 +1,3 @@
-// Placeholder for animations (keyframes)
-
 //Buttons EXIT
 
 @-webkit-keyframes scale-out-horizontal {
@@ -27,7 +25,6 @@
   }
 }
 
-
 // Buttons ENTRY
 
 @-webkit-keyframes scale-in-hor-center {
@@ -55,7 +52,7 @@
   }
 }
 
-// ENTRY animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+// ENTRY animation
 
 @-webkit-keyframes scale-in-center {
         0% {
@@ -83,7 +80,7 @@
       }
 
 
-// Pokemon ENTRY animation: bounce-in-fwd 1.1s both;
+// Pokemon ENTRY
 
 @-webkit-keyframes bounce-in-fwd {
   0% {
@@ -190,7 +187,7 @@
   }
 }
 
-// Choosing POKEMON animation: heartbeat 1.5s ease-in-out both;
+// Choosing POKEMON
 
 @-webkit-keyframes heartbeat {
         from {
@@ -261,7 +258,7 @@
         }
       }
 
-/// Pokemon EXIT animation: bounce-out-bck 1.5s both;
+/// Pokemon EXIT
 
 @-webkit-keyframes bounce-out-bck {
         0% {
@@ -373,7 +370,7 @@
       }
 
 
-// Pokemon  animation: jello-horizontal 0.9s both;
+// Pokemon hit
 
 @-webkit-keyframes jello-horizontal {
         0% {
@@ -436,7 +433,7 @@
         }
       }
 
-/// FIGHT
+// FIGHT
 
 @keyframes c1{
         0%{transform:scale(1,1);}

styles/SASS/_config.scss

@@ -9,7 +9,6 @@ $color-disable: #4D4D4D;
 $mobile: 768px;
 
 @import url('https://fonts.googleapis.com/css2?family=Bellota+Text:wght@400;700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Ranchers&display=swap');
 
 @font-face {
   font-family: "Pokemon Solid";

styles/SASS/_fight-view.scss

@@ -7,6 +7,7 @@
   flex-flow: column nowrap;
   justify-content: center;
   align-items: center;
+  overflow: hidden;
 
   .playersContainer {
     width: 100%;
@@ -280,6 +281,10 @@
     color: $color-text;
     text-align: center;
     margin: 1em;
+
+    span {
+      font-weight: bold;
+    }
   }
 
   .modalPlayAgainButton {

styles/SASS/_start-view.scss

@@ -205,6 +205,10 @@
             padding: 2rem;
             font-size: 2rem;
             text-align: center;
+
+            span {
+                font-weight: bold;
+            }
         }
     }