[#33] ranking for modes

src/app/components/ranking.js

@@ -0,0 +1,70 @@
+function createEntry(place, scoreEntry) {
+  let nickname = '-',
+    correctNumber = '-',
+    questionsNumber = '-';
+
+  if (scoreEntry !== undefined) {
+    ({ nickname, correctNumber, questionsNumber } = scoreEntry);
+  }
+
+  let div = document.createElement('div');
+  div.className = 'ranking-row';
+  div.innerHTML = `
+        <div class="place">
+            ${place}
+        </div>
+        <div class="nickname">
+            ${nickname}
+        </div>
+        <div class="score">
+            ${correctNumber} / ${questionsNumber}
+        </div>
+    `;
+  return div;
+}
+
+function createRankingHeader() {
+  let div = document.createElement('div');
+  div.className = 'ranking-row';
+  div.style.fontWeight = 'bold';
+  div.innerHTML = `
+        <div class="place">
+           Place
+        </div>
+        <div class="nickname">
+            Player
+        </div>
+        <div class="score">
+            Answered
+        </div>
+    `;
+  return div;
+}
+
+function createHeader() {
+  let div = document.createElement('div');
+  div.className = 'icon-header';
+  div.setAttribute('data-testid', 'icon-header');
+  div.innerHTML = `
+        <img data-testid='ranking-icon' src="./static/assets/ui/contacts_24px.svg" alt="Ranking icon">
+        <p>Mode Ranking</p>
+    `;
+  return div;
+}
+
+function ranking(scoreList) {
+  let parent = document.querySelector('.ranking-box');
+
+  let placeholders = [];
+  const places = ['1st', '2nd', '3rd'];
+
+  for (let place = 0; place < places.length; ++place) {
+    placeholders.push(createEntry(places[place], scoreList[place]));
+  }
+
+  parent.appendChild(createHeader());
+  parent.appendChild(createRankingHeader());
+  placeholders.forEach((item) => parent.appendChild(item));
+}
+
+export { ranking };

src/app/logic/localStorageScore.js

@@ -1,11 +1,17 @@
 import { MODES } from '../modes';
 
-function saveScore(mode, nickname, score) {
-  if (!modeIsValid(mode) || !scoreIsValid(score)) return;
+function saveScore(mode, nickname, correctNumber, questionsNumber) {
+  if (
+    !modeIsValid(mode) ||
+    !numberIsValid(correctNumber) ||
+    !numberIsValid(questionsNumber)
+  )
+    return;
 
   let scores = getScores(mode);
+  let percentage = (100 * correctNumber) / questionsNumber;
 
-  scores.push({ nickname, score });
+  scores.push({ nickname, correctNumber, questionsNumber, percentage });
   scores.sort(compareScores);
 
   if (scores.length === 4) {
@@ -20,17 +26,17 @@ function getScores(mode) {
 }
 
 function compareScores(scoreA, scoreB) {
-  return scoreA.score - scoreB.score;
+  return scoreB.percentage - scoreA.percentage;
 }
 
 function modeIsValid(mode) {
   return MODES.includes(mode);
 }
 
-function scoreIsValid(score) {
-  if (typeof score !== 'number')
-    throw new TypeError('score shall be of type "number"');
-  return score >= 0;
+function numberIsValid(number) {
+  if (typeof number !== 'number')
+    throw new TypeError('Passed variable shall be of type "number"');
+  return number >= 0;
 }
 
 export { saveScore, getScores };

styles/App.scss

@@ -3,12 +3,13 @@
 @import './components/mainMenu.scss';
 @import './components/image.scss';
 @import './components/redButton.scss';
-
+@import './components/ranking.scss';
 
 :root {
   --border-radius: 15px;
   --box-shadow-color: red;
-  --box-shadow-property: 0px 4px 4px rgba(0, 0, 0, 0.25),
+  --box-shadow-simple: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  --box-shadow-property: var(--box-shadow-simple),
     4px 4px 40px rgba(255, 0, 0, 0.9), inset 4px 5px 4px rgba(0, 0, 0, 0.5);
   --base-black: #000000;
   --base-white: #ffffff;

styles/components/ranking.scss

@@ -0,0 +1,44 @@
+.ranking-box {
+    background-color: white;
+    font-size: 1.5rem;
+    border-radius: var(--border-radius);
+    width: 100%;
+    height: 100%;
+    padding: 2rem;
+    box-shadow: var(--box-shadow-simple);
+}
+
+.icon-header {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    font-size: 2rem;
+}
+
+.icon-header > p {
+    margin-left: 2rem;
+}
+
+.ranking-row {
+    background-color: white;
+    grid-column-gap: 10px;
+    margin-bottom: 10px;
+    display: grid;
+    grid-template-columns: 15% 70% 15%;
+    grid-template-areas: "place nickname score";
+}
+
+.place { 
+    grid-area: place;
+}
+
+.nickname { 
+    grid-area: nickname;
+}
+
+.score { 
+    grid-area: score;
+}

test/app/components/ranking.test.js

@@ -0,0 +1,39 @@
+import { getScores, saveScore } from '../../../src/app/logic/localStorageScore';
+import { ranking } from '../../../src/app/components/ranking';
+import { screen } from '@testing-library/dom';
+import '@testing-library/jest-dom/extend-expect';
+import { PEOPLE_MODE } from '../../../src/app/modes';
+
+test('screen has four items of ranking-row', () => {
+  document.body.innerHTML = `<div id="ranking-box" class="ranking-box"></div>`;
+  ranking(getScores());
+
+  let rows = document.querySelectorAll('.ranking-row');
+  expect(rows.length).toBe(4);
+  expect();
+});
+
+test('there is an img tag for icon', () => {
+  document.body.innerHTML = `<div id="ranking-box" class="ranking-box"></div>`;
+  ranking(getScores());
+
+  expect(screen.getByTestId('ranking-icon')).toBeTruthy();
+});
+
+test('there is Lucy and Nancy in HTML', () => {
+  document.body.innerHTML = `<div id="ranking-box" class="ranking-box"></div>`;
+  saveScore(PEOPLE_MODE, 'Nancy', 12, 30);
+  saveScore(PEOPLE_MODE, 'Lucy', 14, 30);
+
+  ranking(getScores(PEOPLE_MODE));
+
+  let nicknames = document.querySelectorAll('.nickname');
+  let scores = document.querySelectorAll('.score');
+
+  expect(nicknames[1].textContent.includes('Lucy')).toBeTruthy();
+  expect(nicknames[2].textContent.includes('Nancy')).toBeTruthy();
+  expect(nicknames[3].textContent.includes('-')).toBeTruthy();
+  expect(scores[1].textContent.includes('14 / 30')).toBeTruthy();
+  expect(scores[2].textContent.includes('12 / 30')).toBeTruthy();
+  expect(scores[3].textContent.includes('- / -')).toBeTruthy();
+});

test/app/logic/localStorage.test.js

@@ -38,7 +38,7 @@ describe('LocalStorageScore saveScore() and getScore()', () => {
   test('Should throw an error if correctNumber is not type of number', () => {
     expect(() => {
       saveScore(PEOPLE_MODE, 'Lucy', '12', 12);
-    }).toThrow('score shall be of type "number"');
+    }).toThrow('Passed variable shall be of type "number"');
   });
 
   test('Add multiple scores', () => {