Merge branch 'development' into #135/UI/FixTimers

src/app/controller/controller.js

@@ -62,8 +62,10 @@ class Controller {
   }
 
   changeGameMode = (mode) => {
+    const level = this.model.difficultyLevel;
     this.model.gameMode = mode.toLowerCase();
-    this.view.showViewsForChosenMode(mode);
+    this.view.showViewsForChosenMode(mode, level);
+    this.view.bindHofButton(this.showHofView);
     this.view.bindButtonPlay(this.startGame);
   };
 
@@ -77,8 +79,21 @@ class Controller {
     this.view.showSettings();
   }
 
-  updateViewsForHallOfFameAtChosenMode(mode) {
-    this.view.updateViewsForHallOfFameAtChosenMode(mode);
-  }
+  showHofView = () => {
+    this.view.showHof(this.model.gameMode, this.model.difficultyLevel);
+    this.view.bindRulesButton(this.showRulesForChosenMode);
+    this.view.bindModeButtons(this.changeHofView);
+    this.view.bindButtonPlay(this.startGame);
+  };
+
+  changeHofView = () => {
+    this.showHofView();
+  };
+
+  showRulesForChosenMode = () => {
+    this.view.showViewsForChosenMode(this.model.gameMode);
+    this.view.bindHofButton(this.showHofView);
+    this.view.bindButtonPlay(this.startGame);
+  };
 }
 export default Controller;

src/app/view/components/buttonRules.js

@@ -0,0 +1,17 @@
+import elementCreator from '../../utils/elementCreator';
+
+export default function doButtonRules(text) {
+  const rulesIcon = elementCreator('span', {
+    class: 'game__button-icon fas fa-graduation-cap',
+  });
+
+  const buttonCreator = elementCreator(
+    'button',
+    {
+      class: 'game__button game__button-rules',
+    },
+    rulesIcon,
+    text,
+  );
+  return buttonCreator;
+}

src/app/view/components/buttonWhite.js

@@ -1,5 +1,5 @@
 import elementCreator from '../../utils/elementCreator';
