From 19db8c2f830670e188a7e7f65edb864555b8051e Mon Sep 17 00:00:00 2001 From: Gosia Dziewit Date: Fri, 15 Jan 2021 11:35:19 +0100 Subject: [PATCH 1/4] MNG - Add 3rd Game Mode --- index.html | 6 +++--- src/app/App.js | 9 +++++---- src/app/fillResultsModal.js | 9 ++++++++- src/app/quizPage.js | 4 ++++ src/service/QuestionService.js | 8 +++++++- src/service/modes.js | 7 +++++++ src/service/rankingService.js | 4 +++- 7 files changed, 37 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 89d640a..b2317b2 100644 --- a/index.html +++ b/index.html @@ -35,7 +35,7 @@
@@ -71,7 +71,7 @@

HELP

@@ -99,7 +99,7 @@

LEADERBOARD

diff --git a/src/app/App.js b/src/app/App.js index c69e00e..a8d31be 100644 --- a/src/app/App.js +++ b/src/app/App.js @@ -1,7 +1,7 @@ import { showStartingPage } from './showStartingPage.js'; import { showAPopUpScreen } from './showAPopUpScreen'; -import { renderQuizPage } from './quizPage.js' -import { WHO_IS_THAT_POKEMON, WHAT_DOES_THIS_POKEMON_LOOK_LIKE } from "../service/modes.js" +import { renderQuizPage } from './quizPage.js'; +import { WHO_IS_THAT_POKEMON, WHAT_DOES_THIS_POKEMON_LOOK_LIKE, WHO_IS_THAT_POKEMON_HARD_MODE } from "../service/modes.js"; export const App = ({options}) => { @@ -27,9 +27,10 @@ export const App = ({options}) => { console.log("What it looks like?"); SELECTED_MODE = WHAT_DOES_THIS_POKEMON_LOOK_LIKE; }); - document.querySelector('#guessTheTypeOption').addEventListener('click',()=>{ + document.querySelector('#whoIsThatPokemonHardModeOption').addEventListener('click',()=>{ if(style.display=='none'||help.style.display == 'none') - console.log("Guess the type!"); + console.log("Who's that Pokemon? (hard mode)"); + SELECTED_MODE = WHO_IS_THAT_POKEMON_HARD_MODE; }); //ad event listener to the leaderboard button diff --git a/src/app/fillResultsModal.js b/src/app/fillResultsModal.js index e303fe5..8899131 100644 --- a/src/app/fillResultsModal.js +++ b/src/app/fillResultsModal.js @@ -1,4 +1,4 @@ -import { WHAT_DOES_THIS_POKEMON_LOOK_LIKE, WHO_IS_THAT_POKEMON } from "../service/modes"; +import { WHAT_DOES_THIS_POKEMON_LOOK_LIKE, WHO_IS_THAT_POKEMON, WHO_IS_THAT_POKEMON_HARD_MODE } from "../service/modes"; export const fillResultsModal = (gameHandlerResults, mode) => { @@ -26,6 +26,13 @@ export const fillResultsModal = (gameHandlerResults, mode) => { ${questionItem.correctAnswer} ${questionItem.answer}` + tableCell.querySelector('.tableWithResultsYourAnswer').style.color = questionItem.isCorrect === true ? 'green' : 'red'; + } else if (mode === WHO_IS_THAT_POKEMON_HARD_MODE) { + tableCell.innerHTML = + `pokemon img + ${questionItem.correctAnswer} + ${questionItem.answer}` + tableCell.querySelector('.tableWithResultsYourAnswer').style.color = questionItem.isCorrect === true ? 'green' : 'red'; } resultsTable.appendChild(tableCell); diff --git a/src/app/quizPage.js b/src/app/quizPage.js index 00950a8..4fdefda 100644 --- a/src/app/quizPage.js +++ b/src/app/quizPage.js @@ -19,6 +19,7 @@ import { import { fillResultsModal } from './fillResultsModal' +import { WHO_IS_THAT_POKEMON_HARD_MODE } from "../service/modes.js" // will be filledi with mode object during page rendering let CURRENT_MODE = null; @@ -101,6 +102,9 @@ const updateQuestion = (questionElement, questionSet) => { questionElement.classList.add(QUIZ_PAGE_STYLES.quizQuestionImageClass); const imgElem = createImgElement(questionSet.question); // add img from url questionElement.appendChild(imgElem); + if (CURRENT_MODE === WHO_IS_THAT_POKEMON_HARD_MODE) { + questionElement.style.filter = "brightness(0%)"; + } } else if (CURRENT_MODE.questionType === "text") { questionElement.classList.add(QUIZ_PAGE_STYLES.quizQuestionTextClass); diff --git a/src/service/QuestionService.js b/src/service/QuestionService.js index a528494..becea10 100644 --- a/src/service/QuestionService.js +++ b/src/service/QuestionService.js @@ -1,7 +1,7 @@ import { getPokemonById } from "../api/pokemons"; -import { WHAT_DOES_THIS_POKEMON_LOOK_LIKE, WHO_IS_THAT_POKEMON } from "./modes"; +import { WHAT_DOES_THIS_POKEMON_LOOK_LIKE, WHO_IS_THAT_POKEMON, WHO_IS_THAT_POKEMON_HARD_MODE } from "./modes"; import { shuffleAnswers } from "./shuffleAnswers" export class QuestionService { @@ -31,6 +31,12 @@ export class QuestionService { answers: [ answersObj[0].photoUrl, answersObj[1].photoUrl, answersObj[2].photoUrl, answersObj[3].photoUrl ], correctAnswer: { value: answersObj[this.correctAnswerIndex].photoUrl, index: this.correctAnswerIndex } }) + } else if (mode === WHO_IS_THAT_POKEMON_HARD_MODE) { + return shuffleAnswers({ + 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} + }) }; } diff --git a/src/service/modes.js b/src/service/modes.js index b1d279a..528b681 100644 --- a/src/service/modes.js +++ b/src/service/modes.js @@ -12,3 +12,10 @@ export const WHAT_DOES_THIS_POKEMON_LOOK_LIKE = { answerType: "image", answersNumber: 4 }; +export const WHO_IS_THAT_POKEMON_HARD_MODE = { + name: 'WHO_IS_THAT_POKEMON_HARD_MODE', + title: "Who's that pokemon? (hard mode)", + questionType: "image", + answerType: "text", + answersNumber: 4 +}; \ No newline at end of file diff --git a/src/service/rankingService.js b/src/service/rankingService.js index 73ac2f7..0b8c313 100644 --- a/src/service/rankingService.js +++ b/src/service/rankingService.js @@ -1,3 +1,5 @@ +import { WHAT_DOES_THIS_POKEMON_LOOK_LIKE, WHO_IS_THAT_POKEMON, WHO_IS_THAT_POKEMON_HARD_MODE } from "./modes"; + export const rankingService = (mode, user) => { const PokemonApiRanking = checkLocalStorage(); //update from localStorage let currentMode; //path to scores array for current mode @@ -8,7 +10,7 @@ export const rankingService = (mode, user) => { case WHAT_DOES_THIS_POKEMON_LOOK_LIKE: currentMode = PokemonApiRanking.mode2.scores; break; - case GUESS_THE_TYPE: + case WHO_IS_THAT_POKEMON_HARD_MODE: currentMode = PokemonApiRanking.mode3.scores; break; default: From a6f854fdd8a12d3da29fc33e7a41faf172cf0684 Mon Sep 17 00:00:00 2001 From: Gosia Dziewit Date: Sat, 16 Jan 2021 21:32:19 +0100 Subject: [PATCH 2/4] MNG-58 and MNG-61 --- src/app/App.js | 6 +++--- src/app/fillLeaderboard.js | 6 +++--- src/app/quizPage.js | 1 + src/service/rankingService.js | 2 +- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/app/App.js b/src/app/App.js index 995332a..7713811 100644 --- a/src/app/App.js +++ b/src/app/App.js @@ -26,14 +26,14 @@ export const App = ({options}) => { const currSelected = document.querySelector(currQuerySelector) const whoIsThatPokemonOption = document.querySelector('#whoIsThatPokemonOption') const whatItLooksLikeOption = document.querySelector('#whatItLooksLikeOption') - const guessTheTypeOption = document.querySelector('#guessTheTypeOption') + const whoIsThatPokemonHardModeOption = document.querySelector('#whoIsThatPokemonHardModeOption') whoIsThatPokemonOption.style.backgroundColor=checkedFont whoIsThatPokemonOption.style.color=bgBoxColor whatItLooksLikeOption.style.backgroundColor=checkedFont whatItLooksLikeOption.style.color=bgBoxColor - guessTheTypeOption.style.backgroundColor=checkedFont - guessTheTypeOption.style.color=bgBoxColor + whoIsThatPokemonHardModeOption.style.backgroundColor=checkedFont + whoIsThatPokemonHardModeOption.style.color=bgBoxColor currSelected.style.backgroundColor=bgBoxColor currSelected.style.color=checkedFont diff --git a/src/app/fillLeaderboard.js b/src/app/fillLeaderboard.js index 5b13259..68aa091 100644 --- a/src/app/fillLeaderboard.js +++ b/src/app/fillLeaderboard.js @@ -11,7 +11,7 @@ export const fillLeaderboard = (pokemonApiRanking) => { addLeaderboardTableResults('whosThatPokemonLeaderboard', 'mode1'); addLeaderboardTableResults('whatItLooksLikeLeaderboard', 'mode2'); - addLeaderboardTableResults('guessTheTypeLeaderboard', 'mode3'); + addLeaderboardTableResults('whosThatPokemonHardModeLeaderboard', 'mode3'); const rankingItemsCollection = document.querySelectorAll('.leaderboardItem'); const changeLeaderboardView = () => { @@ -23,9 +23,9 @@ export const fillLeaderboard = (pokemonApiRanking) => { for (let rankingItem of rankingItemsCollection) { rankingItem.style.display = rankingItem.classList.contains('whatItLooksLikeLeaderboard') ? 'flex' : 'none'; } - } else if (modeSelect.value === 'guessTheType') { + } else if (modeSelect.value === 'whosThatPokemonHardMode') { for (let rankingItem of rankingItemsCollection) { - rankingItem.style.display = rankingItem.classList.contains('guessTheTypeLeaderboard') ? 'flex' : 'none'; + rankingItem.style.display = rankingItem.classList.contains('whosThatPokemonHardModeLeaderboard') ? 'flex' : 'none'; } } } diff --git a/src/app/quizPage.js b/src/app/quizPage.js index 17c05ed..5306f8a 100644 --- a/src/app/quizPage.js +++ b/src/app/quizPage.js @@ -246,6 +246,7 @@ const startTimer = (bar, timerDuration) => { clearInterval(interval); bar.style.animationPlayState = "paused"; console.log('Print durationTime: ' + durationTime); + rankingService(CURRENT_MODE, GAME_HANDLER.getResults(durationTime)); fillResultsModal(GAME_HANDLER.getResults(durationTime), CURRENT_MODE) showAPopUpScreen(document.getElementById('resultsScreen'), 'flex'); }, (durationTime * 1000)); diff --git a/src/service/rankingService.js b/src/service/rankingService.js index 47007fb..a2c10b6 100644 --- a/src/service/rankingService.js +++ b/src/service/rankingService.js @@ -43,7 +43,7 @@ export const checkLocalStorage = () => { scores : [] }, mode3: { - name : "Guess the type!", + name : "Whos that pokemon? (hard mode)", scores : [] } } From 8dfb8f4fea5a4070d3697a28a62312fe3c198dfb Mon Sep 17 00:00:00 2001 From: Gosia Dziewit Date: Sat, 16 Jan 2021 21:36:28 +0100 Subject: [PATCH 3/4] update --- src/service/QuestionService.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/service/QuestionService.js b/src/service/QuestionService.js index becea10..4205e55 100644 --- a/src/service/QuestionService.js +++ b/src/service/QuestionService.js @@ -19,7 +19,7 @@ export class QuestionService { const pokePromises = pokemonIds.map( id => getPokemonById(id)) const answersObj = await Promise.all(pokePromises); - if (mode === WHO_IS_THAT_POKEMON) { + if (mode === WHO_IS_THAT_POKEMON || mode === WHO_IS_THAT_POKEMON_HARD_MODE) { return shuffleAnswers({ question: answersObj[this.correctAnswerIndex].photoUrl , answers: [ answersObj[0].name, answersObj[1].name, answersObj[2].name, answersObj[3].name ], @@ -31,12 +31,6 @@ export class QuestionService { answers: [ answersObj[0].photoUrl, answersObj[1].photoUrl, answersObj[2].photoUrl, answersObj[3].photoUrl ], correctAnswer: { value: answersObj[this.correctAnswerIndex].photoUrl, index: this.correctAnswerIndex } }) - } else if (mode === WHO_IS_THAT_POKEMON_HARD_MODE) { - return shuffleAnswers({ - 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} - }) }; } From 71956937a22b837d845edf0b651a97d62d788eea Mon Sep 17 00:00:00 2001 From: Gosia Dziewit Date: Sat, 16 Jan 2021 21:55:13 +0100 Subject: [PATCH 4/4] Issue with style --- src/app/fillLeaderboard.js | 2 +- src/app/quizPage.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/fillLeaderboard.js b/src/app/fillLeaderboard.js index 68aa091..6757f71 100644 --- a/src/app/fillLeaderboard.js +++ b/src/app/fillLeaderboard.js @@ -23,7 +23,7 @@ export const fillLeaderboard = (pokemonApiRanking) => { for (let rankingItem of rankingItemsCollection) { rankingItem.style.display = rankingItem.classList.contains('whatItLooksLikeLeaderboard') ? 'flex' : 'none'; } - } else if (modeSelect.value === 'whosThatPokemonHardMode') { + } else if (modeSelect.value === 'whoIsThatPokemonHardMode') { for (let rankingItem of rankingItemsCollection) { rankingItem.style.display = rankingItem.classList.contains('whosThatPokemonHardModeLeaderboard') ? 'flex' : 'none'; } diff --git a/src/app/quizPage.js b/src/app/quizPage.js index 5306f8a..54615c9 100644 --- a/src/app/quizPage.js +++ b/src/app/quizPage.js @@ -103,9 +103,6 @@ const updateQuestion = (questionElement, questionSet) => { questionElement.classList.add(QUIZ_PAGE_STYLES.quizQuestionImageClass); const imgElem = createImgElement(questionSet.question); // add img from url questionElement.appendChild(imgElem); - if (CURRENT_MODE === WHO_IS_THAT_POKEMON_HARD_MODE) { - questionElement.style.filter = "brightness(0%)"; - } } else if (CURRENT_MODE.questionType === "text") { questionElement.classList.add(QUIZ_PAGE_STYLES.quizQuestionTextClass); @@ -117,6 +114,9 @@ const updateQuestion = (questionElement, questionSet) => { const createImgElement = (url) => { const img = document.createElement("img"); img.setAttribute("src", url); + if (CURRENT_MODE === WHO_IS_THAT_POKEMON_HARD_MODE) { + img.style.filter = "brightness(0%)"; + } return img; }