refactor gamelist and fix problem w pointer icon

src/js/globals/globals_control.js

@@ -151,104 +151,111 @@ const gameList = [
     gameMode: ['a', 'b'],
     gameOperation: ['plus', 'minus'],
     gameDifficulty: 3,
-    // info
     gameShape: 'square',
     assets: {
-      gameNameBtn: 'game_0',
-      gameModeBtn: ['mode_0', 'mode_1'],
-      gameOperationBtn: ['operation_plus', 'operation_minus'],
-      menuInfoBox: () => ({
-        title: `<strong>${game.lang.game}:</strong> ${game.lang.square} I`,
-        body: `<ul>${game.lang.infoBox_squareOne}</ul>`,
-        img: `<img class="ifr-infoBox__menu__img" src="${game.image['s1-A'].src}">`,
-      }),
-      customMenuInfoBox: () => ({
-        gameMode: {
-          title: game.lang.game_modes,
-          body: `<p>${game.lang.infoBox_mode}</p>`,
-          img: `<table>
-            <tr>
-              <td><b>${game.lang.mode}: A</b> - ${game.lang.infoBox_mode_s1_A}</td> 
-              <td><b>${game.lang.mode}: B</b> - ${game.lang.infoBox_mode_s1_B}</td>
-            </tr>
-            <tr>
-              <td><img width=100% src="${game.image['s1-A-h'].src}"></td>
-              <td><img width=100% src="${game.image['s1-B-h'].src}"></td>
-            </tr>
-        <table>`,
+      menu: {
+        gameNameBtn: 'game_0',
+        infoBox: () => ({
+          title: `<strong>${game.lang.game}:</strong> ${game.lang.square} I`,
+          body: `<ul>${game.lang.infoBox_squareOne}</ul>`,
+          img: `<img class="ifr-infoBox__menu__img" src="${game.image['s1-A'].src}">`,
+        }),
+      },
+      customMenu: {
+        gameModeBtn: ['mode_0', 'mode_1'],
+        gameOperationBtn: ['operation_plus', 'operation_minus'],
+        infoBox: () => ({
+          gameMode: {
+            title: game.lang.game_modes,
+            body: `<p>${game.lang.infoBox_mode}</p>`,
+            img: `<table>
+              <tr>
+                <td><b>${game.lang.mode}: A</b> - ${game.lang.infoBox_mode_s1_A}</td> 
+                <td><b>${game.lang.mode}: B</b> - ${game.lang.infoBox_mode_s1_B}</td>
+              </tr>
+              <tr>
+                <td><img width=100% src="${game.image['s1-A-h'].src}"></td>
+                <td><img width=100% src="${game.image['s1-B-h'].src}"></td>
+              </tr>
+          <table>`,
+          },
+          gameDifficulty: {
+            title: game.lang.difficulties,
+            body: `<p>${game.lang.infoBox_diff}</p><p>${game.lang.infoBox_diff_obs}</p>`,
+            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}
+            <div><img width=50% src="${game.image['map-s1'].src}"></div>`,
+          },
+          gameMisc: {
+            title: `${game.lang.show} ${self.auxText}`,
+            body: game.lang.infoBox_misc_label,
+            img: `<img class="mx-auto" width=80% src="${game.image['s1-label'].src}">`,
+          },
+        }),
+      },
+      map: {
+        characterAnimation: (operation) => {
+          return operation === 'plus'
+            ? ['green_tractor', [0, 1, 2, 3, 4], 3]
+            : ['red_tractor', [10, 11, 12, 13, 14], 3];
         },
-        gameDifficulty: {
-          title: game.lang.difficulties,
-          body: `<p>${game.lang.infoBox_diff}</p><p>${game.lang.infoBox_diff_obs}</p>`,
-          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}
-          <div><img width=50% src="${game.image['map-s1'].src}"></div>`,
+        character: (operation) => {
+          let char;
+          if (operation == 'plus') {
+            char = game.add.sprite(
+              self.points.x[curMapPosition],
+              self.points.y[curMapPosition],
+              'tractor',
+              0,
+              0.75
+            );
+          }
+          if (operation === 'minus') {
+            char = game.add.sprite(
+              self.points.x[curMapPosition],
+              self.points.y[curMapPosition],
+              'tractor',
+              10,
+              0.75
+            );
+          }
+          char.rotate = -30; // 25 anticlock
+          return char;
         },
-        gameMisc: {
-          title: `${game.lang.show} ${self.auxText}`,
-          body: game.lang.infoBox_misc_label,
-          img: `<img class="mx-auto" width=80% src="${game.image['s1-label'].src}">`,
+        startBuilding: () => {
+          return game.add
+            .image(self.points.x[0], self.points.y[0], 'garage', 0.6)
+            .anchor(0.5, 1);
+        },
+        endBuilding: () => {
+          return game.add
+            .image(self.points.x[5], self.points.y[5], 'farm', 0.9)
+            .anchor(0.4, 0.7);
         },
-      }),
-      mapCharacterAnimation: (operation) => {
-        return operation === 'plus'
-          ? ['green_tractor', [0, 1, 2, 3, 4], 3]
-          : ['red_tractor', [10, 11, 12, 13, 14], 3];
-      },
-      mapCharacter: (operation) => {
-        let char;
-        if (operation == 'plus') {
-          char = game.add.sprite(
-            self.points.x[curMapPosition],
-            self.points.y[curMapPosition],
-            'tractor',
-            0,
-            0.75
-          );
-        }
-        if (operation === 'minus') {
-          char = game.add.sprite(
-            self.points.x[curMapPosition],
-            self.points.y[curMapPosition],
-            'tractor',
-            10,
-            0.75
-          );
-        }
-        char.rotate = -30; // 25 anticlock
-        return char;
-      },
-      mapStart: () => {
-        return game.add
-          .image(self.points.x[0], self.points.y[0], 'garage', 0.6)
-          .anchor(0.5, 1);
-      },
-      mapEnd: () => {
-        return game.add
-          .image(self.points.x[5], self.points.y[5], 'farm', 0.9)
-          .anchor(0.4, 0.7);
       },
-      endCharacterAnimation: (animation) =>
-        animation === 'plus'
-          ? ['move', [0, 1, 2, 3, 4], 4]
-          : ['move', [10, 11, 12, 13, 14], 4],
-      endCharacter: (operation) => {
-        const char = game.add.sprite(0, 490, 'tractor', 0, 0.7);
-        char.anchor(0.5, 0.5);
-        if (operation === 'plus') char.curFrame = 10;
-        return char;
+      end: {
+        characterAnimation: (animation) =>
+          animation === 'plus'
+            ? ['move', [0, 1, 2, 3, 4], 4]
+            : ['move', [10, 11, 12, 13, 14], 4],
+        character: (operation) => {
+          const char = game.add.sprite(0, 490, 'tractor', 0, 0.7);
+          char.anchor(0.5, 0.5);
+          if (operation === 'plus') char.curFrame = 10;
+          return char;
+        },
+        building: () => game.add.image(650, 260, 'farm', 1.1),
       },
-      endBuilding: () => game.add.image(650, 260, 'farm', 1.1),
     },
   },
   {
@@ -259,23 +266,26 @@ const gameList = [
     // info
     gameShape: 'circle',
     assets: {
-      gameNameBtn: 'game_1',
-      gameModeBtn: ['mode_2', 'mode_3'],
-      gameOperationBtn: [
-        'operation_plus',
-        'operation_minus',
-        'operation_mixed',
-      ],
-      menuInfoBox: () => ({
-        title: `<strong>${game.lang.game}:</strong> ${game.lang.circle} I`,
-        body: `<ul>${game.lang.infoBox_circleOne}</ul>`,
-        img: `<img class="mx-auto" width=60% src="${game.image['c1-A'].src}">`,
-      }),
-      customMenuInfoBox: () => ({
-        gameMode: {
-          title: game.lang.game_modes,
-          body: `<p>${game.lang.infoBox_mode}</p>`,
-          img: `<table>
+      menu: {
+        gameNameBtn: 'game_1',
+        infoBox: () => ({
+          title: `<strong>${game.lang.game}:</strong> ${game.lang.circle} I`,
+          body: `<ul>${game.lang.infoBox_circleOne}</ul>`,
+          img: `<img class="mx-auto" width=60% src="${game.image['c1-A'].src}">`,
+        }),
+      },
+      customMenu: {
+        gameModeBtn: ['mode_2', 'mode_3'],
+        gameOperationBtn: [
+          'operation_plus',
+          'operation_minus',
+          'operation_mixed',
+        ],
+        infoBox: () => ({
+          gameMode: {
+            title: game.lang.game_modes,
+            body: `<p>${game.lang.infoBox_mode}</p>`,
+            img: `<table>
             <tr style="border-bottom: 5px solid white">
               <td width=70%>
                 <img width=100% src=${game.image['c1-A-h'].src}>
@@ -287,11 +297,11 @@ const gameList = [
               <td>&nbsp;<b>${game.lang.mode}: B</b> - ${game.lang.infoBox_mode_c1_B}</td>
             </tr>
           </table>`,
-        },
-        gameDifficulty: {
-          title: game.lang.difficulties,
-          body: `<p>${game.lang.infoBox_diff}</p><p>${game.lang.infoBox_diff_obs}</p>`,
-          img: `<table>
+          },
+          gameDifficulty: {
+            title: game.lang.difficulties,
+            body: `<p>${game.lang.infoBox_diff}</p><p>${game.lang.infoBox_diff_obs}</p>`,
+            img: `<table>
             <tr>
               <td style="border-right: 4px solid white">
                 <b>${game.lang.difficulty}:</b> 1
@@ -300,58 +310,59 @@ const gameList = [
                 <b>${game.lang.difficulty}:</b> 5
               </td>
             </tr>
-            <tr> 
-              <td> 
+            <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> 
+          </table>
           <br>
           ${game.lang.infoBox_diff_aux}
           <div><img width=50% src="${game.image['map-c1s2'].src}"></div>`,
+          },
+          gameMisc: {
+            title: `${game.lang.show} ${self.auxText}`,
+            body: game.lang.infoBox_misc_label,
+            img: `<img class="mx-auto" width=60% src="${game.image['c1-label'].src}">`,
+          },
+        }),
+      },
+      map: {
+        characterAnimation: (operation) => {
+          return ['kid', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 3];
+        },
+        character: () => {
+          return game.add.sprite(
+            self.points.x[curMapPosition],
+            self.points.y[curMapPosition],
+            'kid_running',
+            0,
+            0.6
+          );
         },
-        gameMisc: {
-          title: `${game.lang.show} ${self.auxText}`,
-          body: game.lang.infoBox_misc_label,
-          img: `<img class="mx-auto" width=60% src="${game.image['c1-label'].src}">`,
+        startBuilding: () => {
+          return game.add
+            .image(self.points.x[0], self.points.y[0], 'house', 1.05)
+            .anchor(0.5, 0.8);
+        },
+        endBuilding: () => {
+          return game.add
+            .image(self.points.x[5], self.points.y[5], 'school', 0.525)
+            .anchor(0.2, 0.7);
         },
-      }),
-      mapCharacterAnimation: (operation) => {
-        return ['kid', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 3];
-      },
-      mapCharacter: () => {
-        return game.add.sprite(
-          self.points.x[curMapPosition],
-          self.points.y[curMapPosition],
-          'kid_running',
-          0,
-          0.6
-        );
-      },
-      mapStart: () => {
-        return game.add
-          .image(self.points.x[0], self.points.y[0], 'house', 1.05)
-          .anchor(0.5, 0.8);
-      },
-      mapEnd: () => {
-        return game.add
-          .image(self.points.x[5], self.points.y[5], 'school', 0.525)
-          .anchor(0.2, 0.7);
       },
-      endCharacterAnimation: [
-        'move',
-        [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
-        3,
-      ],
-      endCharacter: () => {
-        const char = game.add.sprite(0, -152, 'kid_running', 0, 0.7);
-        char.anchor(0.5, 0.5);
-        return char;
+      end: {
+        characterAnimation: ['move', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 3],
+        character: () => {
+          const char = game.add.sprite(0, -152, 'kid_running', 0, 0.7);
+          char.anchor(0.5, 0.5);
+          return char;
+        },
+        building: () => game.add.image(600, 222, 'school', 0.7),
       },
-      endBuilding: () => game.add.image(600, 222, 'school', 0.7),
     },
   },
   {
@@ -362,21 +373,24 @@ const gameList = [
     // info
     gameShape: 'square',
     assets: {
-      gameNameBtn: 'game_2',
-      gameModeBtn: ['mode_4', 'mode_5'],
-      gameOperationBtn: ['operation_equals'],
-      menuInfoBox: () => ({
-        title: `<strong>${game.lang.game}:</strong> ${game.lang.square} II`,
-        body: `<ul>${game.lang.infoBox_squareTwo}</ul>`,
-        img: `<img class="mx-auto" width=60% src="${game.image['s2'].src}">`,
-      }),
-      customMenuInfoBox: () => ({
-        gameMode: {
-          title: game.lang.game_modes,
-          body: `<p>${game.lang.infoBox_mode}</p>`,
-          img: `<table>
+      menu: {
+        gameNameBtn: 'game_2',
+        infoBox: () => ({
+          title: `<strong>${game.lang.game}:</strong> ${game.lang.square} II`,
+          body: `<ul>${game.lang.infoBox_squareTwo}</ul>`,
+          img: `<img class="mx-auto" width=60% src="${game.image['s2'].src}">`,
+        }),
+      },
+      customMenu: {
+        gameModeBtn: ['mode_4', 'mode_5'],
+        gameOperationBtn: ['operation_equals'],
+        infoBox: () => ({
+          gameMode: {
+            title: game.lang.game_modes,
+            body: `<p>${game.lang.infoBox_mode}</p>`,
+            img: `<table>
             <tr>
-              <td><b>${game.lang.mode}: A</b> - ${game.lang.infoBox_mode_s2_A}</td> 
+              <td><b>${game.lang.mode}: A</b> - ${game.lang.infoBox_mode_s2_A}</td>
               <td><b>${game.lang.mode}: B</b> - ${game.lang.infoBox_mode_s2_B}</td>
             </tr>
             <tr>
@@ -384,16 +398,16 @@ const gameList = [
               <td><img width=98% src="${game.image['s2-B-h'].src}"></td>
             </tr>
         <table>`,
-        },
-        gameDifficulty: {
-          title: game.lang.difficulties,
-          body: game.lang.infoBox_diff,
-          img: `<table>
+          },
+          gameDifficulty: {
+            title: game.lang.difficulties,
+            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> 
+            <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>
@@ -401,46 +415,47 @@ const gameList = [
           <br>
           ${game.lang.infoBox_diff_aux}
           <div><img width=50% src="${game.image['map-c1s2'].src}"></div>`,
+          },
+          gameMisc: {
+            title: `${game.lang.show} ${self.auxText}`,
+            body: game.lang.infoBox_misc_rect,
+            img: `<img class="mx-auto" width=100% src="${game.image['s2-label'].src}">`,
+          },
+        }),
+      },
+      map: {
+        characterAnimation: (operation) => {
+          return ['kid', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 3];
+        },
+        character: (operation) => {
+          return game.add.sprite(
+            self.points.x[curMapPosition],
+            self.points.y[curMapPosition],
+            'kid_running',
+            0,
+            0.6
+          );
         },
-        gameMisc: {
-          title: `${game.lang.show} ${self.auxText}`,
-          body: game.lang.infoBox_misc_rect,
-          img: `<img class="mx-auto" width=100% src="${game.image['s2-label'].src}">`,
+        startBuilding: () => {
+          return game.add
+            .image(self.points.x[0], self.points.y[0], 'house', 1.05)
+            .anchor(0.5, 0.8);
+        },
+        endBuilding: () => {
+          return game.add
+            .image(self.points.x[5], self.points.y[5], 'school', 0.525)
+            .anchor(0.2, 0.7);
         },
-      }),
-      mapCharacterAnimation: (operation) => {
-        return ['kid', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 3];
-      },
-      mapCharacter: (operation) => {
-        return game.add.sprite(
-          self.points.x[curMapPosition],
-          self.points.y[curMapPosition],
-          'kid_running',
-          0,
-          0.6
-        );
-      },
-      mapStart: () => {
-        return game.add
-          .image(self.points.x[0], self.points.y[0], 'house', 1.05)
-          .anchor(0.5, 0.8);
-      },
-      mapEnd: () => {
-        return game.add
-          .image(self.points.x[5], self.points.y[5], 'school', 0.525)
-          .anchor(0.2, 0.7);
       },
-      endCharacterAnimation: [
-        'move',
-        [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
-        3,
-      ],
-      endCharacter: () => {
-        const char = game.add.sprite(0, 460, 'kid_running', 6, 0.7);
-        char.anchor(0.5, 0.5);
-        return char;
+      end: {
+        characterAnimation: ['move', [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11], 3],
+        character: () => {
+          const char = game.add.sprite(0, 460, 'kid_running', 6, 0.7);
+          char.anchor(0.5, 0.5);
+          return char;
+        },
+        building: () => game.add.image(600, 222, 'school', 0.7),
       },
-      endBuilding: () => game.add.image(600, 222, 'school', 0.7),
     },
   },
   {
@@ -451,48 +466,57 @@ const gameList = [
     // info
     gameShape: 'noShape',
     assets: {
-      gameNameBtn: 'game_3',
-      gameModeBtn: ['mode_6'],
-      gameOperationBtn: ['operation_equals'],
-      // menuInfoBox: ()=>({}),
-      // customMenuInfoBox: ()=>({ gameMode: {}, gameDifficulty: {}, gameMisc: {} }),
-      mapCharacterAnimation: (operation) => {
-        return operation === 'plus'
-          ? ['green_tractor', [0, 1, 2, 3, 4], 3]
-          : ['red_tractor', [10, 11, 12, 13, 14], 3];
+      menu: {
+        gameNameBtn: 'game_3',
+        // infoBox
       },
-      mapCharacter: (operation) => {
-        let char;
-        if (operation == 'plus') {
-          char = game.add.sprite(
-            self.points.x[curMapPosition],
-            self.points.y[curMapPosition],
-            'tractor',
-            0,
-            0.75
-          );
-        }
-        if (operation === 'minus') {
-          char = game.add.sprite(
-            self.points.x[curMapPosition],
-            self.points.y[curMapPosition],
-            'tractor',
-            10,
-            0.75
-          );
-        }
-        char.rotate = -30; // 25 anticlock
-        return char;
+      customMenu: {
+        gameModeBtn: ['mode_6'],
+        gameOperationBtn: ['operation_equals'],
+        // infoBox
       },
-      mapStart: () => {
-        return game.add
-          .image(self.points.x[0], self.points.y[0], 'garage', 0.6)
-          .anchor(0.5, 1);
+      map: {
+        characterAnimation: (operation) => {
+          return operation === 'plus'
+            ? ['green_tractor', [0, 1, 2, 3, 4], 3]
+            : ['red_tractor', [10, 11, 12, 13, 14], 3];
+        },
+        character: (operation) => {
+          let char;
+          if (operation == 'plus') {
+            char = game.add.sprite(
+              self.points.x[curMapPosition],
+              self.points.y[curMapPosition],
+              'tractor',
+              0,
+              0.75
+            );
+          }
+          if (operation === 'minus') {
+            char = game.add.sprite(
+              self.points.x[curMapPosition],
+              self.points.y[curMapPosition],
+              'tractor',
+              10,
+              0.75
+            );
+          }
+          char.rotate = -30; // 25 anticlock
+          return char;
+        },
+        startBuilding: () => {
+          return game.add
+            .image(self.points.x[0], self.points.y[0], 'garage', 0.6)
+            .anchor(0.5, 1);
+        },
+        endBuilding: () => {
+          return game.add
+            .image(self.points.x[5], self.points.y[5], 'farm', 0.9)
+            .anchor(0.4, 0.7);
+        },
       },
-      mapEnd: () => {
-        return game.add
-          .image(self.points.x[5], self.points.y[5], 'farm', 0.9)
-          .anchor(0.4, 0.7);
+      end: {
+        // TODO
       },
     },
   },

src/js/globals/globals_functions.js

@@ -67,7 +67,7 @@ const navigationIcons = {
         );
       } else {
         this.help = help;
-        this.iconsList.push(game.add.image(xLeft, 10, 'help', 1.5));
+        this.iconsList.push(game.add.image(xLeft, 10, 'pointer', 1.5));
         xLeft += iconSize;
       }
     }

src/js/menus/menu_custom.js

@@ -326,11 +326,15 @@ const customMenuState = {
     x = gameFrame().x + offsetW;
     y = gameFrame().y + offsetH / 2;
 
-    for (let i = 0; i < curGame.assets.gameModeBtn.length; i++, y += offsetH) {
+    for (
+      let i = 0;
+      i < curGame.assets.customMenu.gameModeBtn.length;
+      i++, y += offsetH
+    ) {
       const icon = game.add.sprite(
         x,
         y,
-        curGame.assets.gameModeBtn[i],
+        curGame.assets.customMenu.gameModeBtn[i],
         0,
         1,
         1
@@ -361,7 +365,14 @@ const customMenuState = {
 
     // Placing math operation icons
     for (let i = 0; i < curGame.gameOperation.length; i++, y += offsetH) {
-      icon = game.add.sprite(x, y, curGame.assets.gameOperationBtn[i], 0, 1, 1);
+      icon = game.add.sprite(
+        x,
+        y,
+        curGame.assets.customMenu.gameOperationBtn[i],
+        0,
+        1,
+        1
+      );
       icon.anchor(0.5, 0.5);
 
       icon.gameOperation = curGame.gameOperation[i];
@@ -483,7 +494,7 @@ const customMenuState = {
     const data =
       icon.id == 'gameOperation'
         ? self.gameOperationContent
-        : gameList[gameId].assets.customMenuInfoBox()[icon.id];
+        : gameList[gameId].assets.customMenu.infoBox()[icon.id];
 
     const content = `<h2>${data.title}</h2>
     <div>${data.body}</div>

src/js/menus/menu_main.js

@@ -59,7 +59,7 @@ const menuState = {
         const icon = game.add.image(
           x,
           context.canvas.height / 2 - 70,
-          gameList[i].assets.gameNameBtn,
+          gameList[i].assets.menu.gameNameBtn,
           1.5
         );
         icon.anchor(0.5, 0.5);
@@ -125,10 +125,10 @@ const menuState = {
    * Displays game menu information boxes.
    */
   showInfoBox: function (icon) {
-    if (gameList?.[icon.id]?.assets?.menuInfoBox) {
+    if (gameList?.[icon.id]?.assets?.menu?.infoBox) {
       self.infoBox.style.display = 'block';
 
-      const data = gameList[icon.id].assets.menuInfoBox();
+      const data = gameList[icon.id].assets.menu.infoBox();
 
       const content = `<h3>${data.title}</h3>
       <p>${data.body}</p>

src/js/moodle/studentReport.js

@@ -30,7 +30,12 @@ const studentReport = {
       game.lang.results,
       textStyles.h1_green
     );
-    game.add.image(x - 40, y - 70, gameList[gameId].assets.gameNameBtn, 0.8);
+    game.add.image(
+      x - 40,
+      y - 70,
+      gameList[gameId].assets.menu.gameNameBtn,
+      0.8
+    );
 
     // Game info
     text =

src/js/screens/end.js

@@ -51,10 +51,10 @@ const endState = {
 
     game.add.image(360, 545, 'tree4', 0.7).anchor(0, 1);
 
-    gameList[gameId].assets.endBuilding();
+    gameList[gameId].assets.end.building();
 
-    this.character = gameList[gameId].assets.endCharacter();
-    this.character.animation = gameList[gameId].assets.endCharacterAnimation;
+    this.character = gameList[gameId].assets.end.character();
+    this.character.animation = gameList[gameId].assets.end.characterAnimation;
 
     if (gameName === 'circleOne') {
       this.preAnimate = true;

src/js/screens/map.js

@@ -186,8 +186,8 @@ const mapState = {
     ).align = 'right';
 
     // Map positions
-    gameList[gameId].assets.mapStart();
-    gameList[gameId].assets.mapEnd();
+    gameList[gameId].assets.map.startBuilding();
+    gameList[gameId].assets.map.endBuilding();
 
     // Rocks and bushes
     for (let i in rocks.type) {
@@ -230,9 +230,9 @@ const mapState = {
     }
 
     // Character
-    this.character = gameList[gameId].assets.mapCharacter(gameOperation);
+    this.character = gameList[gameId].assets.map.character(gameOperation);
     this.character.animation =
-      gameList[gameId].assets.mapCharacterAnimation(gameOperation);
+      gameList[gameId].assets.map.characterAnimation(gameOperation);
 
     //this.character.anchor(0.5, 1);
     game.animation.play(this.character.animation[0]);