Merge pull request #3109 from Singh-Divyansh/gssoc-24-1

updated the script.js file

Games/Alphabet_Learning_Game/script.js

@@ -1,131 +1,83 @@
 document.addEventListener('DOMContentLoaded', function () {
 
   // Declaring stuff
-  myName = ""; // declaring a variable for my easter egg
-  audioPlayer = document.getElementsByTagName('audio')[0];
+  let myName = ""; // declaring a variable for my easter egg
+  const audioPlayer = document.querySelector('audio');
 
   // ------ Functions ------
+
   // Getting the letter sound and playing it.
   function setLetterSound(letterVariable) {
-    var mp3Source = document.getElementById('mp3Source');
-    var oggSource = document.getElementById('oggSource');
-    mp3Source.src = 'sounds/mp3/' + letterVariable + '.mp3';
-    oggSource.src = 'sounds/ogg/' + letterVariable + '.ogg';
+    audioPlayer.src = `sounds/mp3/${letterVariable}.mp3`;
   }
 
   function setGenericSound() {
-    var mp3Source = document.getElementById('mp3Source');
-    var oggSource = document.getElementById('oggSource');
-    mp3Source.src = 'sounds/mp3/like-glass.mp3';
-    oggSource.src = 'sounds/ogg/like-glass.ogg';
+    audioPlayer.src = 'sounds/mp3/like-glass.mp3';
   }
 
   // Generating a new element to restart the CSS3 animation.
   function generateNewElement() {
-    var elm = document.getElementById('big-char');
-    var newone = elm.cloneNode(true);
+    const elm = document.getElementById('big-char');
+    const newone = elm.cloneNode(true);
     elm.parentNode.replaceChild(newone, elm);
   }
 
   // Running the HTML5 audio player
   function runAudioPlayer() {
-    audioPlayer.load(); // pre loading the audi file
-    // audioPlayer.currentTime = 0; // start the audio from the beginning
+    audioPlayer.load(); // pre loading the audio file
     audioPlayer.play(); // play the audio
   }
 
   // Show and hide the about
-  document.getElementById('hide-button').onclick = function () {
+  document.getElementById('hide-button').addEventListener('click', function () {
     document.getElementById('about-cont').style.display = "none";
-  }
-  document.getElementById('about-button').onclick = function () {
+  });
+
+  document.getElementById('about-button').addEventListener('click', function () {
     document.getElementById('about-cont').style.display = "block";
-  }
+  });
 
   // On mobile, when the user taps on "Show Keyboard" move the focus to the hidden input
-  document.getElementById('show-keyboard-button').onclick = function () {
+  document.getElementById('show-keyboard-button').addEventListener('click', function () {
     document.getElementById('mobile-text-input').focus();
-  }
+  });
+
+  document.addEventListener('keypress', function (event) { // Do stuff when you press any key in the document
 
-  document.onkeypress = function (event) { // Do stuff when you press any key in the document
-
-    letterOnScreen = document.getElementById('big-char'); // get the element properties
-    console.log(event.charCode);
-    if ( // if use pressed on any of these characters which are not numbers or letters
-      event.charCode === 13 ||
-      event.charCode === 32 ||
-      event.charCode === 92 ||
-      event.charCode === 96 ||
-      event.charCode === 61 ||
-      event.charCode === 43 ||
-      event.charCode === 45 ||
-      event.charCode === 33 ||
-      event.charCode === 64 ||
-      event.charCode === 35 ||
-      event.charCode === 36 ||
-      event.charCode === 37 ||
-      event.charCode === 94 ||
-      event.charCode === 38 ||
-      event.charCode === 42 ||
-      event.charCode === 40 ||
-      event.charCode === 41 ||
-      event.charCode === 95 ||
-      event.charCode === 91 ||
-      event.charCode === 93 ||
-      event.charCode === 34 ||
-      event.charCode === 39 ||
-      event.charCode === 47 ||
-      event.charCode === 63 ||
-      event.charCode === 62 ||
-      event.charCode === 44 ||
-      event.charCode === 60 ||
-      event.charCode === 46 ||
-      event.charCode === 59 ||
-      event.charCode === 58 ||
-      event.charCode === 123 ||
-      event.charCode === 124 ||
-      event.charCode === 125 ||
-      event.charCode === 126
-    ) {
-      if (event.charCode === 13) { // getting the Enter key
-        letterOnScreen.innerHTML = "Enter";
-      } else if (event.charCode === 32) {
-        letterOnScreen.innerHTML = "Space";
-      } else {
-        letterOnScreen.innerHTML = String.fromCharCode(event.charCode);
-      }
+    const letterOnScreen = document.getElementById('big-char'); // get the element properties
+    console.log(event.key);
+    if (!/^[a-zA-Z0-9]$/.test(event.key)) {
+      const specialChars = {
+        '13': 'Enter',
+        '32': 'Space',
+      };
+      const specialChar = specialChars[event.keyCode] || event.key;
+      letterOnScreen.innerHTML = specialChar;
       setGenericSound(); // Set the generic sound in the resources of the audio tag
-      runAudioPlayer(); // Play sound
-      generateNewElement(); // Generate new DOM element to restart the animation
     } else {
-      letterOnScreen.innerHTML = String.fromCharCode(event.charCode); // getting the pressed character
-      pressedLetter = String.fromCharCode(event.charCode).toLowerCase(); // passing the pressed letter to the function to add it to sources (lower case because the sound files are in lower case).
+      letterOnScreen.innerHTML = event.key;
+      const pressedLetter = event.key.toLowerCase(); // passing the pressed letter to the function to add it to sources (lower case because the sound files are in lower case).
       setLetterSound(pressedLetter);
-      runAudioPlayer(); // Play sound
-      generateNewElement(); // Generate new DOM element to restart the animation
     }
 
+    runAudioPlayer(); // Play sound
+    generateNewElement(); // Generate new DOM element to restart the animation
+
     // An easter egg, if you type my name
-    myName += String.fromCharCode(event.charCode);
+    myName += event.key;
     console.log(myName);
-    if (myName === "avdhesh") {
+    if (myName.toLowerCase() === "avdhesh") {
       alert('You typed my name!\n--------------------------------\nNow I will show you my website.');
       window.open('https://avdhesh-portfolio.netlify.app/', '_blank');
     }
 
-  }
-
+  });
 
   // Mute button
-  document.getElementById('mute-button').onclick = function () {
-    if (audioPlayer.muted === false) {
-      audioPlayer.muted = true;
-      document.getElementById('mute-button').innerHTML = "Unmute Sounds";
-      console.log('sound muted');
-    } else {
-      audioPlayer.muted = false;
-      document.getElementById('mute-button').innerHTML = "Mute Sounds";
-    }
-  }
+  document.getElementById('mute-button').addEventListener('click', function () {
+    audioPlayer.muted = !audioPlayer.muted;
+    document.getElementById('mute-button').innerHTML = audioPlayer.muted ? "Unmute Sounds" : "Mute Sounds";
+    console.log('Sound ' + (audioPlayer.muted ? 'muted' : 'unmuted'));
+  });
 
-});
+});