Release 1

* init 'dev' branch; add my name;

* add parcel; cleanup files; remove 'starwars' dependencies, change to pokemon;

* remove starwars static assets, we will use api;

* remove StarWars local-json-server, we will use api;

* MNG-5 Add my name to div swquiz-app

* MNG-1 Add my name to div pokequiz-app (#3)

* Add Aleksandra Cypko to the poekquiz-app div

* MNG-8 Add "Zespół projektowy" section to Readme.md

* Add github/real name to div swquiz-app

* prepare case for rebasing problem;

* Update App.css

this is my change, it is cool. Margin should be 10

* Update App.css

this MUST be 20, change on dev branch

* cleanup after tutorial

* Update App.css

commit to dev

* MNG-test change margin

this is my super change;

Paired with <somebody>

* Mng 10 starting page html template (#7)

* Add a starting page HTML template

* change template HTML for the starting page into a js file

* MNG-2 add my name to project

* MNG-15 Add API urls, start tests and function for pokemons.js (#10)

* MNG-15 Add API urls, start tests and function for pokemons.js

* Change url end

Co-authored-by: Łukasz Dutka <lukaszdutka2@gmail.com>

* Make function async

Co-authored-by: Łukasz Dutka <lukaszdutka2@gmail.com>

* Correct url end

* MNG-15 Recreate test function for getPokemonById to follow the rule given, when, then

* MNG-15 Write first version of getPokemonById

* MNG-15 Fix test async function handling with beforeAll

* MNG-15 Add test for get types by id

* MNG-15 Create getTypeById function

* Refactoring tests and getPokemonById to be more readable.

Remove nested describe functions,
not use destructuring with pokemon data

Co-authored-by: Łukasz Dutka <lukaszdutka2@gmail.com>

* Kamil - Update index.html (#11)

Kamil - Add my name

* Bump node-notifier from 8.0.0 to 8.0.1 (#9)

Bumps [node-notifier](https://github.com/mikaelbr/node-notifier) from 8.0.0 to 8.0.1.
- [Release notes](https://github.com/mikaelbr/node-notifier/releases)
- [Changelog](https://github.com/mikaelbr/node-notifier/blob/v8.0.1/CHANGELOG.md)
- [Commits](mikaelbr/node-notifier@v8.0.0...v8.0.1)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* MNG-22 Update img and my name (#13)

* Update img and my name

* MNG-22 add IMG

* MNG-22 Rename IMG

* MNG-22

* Update img and my name

* MNG-22 add IMG

* MNG-22 Rename IMG

* Add SVG icons

* MNG-12 style out starting page (initially) (#14)

* Good but for corrections

* Now better

* Responsiveness + little corrections

* Centering some elements + correcting "Quiz"

* Comments

* Bolder question mark

* Merge branch 'dev' into MNG-12-Style-out-StartingPage-(initially)

* Correction

Co-authored-by: Łukasz Dutka <lukaszdutka2@gmail.com>

* MNG-16 Add a help screen, style it (has to be polished, the scrollbar is not… (#16)

* Add a help screen, style it (has to be polished, the scrollbar is not styled). Add help screen HTML the the page, add an event listener for the help screen and a reusable function showAPopUpScreen (can be used to display hall of fame)

* Remove event listener from the exit button every time it is clicked, correct spelling mistakes

* MNG-16 create pokemon service js (#12)

* Add randomPokemonId method

* Add methods - answers and correctAnswer

* Add getNextQuestion method

* Add checkAnswer method

* Remove App import

* Add tests for randomPokemonId, answers and correctAnswer methods

* Add test for getNextQuestion method

* Change name of file and class to QuestionService

* Modify questionService.js name

* Fix for bug in correctAnswerId variable

* Modify getNextQuestion to resolve promise from getPokemonById

* Add promise.all but still sth is wrong

* Add test for getNextQuestion method

* Add object scheme to QuestionService

* Add test for checkAnswer method

* Add correctAnswerIndex to class QuestionService

* Remove comments

* Modify import in test file

* Modify import in test file

* Update test for checkAnswer method

* Modify modes

* Fix mode typo

* Fix test typo

* Add mode parameter to getNextQuestion method

Co-authored-by: Daria Dziubaltowska <daria305@gmail.com>
Co-authored-by: Małgorzata Dziewit <74777578+memeraki@users.noreply.github.com>
Co-authored-by: Aleksandra Cypko <olaaac25@gmail.com>
Co-authored-by: Gosia Dziewit <gosia.dziewit@gmail.com>
Co-authored-by: unknown <mariusz.smarz@gmail.com>
Co-authored-by: AleksandraCyp <73715885+AleksandraCyp@users.noreply.github.com>
Co-authored-by: AgataLudwiczynska <74932979+AgataLudwiczynska@users.noreply.github.com>
Co-authored-by: Daria <44535712+daria305@users.noreply.github.com>
Co-authored-by: Kamil Arendarczyk <kamilarendarczyk1@gmail.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: mariusz-sm <74978639+mariusz-sm@users.noreply.github.com>

.env

@@ -1,2 +1,2 @@
-SW_API_BASE_URL = https://swapi.dev/api
+POKEMON_API_BASE_URL = "https://pokeapi.co/api/v2"
 QUIZ_MAX_TIME_SECONDS = 120

.env.jsonserver.local

@@ -1 +1 @@
-SW_API_BASE_URL = http://localhost:3000
+POKEMON_API_BASE_URL =

README.md

@@ -1,3 +1,17 @@
+# CodersCamp 2020 - Projekt JavaScript
+## Pokemon Quiz
+
+### Zespół projektowy
+Mentor: [Łukasz Dutka](https://github.com/lukaszdutka)
+Uczestnicy:
+* [Kamil Arendarczyk](https://github.com/arendarczyk) (UX Designer)
+* [Aleksandra Cypko](https://github.com/AleksandraCyp) (Tech Lead)
+* [Małgorzata Dziewit](https://github.com/memeraki)
+* [Daria Dziubałtowska](https://github.com/daria305) (Product Owner)
+* [Agata Ludwiczyńska](https://github.com/AgataLudwiczynska)
+* [Mariusz Smarż](https://github.com/mariusz-sm) (Develepment Manager)
+
+
 **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.**
 
@@ -267,3 +281,5 @@ To complete your Free Trial signup, you must provide a credit card or other paym
 
 ## Porady odnośnie do projektu
 - Dzięki testing-library, elementy widoku (DOM) można testować wg Guide: https://testing-library.com/docs/dom-testing-library/example-intro
+
+hihi:)

index.html

@@ -5,14 +5,22 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
     <title>CodersCamp2020 | Star Wars API QUIZ</title>
+    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
     <link rel="stylesheet" href="styles/App.css"/>
-
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
           rel="stylesheet">
 </head>
+
 <body>
 
-<div id="swquiz-app">
+<div id="pokequiz-app">
+    Łukasz Dutka
+    daria305
+    memeraki / Gosia Dziewit
+    Aleksandra Cypko / AleksandraCyp
+    mariusz-sm / Mariusz Smarz
+    Agata Ludwiczyńska/ AgataLudwiczynska
+    arendarczyk / Kamil Arendarczyk
 </div>
 
 <script src="src/index.js"></script>

package.json

@@ -25,6 +25,7 @@
   },
   "homepage": "https://github.com/CodersCamp2020/CodersCamp2020.Project.JavaScript.StarWarsQuiz#readme",
   "dependencies": {
+    "parcel": "^1.12.4",
     "regenerator-runtime": "^0.13.7",
     "uuid": "^8.3.0"
   },

src/api/pokemon.spec.js

@@ -0,0 +1,50 @@
+import {
+    getPokemonById,
+    getTypeById
+} from "./pokemons.js";
+
+describe('Test pokemon API to get pokemon', () => {
+
+    it("Given pokemon id is 1 when asking for data, should get id, photoUrl, types, name of the pokemon", async () => {
+        //given
+        const pokemonId = 1;
+
+        //when
+        const pokeData = await getPokemonById(pokemonId)
+
+        //then
+        expect(pokeData).toEqual({
+            id: 1,
+            name: "bulbasaur",
+            photoUrl: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/1.png",
+            types: [{
+                    id: 12,
+                    type: "grass"
+                },
+                {
+                    id: 4,
+                    type: "poison"
+                }
+            ]
+        });
+    })
+});
+
+
+describe("Test pokemon API to get pokemon types", () => {
+
+    it("Given the type id is 12 when asking for pokemon data, should return id and name of the type", async () => {
+        //given
+        const typeId = 12;
+
+        //when
+        const typeData = await getTypeById(typeId)
+
+        //then
+        expect(typeData).toEqual({
+                id: 12,
+                name: "grass"
+            }
+        );
+    })
+})

src/api/pokemons.js

@@ -0,0 +1,40 @@
+import fetch from "cross-fetch"
+
+const POKEMON_API_BASE_URL = process.env.POKEMON_API_BASE_URL || "https://pokeapi.co/api/v2";
+
+export async function getPokemonById(id) {
+    const getTypeIdFromUrl = (url) => {
+        const regex = /\/type\/(\d+)\/$/;
+        return Number(regex.exec(url)[1])
+    };
+
+    const parseType = (type) => {
+        return {
+            id: getTypeIdFromUrl(type.type.url),
+            type: type.type.name
+        }
+    };
+
+    const res = await fetch(`${POKEMON_API_BASE_URL}/pokemon/${id}`);
+    const jsonRes = await res.json();
+
+    return {
+        id: jsonRes.id,
+        name: jsonRes.name,
+        types: jsonRes.types.map(parseType),
+        photoUrl: jsonRes.sprites.other["official-artwork"].front_default
+    }
+};
+
+export async function getTypeById(id) {
+    const res = await fetch(`${POKEMON_API_BASE_URL}/type/${id}`);
+    const jsonRes = await res.json();
+    const {
+        id: typeId,
+        name: typeName
+    } = jsonRes;
+    return {
+        id: typeId,
+        name: typeName
+    }
+}

src/app/App.js

@@ -1,4 +1,17 @@
-export const App = ({options}) => {
+import { doc } from "prettier";
+import { showStartingPage } from './showStartingPage.js';
+import { showAPopUpScreen } from './showAPopUpScreen';
+import { addHelpScreenTemplate } from "./addHelpScreenTemplate.js";
+
+export const App = ({options}) => { 
+
+   showStartingPage();
+   addHelpScreenTemplate();
+
+   //add event listener to the help button 
+   document.querySelector('#helpOption').addEventListener('click', () => {
+      showAPopUpScreen(document.querySelector('#helpScreen'))
+   });
 }
 
 

src/app/addHelpScreenTemplate.js

@@ -0,0 +1,19 @@
+export const addHelpScreenTemplate = () => {
+    const appScreen = document.querySelector('#pokequiz-app');
+    const helpScreenTemplate = 
+   `<div class='popUpScreen' id='helpScreen'>
+        <div class='popUpTitleArea'>
+        <h1 class='popUpTitle'>HELP</h1>
+        <p class='exitPopUpScreen'>&#10005;</p>
+        </div>
+        <ul class='mainHelpTextSection'>
+            <li><span class='helpTitle'>Who's that pokemon?</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia, arcu vel accumsan rhoncus, sapien dolor commodo purus, gravida rhoncus massa leo eu quam. Etiam pulvinar bibendum gravida. Aliquam eu augue arcu. Sed lacus dui, tempus sed libero non, posuere mattis ex. Suspendisse dictum metus et laoreet ultricies. Praesent ac pharetra risus. Maecenas risus diam, eleifend non dolor id, tristique facilisis urna.</li>
+            <li><span class='helpTitle'>What it looks like?</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia, arcu vel accumsan rhoncus, sapien dolor commodo purus, gravida rhoncus massa leo eu quam. Etiam pulvinar bibendum gravida. Aliquam eu augue arcu. Sed lacus dui, tempus sed libero non, posuere mattis ex. Suspendisse dictum metus et laoreet ultricies. Praesent ac pharetra risus. Maecenas risus diam, eleifend non dolor id, tristique facilisis urna.</li>
+            <li><span class='helpTitle'>Guess the type!</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia, arcu vel accumsan rhoncus, sapien dolor commodo purus, gravida rhoncus massa leo eu quam. Etiam pulvinar bibendum gravida. Aliquam eu augue arcu. Sed lacus dui, tempus sed libero non, posuere mattis ex. Suspendisse dictum metus et laoreet ultricies. Praesent ac pharetra risus. Maecenas risus diam, eleifend non dolor id, tristique facilisis urna.</li>
+        </ul>
+        <div class='popUpImgArea'>
+            <img src='../static/assets/ui/pikachu2.png' alt='Pikachu' id='littlePikachu' class='popUpImg'/>
+        </div>
+    </div>`
+    appScreen.innerHTML += helpScreenTemplate;
+}

src/app/showAPopUpScreen.js

@@ -0,0 +1,17 @@
+export const showAPopUpScreen = (screenToDisplay) => {
+   // display the help screen
+    screenToDisplay.style.display = 'initial';
+    // add blur to the rest of the page
+    document.querySelectorAll('.disableWithPopUpScreen').forEach(e => e.style.filter = 'blur(4px)');
+   // function which gets called when the exit button is clicked
+    const exitPopUpFunction = () => {
+              //hide the screen
+              screenToDisplay.style.display = 'none';
+              // remove the blur
+              document.querySelectorAll('.disableWithPopUpScreen').forEach(e => e.style.filter = 'blur(0)');
+              // remove the event listener
+              screenToDisplay.querySelector('.exitPopUpScreen').removeEventListener('click', exitPopUpFunction);
+    };
+        // add event listener to the exit button;
+    screenToDisplay.querySelector('.exitPopUpScreen').addEventListener('click', exitPopUpFunction);
+ };

src/app/showStartingPage.js

@@ -0,0 +1,35 @@
+export const showStartingPage = () => {
+    const appScreen = document.querySelector('#pokequiz-app');
+    const startingPageTemplate = 
+    `<div id="headerWithLogo" class="firstColumn spanInPortrait disableWithPopUpScreen">
+        <img src="./static/assets/ui/logo.png" alt='Pokemon' id='pokemonLogo'/>
+        <p id='quizLogo' class='fancyFontStyle'>Quiz</p>
+    </div>
+
+    <ul id="selectModeMenu" class="firstColumn spanInPortrait disableWithPopUpScreen">
+        <li id='whoIsThatPokemonOption' class="buttonWithText">Who's that pokemon?</li>
+        <li id='whatItLooksLikeOption' class="buttonWithText">What it looks like?</li>
+        <li id='guessTheTypeOption' class="buttonWithText">Guess the type!</li>
+    </ul>
+
+    <div id='enterNameAndPlayMenu' class="secondColumn spanInPortrait disableWithPopUpScreen">
+        <p id='enterYourName' class='fancyFontStyle'>ENTER YOUR NAME</p>
+        <div id='enterYourNameArea'>
+            <img src='https://cdn4.iconfinder.com/data/icons/small-n-flat/24/user-alt-512.png' alt='playerIcon' id='playerIcon'/>
+            <input type='text' id='enterYourNameInput'>
+        </div>
+    </div>
+
+    <div id='startGame' class="secondColumn spanInPortrait disableWithPopUpScreen">
+        <input type='button' id='startGameButton' class="buttonWithText" value='PLAY'>
+    </div>
+
+    <ul class='bottomOfThePageOptions firstColumn disableWithPopUpScreen'>
+        <li id='helpOption'>?</li>
+        <li id='leaderboard'><i class="fa fa-trophy"></i></li>
+    </ul>
+
+    <img src='./static/assets/ui/pikach1.png' alt='Pikachu' id='pikachuImg' class="secondColumn disableWithPopUpScreen"/>
+    `
+    appScreen.innerHTML = startingPageTemplate;
+}

src/index.js

@@ -2,7 +2,7 @@ import 'regenerator-runtime/runtime' //async/await with Parcel
 import {App} from "./app/App";
 
 const ONE_SECOND_MILLIS = 1000;
-const SW_API_BASE_URL = process.env.SW_API_BASE_URL || "https://swapi.dev/api";
+const POKEMON_API_BASE_URL = process.env.POKEMON_API_BASE_URL || "https://pokeapi.co/api/v2";
 const QUIZ_MAX_TIME = process.env.QUIZ_MAX_TIME_SECONDS ? process.env.QUIZ_MAX_TIME_SECONDS * ONE_SECOND_MILLIS : 120 * ONE_SECOND_MILLIS;
 
-window.onload = () => App({options: {swApiBaseUrl: SW_API_BASE_URL, quizMaxTime: QUIZ_MAX_TIME}})
+window.onload = () => App({options: {pokemonApiBaseUrl: POKEMON_API_BASE_URL, quizMaxTime: QUIZ_MAX_TIME}})

src/service/QuestionService.js

@@ -0,0 +1,43 @@
+import {
+    getPokemonById
+} from "../api/pokemons";
+import { WHAT_DOES_THIS_POKEMON_LOOK_LIKE, WHO_IS_THAT_POKEMON } from "./modes";
+
+export class QuestionService {
+
+    constructor() {
+        this.correctAnswerIndex = 0; // range 0-3
+    }
+
+    async getNextQuestion(pokemonIds, mode) {
+
+        if (!pokemonIds || pokemonIds.length != 4) {
+            throw new Error('pokemonIds is not an array of 4 elements')
+        }
+
+        const pokePromises = pokemonIds.map( id => getPokemonById(id))
+        const answersObj = await Promise.all(pokePromises);
+
+        if (mode === WHO_IS_THAT_POKEMON) {
+            return {
+                question: answersObj[this.correctAnswerIndex].photoUrl , 
+                answers: [ answersObj[0].name, answersObj[1].name, answersObj[2].name, answersObj[3].name ], 
+                correctAnswer: { value: answersObj[this.correctAnswerIndex].name, index: this.correctAnswerIndex}
+            }
+        } else if (mode === WHAT_DOES_THIS_POKEMON_LOOK_LIKE ) {
+            return {
+                question: answersObj[this.correctAnswerIndex].name , 
+                answers: [ answersObj[0].photoUrl, answersObj[1].photoUrl, answersObj[2].photoUrl, answersObj[3].photoUrl ], 
+                correctAnswer: { value: answersObj[this.correctAnswerIndex].photoUrl, index: this.correctAnswerIndex }
+            }
+        };
+    }
+
+    checkAnswer(questionObj, userAnswer) {
+        let result = false;
+        if ( userAnswer == questionObj.correctAnswer.value ) {
+            result = true;
+        };
+        return result;
+    }
+}

src/service/QuestionService.spec.js

@@ -0,0 +1,65 @@
+import { WHO_IS_THAT_POKEMON } from "./modes";
+import {
+    QuestionService
+} from "./QuestionService.js";
+
+const quizQuestion = new QuestionService();
+
+describe('Test getNextQuestion method', () => {
+
+    it("Should return question object - example output for mode 1: question: 'bulbasaur' , answers: [ 'answer1', 'answer2', 'answer3', 'answer4' ], correctAnswer: { name: 'bulbasaur', index: 1 }  ", async () => {
+        // Given
+        const pokemonIds = [1, 2, 3, 4];
+
+        // When
+        const question = await quizQuestion.getNextQuestion(pokemonIds, WHO_IS_THAT_POKEMON);
+
+        // Then
+        expect(question).toHaveProperty('question');
+        expect(question.question).toEqual('https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/1.png');
+
+        expect(question).toHaveProperty('answers');
+        expect(question.answers).toHaveLength(4);
+        expect(question.answers).toEqual(expect.arrayContaining(['bulbasaur', 'ivysaur', 'venusaur', 'charmander'])); //In any order
+
+        expect(question).toHaveProperty('correctAnswer');
+        expect(question.correctAnswer).toHaveProperty('value');
+        expect(question.correctAnswer.value).toEqual('bulbasaur');
+        expect(question.correctAnswer).toHaveProperty('index');
+
+        expect(question.answers[question.correctAnswer.index]).toEqual(question.correctAnswer.value);
+    })
+});
+
+
+describe('Test checkAnswer method', () => {
+
+    it("Should return result true for user answer -> 'bulbasaur' ", async () => {
+        // Given
+        const pokemonIds = [1, 2, 3, 4];
+        const userAnswer = 'bulbasaur';
+
+        // When
+        const question = await quizQuestion.getNextQuestion(pokemonIds, WHO_IS_THAT_POKEMON);
+
+        // Then
+        expect(quizQuestion.checkAnswer(question, userAnswer)).toBeTruthy();
+
+    })
+});
+
+describe('Test checkAnswer method', () => {
+
+    it("Should return result false for user answer -> 'venusaur' ", async () => {
+        // Given
+        const pokemonIds = [1, 2, 3, 4];
+        const userAnswer = 'venusaur';
+
+        // When
+        const question = await quizQuestion.getNextQuestion(pokemonIds, WHO_IS_THAT_POKEMON);
+
+        // Then
+        expect(quizQuestion.checkAnswer(question, userAnswer)).toBeFalsy();
+
+    })
+});

src/service/modes.js

@@ -0,0 +1,14 @@
+export const WHO_IS_THAT_POKEMON = {
+    name: 'WHO_IS_THAT_POKEMON',
+    title: "Who's that pokemon?",
+    questionType: "image",
+    answerType: "text",
+    answersNumber: 4
+};
+export const WHAT_DOES_THIS_POKEMON_LOOK_LIKE = {
+    name: 'WHAT_DOES_THIS_POKEMON_LOOK_LIKE',
+    title: "What does this pokemon look like?",
+    questionType: "text",
+    answerType: "image",
+    answersNumber: 4
+};