Merge branch 'develop' into refactor/#76-refactor-image-logo

babel.config.json

@@ -1,15 +1,15 @@
 {
   "presets": [
-      [
-          "@babel/preset-env",
-          {
-              "targets": {
-                  "edge": "17",
-                  "firefox": "60",
-                  "chrome": "67",
-                  "safari": "11.1"
-              }
-          }
-      ]
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "edge": "17",
+          "firefox": "60",
+          "chrome": "67",
+          "safari": "11.1"
+        }
+      }
+    ]
   ]
 }

src/app/App.js

@@ -3,7 +3,7 @@ import Logo from './components/Logo';
 import createButtonRed from './components/ButtonRed';
 import createWhiteButtonWithIcon from './components/ButtonWhiteWithIcon';
 import createGameModeName from './components/GameModeName';
-import elemFactory from './utils/elementFactory';
+import createRemainingTime from './components/RemainingTime';
 import render from './utils/render';
 
 const App = ({ options }) => {
@@ -18,48 +18,15 @@ const App = ({ options }) => {
     'fa-graduation-cap',
   );
   const gameModeInfo = createGameModeName('Who is this character?');
-
-  //TODO: to remove after accept
-  /* ------------ Examples of usage: -------------*/
-
-  const firstChildOfTestElement = elemFactory(
-    'div',
-    { id: 'firstChild' },
-    'Pierwsze dziecko',
-  );
-
-  const thirdChildOfTestElement = elemFactory(
-    'ul',
-    {},
-    'Trzecie dziecko - lista elementów:',
-    elemFactory('li', { style: 'color: red' }, 'pierwszy punkt'),
-    elemFactory('li', {}),
-    elemFactory('li', {}, 'trzeci punkt'),
-  );
-
-  const testElement = elemFactory(
-    'div',
-    { className: 'button button--success', id: 'test' },
-    firstChildOfTestElement,
-    'To jest drugie dziecko',
-    thirdChildOfTestElement,
-  );
-
-  const childOfFirstChildOfTestElement = elemFactory(
-    'p',
-    {},
-    'Dziecko pierwszego dziecka',
-  );
+  const remainingTime = createRemainingTime();
 
   render(
     '#swquiz-app',
     gameModeInfo,
     buttonRules,
     buttonPlay,
-    testElement,
+    remainingTime,
   );
-
-  render('#firstChild', childOfFirstChildOfTestElement);
 };
 
 export default App;

src/app/components/GameModeName.js

@@ -1,29 +1,34 @@
+import ef from '../utils/elementFactory';
 import validateString from '../utils/validateString';
 
