Feedback branch for nowakprojects by lukaszdutka · Pull Request #68 · lukaszdutka/CodersCamp2020.Project.JavaScript.pokemonquiz

lukaszdutka · 2021-01-19T18:59:33Z

No description provided.

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

this MUST be 20, change on dev branch

commit to dev

this is my super change; Paired with <somebody>

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

* 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 - Add my name

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>

* Update img and my name * MNG-22 add IMG * MNG-22 Rename IMG

* Update img and my name * MNG-22 add IMG * MNG-22 Rename IMG * Add SVG icons

* 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>

… 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

* 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

* print the name of clicked button * no possibility to click on the button while a hel screen is active * Correction Co-authored-by: AgataLudwiczynska <74932979+AgataLudwiczynska@users.noreply.github.com>

…sts / font secure / add icon / change website title * Add a randomNumberInRange function and tests * Change page title, add an icon, change http to https * Change raundomNumberInRange.js, change the relative tests * change error messages, if statements, min>max logic, remove parenthesis

* Add instructions * Update src/app/addHelpScreenTemplate.js Co-authored-by: Łukasz Dutka <lukaszdutka2@gmail.com>

* MNG-11 Add quiz template to index.html and create js file to render this template * Update quiz template, add template for quiz answer * MNG-11 Create renderQuizPage and functions for question/mode-title updates Use templates provided in index.html to render the page. Use service question syntax for getting the question. * MNG-11 Update for quizPage, add question/answers items functions Still needed to correct error in template reading * MNG-11 Fiish rendering quiz questions * MNG-11 All finished before user selects the answer * Fix styles, to avoid cascading main page layout to the quizPage * Fix styles to avoid cascading main page styles with quizApp id - after rebase * MNG-11 Functions for selecting answers and checking the correctness * MNG-11 Questions are now changing, collect styles in appSettings * Update src/app/App.js change to arrow Co-authored-by: Łukasz Dutka <lukaszdutka2@gmail.com> * Small fix for mode variable Co-authored-by: Łukasz Dutka <lukaszdutka2@gmail.com>

* Initial commit * Rename getNextQuestion method * Add class QestionGenerator and test * Modify class QestionGenerator * Add test for askedQuestionsCount property * Remove correctAnswerIndex property * Use aksedQuestion array * Correct which ids can repeat

* Add shuffleAnswers function and relative tests * Correct a spelling mistake * Import shuffleAnswers to questionService * Import shuffleAnswers to questionService - fix

