Merge pull request #66 from Nefariusek/feature/issue-50

Feature/issue 50

Author: GRosza

src/views/Leaderboard/Leaderboard.css

@@ -3,7 +3,6 @@ div#scorePage > * {
   background-color: #8ab0ab;
   margin: 0;
   padding: 0;
-  font-family: 'Bebas Neue', cursive;
 }
 
 #scorePage {
@@ -30,7 +29,7 @@ div#scorePage > * {
   display: flex;
   justify-content: center;
   text-transform: uppercase;
-  font-size: 2rem;
+  font-size: 1.5rem;
   word-wrap: break-word;
   max-width: 180px;
   color: whitesmoke;
@@ -73,10 +72,11 @@ td.step div:first-of-type {
 
 .listItem {
   display: inline-block;
-  width: 6rem;
-  margin: 1rem;
+  width: 100%;
+  height: 50%;
+  margin: 0.8rem 0.5rem;
   text-transform: uppercase;
-  font-size: 2rem;
+  font-size: 1.4rem;
   color: whitesmoke;
 }
 
@@ -93,9 +93,29 @@ button.resetButton {
 }
 
 @media (max-width: 960px) {
+  .podiumNick {
+    font-size: 1rem;
+  }
+  .listItem {
+    font-size: 0.8rem;
+  }
+
+  #scorePageTitle {
+    font-size: 3rem;
+  }
+
+  button.leaderboardMenuButton {
+    bottom: 0;
+    left: 0;
+    width: min-content;
+  }
+  td.step div:first-of-type {
+    width: 100px;
+  }
+
   button.resetButton {
     bottom: 0;
     right: 0;
     width: min-content;
   }
-}
+}

src/views/Leaderboard/Leaderboard.js

@@ -54,17 +54,17 @@ function renderPodium() {
 
 function getScoreFromLocalStorage() {
   const highScores = JSON.parse(localStorage.getItem('quizScores')) || [];
-  highScores.sort((a, b) => b.score - a.score);
+  highScores.sort((a, b) => b.SCORE - a.SCORE);
   function showScore() {
-    // nick1.innerText = `pts: ${Object.values(highScores[0])}`;
-    // nick2.innerText = `pts: ${Object.values(highScores[1])}`;
-    // nick3.innerText = `pts: ${Object.values(highScores[2])}`;
-    // nick4.innerText = Object.values(highScores[3]);
-    // nick5.innerText = Object.values(highScores[4]);
-    // nick6.innerText = Object.values(highScores[5]);
-    // nick7.innerText = Object.values(highScores[6]);
-    // nick8.innerText = Object.values(highScores[7]);
-    // nick9.innerText = Object.values(highScores[8]);
+    nick1.innerText = `${highScores[0].NAME} Pts:${highScores[0].SCORE}`;
+    nick2.innerText = `${highScores[1].NAME} Pts:${highScores[1].SCORE}`;
+    nick3.innerText = `${highScores[2].NAME} Pts:${highScores[2].SCORE}`;
+    nick4.innerText = `${highScores[3].NAME} Pts:${highScores[3].SCORE}`;
+    nick5.innerText = `${highScores[4].NAME} Pts:${highScores[4].SCORE}`;
+    nick6.innerText = `${highScores[5].NAME} Pts:${highScores[5].SCORE}`;
+    nick7.innerText = `${highScores[6].NAME} Pts:${highScores[6].SCORE}`;
+    nick8.innerText = `${highScores[7].NAME} Pts:${highScores[7].SCORE}`;
+    nick9.innerText = `${highScores[8].NAME} Pts:${highScores[8].SCORE}`;
   }
   return showScore();
 }

src/views/ScorePage/ScorePage.css

@@ -11,22 +11,25 @@ h2 {
 
 #nickFormDiv {
   margin-top: 10px;
+  display: flex;
   justify-content: center;
   width: 70%;
   margin: auto;
-  display: flex;
   gap: 5%;
 }
 
 #nickname {
   border: 0px solid;
-  width: 400px;
+  width: 250px;
   height: 48px;
 }
 
 #nickname:hover {
   color: white;
 }
+#nickname:disabled {
+  opacity: 0;
+}
 
 #nickname::placeholder {
   color: lightgray;
@@ -50,6 +53,11 @@ input {
   bottom: 2%;
   right: 4%;
 }
