diff --git a/src/app/App.js b/src/app/App.js index c9d2dae..8e40689 100644 --- a/src/app/App.js +++ b/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)); } diff --git a/src/app/quizPage.js b/src/app/quizPage.js index 78d1106..8714da2 100644 --- a/src/app/quizPage.js +++ b/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); diff --git a/src/index.js b/src/index.js index 3b0359a..744e209 100644 --- a/src/index.js +++ b/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}}) diff --git a/src/service/GameHandler.js b/src/service/GameHandler.js new file mode 100644 index 0000000..d93d1fe --- /dev/null +++ b/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, + } + } +} \ No newline at end of file diff --git a/src/service/GameHandler.spec.js b/src/service/GameHandler.spec.js new file mode 100644 index 0000000..251242c --- /dev/null +++ b/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}] + }) + }) +})