…x.html. Remove the script rendering help modal, put it in showStartingPage.js (#24)

* Autocompletion off + button "Play" * Play button disabled by default

chenged grid to flex height for answer img some random font property for pokemon name (quiz-question class)

Now it display answers (img too) in one column for small width screens

* Add initial styling to time bar * Add z-index * Add border-radius to quiz bar * Change time-bar color * Fix progress bar width * Add padding to timerLabel and question-counter * Add z-index to modal * Change progress bar width * Center question text * Fix width for timerLabel * Change slowly timer bar color to red

…nt styles, move tests to the test folder (#47)

* MNG-35 styline quiz page, add img background under pokemon * MNG-35 Style out mode1 and 2, add background under the pokemon * MNG-35 Change the progress bar style

* MNG - Add 3rd Game Mode * MNG-58 and MNG-61 * update * Issue with style

… modal (#51) * Remove console-logs * Change color of buttonWithText on hover * Add margin to help modal

* Add pointer, change results modal, add custom scrollbars * Fix pointer

* MNG-65 Fix onclick event on quizPage * Add hover styles to the quiz Page

changed: img tag to svg in html file added animation to svg

* Style button for first mode * Style button for default mode * Add hover for mode buttons

* MNG-69 Add total num of questions on the quiz page * MNG-69 Capitalize pokemon names * MNG-69 Move capitalize name feature from css to QuestionService * MNG-69 Change to map * MNG-69 Refactore capitalize * Refactor again

* MNG-68 Update README.md file Updated project description and images * Typos

Co-authored-by: AgataLudwiczynska <74932979+AgataLudwiczynska@users.noreply.github.com>

…ackground-image (#66)

MateuszNaKodach · 2021-01-21T14:39:41Z

.env

@@ -1,2 +1,2 @@
-POKEMON_API_BASE_URL =
+POKEMON_API_BASE_URL = "https://pokeapi.co/api/v2"


Plus za użycie zmiennej środowiskowej.

MateuszNaKodach · 2021-01-21T14:41:39Z

src/index.js

+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 : 120;

 window.onload = () => App({options: {pokemonApiBaseUrl: POKEMON_API_BASE_URL, quizMaxTime: QUIZ_MAX_TIME}})


Tutaj obiekt options niepotrzebnie ma przekazywany parametr pokemonApiBaseUrl, bo nie jest on potem używany.

MateuszNaKodach

Jakieś wskazówki Wam zostawiłem, ale ogólnie jak na 1 projekt i to z zespołem, który jeszcze wcześniej ze sobą nie pracował to świeta robota!

Oby dalej było jeszcze tylko lepiej.
Wasza aplikacja jak na razie podobała mi się najbardziej ze wszystkich! :)

Powodzenia w dalszej drodze do web developera!

Ocena implementacji: 9/10

MateuszNaKodach · 2021-01-21T14:42:44Z

src/app/quizPage.js

+    TOTAL_NUM_OF_QUESTIONS,
+} from "./appSettings.js"
+
+import {


Brakuje konsekwencji i wspólnych ustawień formatowania.

MateuszNaKodach · 2021-01-21T14:43:28Z

src/app/quizPage.js

+
+const startTimer = (bar, timerDuration) => {
+    // durationTime time in seconds, can be changed freely 120 -> 120 seconds = 2 minutes
+    durationTime = timerDuration


Raczej niepotrzebne przypisanie jednej zmiennej do drugiej:
durationTime = timerDuration

MateuszNaKodach · 2021-01-21T14:44:17Z

src/api/pokemons.js

+    }
+};
+
+export async function getTypeById(id) {


Super, że radzicie sobie z Promisami i zapisem async/await, co tutaj widać! :)

MateuszNaKodach · 2021-01-21T14:45:12Z

src/api/pokemon.spec.js

+
+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 () => {


Bardzo ładny opis testów. Normalnie jakby widział swoje :)
Plus za podział na sekcje Given-When-Then.

MateuszNaKodach · 2021-01-21T14:46:56Z

src/api/pokemon.spec.js

+            types: [{
+                    id: 12,
+                    type: "grass"
+                },


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 :)

MateuszNaKodach · 2021-01-21T15:03:17Z

src/service/QuestionService.js

+        return result;
+    }
+
+    capitalize(str) {


Jeśli jakaś funkcja jest jedynie do użycia wewnątrz tej klasy to warto użyć konwencji i nazwać ją _capitalize co w JS oznacza takie "ułomne private".

MateuszNaKodach · 2021-01-21T15:04:15Z

src/service/GameHandler.js

+        }
+    }
+
+    // Subtruct time left from total time


Dałoby radę zmienić nazwę metody na bardziej opisową i wtedy wywalić ten komentarz :) ?
Komenatrze mogą się dezaktualizować i mówić nie to co naprawdę robi kod pod nimi.

MateuszNaKodach · 2021-01-21T15:04:51Z

src/app/showStartingPage.js

+
+    appScreen.innerHTML += pikachuSvgImage.innerHTML;
+
+    // add leaderboard modal


Można to zastąpić po prostu metodą addLeaderboardModal i komentarz jest zbędny.

MateuszNaKodach · 2021-01-21T15:05:26Z

src/app/quizPage.js

