code refactor, fix bugs in gameList

src/js/globals/globals_functions.js

@@ -314,7 +314,10 @@ const renderBackground = (type) => {
       colors.blueBg,
       1
     );
-  } else if (type === 'scale') {
+    return;
+  }
+
+  if (type === 'scale') {
     // Add background image
     game.add.image(0, 0, 'bg_snow', 1.8);
 
@@ -355,19 +358,20 @@ const renderBackground = (type) => {
     game.add
       .sprite(13 * floor.width, context.canvas.height - 65, 'floor_snow', 7, 2)
       .anchor(0, 1);
-  } else {
-    // Add background image
-    game.add.image(0, 0, 'bgimage', 2.2);
+    return;
+  }
 
-    // Add clouds
-    game.add.image(640, 100, 'cloud', 1.5);
-    game.add.image(1280, 80, 'cloud', 1.5);
-    game.add.image(300, 85, 'cloud', 1.2);
+  // Add background image
+  game.add.image(0, 0, 'bgimage', 2.2);
 
-    // Add floor
-    for (let i = 0; i < context.canvas.width / 150; i++) {
-      game.add.image(i * 150, context.canvas.height - 150, 'floor', 1.5);
-    }
+  // Add clouds
+  game.add.image(640, 100, 'cloud', 1.5);
+  game.add.image(1280, 80, 'cloud', 1.5);
+  game.add.image(300, 85, 'cloud', 1.2);
+
+  // Add floor
+  for (let i = 0; i < context.canvas.width / 150; i++) {
+    game.add.image(i * 150, context.canvas.height - 150, 'floor', 1.5);
   }
 };
 

src/js/globals/globals_tokens.js

@@ -76,10 +76,10 @@ const gameList = [
         'operation_minus',
         'operation_mixed',
       ],