-
+// This is a Settings button.
 function buttonWhite(text) {
   const buttonCreatorWhite = elementCreator(
     'button',

src/app/view/components/doBtnHallOfFame.js

@@ -1,46 +1,20 @@
 import elementCreator from '../../utils/elementCreator';
-import HallOfFameBtn from '../../../../static/assets/img/HallOfFameBtn.svg';
 
-function doBtnHallOfFame(text, mode) {
-  // eslint-disable-next-line prettier/prettier
-  const imageCup = elementCreator('img', {
-    src: HallOfFameBtn,
-    class: 'halloffame-icon',
-    alt: 'Victory Cup',
+function doBtnHallOfFame(text) {
+  const imageCup = elementCreator('span', {
+    class: 'game__button-icon fas fa-trophy',
   });
 
-  let buttonCreator;
+  const hofButton = elementCreator(
+    'button',
+    {
+      class: 'game__button game__button-hof',
+    },
+    imageCup,
+    text,
+  );
 
-  if (typeof mode === 'undefined') {
-    buttonCreator = elementCreator(
-      'button',
-      {
-        class: 'game__button game__button--disabled',
-        disabled: 'disabled',
-      },
-      imageCup,
-      text,
-    );
-  } else {
-    buttonCreator = elementCreator(
-      'button',
-      {
-        class: 'game__button',
-      },
-      imageCup,
-      text,
-    );
-  }
-
-  return buttonCreator;
+  return hofButton;
 }
-// dzialanie przycisku - eventlistener
-// doBtnHallOfFame.map((button) =>
-//   doBtnHallOfFame.addEventListener('click', () => {
-//     clearActive(modeButtons);
-//     doBtnHallOfFame.classList.add('active');
-//     window.app.changeGameMode(button.textContent);
-//   }),
-// );
 
 export default doBtnHallOfFame;

src/app/view/components/doHallOfFameContent.js

@@ -1,31 +1,20 @@
 import elementCreator from '../../utils/elementCreator';
+import hofTable from './hofTable';
 
-const hallOfFame = (mode) => {
-  const hofTextPart = {
-    Students: 'Insert 3 winners in Students mode here, sorted',
-    Staff: 'Insert 3 winners in Staff mode here, sorted',
-    Houses: 'Insert 3 winner in Houses mode here, softed',
-  };
-
+const doHallOfFameContent = (mode, level) => {
   const cupIcon = elementCreator('span', {
-    class: 'rules-icon fas fa-graduation-cap',
+    class: 'rules-icon fas fa-trophy',
   });
 
   const hofHeader = elementCreator(
     'h2',
     { class: 'game__mode-rules-header' },
     cupIcon,
-    'Mode Rules',
-  );
-
-  const hofText = elementCreator(
-    'p',
-    { class: 'game__mode-rules-text' },
-    `${hofTextPart[mode]} concatenate.`,
+    ` ${mode} Mode Ranking - Level ${level}`,
   );
 
-  const hofFullElement = [hofHeader, hofText];
+  const hofFullElement = [hofHeader, hofTable(mode, level)];
   return hofFullElement;
 };
 
-export default hallOfFame;
+export default doHallOfFameContent;

src/app/view/components/getHofData.js

@@ -0,0 +1,53 @@
+import obj from '../../../../tests/localStorage/przykladowyranking';
+
+// tablica zlozona z obiektow - definicja trybu gry //
+// pierwszy obiekt w tablicy: easy, drugi: medium, trzeci: hard //
+const arrStudents = [obj.students_easy, obj.students_medium, obj.students_hard];
+const arrHouses = [obj.houses_easy, obj.houses_medium, obj.houses_hard];
+const arrStaff = [obj.staff_easy, obj.staff_medium, obj.staff_hard];
+
+function getHofData(mode, level, place, property) {
+  const _mode = mode.toLowerCase();
+  const _level = level.toLowerCase();
+
+  let selectedLevel;
+  if (_level === 'easy') {
+    selectedLevel = 0;
+  } else if (_level === 'medium') {
+    selectedLevel = 1;
+  } else if (_level === 'hard') {
+    selectedLevel = 2;
+  } else {
+    throw Error('Wrong level data');
+  }
+
+  let selectedMode;
+  if (_mode === 'staff') {
+    selectedMode = arrStaff;
+  } else if (_mode === 'students') {
+    selectedMode = arrStudents;
+  } else if (_mode === 'houses') {
+    selectedMode = arrHouses;
+  } else {
+    throw Error('Wrong mode data');
+  }
+
+  let selectedPlace;
+  if (place === '1') {
+    selectedPlace = 0;
+  } else if (place === '2') {
+    selectedPlace = 1;
+  } else if (place === '3') {
+    selectedPlace = 2;
+  } else {
+    throw Error('Wrong place data');
+  }
+
+  // console.log(`wybrane: ${mode}, ${level}, ${place}`);
+  // console.log(typeof selectedMode[selectedLevel][selectedPlace][property]);
+  if (!selectedLevel || selectedMode[selectedLevel].length < selectedPlace) {
+    // console.log('No ranking data in local storage!');
+  } else return selectedMode[selectedLevel][selectedPlace][property];
+}
+
+export default getHofData;

src/app/view/components/hofTable.js

@@ -0,0 +1,89 @@
+import elementCreator from '../../utils/elementCreator';
+import getHofData from './getHofData';
+
+function hofTable(mode, level) {
+  if (level === 'easy') {
+    const altText = elementCreator(
+      'p',
+      { class: 'hof__table-alttxt' },
+      'Easy mode has no ranking available!!!',
+    );
+    return altText;
+  }
+
+  const tableHead1 = elementCreator(
+    'td',
+    { class: 'hof__table-header' },
+    'Place',
+  );
+  const tableHead2 = elementCreator(
+    'td',
+    { class: 'hof__table-header' },
+    'Player',
+  );
+  const tableHead3 = elementCreator(
+    'td',
+    { class: 'hof__table-header' },
+    'Points',
+  );
+
+  const tableRow1stPlace = elementCreator(
+    'tr',
+    {},
+    elementCreator('td', { class: 'hof__table-place' }, '1'),
+    elementCreator(
+      'td',
+      { class: 'hof__table-player1' },
+      `${getHofData(mode, level, '1', 'name')}`,
+    ),
+    elementCreator(
+      'td',
+      { class: 'hof__table-answered1' },
+      `${getHofData(mode, level, '1', 'result')}`,
+    ),
+  );
+  const tableRow2ndPlace = elementCreator(
+    'tr',
+    {},
+    elementCreator('td', { class: 'hof__table-place' }, '2'),
+    elementCreator(
+      'td',
+      { class: 'hof__table-player2' },
+      `${getHofData(mode, level, '2', 'name')}`,
+    ),
+    elementCreator(
+      'td',
+      { class: 'hof__table-answered2' },
+      `${getHofData(mode, level, '2', 'result')}`,
+    ),
+  );
+  const tableRow3rdPlace = elementCreator(
+    'tr',
+    {},
+    elementCreator('td', { class: 'hof__table-place' }, '3'),
+    elementCreator(
+      'td',
+      { class: 'hof__table-player3' },
+      `${getHofData(mode, level, '3', 'name')}`,
+    ),
+    elementCreator(
+      'td',
+      { class: 'hof__table-answered3' },
+      `${getHofData(mode, level, '3', 'result')}`,
+    ),
+  );
+
+  const wholeTable = elementCreator(
+    'table',
+    { class: 'hof__table' },
+    tableHead1,
+    tableHead2,
+    tableHead3,
+    tableRow1stPlace,
+    tableRow2ndPlace,
+    tableRow3rdPlace,
+  );
+
+  return wholeTable;
+}
+export default hofTable;

src/app/view/components/modeRules.js

@@ -5,9 +5,9 @@ const rulesTextBoiler =
 
 const modeRules = (mode) => {
   const rulesTextPart = {
-    Students: "the name of Hogwart's student",
-    Staff: "the name of Hogwart's staff member",
-    Houses: "a Hogwart's house of the character",
+    students: "the name of Hogwart's student",
+    staff: "the name of Hogwart's staff member",
+    houses: "a Hogwart's house of the character",
   };
 
   const rulesIcon = elementCreator('span', {

src/app/view/components/questionForMode.js

@@ -2,9 +2,9 @@ import elementCreator from '../../utils/elementCreator';
 
 const questionForMode = (mode) => {
   const questions = {
-    Students: "Who is this Hogwart's student?",
-    Staff: "Who is this from Hogwart's staff?",
-    Houses: 'To which house do they belong\n?',
+    students: "Who is this Hogwart's student?",
+    staff: "Who is this from Hogwart's staff?",
+    houses: 'To which house do they belong\n?',
   };
   return elementCreator(
     'p',