@@ -0,0 +1,269 @@
+import {


Dobrze byłoby to rozbić na pliki dla poszczególnym komponentów widoku. Ciężko się odnaleźć w tak długich plikach.

MateuszNaKodach · 2021-01-21T15:06:19Z

styles/App.css

@@ -1,3 +1,876 @@
+@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600;900&family=Ranchers&family=Secular+One&display=swap');


Fajnie by było podzielić ten CSS na mniejsze (cięzko np. znaleźć style odpowiedzialne jedynie za ranking) i przyjąć jakąś konwencję nazywania klas itp.
Co powiecie na notację BEM?

daria305 and others added 30 commits December 30, 2020 22:20

MNG-5 Add my name to div swquiz-app

9c59cad

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

b6bb88b

Add Aleksandra Cypko to the poekquiz-app div

323615c

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

e73fcfb

Add github/real name to div swquiz-app

4966957

prepare case for rebasing problem;

7534526

Update App.css

e10f137

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

Update App.css

8b409ed

this MUST be 20, change on dev branch

Merge branch 'MNG-TEST-rebasing-tutorial' into dev

63fcd66

cleanup after tutorial

e7fe5ca

Update App.css

dc411a7

commit to dev

MNG-test change margin

21ca939

this is my super change; Paired with <somebody>

Mng 10 starting page html template (#7)

6f9cf69

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

MNG-2 add my name to project

9826724

Kamil - Update index.html (#11)

704ea6a

Kamil - Add my name

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

d245841

* Update img and my name * MNG-22 add IMG * MNG-22 Rename IMG

MNG-22

763ca4e

* Update img and my name * MNG-22 add IMG * MNG-22 Rename IMG * Add SVG icons

MNG-25 make every button on main page clickable (#20)

57e1640

* print the name of clicked button * no possibility to click on the button while a hel screen is active * Correction Co-authored-by: AgataLudwiczynska <74932979+AgataLudwiczynska@users.noreply.github.com>

MNG-28 Add instructions (#21)

1eb8841

* Add instructions * Update src/app/addHelpScreenTemplate.js Co-authored-by: Łukasz Dutka <lukaszdutka2@gmail.com>

MNG-41 shuffle answers (#23)

a0a5e2a

* Add shuffleAnswers function and relative tests * Correct a spelling mistake * Import shuffleAnswers to questionService * Import shuffleAnswers to questionService - fix

MNG-46 Remove page templates form js, put them in HTML templates inde…

77265cc

…x.html. Remove the script rendering help modal, put it in showStartingPage.js (#24)

MNG-36 MNG-31 Design and style leaderboard modal (#26)

d345f47

AgataLudwiczynska and others added 27 commits January 15, 2021 19:46

MNG-53 Autocompletion off + button "Play" (#38)

46d82da

* Autocompletion off + button "Play" * Play button disabled by default

MNG-48-Style-out-QuizePage for What does that pokemon looks like (#43)

99fb725

chenged grid to flex height for answer img some random font property for pokemon name (quiz-question class)

Sort time from small to big (#46)

ded7e4a

Little change (#45)

bb1f254

Now it display answers (img too) in one column for small width screens

MNG-57 Change bottom of the main page button on hover, change some fo…

143b625

…nt styles, move tests to the test folder (#47)

MNG-35 style out quiz page mode1 (#48)

7c9b0e1

* MNG-35 styline quiz page, add img background under pokemon * MNG-35 Style out mode1 and 2, add background under the pokemon * MNG-35 Change the progress bar style

MNG-51 add indicators (#49)

ba4f133

MNG-62 Remove timeout after answer selection (#50)

3893744

MNG-X-hardmode - Add Who's that pokemon (hard mode) (#42)

3c2a31c

* MNG - Add 3rd Game Mode * MNG-58 and MNG-61 * update * Issue with style

MNG-63 MNG-64 MNG-24 on hover buttons&console logs&finally style help…

bbb2ff7

… modal (#51) * Remove console-logs * Change color of buttonWithText on hover * Add margin to help modal

MNG-34 MNG-67 style results modal&add cursor on dropdown (#52)

750741a

* Add pointer, change results modal, add custom scrollbars * Fix pointer

MNG-65 quiz page improvements (#53)

1df77c5

* MNG-65 Fix onclick event on quizPage * Add hover styles to the quiz Page

MNG-X Pikachu animation (#56)

f0d5fdc

changed: img tag to svg in html file added animation to svg

MNG-68-FixForFirstModeIndicator (#55)

98485ef

* Style button for first mode * Style button for default mode * Add hover for mode buttons

MNG-69 additions (#54)

13ec5ec

* MNG-69 Add total num of questions on the quiz page * MNG-69 Capitalize pokemon names * MNG-69 Move capitalize name feature from css to QuestionService * MNG-69 Change to map * MNG-69 Refactore capitalize * Refactor again

MNG-68 Update README.md file (#57)

8f07feb

* MNG-68 Update README.md file Updated project description and images * Typos

MNG-66 image mode 1 and 3 (#58)

83c48e2

Co-authored-by: AgataLudwiczynska <74932979+AgataLudwiczynska@users.noreply.github.com>

MNG-70 fix responsiveness (#59)

a6e8bc7

MNG-71 + readme update (#61)

361dd2d

Photos update (#60)

7530a03

quickfix - Update node.js config

bf4365d

BUGFIX Set leaderBoardItem opacity (#63)

20f977e

BUGFIX Pikachu no animation - fixed (#65)

5ae6adb

BUGFIX input name required info (#67)

bf479a3

BUGFIX Fix randomNrInRange, fix leaderboard, change background into b…

99374ae

…ackground-image (#66)

Re-update node.js.yml

4d6de37

MateuszNaKodach reviewed Jan 21, 2021

View reviewed changes

MateuszNaKodach approved these changes Jan 21, 2021

View reviewed changes

		@@ -1,2 +1,2 @@
		POKEMON_API_BASE_URL =
		POKEMON_API_BASE_URL = "https://pokeapi.co/api/v2"


		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 () => {


		appScreen.innerHTML += pikachuSvgImage.innerHTML;

		// add leaderboard modal

		@@ -1,3 +1,876 @@
		@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600;900&family=Ranchers&family=Secular+One&display=swap');

Comments

Conversation

lukaszdutka commented Jan 19, 2021

Uh oh!

MateuszNaKodach Jan 21, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

MateuszNaKodach left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

MateuszNaKodach Jan 21, 2021 •

edited

Loading