changed default game sound and made small layout changes on info boxes

index.html

@@ -14,10 +14,12 @@
   <link rel="stylesheet" href="css/bootstrap.min.css">
 
   <style>
+    /* canvas */
     #iFractions-canvas {
       width: 100%;
     }
 
+    /* Text box */
     #textbox {
       position: absolute;
       margin-left: auto;
@@ -46,26 +48,26 @@
 
     /* The Modal (background) */
     .modal {
-      display: none;
       /* Hidden by default */
-      position: fixed;
+      display: none;
       /* Stay in place */
-      z-index: 1;
+      position: fixed;
       /* Sit on top */
-      padding-top: 155px;
+      z-index: 1;
       /* Location of the box */
+      padding-top: 155px;
       left: 0;
       top: 0;
-      width: 100%;
       /* Full width */
-      height: 100%;
+      width: 100%;
       /* Full height */
-      overflow: auto;
+      height: 100%;
       /* Enable scroll if needed */
-      background-color: rgb(0, 0, 0);
+      overflow: auto;
       /* Fallback color */
-      background-color: rgba(0, 0, 0, 0.4);
+      background-color: rgb(0, 0, 0);
       /* Black w/ opacity */
+      background-color: rgba(0, 0, 0, 0.4);
     }
 
     /* Modal Content */
@@ -77,6 +79,12 @@
       width: 50%;
     }
 
