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

* MNG - Add 3rd Game Mode

* MNG-58 and MNG-61

* update

* Issue with style

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}) => { 
 
@@ -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
@@ -56,11 +56,12 @@ export const App = ({options}) => {
       }
       changeColorOfClickedButton('#whatItLooksLikeOption')
    });
-   document.querySelector('#guessTheTypeOption').addEventListener('click',()=>{
+   document.querySelector('#whoIsThatPokemonHardModeOption').addEventListener('click',()=>{
       if(styleH.display=='none' && styleL.display=='none'){
-         console.log("Guess the type!");
+         console.log("Who's that Pokemon? (hard mode)");
+         SELECTED_MODE = WHO_IS_THAT_POKEMON_HARD_MODE;
       }
-      changeColorOfClickedButton('#guessTheTypeOption')    
+      changeColorOfClickedButton('#whoIsThatPokemonHardModeOption')    
    });
 
    //ad event listener to the leaderboard button

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 === 'whoIsThatPokemonHardMode') {
                 for (let rankingItem of rankingItemsCollection) {
-                    rankingItem.style.display = rankingItem.classList.contains('guessTheTypeLeaderboard') ? 'flex' : 'none'; 
+                    rankingItem.style.display = rankingItem.classList.contains('whosThatPokemonHardModeLeaderboard') ? 'flex' : 'none'; 
                 }
             }
         }

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

@@ -18,6 +18,7 @@ import {
 import {
     fillResultsModal
 } from './fillResultsModal'
+import { WHO_IS_THAT_POKEMON_HARD_MODE } from "../service/modes.js"
 
 import {
     rankingService,
@@ -113,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;
 }
 
@@ -242,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));

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 {
@@ -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 ], 

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,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 rankingService = (mode, user) => {
   const PokemonApiRanking = checkLocalStorage(); //update from localStorage
@@ -10,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:
@@ -43,7 +43,7 @@ export const checkLocalStorage = () => {
       scores : []
     },
     mode3: {
-      name : "Guess the type!",
+      name : "Whos that pokemon? (hard mode)",
       scores : []
     }
   }