Feedback branch for nowakprojects #68
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,2 @@ | ||
| POKEMON_API_BASE_URL = "https://pokeapi.co/api/v2" | ||
| QUIZ_MAX_TIME_SECONDS = 120 | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -3,3 +3,4 @@ dist | |
| .cache | ||
| node_modules | ||
| coverage | ||
| .vscode | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,170 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="pl"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"/> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge"/> | ||
| <title>CodersCamp2020 | Pokemon Quiz</title> | ||
| <link href="https://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"> | ||
| <link rel="icon" href="./static/assets/ui/lightning.svg"> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <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> | ||
|
|
||
| <template id="starting-page-template"> | ||
|
|
||
| <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='whoIsThatPokemonHardModeOption' class="buttonWithText">Who's that pokemon? (hard mode)</li> | ||
| </ul> | ||
|
|
||
| <div id='enterNameAndPlayMenu' class="secondColumn spanInPortrait disableWithPopUpScreen"> | ||
| <p id='enterYourName' class='fancyFontStyle'>ENTER YOUR NAME</p> | ||
| <div id='enterYourNameArea'> | ||
| <img src='./static/assets/ui/user.svg' alt='playerIcon' id='playerIcon'/> | ||
| <input type='text' id='enterYourNameInput' maxlength="8"> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div id='startGame' class="secondColumn spanInPortrait disableWithPopUpScreen"> | ||
| <input type='button' id='startGameButton' class="buttonWithText" value='PLAY' autocomplete='off'> | ||
| </div> | ||
|
|
||
| <ul class='bottomOfThePageOptions firstColumn disableWithPopUpScreen'> | ||
| <li id='helpOption'>?</li> | ||
| <li id='leaderboard'><img src="./static/assets/ui/crown.svg" alt="crown"></li> | ||
| </ul> | ||
|
|
||
| <svg class="replaceMe secondColumn disableWithPopUpScreen" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | ||
| viewBox="75 -10 690 610"></svg> | ||
|
|
||
| </template> | ||
|
|
||
| <template id="help-modal-template"> | ||
|
|
||
| <div class='popUpScreen' id='helpScreen'> | ||
|
|
||
| <div class='popUpTitleArea' id='popUpTitleAreaHelp'> | ||
| <h1 class='popUpTitle' id='popUpTitleHelp'>HELP</h1> | ||
| <p class='exitPopUpScreen' id='exitPopUpScreenHelp'>✕</p> | ||
| </div> | ||
|
|
||
| <ul class='mainHelpTextSection'> | ||
| <li><span class='helpTitle'>Who's that pokemon?</span> During the quiz, you will have to guess the name of the pokemon displayed in the picture. The game ends after 2 minutes or after you answer 30 questions.</li> | ||
| <li><span class='helpTitle'>What it looks like?</span> During the quiz, you will have to select the correct picture of the pokemon whose name is displayed on the screen. The game ends after 2 minutes or after you answer 30 questions.</li> | ||
| <li><span class='helpTitle'>Who's that pokemon? (hard mode)</span> During the quiz, you will have to guess the name of the pokemon shadow displayed in the picture. The game ends after 2 minutes or after you answer 30 questions.</li> | ||
| </ul> | ||
|
|
||
| <div class='popUpImgArea'> | ||
| <img src='./static/assets/ui/pikachu2.png' alt='Pikachu' id='littlePikachu' class='popUpImg'/> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| </template> | ||
|
|
||
| <template id="leaderboard-modal-template"> | ||
|
|
||
| <div class='popUpScreen' id='leaderboardScreen'> | ||
|
|
||
| <div class='popUpTitleArea' id='popUpTitleAreaLeaderBoard'> | ||
|
|
||
| <h1 class='popUpTitle' id='popUpTitleLeaderboard'>LEADERBOARD</h1> | ||
| <p class='exitPopUpScreen' id='exitPopUpScreenLeaderboard'>✕</p> | ||
|
|
||
| </div> | ||
|
|
||
| <div id='chooseModeLeaderboardArea'> | ||
|
|
||
| <label id='chooseModeLeaderboardLabel' for='chooseModeLeaderboard'>Points per game in</label> | ||
| <select id='chooseModeLeaderboard'> | ||
| <option value='whoIsThatPokemon'>Who's that pokemon?</option> | ||
| <option value='whatItLooksLike'>What it looks like?</option> | ||
| <option value='whoIsThatPokemonHardMode'>Who's that pokemon (hard mode)</option> | ||
| </select> | ||
|
|
||
| </div> | ||
|
|
||
| <ul id='leaderboardResults'></ul> | ||
|
|
||
| </div> | ||
|
|
||
| </template> | ||
|
|
||
| <template id="quiz-template"> | ||
| <div class="quiz-top-bar progress-bar"> | ||
| <div id="timer"></div> | ||
| <div id="timerLabel"></div> | ||
| <div class="mode-title"> | ||
| <div></div> | ||
| </div> | ||
| <div id="question-counter"></div> | ||
| </div> | ||
| <div id="quiz-body"> | ||
| <div class="quiz-question"></div> | ||
| <ul class="quiz-answers-list"></ul> | ||
| </div> | ||
| </template> | ||
|
|
||
| <template id="quiz-li"> | ||
| <li class="quiz-answer"> | ||
| <div class="unchecked"></div> | ||
| </li> | ||
| </template> | ||
|
|
||
| <template id="results-modal-template"> | ||
|
|
||
| <div class='popUpScreen' id='resultsScreen'> | ||
|
|
||
| <div class='popUpTitleResultsArea' id='popUpTitleAreaResults'> | ||
| <h1 class='popUpTitle' id='popUpTitleResults'>GAME OVER</h1> | ||
| </div> | ||
|
|
||
| <div class='resultsDescriptionArea'> | ||
| <p id='resultsDescription'></p> | ||
| </div> | ||
|
|
||
| <div id='tableWithResultsArea'> | ||
| <img src='./static/assets/ui/pikach1.png' alt='Pikachu' id='nextToTableImg'> | ||
| <div id='tableWithResults'> | ||
| <table> | ||
| <tr> | ||
| <th colspan='2'>Correct</th> | ||
| <th>You</th> | ||
| </tr> | ||
| </table> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div id='backToStartingPageButtonArea'> | ||
| <input type='button' value="Gotta catch 'em all!" id='backToStartingPageButton'/> | ||
| </div> | ||
|
|
||
| </div> | ||
|
|
||
| </template> | ||
|
|
||
| <script src="src/index.js"></script> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| }, | ||
|
There was a problem hiding this comment. Kurde, tyle razy grałem w Pokemony, a jakoś nie zwróciłem uwagi, że Bulbasaur jest też typu Poison! Fajną wiedzę domenową można wyczytać z testu :) |
||
| { | ||
| 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 () => { | ||
|
There was a problem hiding this comment. Bardzo ładny opis testów. Normalnie jakby widział swoje :) |
||
| //given | ||
| const typeId = 12; | ||
|
|
||
| //when | ||
| const typeData = await getTypeById(typeId) | ||
|
|
||
| //then | ||
| expect(typeData).toEqual({ | ||
| id: 12, | ||
| name: "grass" | ||
| } | ||
| ); | ||
| }) | ||
| }) | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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) { | ||
|
There was a problem hiding this comment. Super, że radzicie sobie z Promisami i zapisem async/await, co tutaj widać! :) |
||
| 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 | ||
| } | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Plus za użycie zmiennej środowiskowej.