MNG - Add Who's that pokemon (hard mode)

index.html

@@ -35,7 +35,7 @@
         <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>
+            <li id='whoIsThatPokemonHardModeOption' class="buttonWithText">Who's that pokemon? (hard mode)</li>
         </ul>
 
         <div id='enterNameAndPlayMenu' class="secondColumn spanInPortrait disableWithPopUpScreen">
@@ -71,7 +71,7 @@ <h1 class='popUpTitle' id='popUpTitleHelp'>HELP</h1>
             <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'>Guess the type!</span> During the quiz, you will have to select all the pokemon types that the pokemon displayed on the screen belongs to (multiple choice is possible). 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'>
@@ -99,7 +99,7 @@ <h1 class='popUpTitle' id='popUpTitleLeaderboard'>LEADERBOARD</h1>
                 <select id='chooseModeLeaderboard'>
                     <option value='whoIsThatPokemon'>Who's that pokemon?</option>
                     <option value='whatItLooksLike'>What it looks like?</option>
-                    <option value='guessTheType'>Guess the type!</option>
+                    <option value='whoIsThatPokemonHardMode'>Who's that pokemon (hard mode)</option>
                 </select>
 
             </div>

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

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) => {
             <td class='tableWithResultsCorrectAnswer'>${questionItem.correctAnswer}</td>
             <td class='tableWithResultsYourAnswer'>${questionItem.answer}</td>`
 
+            tableCell.querySelector('.tableWithResultsYourAnswer').style.color = questionItem.isCorrect === true ? 'green' : 'red';
+        } else if (mode === WHO_IS_THAT_POKEMON_HARD_MODE) {
+            tableCell.innerHTML = 
+            `<td><img src='${questionItem.question}' alt='pokemon img' class='tableWithResultsQuestion'/></td>
+            <td class='tableWithResultsCorrectAnswer'>${questionItem.correctAnswer}</td>
+            <td class='tableWithResultsYourAnswer'>${questionItem.answer}</td>`
+
             tableCell.querySelector('.tableWithResultsYourAnswer').style.color = questionItem.isCorrect === true ? 'green' : 'red';
         }
         resultsTable.appendChild(tableCell);

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

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}
+            })
         };
     }
 

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
+};

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: