[#39] Game Over Modal (#57)

* started creating [#39] Game Result Modal

* added some features

* added middle section to modal

* added bottom section (form) to modal (w/o css)

package.json

@@ -7,7 +7,7 @@
     "clean": "rimraf .cache && rimraf coverage && rimraf dist && rimraf node_modules",
     "prebuild": "rimraf dist",
     "build": "parcel build index.html --public-url ./",
-    "format": "prettier --write \"src/**/*.js\" \"styles/**/*.css\" \"test/**/*.js\"",
+    "format": "prettier --write \"src/**/*.js\" \"styles/**/*.scss\" \"test/**/*.js\"",
     "start:dev": "parcel -p 8765 watch index.html",
     "test": "jest",
     "test:watch": "jest --watch",

src/app/App.js

@@ -1,22 +1,94 @@
+
 import { isAnswerCorrect } from './components/isAnswerCorrect'
 import { gameMode } from './gameMode'
 import { redButton } from './redButton'
 import { imageRecognizer } from './imageRecognizer'
 import { mainMenu } from './components/mainMenu'
 import { startTime } from './logic/timer'
 import { generateQuestion } from './logic/generatingQuestions/generateQuestion'
+import { modalGameOver } from './components/modalGameOver';
+
+const testDataHuman = {
+  q1: {
+    answer: 'Test',
+    correct: 'Test',
+    isCorrect: true,
+    img: '../../static/assets/img/modes/people/1.jpg',
+  },
+  q2: {
+    answer: 'Test',
+    correct: 'Test',
+    isCorrect: true,
+    img: '../../static/assets/img/modes/people/10.jpg',
+  },
+  q3: {
+    answer: 'Test',
+    correct: 'Test',
+    isCorrect: true,
+    img: '../../static/assets/img/modes/people/10.jpg',
+  },
+  q4: {
+    answer: 'Test',
+    correct: 'Test',
+    isCorrect: true,
+    img: '../../static/assets/img/modes/people/10.jpg',
+  },
+  correct: 1,
+  total: 2,
+};
+
+
+const testDataComputer = {
+  q1: {
+    answer: 'Test2',
+    correct: 'Test',
+    isCorrect: false,
+    img: '../../static/assets/img/modes/people/1.jpg',
+  },
+  q2: {
+    answer: 'Test2',
+    correct: 'Test',
+    isCorrect: false,
+    img: '../../static/assets/img/modes/people/10.jpg',
+  },
+  q3: {
+    answer: 'Test',
+    correct: 'Test',
+    isCorrect: true,
+    img: '../../static/assets/img/modes/people/10.jpg',
+  },
+  q4: {
+    answer: 'Test',
+    correct: 'Test',
+    isCorrect: true,
+    img: '../../static/assets/img/modes/people/10.jpg',
+  },
+  correct: 0,
+  total: 2,
+};
 
 
-export const App = ({options}) => {
-    gameMode('Who is this Character?')
-    redButton('play the game');
-    imageRecognizer('c3RhdGljL2Fzc2V0cy9pbWcvbW9kZXMvcGVvcGxlLzM2LmpwZw==')
-    const getData = (element) => {
-      return element;
-    };
-    mainMenu(document.querySelector('.swquiz-header'), getData);
-    startTime(options.quizMaxTime)
-    generateQuestion('people').then(res=> console.log(res))
+const getData = (element) => {
+  return element;
+};
 
-}
+const modalSubmitCallback = (e) => {
+  e.preventDefault();
+  console.log('MAY THE FORCE BE WITH YOU!');
+  document.querySelector('.swquiz-modal').style.display = 'none';
+};
 
+export const App = ({ options }) => {
+  gameMode('Who is this Character?');
+  redButton('play the game');
+  imageRecognizer('c3RhdGljL2Fzc2V0cy9pbWcvbW9kZXMvcGVvcGxlLzM2LmpwZw==');
+  mainMenu(document.querySelector('.swquiz-header'), getData);
+  modalGameOver(
+    document.querySelector('#swquiz-app'),
+    testDataHuman,
+    testDataComputer,
+    modalSubmitCallback,
+  );
+  startTime(options.quizMaxTime)
+  generateQuestion('people').then(res=> console.log(res))
+};

src/app/components/isAnswerCorrect.js

@@ -1,11 +1,11 @@
-const isAnswerCorrect = (guess, answer) =>{
-    if(typeof guess !== "string"){
-        throw new TypeError("Guessed answer isn't string");
-    }
-    if(typeof answer !== "string"){
-        throw new TypeError("Guessed answer isn't string");
-    }
-    return guess.toLowerCase() === answer.toLowerCase();
-}
+const isAnswerCorrect = (guess, answer) => {
+  if (typeof guess !== 'string') {
+    throw new TypeError("Guessed answer isn't string");
+  }
+  if (typeof answer !== 'string') {
+    throw new TypeError("Guessed answer isn't string");
+  }
+  return guess.toLowerCase() === answer.toLowerCase();
+};
 
-export {isAnswerCorrect};
+export { isAnswerCorrect };

src/app/components/mainMenu.js

@@ -17,10 +17,10 @@ const createButton = (className, textContent, callback) => {
 
 const mainMenu = (parent, callback) => {
   if (typeof parent !== 'object') {
-    throw new Error("First argument isn't an object!");
+    throw new TypeError("First argument isn't an object!");
   }
   if (typeof callback !== 'function') {
-    throw new Error("Callback argument isn't a function!");
+    throw new TypeError("Callback argument isn't a function!");
   }
 
   //Created nav container

src/app/components/modalGameOver.js

@@ -0,0 +1,173 @@
+const createHeader = (parent, textContent) => {
+  const h1 = document.createElement('h1');
+  h1.textContent = textContent;
+  h1.className = `${parent.className}--header`;
+  parent.appendChild(h1);
+};
+
+const createSummaryP = (parent, playerAnswers, computerAnswers) => {
+  const p = document.createElement('p');
+  p.className = `${parent.className}--paragraph`;
+  p.textContent = `The force is strong in you young Padawan! 
+    During 1 minute you have answered ${playerAnswers.correct} / ${playerAnswers.total} questions. 
+    And Google quessed ${computerAnswers.correct} / ${computerAnswers.total}.`;
+  parent.appendChild(p);
+};
+
+const createContainer = (parent, classHTML) => {
+  const container = document.createElement('div');
+  container.className = `${parent.className}--${classHTML}`;
+  return container;
+};
+
+const createMidImage = (url, parent) => {
+  const div = document.createElement('div');
+  const img = document.createElement('img');
+  div.className = `${parent.className}--photoContainer`;
+  img.className = `${parent.className}--photo`;
+  img.src = url;
+  img.alt = 'Middle Photo';
+  div.appendChild(img);
+  return div;
+};
+
+const createDetailedAnswerSection = (parent, textContent) => {
+  const div = document.createElement('div');
+  div.className = `${parent.className}--detailedAnswers`;
+  const p = document.createElement('p');
+  p.textContent = textContent;
+  div.appendChild(p);
+  return div;
+};
+
+const isCorrect = (arg) => {
+  return arg ? 'success' : 'danger';
+};
+
+const createDataTable = (parent, playerAnswers, computerAnswers) => {
+  const table = document.createElement('table');
+  const tbody = document.createElement('tbody');
+  table.className = `${parent.className}--table`;
+  const titleRow = `<th>
+    <td></td>
+    <td>You</td>
+    <td>Computer</td>
+    <td>Answer</td>
+    </th>`;
+  table.innerHTML = titleRow;
+  for (let ans in playerAnswers) {
+    if (
+      typeof playerAnswers[ans] === 'object' &&
+      typeof computerAnswers[ans] === 'object'
+    ) {
+      const row = `<tr>
+        <td><img src='${playerAnswers[ans].img}' alt='QuestionPhoto'></td>
+        <td class=${isCorrect(playerAnswers[ans].isCorrect)}>${
+        playerAnswers[ans].answer
+      }</td>
+        <td class=${isCorrect(computerAnswers[ans].isCorrect)}>${
+        computerAnswers[ans].answer
+      }</td>
+        <td>${computerAnswers[ans].correct}</td>
+        </tr>`;
+      tbody.innerHTML += row;
+    }
+  }
+  table.appendChild(tbody);
+  return table;
+};
+
+const mergeAndDisplayMiddleSection = (
+  parent,
+  playerAnswers,
+  computerAnswers,
+) => {
+  const container = createContainer(parent, 'middleContainer');
+  const img = createMidImage(
+    '../../../static/assets/ui/MasterYodaLeft.png',
+    parent,
+  );
+  const detailedAnswersSection = createDetailedAnswerSection(
+    parent,
+    'Detailed answers',
+  );
+  const table = createDataTable(parent, playerAnswers, computerAnswers);
+  container.appendChild(img);
+  detailedAnswersSection.appendChild(table);
+  container.appendChild(detailedAnswersSection);
+
+  parent.appendChild(container);
+};
+
+const createForm = (parent, callback) => {
+  const form = document.createElement('form');
+  form.addEventListener('submit', callback);
+  form.className = `${parent.className}--form`;
+  return form;
+};
+
+const createInput = (parent) => {
+  const input = document.createElement('input');
+  input.className = `${parent.className}--nameInput`;
+  input.id = 'name';
+  input.setAttribute('required', '');
+  return input;
+};
+
+const createLabel = (parent, target) => {
+  const label = document.createElement('label');
+  label.className = `${parent.className}--label`;
+  label.setAttribute('for', target);
+  label.textContent =
+    'Please fill your name in order to recive eternal glory in whole Galaxy!';
+  return label;
+};
+
+const createButton = (parent) => {
+  const btn = document.createElement('button');
+  btn.className = `${parent.className}--button`;
+  btn.setAttribute('type', 'submit');
+  btn.textContent = 'MAY THE FORCE BE WITH YOU!';
+  return btn;
+};
+
+const mergeAndDisplayBottomSection = (parent, callback) => {
+  const container = createContainer(parent, 'bottomContainer');
+  const form = createForm(parent, callback);
+  const input = createInput(parent);
+  const label = createLabel(parent, input.id);
+  const submitButton = createButton(parent);
+
+  container.appendChild(form);
+  form.appendChild(input);
+  form.appendChild(label);
+  form.appendChild(submitButton);
+
+  parent.appendChild(container);
+};
+
+const modalGameOver = (parent, playerAnswers, computerAnswers, callback) => {
+  if (typeof playerAnswers !== 'object') {
+    throw new TypeError("Second argument isn't an object!");
+  }
+  if (typeof computerAnswers !== 'object') {
+    throw new TypeError("Third argument isn't an object!");
+  }
+  if (typeof callback !== 'function') {
+    throw new TypeError("Fourth argument isn't a function!");
+  }
+  if (typeof parent !== 'object') {
+    throw new TypeError("First argument isn't an object!");
+  }
+  const modal = document.createElement('section');
+  modal.classList.add('swquiz-modal');
+  modal.setAttribute('data-testid', 'gameOverModal');
+
+  parent.appendChild(modal);
+  createHeader(modal, 'Game Over');
+  createSummaryP(modal, playerAnswers, computerAnswers);
+  mergeAndDisplayMiddleSection(modal, playerAnswers, computerAnswers);
+  mergeAndDisplayBottomSection(modal, callback);
+};
+
+export { modalGameOver };

src/app/components/ranking.js

@@ -60,7 +60,7 @@ function ranking(scoreList) {
 
   places.forEach((place, index) => {
     placeholders.push(createEntry(place, scoreList[index]));
-  })
+  });
 
   parent.appendChild(createHeader());
   parent.appendChild(createRankingHeader());

src/app/imageRecognizer.js

@@ -1,11 +1,11 @@
 export const imageRecognizer = (img) => {
-    const app = document.querySelector('#swquiz-app')
-    const imageDiv = document.createElement('div')
-    //btoa('string') - encode a string
-    //function decodes a string of data which has been encoded using Base64 encoding.
-    let image = atob(img) 
-    imageDiv.classList.add('swquiz-app__image')
-    imageDiv.setAttribute('data-testid', 'imgRecognizer')
-    imageDiv.style.backgroundImage = `url(${image})`
-    app.appendChild(imageDiv)
-}
+  const app = document.querySelector('#swquiz-app');
+  const imageDiv = document.createElement('div');
+  //btoa('string') - encode a string
+  //function decodes a string of data which has been encoded using Base64 encoding.
+  let image = atob(img);
+  imageDiv.classList.add('swquiz-app__image');
+  imageDiv.setAttribute('data-testid', 'imgRecognizer');
+  imageDiv.style.backgroundImage = `url(${image})`;
+  app.appendChild(imageDiv);
+};

src/app/logic/playerHuman.js

@@ -1,17 +1,17 @@
 export class PlayerHuman {
-    askQuestion(question, askedQuestion) {
-        if(askedQuestion) {
-            return askedQuestion(question);
-        } else {
-            throw new TypeError('Player should get question');
-        }
+  askQuestion(question, askedQuestion) {
+    if (askedQuestion) {
+      return askedQuestion(question);
+    } else {
+      throw new TypeError('Player should get question');
     }
+  }
 
-    answerOnQuestion(answer, answerdOnQuestion) {
-        if(answerdOnQuestion) {
-            answerdOnQuestion(answer);
-        } else {
-            throw new TypeError('Player should answer on asked question');
-        }
+  answerOnQuestion(answer, answerdOnQuestion) {
+    if (answerdOnQuestion) {
+      answerdOnQuestion(answer);
+    } else {
+      throw new TypeError('Player should answer on asked question');
     }
-}
+  }
+}

styles/App.scss

@@ -3,6 +3,7 @@
 @import './components/mainMenu.scss';
 @import './components/image.scss';
 @import './components/redButton.scss';
+@import './components/modalGameOver.scss';
 @import './components/ranking.scss';
 @import './components/timeLeftText.scss';