-export default function gameMode(message) {
+function GameModeName(message) {
   const isAValidString = validateString(message);
   if (!isAValidString) {
     throw new Error('Not a valid string');
   }
 
-  const modeInfo = document.createElement('div');
-  const heading = document.createElement('h2');
-  const modeText = document.createElement('span');
-  const question = document.createElement('span');
+  const question = ef(
+    'span',
+    { className: 'mode-info__question' },
+    message,
+  );
 
-  modeInfo.id = 'mode-info';
-  modeInfo.className = 'mode-info';
+  const modeText = ef(
+    'span',
+    { className: 'mode-info__text' },
+    'mode: ',
+  );
 
-  heading.classList.add('mode-info__heading');
+  const heading = ef(
+    'h2',
+    { className: 'mode-info__heading' },
+    modeText,
+    question,
+  );
 
-  modeText.classList.add('mode-info__text');
-  modeText.innerText = 'mode: ';
-
-  question.classList.add('mode-info__question');
-  question.innerText = message;
-
-  heading.append(modeText, question);
-  modeInfo.append(heading);
+  const modeInfo = ef('div', { className: 'mode-info' }, heading);
 
   return modeInfo;
 }
+
+export default GameModeName;

src/app/components/RemainingTime.js

@@ -0,0 +1,43 @@
+function handleTimeChange(element) {
+  let timer = process.env.QUIZ_MAX_TIME_SECONDS;
+
+  const idInterval = setInterval(() => {
+    timer--;
+
+    const min = Math.floor(timer / 60);
+    const sec = timer % 60;
+    let minToDisplay = min;
+    let secToDisplay = sec;
+
+    if (timer === 0) {
+      clearInterval(idInterval);
+    }
+
+    if (min < 10) {
+      minToDisplay = '0' + minToDisplay;
+    }
+
+    if (sec < 10) {
+      secToDisplay = '0' + secToDisplay;
+    }
+
+    element.textContent = `Time Left: ${minToDisplay}m ${secToDisplay}s`;
+  }, 1000);
+}
+
+function RemainingTime() {
+  const parentElement = document.createElement('div');
+  const counter = document.createElement('div');
+
+  parentElement.classList.add('remaining-time');
+  counter.textContent = 'Time Left : 02 m 00 s';
+  counter.classList.add('remaining-time__counter');
+
+  parentElement.appendChild(counter);
+
+  handleTimeChange(counter);
+
+  return parentElement;
+}
+
+export default RemainingTime;

src/app/logic/ComputerPlayer.js

@@ -1,18 +1,23 @@
 import getRandomInt from '../utils/getRandomInt';
+import { Player } from './Player';
+import isAnswerCorrect from './isAnswerCorrect';
 
-export const ComputerPlayer = () => {
-  const player = {
-    askQuestion(question, callback) {
-      if (!question) throw new Error('There is no question');
-      callback(question);
-    },
+class ComputerPlayer extends Player {
+  getAnswer(answers, correctAnswer, callback) {
+    if (answers.length === 0 || !correctAnswer) {
+      throw new Error('There is no answers or correctAnswer');
+    }
+    const randomAnswer = answers[getRandomInt(0, 3)];
+    if (isAnswerCorrect(randomAnswer, correctAnswer)) {
+      this.correctAnswersCounter += 1;
+    }
+    this.allAnswers.push(randomAnswer);
+    if (typeof callback === 'function') callback(randomAnswer);
+  }
+}
 
-    getAnswer(answers, callback) {
-      if (!answers) throw new Error('There is no answers');
-      callback(answers[getRandomInt(0, 3)]);
-    },
-  };
-  return player;
-};
+function createComputerPlayer() {
+  return new ComputerPlayer();
+}
 
-export default ComputerPlayer;
+export default createComputerPlayer;

src/app/logic/Player.js

@@ -0,0 +1,26 @@
+export class Player {
+  constructor() {
+    this.allAnswers = [];
+    this.correctAnswersCounter = 0;
+  }
+
+  getModalData() {
+    return {
+      score: this.correctAnswersCounter,
+      answers: this.allAnswers,
+    };
+  }
+
+  getAnswer(answer, isCorrect, callback) {
+    if (!answer) throw new Error('There is no answer');
+    if (isCorrect) this.correctAnswersCounter += 1;
+    this.allAnswers.push(answer);
+    if (typeof callback === 'function') callback(answer);
+  }
+}
+
+function createPlayer() {
+  return new Player();
+}
+
+export default createPlayer;

src/app/utils/elementFactory.js

@@ -1,6 +1,6 @@
 import { childrenInjector } from './render';
 
-const elementFactory = (tag, attributes, ...children) => {
+const elementFactory = (tag, attributes = {}, ...children) => {
   const newElement = document.createElement(tag);
 
   Object.entries(attributes).forEach(([key, value]) => {

styles/_components.scss

@@ -2,6 +2,7 @@
 @import './components/gameModeName';
 @import './components/logo';
 @import './components/visualImage';
+@import './components/remainingTime';
 @import './components/answers';
 @import './components/modeRules';
 //add all components styles

styles/components/_remainingTime.scss

@@ -0,0 +1,13 @@
+.remaining-time {
+  justify-content: center;
+  align-items: center;
+  display: flex;
+
+  &__counter {
+    color: rgba(255, 0, 0, 0.8);
+    text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25),
+      4px 4px 40px rgba(255, 0, 0, 0.9);
+    font-size: $font-size-primary;
+    font-weight: bold;
+  }
+}