+
+.saveScoreBtn:disabled {
+  opacity: 0;
+}
+
 #finalScore {
   height: 70px;
 }

src/views/ScorePage/ScorePage.js

@@ -7,31 +7,54 @@ import { userAnswers } from '../QuizView/quizView';
 
 export function renderScorePage() {
   const recentUserScore = getCurrentScore(userAnswers);
-
+  const totalNumber = QuizSettings.questionsNum;
   const container = document.createElement('div');
   container.setAttribute('id', 'scorePage');
   container.append(
     renderGraphics(),
-    renderScore(recentUserScore),
+    renderScore(recentUserScore, totalNumber),
     renderNickForm(),
     renderMenuButton(),
     renderPlayAgainButton(),
   );
   document.querySelector('#app').append(container);
+  renderCongratsMessage(recentUserScore, totalNumber);
+  document.querySelector('.saveScoreBtn').disabled = true;
 }
 
-function renderScore(score) {
+function renderScore(score, totalNumber) {
   const container = document.createElement('div');
   const congratsText = document.createElement('h2');
   const scoreText = document.createElement('h2');
   const finalScore = document.createElement('h2');
   finalScore.setAttribute('id', 'finalScore');
   congratsText.innerText = 'CONGRATS!';
   scoreText.innerText = `YOUR SCORE IS: ${score}`;
+  congratsText.setAttribute('id', 'congratsText');
+  congratsText.innerText = '';
+  scoreText.innerText = `YOUR SCORE IS:  ${score} / ${totalNumber}`;
   container.append(congratsText, scoreText, finalScore);
   return container;
 }
 
+function getCongratsMessage(recentUserScore, totalNumber) {
+  let message;
+  const totalPercent = Math.floor((recentUserScore / totalNumber) * 100);
+  if (totalPercent >= 80) {
+    message = `"WOW"! Your score is ${totalPercent}%! You are True animal lover!`;
+  } else if (totalPercent >= 50) {
+    message = `You could use a litte practice! Your score is ${totalPercent}% Would you like to do the quiz again?`;
+  } else {
+    message = `Well, it could be better! Your score is ${totalPercent}% Would you like to do the quiz again?`;
+  }
+  return message;
+}
+
+function renderCongratsMessage(recentUserScore, totalNumber) {
+  const finalMessage = document.getElementById('congratsText');
+  finalMessage.innerText = getCongratsMessage(recentUserScore, totalNumber);
+}
+
 function renderGraphics() {
   const img = document.createElement('img');
   img.src = './cat.png';
@@ -50,6 +73,9 @@ function renderNickForm() {
   input.setAttribute('placeholder', 'Enter Nickname');
   input.setAttribute('type', 'text');
   input.setAttribute('style', 'text-transform: uppercase');
+  input.addEventListener('keyup', () => {
+    document.querySelector('.saveScoreBtn').disabled = !input.value;
+  });
   nickFormContainer.append(input, Button('SUBMIT', 'saveScoreBtn', false, 'click', saveQuizScore));
   return nickFormContainer;
 }
@@ -60,7 +86,7 @@ function getCurrentScore(Answers) {
 
 function nicknameValidation() {
   const input = document.getElementById('nickname');
-  if (input.value !== '' && input.value !== 'NICKNAME') {
+  if (input.value !== '') {
     return true;
   }
   return false;
@@ -69,18 +95,20 @@ function nicknameValidation() {
 function saveQuizScore() {
   const quizScores = JSON.parse(localStorage.getItem('quizScores')) || [];
   const recentUserScore = getCurrentScore(userAnswers);
-  if (!nicknameValidation()) {
-    alert('Type in your nickname!');
-  } else {
+  const nickName = document.getElementById('nickname');
+  if (nicknameValidation()) {
     const score = {
       SCORE: recentUserScore,
       ABOUT: QuizSettings.quizAbout,
       NUMBER: QuizSettings.questionsNum,
       TYPE: QuizSettings.questionsType,
-      NAME: document.getElementById('nickname').value,
+      NAME: nickName.value,
     };
     quizScores.push(score);
     localStorage.setItem('quizScores', JSON.stringify(quizScores));
+    nickName.value = null;
+    nickName.disabled = true;
+    document.querySelector('.saveScoreBtn').disabled = true;
   }
 }