refactor navigationIcons

src/js/gameMechanics.js

@@ -65,6 +65,7 @@ const game = {
       game.loadedCur = 0; // Clears last state's number of loaded media
       game.loadedMax = 0; // Clears last state's expected loaded media
       game.state.name = name; // Updates state name
+      navigation.list = [];
       self = game.state.list[name]; // Updates self to current state
       if (self.preload) {
         game.render.clear(); // Clears render queue

src/js/games/circleOne.js

@@ -121,25 +121,10 @@ const circleOne = {
     // Calls function that loads navigation icons
     // FOR MOODLE
     if (moodle) {
-      navigationIcons.add(
-        false,
-        false,
-        false, // Left buttons
-        true,
-        false, // Right buttons
-        false,
-        false
-      );
+      navigation.add.right(['audio']);
     } else {
-      navigationIcons.add(
-        true,
-        true,
-        true, // Left buttons
-        true,
-        false, // Right buttons
-        'customMenu',
-        this.utils.showAnswer
-      );
+      navigation.add.left(['back', 'menu', 'show_answer'], 'customMenu');
+      navigation.add.right(['audio']);
     }
 
     const validPath = { x0, y0, distanceBetweenPoints };
@@ -849,7 +834,7 @@ const circleOne = {
         }
       }
 
-      navigationIcons.onInputDown(x, y);
+      navigation.onInputDown(x, y);
 
       game.render.all();
     },
@@ -909,7 +894,7 @@ const circleOne = {
         }
       }
 
-      navigationIcons.onInputOver(x, y);
+      navigation.onInputOver(x, y);
 
       game.render.all();
     },

src/js/games/squareOne.js

