Modal score can be shown after game

assets/css/style.css

@@ -175,27 +175,50 @@ video {
     }
 }
 
-.info-open, .score-open {
+.info-open, 
+.score-open, 
+.game-info-open,
+.game-score-open {
     cursor: pointer;
     margin-top: 20px;
     color: var(--app-light-gray);
 }
 
-.info-open {
+.info-open,
+.game-info-open {
     font-size: 26px;
     margin-right: 15px;
 }
 
-.score-open {
+.score-open, 
+.game-score-open  {
     font-size: 22px;
     margin-left: 15px;
 }
 
-.info-open:hover, .score-open:hover {
+.info-open:hover, 
+.score-open:hover, 
+.game-info-open:hover, 
+.game-score-open:hover {
     transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
     transform: scale(1.2);
     color: var(--app-white);
 }
+
+.game-info-open {
+    margin-right: 10px;
+    color: var(--app-white);
+}
+
+.game-score-open {
+    margin-left: 10px;
+    color: var(--app-white);
+}
+
+.i-disabled {
+    pointer-events: none;
+    opacity: 0.5;
+}
 
 .start {
     width: 70px;

assets/js/index.js

@@ -2,8 +2,7 @@
 
 import { select, listen, formatCounter } from "./utils.js";
 import data from "../data/word-bank.js";
-import { openModal, closeModal, existScores, 
-         getScores, saveScore } from "./modal-score.js";
+import { saveScore } from "./modal-score.js";
 
 const TOTAL_SECONDS = 15;
 const containerIntroObj = select('.container-intro');
@@ -17,6 +16,8 @@ const hitsObj = select('.hits');
 const startObj = select('.start');
 const restartObj = select('.restart');
 const gameCounterObj = select('.racing-counter');
+const gameInfoOpen = select('.game-info-open');
+const gameScoreOpen = select('.game-score-open');
 
 let wordBank = data;
 let wordToType = '';
@@ -41,6 +42,7 @@ function play() {
     inputObj.value = '';
     outputObj.innerText = '';
     hitsObj.innerText = '';
+    disableButtons(true);
 
     setTimeout(() => {
         gameVideoObj.play();
@@ -75,6 +77,7 @@ function start() {
             outputObj.innerText = 'Game Over!';
             stop(false);
             saveScore(hits);
+            disableButtons(false);
         }
     }, 1000);
 }
@@ -88,7 +91,6 @@ function stop(hideOutput = true) {
     gameAudioObj.currentTime = 0;
 
     containerIntroObj.style.display = 'none';
-    //OJO if (hideOutput) 
     gameControlsObj.style.visibility = hideOutput ? 'hidden' : 'none';
     inputObj.style.visibility = 'hidden';
     containerGameObj.style.display = 'block';
@@ -146,6 +148,16 @@ function applyEffect(input, wordToType) {
     }
 }
 
+function disableButtons(disable) {
+    if (disable) {
+        gameInfoOpen.classList.add('i-disabled');
+        gameScoreOpen.classList.add('i-disabled');
+    } else {
+        gameInfoOpen.classList.remove('i-disabled');
+        gameScoreOpen.classList.remove('i-disabled');
+    }
+}
+
 listen('input', inputObj, () => {
     const input = inputObj.value.trim();
 
@@ -163,6 +175,7 @@ listen('input', inputObj, () => {
             outputObj.innerText = 'Congrats!!';
             stop(false);
             saveScore(hits);
+            disableButtons(false);
         }
     }
 });

assets/js/modal-info.js

@@ -8,15 +8,9 @@ const modalOverlay = select('.modal-info-container');
 const modal = select('.modal-info');
 const logo = select('.logo');
 const infoClose = select('.info-close');
+const gameInfoOpen = select('.game-info-open');
 
-function closeModal () {
-    modalOverlay.classList.remove('active');
-    modal.classList.remove('active');
-    logo.style.visibility = 'visible';
-    infoVideo.pause();
-};
-
-listen('click', infoOpen, () => {
+function openModal() {
     modalOverlay.classList.add('active');
     modal.classList.add('active');
 
@@ -25,7 +19,22 @@ listen('click', infoOpen, () => {
     }, 300);
 
     infoVideo.currentTime = 0;
-    infoVideo.play();
+    infoVideo.play();    
+}
+
+function closeModal() {
+    modalOverlay.classList.remove('active');
+    modal.classList.remove('active');
+    logo.style.visibility = 'visible';
+    infoVideo.pause();
+};
+
+listen('click', infoOpen, () => {
+    openModal();
+});
+
+listen('click', gameInfoOpen, () => {
+    openModal();
 });
 
 listen('click', infoClose, () => {

assets/js/modal-score.js

@@ -11,11 +11,12 @@ const modal = select('.modal-score');
 const logo = select('.logo');
 const scoreClose = select('.score-close');
 const scoreTable = select('.score-table');
+const gameScoreOpen = select('.game-score-open');
 const rootStyles = getComputedStyle(document.documentElement);
 const mainFont = rootStyles.getPropertyValue('--app-main-font').trim();
 const monospaceFont = rootStyles.getPropertyValue('--app-monospace-font').trim();
 
-export function openModal() {
+function openModal() {
     modalOverlay.classList.add('active');
     modal.classList.add('active');
 
@@ -25,17 +26,17 @@ export function openModal() {
     }, 300);
 }
 
-export function closeModal() {
+function closeModal() {
     modalOverlay.classList.remove('active');
     modal.classList.remove('active');
     logo.style.visibility = 'visible';
 };
 
-export function existScores() {
+function existScores() {
     return localStorage.length > 0 && LS_SCORES in localStorage;
 }
 
-export function getScores() {
+function getScores() {
     let scores = [];
 
     if (existScores()) {
@@ -104,6 +105,10 @@ listen('click', scoreOpen, () => {
     openModal();
 });
 
+listen('click', gameScoreOpen, () => {
+    openModal();
+});
+
 listen('click', scoreClose, () => {
     closeModal();
 });

index.html

@@ -51,8 +51,9 @@ <h1><i class="fa-solid fa-stopwatch"> <span class="counter racing-counter"></spa
                             <div class="output-container"><p class="output"></p></div>
                             <input class="input" type="text">
                             <div class="hits-container"><p class="counter hits"></p></div>
-                            <i class="game-score-open fa-solid fa-trophy"></i>
+                            <i class="game-info-open fa-regular fa-circle-question"></i>
                             <button class="restart">Restart</button>
+                            <i class="game-score-open fa-solid fa-trophy"></i>
                         </div>
                     </div>
                 </div>