MNG-44 game handler (#25)

* MNG-44 Add GameHandler to store user game results

* Tests

* Corrections

Co-authored-by: Daria Dziubaltowska <daria305@gmail.com>

src/app/App.js

@@ -41,6 +41,7 @@ export const App = ({options}) => {
    });
 
    // start the game
-   document.querySelector("#startGameButton").addEventListener("click", () => renderQuizPage(SELECTED_MODE));
+   const userName = "Ala"; //TODO connect with input 
+   document.querySelector("#startGameButton").addEventListener("click", () => renderQuizPage(SELECTED_MODE, userName, options.quizMaxTime));
 }
 

src/app/quizPage.js

@@ -8,13 +8,19 @@ import {
     TIMEOUT_AFTER_ANSWER_SELECTION
 } from "./appSettings.js"
 
+import{
+    GameHandler
+}from "../service/GameHandler.js"
+
 // will be filledi with mode object during page rendering
 let CURRENT_MODE = null; 
 let GENERATOR = null;
+let GAME_HANDLER = null;
 
 // use to render the page for the first time, after the game start
-export function renderQuizPage(mode) {
+export function renderQuizPage(mode, name, totalTime) {
     CURRENT_MODE = mode;
+    GAME_HANDLER = new GameHandler(name, totalTime);
 
     const appScreen = document.querySelector('#pokequiz-app');
     appScreen.classList.add(QUIZ_PAGE_STYLES.quizPageClass)
@@ -69,7 +75,7 @@ const getNextQuestion = (mode) => {
     if (mode.name == "WHO_IS_THAT_POKEMON") {
         q = {
             question: 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/1.png',
-            answers: ['bulbasaur', 'ivysaur', 'venusaur', 'charmander', 'dummy1', 'dummy2'],
+            answers: ['bulbasaur', 'ivysaur', 'venusaur', 'charmander'],
             correctAnswer: {
                 name: 'bulbasaur',
                 index: 1
@@ -168,7 +174,7 @@ const updateQuestionCounter = (counterElem, questionNum) => {
 function selectAnswer(questionSet, eventHandler) {
     const answer = getAnswerFromElement(eventHandler);
     if (answer) {
-        questionSet.correctAnswer.name === answer ? correctAnswerSelected(eventHandler) : wrongAnswerSelected(eventHandler);
+        questionSet.correctAnswer.name === answer ? correctAnswerSelected(eventHandler, answer, questionSet) : wrongAnswerSelected(eventHandler, answer, questionSet);
     } else {
         throw new Error('Answer was not found')
     }
@@ -189,24 +195,26 @@ const getAnswerFromElement = (target) => {
     }
 }
 
-const correctAnswerSelected = (selectedElem) => {
-    console.log("yes")
+const correctAnswerSelected = (selectedElem, answer, questionSet) => {
     //TODO add correct-answer class and remove unchecked
     selectedElem.classList.remove(QUIZ_PAGE_STYLES.uncheckedClass)
     selectedElem.classList.add(QUIZ_PAGE_STYLES.correctAnswerClass)
-    //TODO store results
+
+    GAME_HANDLER.addAnswer(questionSet.correctAnswer.name, answer, true);
+    console.log(GAME_HANDLER.getResults(10));
     setTimeout(()=> {
         resetQuizAfterQuestion();
         renderNextQuestion(CURRENT_MODE);
     }, TIMEOUT_AFTER_ANSWER_SELECTION)
 }
 
-const wrongAnswerSelected = (selectedElem) => {
-    console.log("no")
+const wrongAnswerSelected = (selectedElem, answer, questionSet) => {
     // add wrong-answer class and remove unchecked
     selectedElem.classList.remove(QUIZ_PAGE_STYLES.uncheckedClass)
     selectedElem.classList.add(QUIZ_PAGE_STYLES.wrongAnswerClass)
-    //TODO store results
+
+    GAME_HANDLER.addAnswer(questionSet.correctAnswer.name, answer, false);
+    console.log(GAME_HANDLER.getResults(10));
     setTimeout(()=> {
         resetQuizAfterQuestion();
         renderNextQuestion(CURRENT_MODE);

src/index.js

@@ -3,6 +3,6 @@ import {App} from "./app/App";
 
 const ONE_SECOND_MILLIS = 1000;
 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 * ONE_SECOND_MILLIS : 120 * ONE_SECOND_MILLIS;
+const QUIZ_MAX_TIME = process.env.QUIZ_MAX_TIME_SECONDS ? process.env.QUIZ_MAX_TIME_SECONDS * ONE_SECOND_MILLIS : 120;
 
 window.onload = () => App({options: {pokemonApiBaseUrl: POKEMON_API_BASE_URL, quizMaxTime: QUIZ_MAX_TIME}})

src/service/GameHandler.js

@@ -0,0 +1,35 @@
+
+export class GameHandler {
+    constructor(name, totalTime) {
+        this.name = name;
+        this.totalTime = totalTime; //seconds
+        this.score = 0;
+        this.answers = [];
+    }
+
+    addAnswer(correctAnswer, answer, isCorrect) {
+        this.answers.push({
+            answer: answer,
+            correctAnswer: correctAnswer,
+            isCorrect: isCorrect,
+        })
+        if (isCorrect) {
+            this.score++;
+        }
+    }
+
+    // Subtruct time left from total time
+    // returns time of the game
+    calculateTime(timeLeft) {
+        return this.totalTime - timeLeft
+    }
+
+    getResults(timeLeft) {
+        return {
+            name: this.name,
+            time: this.calculateTime(timeLeft),
+            score: this.score,
+            answers: this.answers,
+        }
+    }
+}

src/service/GameHandler.spec.js

@@ -0,0 +1,23 @@
+import{GameHandler} from "./GameHandler"
+
+describe('Store user choosen and statistic during game', () => {
+    it('Should update game statistic', () => {
+        //given
+        const gameHandler = new GameHandler("Ala", 120);
+        const correctAnswer = "pikachu";
+        const answer = "charmander";
+        const isCorrect = false;
+        //when
+        gameHandler.addAnswer(correctAnswer, answer, isCorrect)
+        //then
+        expect(gameHandler.getResults(15)).toEqual({
+            name: "Ala",
+            time: 105,
+            score: 0,
+            answers: [{
+                correctAnswer:"pikachu", 
+                answer: "charmander",
+                isCorrect: false}]
+        })
+    })
+})