-      mapCharacterAnimation: () => {
-        ['kid', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 3];
+      mapCharacterAnimation: (operation) => {
+        return ['kid', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 3];
       },
-      mapCharacter: () => {
+      mapCharacter: (operation) => {
         return game.add.sprite(
           self.points.x[curMapPosition],
           self.points.y[curMapPosition],
@@ -113,10 +113,10 @@ const gameList = [
       gameNameBtn: 'game2',
       gameModeBtn: ['mode4', 'mode5'],
       gameOperationBtn: ['operation_equals'],
-      mapCharacterAnimation: () => {
-        ['kid', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 3];
+      mapCharacterAnimation: (operation) => {
+        return ['kid', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 3];
       },
-      mapCharacter: () => {
+      mapCharacter: (operation) => {
         return game.add.sprite(
           self.points.x[curMapPosition],
           self.points.y[curMapPosition],
@@ -127,12 +127,12 @@ const gameList = [
       },
       mapStart: () => {
         return game.add
-          .image(this.points.x[0], this.points.y[0], 'house', 1.05)
+          .image(self.points.x[0], self.points.y[0], 'house', 1.05)
           .anchor(0.5, 0.8);
       },
       mapEnd: () => {
         return game.add
-          .image(this.points.x[5], this.points.y[5], 'school', 0.525)
+          .image(self.points.x[5], self.points.y[5], 'school', 0.525)
           .anchor(0.2, 0.7);
       },
     },

src/js/menus/menu_custom.js

@@ -45,7 +45,7 @@ const customMenuState = {
       // Loads navigation icons
       navigationIcons.add(true, false, false, true, true, 'menu', false);
 
-      const curGame = gameList.find((game) => game.gameName === gameName);
+      const curGame = gameList[gameId];
 
       this.menuIcons = [];
 
@@ -64,7 +64,8 @@ const customMenuState = {
       this.renderOperationSection(x, y, offsetW, offsetH, curGame);
       this.renderDifficultySection(x, y, offsetW, offsetH, curGame);
       this.renderEnterSection(x, y);
-      this.renderInfoBox(auxText);
+
+      this.setInfoBoxes(auxText);
 
       // ------------- EVENTS
 
@@ -426,7 +427,7 @@ const customMenuState = {
     }
   },
 
-  renderInfoBox: function (auxText) {
+  setInfoBoxes: function (auxText) {
     // --------------------------- INFO BOX
 
     self.infoBox = document.querySelector('.ifr-modal');

src/js/menus/menu_main.js

@@ -49,38 +49,30 @@ const menuState = {
       // Loads navigation icons
       navigationIcons.add(false, false, false, true, true, false, false);
 
-      // INFO ICONS
-
       this.menuIcons = [];
-      let infoIcon;
 
       // --------------------------- GAME ICONS
 
-      const menuButtons = gameList.map((game) => game.assets.gameNameBtn);
-
-      const offset = game.math.getOffset(
-        context.canvas.width,
-        menuButtons.length
-      );
+      const offset = game.math.getOffset(context.canvas.width, gameList.length);
 
       for (let i = 0, x = offset; i < gameList.length; i++, x += offset) {
         const icon = game.add.image(
           x,
           context.canvas.height / 2 - 70,
-          menuButtons[i],
+          gameList[i].assets.gameNameBtn,
           1.5
         );
         icon.anchor(0.5, 0.5);
 
         icon.gameId = i;
-        icon.gameShape = gameList[i].gameShape;
         icon.gameName = gameList[i].gameName;
+        icon.gameShape = gameList[i].gameShape;
         icon.iconType = 'game';
 
         this.menuIcons.push(icon);
 
         // "more information" button
-        infoIcon = game.add.image(
+        const infoIcon = game.add.image(
           x + 110,
           context.canvas.height / 2 - 100 - 80 - 10,
           'info',
@@ -95,61 +87,7 @@ const menuState = {
 
       // --------------------------- INFO BOX
 
-      this.infoBox = document.querySelector('.ifr-modal');
-
-      // When the user clicks on the 'x', close the modal
-      document.querySelector('.ifr-modal__closeButton').onclick = function () {
-        self.infoBox.style.display = 'none';
-      };
-
-      // When the user clicks anywhere outside of the modal, close it
-      window.onclick = function (event) {
-        if (event.target == self.infoBox) {
-          self.infoBox.style.display = 'none';
-        }
-      };
-
-      this.infoBoxContent = {
-        squareOne: {
-          title:
-            '<strong>' +
-            game.lang.game +
-            ':</strong> ' +
-            game.lang.square +
-            ' I',
-          body: '<ul>' + game.lang.infoBox_squareOne + '</ul>',
-          img:
-            '<img class="mx-auto" width=60% src="' +
-            game.image['s1-A'].src +
-            '">',
-        },
-        circleOne: {
-          title:
-            '<strong>' +
-            game.lang.game +
-            ':</strong> ' +
-            game.lang.circle +
-            ' I',
-          body: '<ul>' + game.lang.infoBox_circleOne + '</ul>',
-          img:
-            '<img class="mx-auto" width=80% src="' +
-            game.image['c1-A'].src +
-            '">',
-        },
-        squareTwo: {
-          title:
-            '<strong>' +
-            game.lang.game +
-            ':</strong> ' +
-            game.lang.square +
-            ' II',
-          body: '<ul>' + game.lang.infoBox_squareTwo + '</ul>',
-          img:
-            '<img class="mx-auto" width=80% src="' +
-            game.image['s2'].src +
-            '">',
-        },
-      };
+      this.setInfoBoxes();
 
       // ------------- EVENTS
 
@@ -169,18 +107,70 @@ const menuState = {
    * Displays game menu information boxes.
    */
   showInfoBox: function (icon) {
-    self.infoBox.style.display = 'block';
-
-    let msg =
-      '<h3>' +
-      self.infoBoxContent[icon.id].title +
-      '</h3>' +
-      '<p>' +
-      self.infoBoxContent[icon.id].body +
-      '</p>' +
-      self.infoBoxContent[icon.id].img;
-
-    document.querySelector('.ifr-modal__infobox').innerHTML = msg;
+    if (self.infoBoxContent[icon.id]) {
+      self.infoBox.style.display = 'block';
+
+      let msg =
+        '<h3>' +
+        self.infoBoxContent[icon.id].title +
+        '</h3>' +
+        '<p>' +
+        self.infoBoxContent[icon.id].body +
+        '</p>' +
+        self.infoBoxContent[icon.id].img;
+
+      document.querySelector('.ifr-modal__infobox').innerHTML = msg;
+    } else {
+      console.error('Error: no info box was setup for this game.');
+    }
+  },
+
+  setInfoBoxes: function () {
+    self.infoBox = document.querySelector('.ifr-modal');
+
+    // When the user clicks on the 'x', close the modal
+    document.querySelector('.ifr-modal__closeButton').onclick = function () {
+      self.infoBox.style.display = 'none';
+    };
+
+    // When the user clicks anywhere outside of the modal, close it
+    window.onclick = function (event) {
+      if (event.target == self.infoBox) {
+        self.infoBox.style.display = 'none';
+      }
+    };
+
+    self.infoBoxContent = {
+      squareOne: {
+        title:
+          '<strong>' + game.lang.game + ':</strong> ' + game.lang.square + ' I',
+        body: '<ul>' + game.lang.infoBox_squareOne + '</ul>',
+        img:
+          '<img class="mx-auto" width=60% src="' +
+          game.image['s1-A'].src +
+          '">',
+      },
+      circleOne: {
+        title:
+          '<strong>' + game.lang.game + ':</strong> ' + game.lang.circle + ' I',
+        body: '<ul>' + game.lang.infoBox_circleOne + '</ul>',
+        img:
+          '<img class="mx-auto" width=80% src="' +
+          game.image['c1-A'].src +
+          '">',
+      },
+      squareTwo: {
+        title:
+          '<strong>' +
+          game.lang.game +
+          ':</strong> ' +
+          game.lang.square +
+          ' II',
+        body: '<ul>' + game.lang.infoBox_squareTwo + '</ul>',
+        img:
+          '<img class="mx-auto" width=80% src="' + game.image['s2'].src + '">',
+      },
+    };
   },
 
   /**
@@ -196,9 +186,9 @@ const menuState = {
         self.showInfoBox(icon);
         break;
       case 'game':
-        gameShape = icon.gameShape;
-        gameName = icon.gameName;
         gameId = icon.gameId;
+        gameName = icon.gameName;
+        gameShape = icon.gameShape;
         if (!gameList.find((game) => game.gameName === gameName))
           console.error('Game error: the name of the game is not valid.');
         self.menuIcons = self.lbl_game.name;

src/js/screens/map.js

@@ -188,25 +188,6 @@ const mapState = {
     // Map positions
     gameList[gameId].assets.mapStart();
     gameList[gameId].assets.mapEnd();
-    // if (gameName == 'squareOne' || gameName == 'scaleOne') {
-    //   // Garage
-    //   game.add
-    //     .image(this.points.x[0], this.points.y[0], 'garage', 0.6)
-    //     .anchor(0.5, 1);
-    //   // Farm
-    //   game.add
-    //     .image(this.points.x[5], this.points.y[5], 'farm', 0.9)
-    //     .anchor(0.4, 0.7);
-    // } else {
-    //   // House
-    //   game.add
-    //     .image(this.points.x[0], this.points.y[0], 'house', 1.05)
-    //     .anchor(0.5, 0.8);
-    //   // School
-    //   game.add
-    //     .image(this.points.x[5], this.points.y[5], 'school', 0.525)
-    //     .anchor(0.2, 0.7);
-    // }
 
     // Rocks and bushes
     for (let i in rocks.type) {
@@ -248,11 +229,12 @@ const mapState = {
       );
     }
 
+    // Character
     this.character = gameList[gameId].assets.mapCharacter(gameOperation);
     this.character.animation =
       gameList[gameId].assets.mapCharacterAnimation(gameOperation);
 
-    this.character.anchor(0.5, 1);
+    //this.character.anchor(0.5, 1);
     game.animation.play(this.character.animation[0]);
 
     this.count = 0;