+    .modal-content img {
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+    }
+
     /* The Close Button */
     .close {
       color: #aaaaaa;
@@ -109,11 +117,10 @@
           <input type="text" id="textbox-content" value="" size="13" maxlength="36"> <!-- Textbox to get player name -->
         </div>
 
-        <div id="myModal" class="modal">
-          <!-- Modal -->
-          <div class=" modal-content">
-            <span class="close">&times;</span>
-            <div id='infobox-content'></div> <!-- Modal content -->
+        <div id="my-modal" class="modal"> <!-- Modal black background-->
+          <div class="modal-content">
+            <span class="close">&times;</span> <!-- Modal close button -->
+            <div id='infobox-content'></div> <!-- Modal box -->
           </div>
         </div>
 

js/customMenu.js

@@ -216,7 +216,7 @@ const customMenuState = {
 
       // --------------------------- INFO BOX
 
-      this.infoBox = document.getElementById('myModal');
+      this.infoBox = document.getElementById('my-modal');
 
       // When the user clicks on the 'x', close the modal
       document.getElementsByClassName('close')[0].onclick = function () {
@@ -252,222 +252,233 @@ const customMenuState = {
           squareTwo: {
             title: '<b>' + game.lang.game_modes + '</b>',
             body: game.lang.infoBox_mode,
-            img: '<center> <table> <tr> <td> <b>A)</b> ' + game.lang.infoBox_mode_s2_A +
+            img: '<table> <tr> <td> <b>A)</b> ' + game.lang.infoBox_mode_s2_A +
               ' </td> <td> <b>B)</b> ' + game.lang.infoBox_mode_s2_B +
               ' </td> </tr> <tr> <td> <img width=98% src="' + game.image['s2-A-h'].src + '"> ' +
-              ' </td> <td> <img width=98% src="' + game.image['s2-B-h'].src + '"> </td> </tr> <table> </center>'
+              ' </td> <td> <img width=98% src="' + game.image['s2-B-h'].src + '"> </td> </tr> <table>'
           }
         },
 
         gameOperation: {
           title: '<b>' + game.lang.operation_math + '</b>',
           body: game.lang.infoBox_oper,
-          img: '<center> <table> <tr style="border-bottom: 5px solid white"> <td> <img width=50 src="' + game.image['operation_plus'].src + '"> ' + game.lang.plus +
-            ' </td> <td> <img width=50 src="' + game.image['operation_mixed'].src + '"> ' + game.lang.mixed +
-            ' </td> </tr> <tr> <td><img width=50 src="' + game.image['operation_minus'].src + '"> ' + game.lang.minus +
-            ' &nbsp; </td> <td> <img width=50 src="' + game.image['operation_equals'].src + '"> ' + game.lang.equals + ' </td> </tr> <table> <center>',
+          img:
+            '<table class="table">' +
+            '<tr>' +
+            '<td> <img width=50 src="' + game.image['operation_plus'].src + '"> </td>' +
+            '<td> <img width=50 src="' + game.image['operation_mixed'].src + '"> </td>' +
+            '<td> <img width=50 src="' + game.image['operation_minus'].src + '"> </td>' +
+            '<td> <img width=50 src="' + game.image['operation_equals'].src + '"> </td>' +
+            '</tr> <tr>' +
+            '<td class="text-center">' + game.lang.plus + '</td>' +
+            '<td class="text-center">' + game.lang.mixed + '</td>' +
+            '<td class="text-center">' + game.lang.minus + '</td>' +
+            '<td class="text-center">' + game.lang.equals + '</td>' +
+            '</tr>' +
+            '</table>'
         },
 
-        gameDifficulty: {
-          squareOne: {
-            title: '<b>' + game.lang.difficulties + '</b>',
-            body: game.lang.infoBox_diff + ' ' + game.lang.infoBox_diff_obs,
-            img: '<table> <tr> <td> <b>' + game.lang.difficulty + ':</b> 1' +
-              ' </td> <td> <b>' + game.lang.difficulty + ':</b> 3' +
-              ' </td> </tr> <tr> <td> <img width=100% src="' + game.image['s1-diff-1'].src + '"> ' +
-              ' </td> <td style="border-left: 4px solid white"> <img width=100% src="' + game.image['s1-diff-3'].src + '"> </td> </tr> </table> <br>' +
-              game.lang.infoBox_diff_aux + '<center> <img width=50% src="' + game.image['map-s1'].src + '"> </center>'
-          },
-          circleOne: {
-            title: '<b>' + game.lang.difficulties + '</b>',
-            body: game.lang.infoBox_diff + ' ' + game.lang.infoBox_diff_obs,
-            img: '<center> <table> <tr> <td style="border-right: 4px solid white"> <b>' + game.lang.difficulty + ':</b> 1' +
-              ' </td> <td> <b>' + game.lang.difficulty + ':</b> 5' +
-              ' </td> </tr> <tr> <td> <img width=100% src="' + game.image['c1-diff-1'].src + '"> ' +
-              ' </td> <td style="border-left: 4px solid white"> <img width=100% src="' + game.image['c1-diff-5'].src + '"> </td> </tr> </table> <center> <br>' +
-              game.lang.infoBox_diff_aux + '<center> <img width=50% src="' + game.image['map-c1s2'].src + '"> </center>'
-          },
-          squareTwo: {
-            title: '<b>' + game.lang.difficulties + '</b>',
-            body: game.lang.infoBox_diff,
-            img: '<table> <tr> <td> <b>' + game.lang.difficulty + ':</b> 1' +
-              ' </td> <td> <b>' + game.lang.difficulty + ':</b> 5' +
-              ' </td> </tr> <tr> <td> <img width=100% src="' + game.image['s2-diff-1'].src + '"> ' +
-              ' </td> <td style="border-left: 4px solid white"> <img width=100% src="' + game.image['s2-diff-5'].src + '"> </td> </tr> </table> <br>' +
-              game.lang.infoBox_diff_aux + '<center> <img width=50% src="' + game.image['map-c1s2'].src + '"> </center>'
-          },
-        },
+gameDifficulty: {
+  squareOne: {
+    title: '<b>' + game.lang.difficulties + '</b>',
+      body: game.lang.infoBox_diff + ' ' + game.lang.infoBox_diff_obs,
+        img: '<table> <tr> <td> <b>' + game.lang.difficulty + ':</b> 1' +
+          ' </td> <td> <b>' + game.lang.difficulty + ':</b> 3' +
+          ' </td> </tr> <tr> <td> <img width=100% src="' + game.image['s1-diff-1'].src + '"> ' +
+          ' </td> <td style="border-left: 4px solid white"> <img width=100% src="' + game.image['s1-diff-3'].src + '"> </td> </tr> </table> <br>' +
+          game.lang.infoBox_diff_aux + '<center> <img width=50% src="' + game.image['map-s1'].src + '"> </center>'
+  },
+  circleOne: {
+    title: '<b>' + game.lang.difficulties + '</b>',
+      body: game.lang.infoBox_diff + ' ' + game.lang.infoBox_diff_obs,
+        img: '<table> <tr> <td style="border-right: 4px solid white"> <b>' + game.lang.difficulty + ':</b> 1' +
+          ' </td> <td> <b>' + game.lang.difficulty + ':</b> 5' +
+          ' </td> </tr> <tr> <td> <img width=100% src="' + game.image['c1-diff-1'].src + '"> ' +
+          ' </td> <td style="border-left: 4px solid white"> <img width=100% src="' + game.image['c1-diff-5'].src + '"> </td> </tr> </table> <center> <br>' +
+          game.lang.infoBox_diff_aux + '<center> <img width=50% src="' + game.image['map-c1s2'].src + '"> </center>'
+  },
+  squareTwo: {
+    title: '<b>' + game.lang.difficulties + '</b>',
+      body: game.lang.infoBox_diff,
+        img: '<table> <tr> <td> <b>' + game.lang.difficulty + ':</b> 1' +
+          ' </td> <td> <b>' + game.lang.difficulty + ':</b> 5' +
+          ' </td> </tr> <tr> <td> <img width=100% src="' + game.image['s2-diff-1'].src + '"> ' +
+          ' </td> <td style="border-left: 4px solid white"> <img width=100% src="' + game.image['s2-diff-5'].src + '"> </td> </tr> </table> <br>' +
+          game.lang.infoBox_diff_aux + '<center> <img width=50% src="' + game.image['map-c1s2'].src + '"> </center>'
+  },
+},
 
-        gameMisc: {
-          squareOne: {
-            title: '<b>' + game.lang.show + ' ' + auxText + '</b>',
-            body: game.lang.infoBox_misc_label,
-            img: '<center> <img width=80% src="' + game.image['s1-label'].src + '"> </center>',
+gameMisc: {
+  squareOne: {
+    title: '<b>' + game.lang.show + ' ' + auxText + '</b>',
+      body: game.lang.infoBox_misc_label,
+        img: '<img class="mx-auto" width=80% src="' + game.image['s1-label'].src + '">',
           },
-          circleOne: {
-            title: '<b>' + game.lang.show + ' ' + auxText + '</b>',
-            body: game.lang.infoBox_misc_label,
-            img: '<center> <img width=60% src="' + game.image['c1-label'].src + '"> </center>',
+  circleOne: {
+    title: '<b>' + game.lang.show + ' ' + auxText + '</b>',
+      body: game.lang.infoBox_misc_label,
+        img: '<img class="mx-auto" width=60% src="' + game.image['c1-label'].src + '">',
           },
-          squareTwo: {
-            title: '<b>' + game.lang.show + ' ' + auxText + '</b>',
-            body: game.lang.infoBox_misc_rect,
-            img: '<center> <img width=100% src="' + game.image['s2-label'].src + '"> </center>',
+  squareTwo: {
+    title: '<b>' + game.lang.show + ' ' + auxText + '</b>',
+      body: game.lang.infoBox_misc_rect,
+        img: '<img class="mx-auto" width=100% src="' + game.image['s2-label'].src + '">',
           }
-        }
+}
 
       };
 
-      // ------------- EVENTS
+// ------------- EVENTS
 
-      game.event.add('click', this.onInputDown);
-      game.event.add('mousemove', this.onInputOver);
+game.event.add('click', this.onInputDown);
+game.event.add('mousemove', this.onInputOver);
 
     }
 
   },
 
-  /**
-   * Displays game menu information boxes.
-   */
-  showInfoBox: function (icon) {
-    self.infoBox.style.display = 'block';
+/**
+ * Displays game menu information boxes.
+ */
+showInfoBox: function (icon) {
+  self.infoBox.style.display = 'block';
 
-    const element = (icon.id == 'gameOperation') ? self.infoBoxContent[icon.id] : self.infoBoxContent[icon.id][gameType];
+  const element = (icon.id == 'gameOperation') ? self.infoBoxContent[icon.id] : self.infoBoxContent[icon.id][gameType];
 
-    let msg = '<h3>' + element.title + '</h3>'
-      + '<p align=justify>' + element.body + '</p>'
-      + element.img;
+  let msg = '<h3>' + element.title + '</h3>'
+    + '<p align=justify>' + element.body + '</p>'
+    + element.img;
 
-    document.getElementById('infobox-content').innerHTML = msg;
-  },
+  document.getElementById('infobox-content').innerHTML = msg;
+},
 
-  /**
-   * Saves information selected by the player 
-   * 
-   * @param {object} icon selected icon
-   */
-  load: function (icon) {
-
-    if (audioStatus) game.audio.beepSound.play();
-
-    const type = icon.iconType;
-    switch (type) {
-      case 'gameMode': gameMode = icon.gameMode; break;
-      case 'gameOperation': gameOperation = icon.gameOperation; break;
-      case 'difficulty': gameDifficulty = icon.difficulty; break;
-      case 'infoIcon': self.showInfoBox(icon); break;
-      case 'selectionBox':
-        if (icon.curFrame == 0) {
-          icon.curFrame = 1;
-          fractionLabel = true;
-        } else {
-          icon.curFrame = 0;
-          fractionLabel = false;
-        }
-        game.render.all();
-        break;
-      case 'enter':
-        if (debugMode) {
-          console.log('------------------------------' +
-            '\nGame State: ' + gameType +
-            '\nGame Mode: ' + gameMode +
-            '\n------------------------------');
-        }
-        mapPosition = 0;  // Map position
-        mapMove = true; // Move no next point
-        completedLevels = 0;  // Reset the game progress when entering a new level
-        game.state.start('map');
-        break;
-    }
+/**
+ * Saves information selected by the player 
+ * 
+ * @param {object} icon selected icon
+ */
+load: function (icon) {
 
-  },
+  const type = icon.iconType;
 
-  /**
-   * Called by mouse click event
-   * 
-   * @param {object} mouseEvent contains the mouse click coordinates
-   */
-  onInputDown: function (mouseEvent) {
-    const x = game.math.getMouse(mouseEvent).x;
-    const y = game.math.getMouse(mouseEvent).y;
-    let overIcon;
-
-    // Check if clicked on an icon
-    for (let i in self.menuIcons) {
-      if (game.math.isOverIcon(x, y, self.menuIcons[i])) {
-        overIcon = i;
-        break;
+  if (audioStatus) game.audio.popSound.play();
+
+  switch (type) {
+    case 'gameMode': gameMode = icon.gameMode; break;
+    case 'gameOperation': gameOperation = icon.gameOperation; break;
+    case 'difficulty': gameDifficulty = icon.difficulty; break;
+    case 'infoIcon': self.showInfoBox(icon); break;
+    case 'selectionBox':
+      if (icon.curFrame == 0) {
+        icon.curFrame = 1;
+        fractionLabel = true;
+      } else {
+        icon.curFrame = 0;
+        fractionLabel = false;
       }
+      game.render.all();
+      break;
+    case 'enter':
+      if (debugMode) {
+        console.log('------------------------------' +
+          '\nGame State: ' + gameType +
+          '\nGame Mode: ' + gameMode +
+          '\n------------------------------');
+      }
+      mapPosition = 0;  // Map position
+      mapMove = true; // Move no next point
+      completedLevels = 0;  // Reset the game progress when entering a new level
+      game.state.start('map');
+      break;
+  }
+
+},
+
+/**
+ * Called by mouse click event
+ * 
+ * @param {object} mouseEvent contains the mouse click coordinates
+ */
+onInputDown: function (mouseEvent) {
+  const x = game.math.getMouse(mouseEvent).x;
+  const y = game.math.getMouse(mouseEvent).y;
+  let overIcon;
+
+  // Check if clicked on an icon
+  for (let i in self.menuIcons) {
+    if (game.math.isOverIcon(x, y, self.menuIcons[i])) {
+      overIcon = i;
+      break;
     }
+  }
 
-    // Update gui
-    if (overIcon) { // If has clicked on an icon
-      document.body.style.cursor = 'pointer';
-      self.menuIcons.forEach(cur => {
-        if (cur.iconType == self.menuIcons[overIcon].iconType) { // If its in the same icon category
-          if (cur == self.menuIcons[overIcon]) { // If its the clicked icon
-            if (cur.iconType == 'gameMode' || cur.iconType == 'gameOperation') cur.curFrame = 1;
-            else if (cur.iconType == 'difficulty') cur.fillColor = colors.blue;
-          } else {
-            if (cur.iconType == 'gameMode' || cur.iconType == 'gameOperation') cur.curFrame = 0;
-            else if (cur.iconType == 'difficulty') cur.fillColor = colors.gray;
-          }
+  // Update gui
+  if (overIcon) { // If has clicked on an icon
+    document.body.style.cursor = 'pointer';
+    self.menuIcons.forEach(cur => {
+      if (cur.iconType == self.menuIcons[overIcon].iconType) { // If its in the same icon category
+        if (cur == self.menuIcons[overIcon]) { // If its the clicked icon
+          if (cur.iconType == 'gameMode' || cur.iconType == 'gameOperation') cur.curFrame = 1;
+          else if (cur.iconType == 'difficulty') cur.fillColor = colors.blue;
+        } else {
+          if (cur.iconType == 'gameMode' || cur.iconType == 'gameOperation') cur.curFrame = 0;
+          else if (cur.iconType == 'difficulty') cur.fillColor = colors.gray;
         }
-      });
+      }
+    });
 
-      self.load(self.menuIcons[overIcon]);
+    self.load(self.menuIcons[overIcon]);
 
-    } else document.body.style.cursor = 'auto';
+  } else document.body.style.cursor = 'auto';
 
-    navigationIcons.onInputDown(x, y);
+  navigationIcons.onInputDown(x, y);
 
-    game.render.all();
+  game.render.all();
 
-  },
+},
 
-  /**
-   * Called by mouse move event
-   * 
-   * @param {object} mouseEvent contains the mouse move coordinates
-   */
-  onInputOver: function (mouseEvent) {
-    const x = game.math.getMouse(mouseEvent).x;
-    const y = game.math.getMouse(mouseEvent).y;
-    let overIcon;
-
-    // Check if pointer is over an icon
-    for (let i in self.menuIcons) {
-      if (game.math.isOverIcon(x, y, self.menuIcons[i])) {
-        overIcon = i;
-        break;
-      }
+/**
+ * Called by mouse move event
+ * 
+ * @param {object} mouseEvent contains the mouse move coordinates
+ */
+onInputOver: function (mouseEvent) {
+  const x = game.math.getMouse(mouseEvent).x;
+  const y = game.math.getMouse(mouseEvent).y;
+  let overIcon;
+
+  // Check if pointer is over an icon
+  for (let i in self.menuIcons) {
+    if (game.math.isOverIcon(x, y, self.menuIcons[i])) {
+      overIcon = i;
+      break;
     }
+  }
 
-    // Update gui
-    if (overIcon) { // If pointer is over icon
-      document.body.style.cursor = 'pointer';
-      self.menuIcons.forEach(cur => {
-        if (cur.iconType == self.menuIcons[overIcon].iconType) { // If its in the same icon category
-          if (cur == self.menuIcons[overIcon]) { // If its the icon the pointer is over 
-            if (cur.iconType == 'enter') self.enterText.style = textStyles.h3__white;
-            cur.scale = cur.originalScale * 1.1;
-          } else {
-            cur.scale = cur.originalScale;
-          }
+  // Update gui
+  if (overIcon) { // If pointer is over icon
+    document.body.style.cursor = 'pointer';
+    self.menuIcons.forEach(cur => {
+      if (cur.iconType == self.menuIcons[overIcon].iconType) { // If its in the same icon category
+        if (cur == self.menuIcons[overIcon]) { // If its the icon the pointer is over 
+          if (cur.iconType == 'enter') self.enterText.style = textStyles.h3__white;
+          cur.scale = cur.originalScale * 1.1;
+        } else {
+          cur.scale = cur.originalScale;
         }
-      });
-    } else { // If pointer is not over icon
-      if (self.enterText) self.enterText.style = textStyles.h4_white;
-      self.menuIcons.forEach(cur => { cur.scale = cur.originalScale; });
-      document.body.style.cursor = 'auto';
-    }
+      }
+    });
+  } else { // If pointer is not over icon
+    if (self.enterText) self.enterText.style = textStyles.h4_white;
+    self.menuIcons.forEach(cur => { cur.scale = cur.originalScale; });
+    document.body.style.cursor = 'auto';
+  }
 
-    // Check navigation icons
-    navigationIcons.onInputOver(x, y);
+  // Check navigation icons
+  navigationIcons.onInputOver(x, y);
 
-    game.render.all();
+  game.render.all();
 
-  }
+}
 
 }

js/games/circleOne.js

@@ -454,7 +454,7 @@ const circleOne = {
         }
       }
 
-      if (audioStatus) game.audio.beepSound.play();
+      if (audioStatus) game.audio.popSound.play();
 
       // Hide fractions
       if (fractionLabel) {

js/games/squareOne.js

@@ -383,7 +383,7 @@ const squareOne = {
       }
 
       // Play beep sound
-      if (audioStatus) game.audio.beepSound.play();
+      if (audioStatus) game.audio.popSound.play();
 
       // Hide labels
       if (fractionLabel) {

js/games/squareTwo.js

@@ -363,7 +363,7 @@ const squareTwo = {
       // Turn value label invisible
       self[curSet].label.alpha = 0;
 
-      if (audioStatus) game.audio.beepSound.play();
+      if (audioStatus) game.audio.popSound.play();
 
       // Save number of selected blocks
       self[curSet].selected = curBlock.index + 1;

js/globals.js

@@ -377,7 +377,8 @@ const url = {
       // Sound effects
       ['beepSound', ['assets/audio/beep.ogg', 'assets/audio/beep.mp3']],
       ['okSound', ['assets/audio/ok.ogg', 'assets/audio/ok.mp3']],
-      ['errorSound', ['assets/audio/error.ogg', 'assets/audio/error.mp3']]
+      ['errorSound', ['assets/audio/error.ogg', 'assets/audio/error.mp3']],
+      ['popSound', ['','assets/audio/pop.wav']]
     ]
   },
   squareOne: {
@@ -503,7 +504,7 @@ const navigationIcons = {
    * @param {string} state name of the next state
    */
   callState: function (state) {
-    if (audioStatus) game.audio.beepSound.play();
+    if (audioStatus) game.audio.popSound.play();
 
     game.event.clear(self);
     game.state.start(state);
@@ -531,7 +532,7 @@ const navigationIcons = {
               navigationIcons.audioIcon.curFrame = 1;
             } else {
               audioStatus = true;
-              if (audioStatus) game.audio.beepSound.play();
+              if (audioStatus) game.audio.popSound.play();
               navigationIcons.audioIcon.curFrame = 0;
             }
             game.render.all();

js/map.js

@@ -184,8 +184,6 @@ const mapState = {
    */
   loadGame: function () {
 
-    if (audioStatus) game.audio.beepSound.play();
-
     if (mapPosition <= 4) game.state.start('' + gameType);
     else game.state.start('end');
 

js/menu.js

@@ -73,7 +73,7 @@ const menuState = {
 
       // --------------------------- INFO BOX
 
-      this.infoBox = document.getElementById('myModal');
+      this.infoBox = document.getElementById('my-modal');
 
       // When the user clicks on the 'x', close the modal
       document.getElementsByClassName('close')[0].onclick = function () {
@@ -89,19 +89,19 @@ const menuState = {
 
       this.infoBoxContent = {
         squareOne: {
-          title: '<b>' + game.lang.game + ':</b> ' + game.lang.square + ' I',
+          title: '<strong>' + game.lang.game + ':</strong> ' + game.lang.square + ' I',
           body: '<ul>' + game.lang.infoBox_squareOne + '</ul>',
-          img: '<center> <img width=60% src="' + game.image['s1-A'].src + '"./assets/img/info_box/s1-A.png"> </center>'
+          img: '<img class="mx-auto" width=60% src="' + game.image['s1-A'].src + '">'
         },
         circleOne: {
-          title: '<b>' + game.lang.game + ':</b> ' + game.lang.circle + ' I',
+          title: '<strong>' + game.lang.game + ':</strong> ' + game.lang.circle + ' I',
           body: '<ul>' + game.lang.infoBox_circleOne + '</ul>',
-          img: '<center> <img width=80% src="' + game.image['c1-A'].src + '"> </center>',
+          img: '<img class="mx-auto" width=80% src="' + game.image['c1-A'].src + '">',
         },
         squareTwo: {
-          title: '<b>' + game.lang.game + ':</b> ' + game.lang.square + ' II',
+          title: '<strong>' + game.lang.game + ':</strong> ' + game.lang.square + ' II',
           body: '<ul>' + game.lang.infoBox_squareTwo + '</ul>',
-          img: '<center> <img width=80% src="' + game.image['s2'].src + '"> </center>',
+          img: '<img class="mx-auto" width=80% src="' + game.image['s2'].src + '">',
         }
       };
 
@@ -134,7 +134,7 @@ const menuState = {
    */
   load: function (icon) {
 
-    if (audioStatus) game.audio.beepSound.play();
+    if (audioStatus) game.audio.popSound.play();
 
     switch (icon.iconType) {
       case 'infoIcon': self.showInfoBox(icon); break;

js/preMenu.js

@@ -97,6 +97,7 @@ const langState = {
   setLang: function (selectedLang) {
     // Saves language name e.g 'pt_BR'
     langString = selectedLang;
+    if (audioStatus) game.audio.popSound.play();
     // Calls loading screen
     game.state.start('loadLang');
   },
@@ -248,7 +249,7 @@ const nameState = {
     document.getElementById('textbox').style.visibility = 'hidden';
     document.getElementById('textbox-content').value = '';
 
-    if (audioStatus) game.audio.beepSound.play();
+    if (audioStatus) game.audio.popSound.play();
     if (debugMode) console.log('Username: ' + playerName);
 
     // FOR MOODLE