@@ -68,25 +68,10 @@ const squareOne = {
 
     // FOR MOODLE
     if (moodle) {
-      navigationIcons.add(
-        false,
-        false,
-        false, // Left icons
-        true,
-        false, // Right icons
-        false,
-        false
-      );
+      navigation.add.right(['audio']);
     } else {
-      navigationIcons.add(
-        true,
-        true,
-        true, // Left icons
-        true,
-        false, // Right icons
-        'customMenu',
-        this.showAnswer
-      );
+      navigation.add.left(['back', 'menu', 'show_answer'], 'customMenu');
+      navigation.add.right(['audio']);
     }
 
     // TRACTOR
@@ -157,8 +142,8 @@ const squareOne = {
 
     if (!this.restart) {
       game.timer.start(); // Set a timer for the current level (used in postScore())
-      game.event.add('click', this.onInputDown);
-      game.event.add('mousemove', this.onInputOver);
+      game.event.add('click', this.events.onInputDown);
+      game.event.add('mousemove', this.events.onInputOver);
     }
   },
 
@@ -299,7 +284,7 @@ const squareOne = {
         if (audioStatus) game.audio.errorSound.play();
       }
 
-      self.postScore();
+      self.fetch.postScore();
 
       // AFTER CHECK ANSWER
       self.checkAnswer = false;
@@ -327,8 +312,145 @@ const squareOne = {
     game.render.all();
   },
 
+  events: {
+    /**
+     * 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;
+
+      if (gameMode == 'a') {
+        self.floor.blocks.forEach((cur) => {
+          if (game.math.isOverIcon(x, y, cur)) self.clickSquare(cur);
+        });
+      } else {
+        self.stck.blocks.forEach((cur) => {
+          if (game.math.isOverIcon(x, y, cur)) self.clickSquare(cur);
+        });
+      }
+
+      navigation.onInputDown(x, y);
+
+      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 flagA = false;
+      let flagB = false;
+
+      if (gameMode == 'a') {
+        // Make arrow follow mouse
+        if (!self.hasClicked && !self.animateEnding) {
+          if (
+            game.math.distanceToPointer(self.arrow.x, x, self.arrow.y, y) > 8
+          ) {
+            self.arrow.x = x < 250 ? 250 : x; // Limits the arrow left position to 250
+          }
+        }
+
+        self.floor.blocks.forEach((cur) => {
+          if (game.math.isOverIcon(x, y, cur)) {
+            flagA = true;
+            self.overSquare(cur);
+          }
+        });
+
+        if (!flagA) self.outSquare('a');
+      }
+
+      if (gameMode == 'b') {
+        self.stck.blocks.forEach((cur) => {
+          if (game.math.isOverIcon(x, y, cur)) {
+            flagB = true;
+            self.overSquare(cur);
+          }
+        });
+
+        if (!flagB) self.outSquare('b');
+      }
+
+      navigation.onInputOver(x, y);
+
+      game.render.all();
+    },
+  },
+
+  fetch: {
+    /**
+     * Saves players data after level ends - to be sent to database <br>
+     *
+     * Attention: the 'line_' prefix data table must be compatible to data table fields (MySQL server)
+     *
+     * @see /php/save.php
+     */
+    postScore: function () {
+      // Creates string that is going to be sent to db
+      const data =
+        '&line_game=' +
+        gameShape +
+        '&line_mode=' +
+        gameMode +
+        '&line_oper=' +
+        gameOperation +
+        '&line_leve=' +
+        gameDifficulty +
+        '&line_posi=' +
+        curMapPosition +
+        '&line_resu=' +
+        self.result +
+        '&line_time=' +
+        game.timer.elapsed +
+        '&line_deta=' +
+        'numBlocks:' +
+        self.stck.blocks.length +
+        ', valBlocks: ' +
+        self.divisorsList + // Ends in ','
+        ' blockIndex: ' +
+        self.stck.index +
+        ', floorIndex: ' +
+        self.floor.index;
+
+      // FOR MOODLE
+      sendToDatabase(data);
+    },
+  },
+
+  utils: {
+    /**
+     * Display correct answer
+     */
+    showAnswer: function () {
+      if (!self.hasClicked) {
+        // On gameMode (a)
+        if (gameMode == 'a') {
+          const aux = self.floor.blocks[0];
+          self.help.x =
+            self.floor.correctX - (aux.width / 2) * self.direc_level;
+          self.help.y = 501;
+          // On gameMode (b)
+        } else {
+          const aux = self.stck.blocks[self.stck.correctIndex];
+          self.help.x = aux.x + (aux.width / 2) * self.direc_level;
+          self.help.y = aux.y;
+        }
+
+        self.help.alpha = 0.7;
+      }
+    },
+  },
+
   /**
-   * Function called by self.onInputOver() when cursor is over a valid rectangle
+   * Function called by self.events.onInputOver() when cursor is over a valid rectangle
    *
    * @param {object} cur rectangle the cursor is over
    */
@@ -358,7 +480,7 @@ const squareOne = {
   },
 
   /**
-   * Function called by self.onInputOver() when cursos is out of a valid rectangle
+   * Function called by self.events.onInputOver() when cursos is out of a valid rectangle
    */
   outSquare: function () {
     if (!self.hasClicked) {
@@ -383,7 +505,7 @@ const squareOne = {
   },
 
   /**
-   * Function called by self.onInputDown() when player clicks on a valid rectangle.
+   * Function called by self.events.onInputDown() when player clicks on a valid rectangle.
    */
   clickSquare: function () {
     if (!self.hasClicked && !self.animateEnding) {
@@ -652,132 +774,4 @@ const squareOne = {
       );
     }
   },
-
-  /**
-   * Display correct answer
-   */
-  showAnswer: function () {
-    if (!self.hasClicked) {
-      // On gameMode (a)
-      if (gameMode == 'a') {
-        const aux = self.floor.blocks[0];
-        self.help.x = self.floor.correctX - (aux.width / 2) * self.direc_level;
-        self.help.y = 501;
-        // On gameMode (b)
-      } else {
-        const aux = self.stck.blocks[self.stck.correctIndex];
-        self.help.x = aux.x + (aux.width / 2) * self.direc_level;
-        self.help.y = aux.y;
-      }
-
-      self.help.alpha = 0.7;
-    }
-  },
-
-  /**
-   * 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;
-
-    if (gameMode == 'a') {
-      self.floor.blocks.forEach((cur) => {
-        if (game.math.isOverIcon(x, y, cur)) self.clickSquare(cur);
-      });
-    } else {
-      self.stck.blocks.forEach((cur) => {
-        if (game.math.isOverIcon(x, y, cur)) self.clickSquare(cur);
-      });
-    }
-
-    navigationIcons.onInputDown(x, y);
-
-    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 flagA = false;
-    let flagB = false;
-
-    if (gameMode == 'a') {
-      // Make arrow follow mouse
-      if (!self.hasClicked && !self.animateEnding) {
-        if (game.math.distanceToPointer(self.arrow.x, x, self.arrow.y, y) > 8) {
-          self.arrow.x = x < 250 ? 250 : x; // Limits the arrow left position to 250
-        }
-      }
-
-      self.floor.blocks.forEach((cur) => {
-        if (game.math.isOverIcon(x, y, cur)) {
-          flagA = true;
-          self.overSquare(cur);
-        }
-      });
-
-      if (!flagA) self.outSquare('a');
-    }
-
-    if (gameMode == 'b') {
-      self.stck.blocks.forEach((cur) => {
-        if (game.math.isOverIcon(x, y, cur)) {
-          flagB = true;
-          self.overSquare(cur);
-        }
-      });
-
-      if (!flagB) self.outSquare('b');
-    }
-
-    navigationIcons.onInputOver(x, y);
-
-    game.render.all();
-  },
-
-  /**
-   * Saves players data after level ends - to be sent to database <br>
-   *
-   * Attention: the 'line_' prefix data table must be compatible to data table fields (MySQL server)
-   *
-   * @see /php/save.php
-   */
-  postScore: function () {
-    // Creates string that is going to be sent to db
-    const data =
-      '&line_game=' +
-      gameShape +
-      '&line_mode=' +
-      gameMode +
-      '&line_oper=' +
-      gameOperation +
-      '&line_leve=' +
-      gameDifficulty +
-      '&line_posi=' +
-      curMapPosition +
-      '&line_resu=' +
-      self.result +
-      '&line_time=' +
-      game.timer.elapsed +
-      '&line_deta=' +
-      'numBlocks:' +
-      self.stck.blocks.length +
-      ', valBlocks: ' +
-      self.divisorsList + // Ends in ','
-      ' blockIndex: ' +
-      self.stck.index +
-      ', floorIndex: ' +
-      self.floor.index;
-
-    // FOR MOODLE
-    sendToDatabase(data);
-  },
 };

src/js/games/squareTwo.js

@@ -71,25 +71,10 @@ const squareTwo = {
 
     // FOR MOODLE
     if (moodle) {
-      navigationIcons.add(
-        false,
-        false,
-        false, // Left buttons
-        true,
-        false, // Right buttons
-        false,
-        false
-      );
+      navigation.add.right(['audio']);
     } else {
-      navigationIcons.add(
-        true,
-        true,
-        false, // Left buttons
-        true,
-        false, // Right buttons
-        'customMenu',
-        false
-      );
+      navigation.add.left(['back', 'menu'], 'customMenu');
+      navigation.add.right(['audio']);
     }
 
     // Add kid
@@ -520,7 +505,7 @@ const squareTwo = {
     });
 
     // Click navigation icons
-    navigationIcons.onInputDown(x, y);
+    navigation.onInputDown(x, y);
 
     game.render.all();
   },
@@ -557,7 +542,7 @@ const squareTwo = {
     if (!flagA && !flagB) document.body.style.cursor = 'auto';
 
     // Mouse over navigation icons : show name
-    navigationIcons.onInputOver(x, y);
+    navigation.onInputOver(x, y);
 
     game.render.all();
   },

src/js/globals/globals_debug.js

@@ -1,16 +1,16 @@
 const isDebugMode = true;
 
 const debugState = {
-  lang: { status: true, lang: 'en_US' },
+  lang: { status: true, lang: 'pt_BR' },
   name: { status: true, name: 'Username' },
-  menu: { status: true, id: 1 },
+  menu: { status: false, id: 1 },
   customMenu: {
-    status: true,
+    status: false,
     getData: () => {
       return { mode: 'b', operation: 'mixed', difficulty: 5, label: true };
     },
   },
-  map: { status: true },
+  map: { status: false },
   end: { status: false, stop: false },
 };
 

src/js/globals/globals_functions.js

@@ -1,139 +1,97 @@
-/**
- * Manages navigation icons on the top of the screen
- * @namespace
- */
-const navigationIcons = {
-  /**
-   * Add navigation icons.<br>
-   *  * The icons on the left are ordered from left to right. <br>
-   *  * The icons on the right are ordered from right to left.
-   *
-   * @param {boolean} leftIcon0 1st left icon (back)
-   * @param {boolean} leftIcon1 2nd left icon (main menu)
-   * @param {boolean} leftIcon2 3rd left icon (solve game)
-   * @param {boolean} rightIcon0 1st right icon (audio)
-   * @param {boolean} rightIcon1 2nd right icon (lang)
-   * @param {undefined|string} state state to be called by the 'back' button (must exist if param 'leftIcon0' is true)
-   * @param {undefined|function} help function in the current game state that display correct answer
-   */
-  add: function (
-    leftIcon0,
-    leftIcon1,
-    leftIcon2,
-    rightIcon0,
-    rightIcon1,
-    state,
-    help
-  ) {
-    const iconSize = 75;
-    let xLeft = 10;
-    let xRight = context.canvas.width - iconSize - 10;
-
-    this.iconsList = [];
-
-    // 'Descriptive labels' for the navigation icons
-    this.left_text = game.add.text(xLeft, 110, '', textStyles.p_);
-    this.left_text.align = 'left';
-
-    this.right_text = game.add.text(xRight + 60, 110, '', textStyles.p_);
-    this.right_text.align = 'right';
-
-    // Left icons
-
-    if (leftIcon0) {
-      // Return to previous screen
-      if (!state) {
-        console.error(
-          "Game error: You tried to add a 'back' icon without the 'state' parameter."
-        );
-      } else {
-        this.state = state;
-        this.iconsList.push(game.add.image(xLeft - 5, 10, 'back', 1.5));
-        xLeft += iconSize;
-      }
-    }
-
-    if (leftIcon1) {
-      // Return to main menu screen
-      this.iconsList.push(game.add.image(xLeft, 10, 'menu', 1.5));
-      xLeft += iconSize;
-    }
-
-    if (leftIcon2) {
-      // Shows solution to the game
-      if (!help) {
-        console.error(
-          "Game error: You tried to add a 'game solution' icon without the 'help' parameter."
-        );
-      } else {
-        this.help = help;
-        this.iconsList.push(game.add.image(xLeft, 10, 'show_solution', 1.5));
-        xLeft += iconSize;
-      }
-    }
-
-    // Right icons
+const navigation = {
+  list: [],
+  prevState: undefined,
+  audioIcon: undefined,
+  labelLeft: undefined,
+  labelRight: undefined,
+
+  add: {
+    left: (icons, prevState) => {
+      navigation.prevState = prevState;
+      const iconSize = 75;
+      let x = 10;
+      navigation.labelLeft = game.add.text(x, 110, '', textStyles.p_);
+      navigation.labelLeft.align = 'left';
+      icons.forEach((icon) => {
+        if (icon === 'back') {
+          if (!prevState) {
+            console.error(
+              "Game error: You tried to add a 'back' icon without the 'state' parameter."
+            );
+            return;
+          } else {
+            navigation.prevState = prevState;
+          }
+        }
+        if (icon === 'show_answer' && !self.utils.showAnswer) {
+          console.error(
+            "Game error: You tried to add a 'show_answer' icon without a 'showAnswer()' function o the game state."
+          );
+          return;
+        }
+        const asset = game.add.image(x, 10, icon, 1.5);
+        navigation.list.push(asset);
+        x += iconSize;
+      });
+    },
+
+    right: (icons) => {
+      const iconSize = 75;
+      let x = context.canvas.width - iconSize - 10;
+      navigation.labelRight = game.add.text(x + 60, 110, '', textStyles.p_);
+      navigation.labelRight.align = 'right';
+      icons.forEach((icon) => {
+        let asset;
+        if (icon === 'audio') {
+          asset = game.add.sprite(x, 10, icon, 1, 1.5);
+          asset.curFrame = audioStatus ? 0 : 1;
+          navigation.audioIcon = asset;
+        }
 
-    if (rightIcon0) {
-      // Turns game audio on/off
-      this.audioIcon = game.add.sprite(xRight, 10, 'audio', 1, 1.6);
-      this.audioIcon.curFrame = audioStatus ? 0 : 1;
-      this.audioIcon.anchor(0.3, 0);
-      this.iconsList.push(this.audioIcon);
-      xRight -= iconSize;
-    }
+        if (icon === 'lang') {
+          asset = game.add.image(x, 10, 'lang', 1.5);
+        }
 
-    if (rightIcon1) {
-      // Return to select language screen
-      this.iconsList.push(game.add.image(xRight, 10, 'language', 1.5));
-      this.audioIcon.anchor(0, 0);
-      xRight -= iconSize;
-    }
+        navigation.list.push(asset);
+        x -= iconSize;
+      });
+    },
   },
 
-  /**
-   * When 'back' icon is clicked go to this state
-   *
-   * @param {string} state name of the next state
-   */
-  callState: function (state) {
+  changeState: (state) => {
     if (audioStatus) game.audio.popSound.play();
 
     game.event.clear(self);
     game.state.start(state);
   },
 
-  /**
-   * Called by mouse click event
-   *
-   * @param {number} x contains the mouse x coordinate
-   * @param {number} y contains the mouse y coordinate
-   */
-  onInputDown: function (x, y) {
-    navigationIcons.iconsList.forEach((cur) => {
-      if (game.math.isOverIcon(x, y, cur)) {
-        const name = cur.name;
-        switch (name) {
-          case 'back':
-            navigationIcons.callState(navigationIcons.state);
-            break;
+  onInputDown: (x, y) => {
+    navigation.list.forEach((icon) => {
+      if (game.math.isOverIcon(x, y, icon)) {
+        const iconName = icon.name;
+        switch (iconName) {
           case 'menu':
-            navigationIcons.callState('menu');
+            navigation.changeState('menu');
+            break;
+          case 'lang':
+            navigation.changeState('lang');
             break;
-          case 'show_solution':
-            navigationIcons.help();
+          case 'back':
+            const state = navigation.prevState;
+            navigation.changeState(state);
             break;
-          case 'language':
-            navigationIcons.callState('lang');
+          case 'show_answer':
+            if (audioStatus) game.audio.popSound.play();
+            self.utils.showAnswer();
             break;
           case 'audio':
             if (audioStatus) {
               audioStatus = false;
-              navigationIcons.audioIcon.curFrame = 1;
+              navigation.audioIcon.curFrame = 1;
             } else {
               audioStatus = true;
-              if (audioStatus) game.audio.popSound.play();
-              navigationIcons.audioIcon.curFrame = 0;
+              navigation.audioIcon.curFrame = 0;
+              game.audio.popSound.play();
             }
             game.render.all();
             break;
@@ -144,42 +102,34 @@ const navigationIcons = {
     });
   },
 
-  /**
-   * Called by mouse move event
-   *
-   * @param {number} x contains the mouse x coordinate
-   * @param {number} y contains the mouse y coordinate
-   */
-  onInputOver: function (x, y) {
-    let flag = false;
-
-    navigationIcons.iconsList.forEach((cur) => {
-      if (game.math.isOverIcon(x, y, cur)) {
-        flag = true;
-        let name = cur.name;
-        switch (name) {
-          case 'back':
-            navigationIcons.left_text.name = game.lang.nav_back;
-            break;
+  onInputOver: (x, y) => {
+    let isOverIcon = false;
+    navigation.list.forEach((icon) => {
+      if (game.math.isOverIcon(x, y, icon)) {
+        isOverIcon = true;
+        const iconName = icon.name;
+        switch (iconName) {
           case 'menu':
-            navigationIcons.left_text.name = game.lang.nav_menu;
+            navigation.labelLeft.name = game.lang.nav_menu;
+            break;
+          case 'lang':
+            navigation.labelRight.name = game.lang.nav_lang;
             break;
-          case 'show_solution':
-            navigationIcons.left_text.name = game.lang.nav_help;
+          case 'back':
+            navigation.labelLeft.name = game.lang.nav_back;
             break;
-          case 'language':
-            navigationIcons.right_text.name = game.lang.nav_lang;
+          case 'show_answer':
+            navigation.labelLeft.name = game.lang.nav_help;
             break;
           case 'audio':
-            navigationIcons.right_text.name = game.lang.audio;
+            navigation.labelRight.name = game.lang.audio;
             break;
         }
       }
     });
-
-    if (!flag) {
-      navigationIcons.left_text.name = '';
-      navigationIcons.right_text.name = '';
+    if (!isOverIcon) {
+      if (navigation.labelLeft) navigation.labelLeft.name = '';
+      if (navigation.labelRight) navigation.labelRight.name = '';
     } else {
       document.body.style.cursor = 'pointer';
     }

src/js/globals/globals_tokens.js

@@ -133,9 +133,9 @@ const url = {
       ['flag_US', baseUrl + 'flags/us.png'],
       // Navigation icons on the top of the page
       ['back', baseUrl + 'icons_navigation/back.png'],
-      ['show_solution', baseUrl + 'icons_navigation/show_solution.png'],
+      ['show_answer', baseUrl + 'icons_navigation/show_solution.png'],
       ['home', baseUrl + 'icons_navigation/home.png'],
-      ['language', baseUrl + 'icons_navigation/language.png'],
+      ['lang', baseUrl + 'icons_navigation/language.png'],
       ['menu', baseUrl + 'icons_navigation/menu.png'],
       // Interactive icons
       ['answer_correct', baseUrl + 'icons_interactive/answer_correct.png'],

src/js/menus/menu_custom.js

@@ -41,7 +41,8 @@ const customMenuState = {
       });
 
       // Loads navigation icons
-      navigationIcons.add(true, false, false, true, true, 'menu', false);
+      navigation.add.left(['back'], 'menu');
+      navigation.add.right(['audio', 'lang']);
 
       const curGame = gameList[gameId];
 
@@ -185,7 +186,7 @@ const customMenuState = {
       self.load(self.menuIcons[overIcon]);
     } else document.body.style.cursor = 'auto';
 
-    navigationIcons.onInputDown(x, y);
+    navigation.onInputDown(x, y);
 
     game.render.all();
   },
@@ -235,7 +236,7 @@ const customMenuState = {
     }
 
     // Check navigation icons
-    navigationIcons.onInputOver(x, y);
+    navigation.onInputOver(x, y);
 
     game.render.all();
   },

src/js/menus/menu_main.js

@@ -45,7 +45,7 @@ const menuState = {
       );
 
       // Loads navigation icons
-      navigationIcons.add(false, false, false, true, true, false, false);
+      navigation.add.right(['audio', 'lang']);
 
       this.menuIcons = [];
 
@@ -205,7 +205,7 @@ const menuState = {
     }
 
     // Check navigation icons
-    navigationIcons.onInputDown(x, y);
+    navigation.onInputDown(x, y);
 
     game.render.all();
   },
@@ -255,7 +255,7 @@ const menuState = {
     }
 
     // Check navigation icons
-    navigationIcons.onInputOver(x, y);
+    navigation.onInputOver(x, y);
 
     game.render.all();
   },

src/js/menus/preMenu_lang.js

@@ -141,9 +141,9 @@ const loadLangState = {
     // Make sure to only ask for player name on the first time oppening the game
     if (this.firstTime == undefined) {
       this.firstTime = false;
-      game.state.start('name'); // First time opening ifractions ('language' >> 'name' >> 'menu')
+      game.state.start('name'); // First time opening ifractions ('lang' >> 'name' >> 'menu')
     } else {
-      game.state.start('menu'); // If changing language during the game ('language' >> >> 'menu')
+      game.state.start('menu'); // If changing language during the game ('lang' >> >> 'menu')
     }
   },
 };

src/js/screens/map.js

@@ -180,25 +180,8 @@ const mapState = {
 
     // FOR MOODLE
     if (moodle) {
-      navigationIcons.add(
-        false,
-        false,
-        false, // Left icons
-        false,
-        false, // Right icons
-        false,
-        false
-      );
     } else {
-      navigationIcons.add(
-        true,
-        true,
-        false, // Left icons
-        false,
-        false, // Right icons
-        'customMenu',
-        false
-      );
+      navigation.add.left(['back', 'menu'], 'customMenu');
     }
 
     game.event.add('click', this.onInputDown);
@@ -271,7 +254,7 @@ const mapState = {
       self.loadGame();
     }
 
-    navigationIcons.onInputDown(x, y);
+    navigation.onInputDown(x, y);
   },
 
   /**
@@ -301,7 +284,7 @@ const mapState = {
       document.body.style.cursor = 'auto';
     }
 
-    navigationIcons.onInputOver(x, y);
+    navigation.onInputOver(x, y);
   },
 
   renderProgressBar: function () {