documented gameMechanics.js

changed icon color

js/customMenu.js

@@ -1,389 +1,389 @@
-/**
- * SECUNDARY MENU STATE: player can select game mode, math operation and overall game difficulty
- * 
- * @namespace
- */
- const customMenuState = {
-
-    /**
-     * Preloads media for current state
-     */
-    preload: function () {
-  
-      // LOADING MEDIA
-      game.load.sprite(url[gameTypeString].sprite);
-      game.load.image(url[gameTypeString].image);
-  
-    },
-  
-    /**
-     * Main code
-     */
-    create: function () {
-  
-      const iconScale = 0.7;
-      const baseY = 270 - 40;
-      this.menuIcons = [];
-      this.activeIcons = this.menuIcons;
-  
-      // Background color
-      game.add.graphic.rect(0, 0, 900, 600, undefined, 0, colors.blueBckg, 1);
-      // Floor
-      for (let i = 0; i < defaultWidth / 100; i++) { game.add.image(i * 100, 501, 'floor'); }
-  
-      // Overtitle : Selected game
-      game.add.text(defaultWidth / 2, 40, game.lang.game + ": " + menuState.menuIcons, textStyles.h4_brown);
-      // Title : Customize the selected game
-      game.add.text(defaultWidth / 2, 80, game.lang.custom_game, textStyles.h1_green);
-  
-      // Loads navigation icons
-      navigationIcons.func_addIcons(
-        true, false, false,
-        true, true,
-        'menu', false);
-  
-      let x = 150;
-      let y = 200 - 40;
-      let width = 5;
-      let height = 280 + 80;
-      let offsetW = 600 / 6;
-      let offsetH, infoIcon;
-  
-      // Label 'Game Mode'
-      game.add.text(x + offsetW - 12, y, game.lang.game_mode, textStyles.h2_blue_2);
-      
-      infoIcon = game.add.image(x + 2 * offsetW - 30, y - 40, 'info', 0.5);
-      infoIcon.anchor(0.5,0.5);
-      infoIcon.iconType = 'infoIcon';
-      this.menuIcons.push(infoIcon);
-  
-      // Label 'Operation'
-      game.add.text(x + 3 * offsetW, y, game.lang.operation, textStyles.h2_blue_2);
-      
-      infoIcon = game.add.image(x + 4 * offsetW - 30, y - 40, 'info', 0.5);
-      infoIcon.anchor(0.5,0.5);
-      infoIcon.iconType = 'infoIcon';
-      this.menuIcons.push(infoIcon);
-  
-      // Label 'Difficulty'
-      game.add.text(x + 5 * offsetW, y, game.lang.difficulty, textStyles.h2_blue_2);
-      
-      infoIcon = game.add.image(x + 6 * offsetW - 30, y - 40, 'info', 0.5);
-      infoIcon.anchor(0.5,0.5);
-      infoIcon.iconType = 'infoIcon';
-      this.menuIcons.push(infoIcon);
-  
-      // Horizontal line
-      game.add.graphic.rect(x - 25, y + 10, 600 + 50, width, undefined, 0, colors.blueMenuLine).anchor(0, 0.5);
-      // Vertical lines
-      game.add.graphic.rect(x + 2 * offsetW, y - 25, width, height, undefined, 0, colors.blueMenuLine).anchor(0.5, 0);
-      game.add.graphic.rect(x + 4 * offsetW, y - 25, width, height, undefined, 0, colors.blueMenuLine).anchor(0.5, 0);
-  
-      // --------------------------- TURN ON/OFF FRACTION LABELS / RECTANGLE GUIDE
-  
-        // Horizontal line
-        game.add.graphic.rect(x + 4 * offsetW, y + 136, 200 + 25, width, undefined, 0, colors.blueMenuLine).anchor(0, 0.5);
-  
-        // Label 'Show Fractions / Auxiliar rectangles'
-        game.add.text(x + 5 * offsetW, y + 102, game.lang.show, textStyles.h4_blue_2);
-        
-        infoIcon = game.add.image(x + 6 * offsetW + 20, y + 102, 'info', 0.5);
-        infoIcon.anchor(0.5,0.5);
-        infoIcon.iconType = 'infoIcon';
-        this.menuIcons.push(infoIcon);
-        
-        if (gameTypeString == 'squareTwo') {
-          game.add.text(x + 5 * offsetW + 10, y + 102 + 24,  game.lang.aux_rectangle, textStyles.h4_blue_2);
-        } else {
-          game.add.text(x + 5 * offsetW, y + 102 + 24, game.lang.title, textStyles.h2_blue_2);
-        }
-        
-        // Selection box
-        y += 40;
-        const frame = (fractionLabel) ? 1 : 0;
-  
-        const selectionBox = game.add.sprite(x + 5 * offsetW, y + 102 + 24 - 2, 'select', frame, 0.11);
-        selectionBox.anchor(0.5, 0.5);
-        selectionBox.iconType = 'selectionBox';
-        this.menuIcons.push(selectionBox);
-  
-      // --------------------------- GAME MODE ICONS
-  
-      x = 150 + offsetW;
-      y = baseY;
-      offsetH = this.func_getOffset(height, info[gameTypeString].gameModeType.length);
-  
-      for (let i = 0; i < info[gameTypeString].gameModeTypeUrl.length; i++, y += offsetH) {
-        const icon = game.add.sprite(x, y, info[gameTypeString].gameModeTypeUrl[i], 0, iconScale, 1);
-        icon.anchor(0.5, 0.5);
-  
-        icon.gameModeType = info[gameTypeString].gameModeType[i];
-        icon.iconType = 'gameMode';
-        if (i == 0) {
-          gameModeType = icon.gameModeType;
-          icon.curFrame = 1;
-        }
-  
-        this.menuIcons.push(icon);
-      }
-  
-      // --------------------------- GAME OPERATION ICONS
-  
-      x += 2 * offsetW;
-      y = baseY;
-      offsetH = this.func_getOffset(height, info[gameTypeString].gameOperationType.length);
-  
-      let icon;
-      let aux = [];
-      aux['squareOne'] = [
-        ['operation_plus', 'Plus'],
-        ['operation_minus', 'Minus']
-      ];
-      aux['circleOne'] = [
-        ['operation_plus', 'Plus'],
-        ['operation_minus', 'Minus'],
-        ['operation_mixed', 'Mixed']
-      ];
-      aux['squareTwo'] = [
-        ['operation_equals', 'Equals'],
-      ];
-  
-      // Placing math operation icons
-      for (let i = 0; i < aux[gameTypeString].length; i++, y += offsetH) {
-        icon = game.add.sprite(x, y, aux[gameTypeString][i][0], 0, iconScale, 1);
-        icon.anchor(0.5, 0.5);
-  
-        icon.gameOperationType = aux[gameTypeString][i][1];
-        icon.iconType = 'gameOperation';
-  
-        if (i == 0) {
-          gameOperationType = icon.gameOperationType;
-          icon.curFrame = 1;
-        }
-  
-        this.menuIcons.push(icon);
-      }
-  
-      // --------------------------- DIFFICULTY ICONS
-  
-      x = (gameTypeString == 'squareOne') ? 625 : 585;
-      y = baseY - 25;
-  
-      for (let i = 0; i < info[gameTypeString].gameDifficulty; i++) {
-        // Parameters
-        const curX = x + (30 + 10) * i;
-  
-        // Difficulty menuIcons
-        const icon = game.add.graphic.rect(curX, y, 30, 30, undefined, 0, colors.gray, 1);
-        icon.anchor(0.5, 0.5);
-        icon.difficulty = i + 1;
-        icon.iconType = 'difficulty';
-  
-        if (i == 0) {
-          gameDifficulty = icon.difficulty;
-          icon.fillColor = colors.blue;
-        }
-        this.menuIcons.push(icon);
-  
-        // Difficulty numbers
-        game.add.text(curX, y + 7, i + 1, textStyles.h4_white);
-      }
-  
-      // --------------------------- ENTER ICON
-  
-      x = defaultWidth - 100;
-      y = defaultHeight - 110;
-  
-      const enterIcon = game.add.image(x, y, 'bush');
-      enterIcon.anchor(0.5, 0.5);
-      enterIcon.iconType = 'enter';
-  
-      this.menuIcons.push(enterIcon);
-  
-      this.enterText = game.add.text(x, y, game.lang.continue, textStyles.h4_white);
-  
-      // --------------------------- INFORMATION BOX
-      
-      let cur;
-      this.infoBoxElements = []; // grouped to be displayed/hidden when info box is oppened/closed
-      
-      cur = game.add.graphic.rect(0, 0, defaultWidth, defaultHeight, undefined, 0, colors.black, 0.6);
-      cur.alpha = 0;
-      cur.originalAlpha = 0.6;
-      this.infoBoxElements.push(cur);
-      
-      cur = game.add.graphic.rect(100,  100, defaultWidth - 200, defaultHeight - 200, colors.blue, 2, colors.blueBckg, 1);
-      cur.alpha = 0;
-      this.infoBoxElements.push(cur);
-      
-      this.closeIcon = game.add.image(defaultWidth - 128, 125, 'close', 0.12);
-      this.closeIcon.anchor(0.5,0.5);
-      this.closeIcon.alpha = 0;
-      this.closeIcon.iconType = 'infoBox';
-      this.infoBoxElements.push(this.closeIcon);
-  
-      // ------------- EVENTS
-  
-      game.event.add('click', this.func_onInputDown);
-      game.event.add('mousemove', this.func_onInputOver);
-  
-    },
-  
-    /**
-     * Saves information selected by the player 
-     * 
-     * @param {object} icon selected icon
-     */
-    func_load: function (icon) {
-  
-      if (audioStatus) game.audio.beepSound.play();
-  
-      const type = icon.iconType;
-      switch (type) {
-        case 'gameMode': gameModeType = icon.gameModeType; break;
-        case 'gameOperation': gameOperationType = icon.gameOperationType; break;
-        case 'difficulty': gameDifficulty = icon.difficulty; break;
-        case 'infoIcon': self.func_showInfoBox(); break;
-        case 'infoBox' : self.func_closeInfoBox(); 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('Game State: ' + gameTypeString + ', ' + gameModeType);
-          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;
-      }
-  
-    },
-  
-    /**
-     * Calculate spacing for icons on the menu screen
-     * 
-     * @param {number} width width of the available part of the screen
-     * @param {number} numberOfIcons number or icons to be put on the screen
-     * @returns {number}
-     */
-    func_getOffset: function (width, numberOfIcons) {
-      return width / (numberOfIcons + 1);
-    },
-  
-    /**
-     * Displays game menu information boxes.
-     */
-    func_showInfoBox: function () {
-      navigationIcons.func_addIcons( // Turn off navigation icons
-        false, false, false, 
-        false, false, 
-        false, false);
-      self.infoBoxElements.forEach( cur => { cur.alpha = (cur.originalAlpha) ? cur.originalAlpha : 1; }); // Make info box visible
-      self.activeIcons = [self.closeIcon]; // Update activeIcons to info box icons
-    },
-  
-    /**
-     * Closes game menu information boxes.
-     */
-    func_closeInfoBox: function () {
-      navigationIcons.func_addIcons( // Turn on navigation icons
-        true, false, false,
-        true, true,
-        'menu', false);
-      self.infoBoxElements.forEach( cur => { cur.alpha = 0; }); // Make info box invisible
-      self.activeIcons = self.menuIcons; // Update activeIcons to custom menu icons
-    },
-  
-    /**
-     * Called by mouse click event
-     * 
-     * @param {object} mouseEvent contains the mouse click coordinates
-     */
-    func_onInputDown: function (mouseEvent) {
-      const x = mouseEvent.offsetX, y = mouseEvent.offsetY;
-      let overIcon;
-  
-      // Check if clicked on an icon
-      for (let i in self.activeIcons) {
-        if (game.math.isOverIcon(x, y, self.activeIcons[i])) {
-          overIcon = i;
-          break;
-        }
-      }
-  
-      // Update gui
-      if (overIcon) { // if has clicked on an icon
-        document.body.style.cursor = 'pointer';
-        self.activeIcons.forEach(cur => {
-          if (cur.iconType == self.activeIcons[overIcon].iconType) { // if its in the same icon category
-            if (cur == self.activeIcons[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.func_load(self.activeIcons[overIcon]);
-  
-      } else document.body.style.cursor = 'auto';
-  
-      navigationIcons.func_onInputDown(x, y);
-  
-      game.render.all();
-  
-    },
-  
-    /**
-     * Called by mouse move event
-     * 
-     * @param {object} mouseEvent contains the mouse move coordinates
-     */
-    func_onInputOver: function (mouseEvent) {
-      const x = mouseEvent.offsetX, y = mouseEvent.offsetY;
-      let overIcon;
-  
-      // Check if pointer is over an icon
-      for (let i in self.activeIcons) {
-        if (game.math.isOverIcon(x, y, self.activeIcons[i])) {
-          overIcon = i;
-          break;
-        }
-      }
-  
-      // Update gui
-      if (overIcon) { // if pointer is over icon
-        document.body.style.cursor = 'pointer';
-        self.activeIcons.forEach(cur => {
-          if (cur.iconType == self.activeIcons[overIcon].iconType) { // if its in the same icon category
-            if (cur == self.activeIcons[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
-        self.enterText.style = textStyles.h4_white;
-        self.activeIcons.forEach(cur => { cur.scale = cur.originalScale; });
-        document.body.style.cursor = 'auto';
-      }
-  
-      // Check navigation icons
-      navigationIcons.func_onInputOver(x, y);
-  
-      game.render.all();
-  
-    },
-  
-  }
+/**
+ * SECUNDARY MENU STATE: player can select game mode, math operation and overall game difficulty
+ * 
+ * @namespace
+ */
+const customMenuState = {
+
+  /**
+   * Preloads media for current state
+   */
+  preload: function () {
+
+    // LOADING MEDIA
+    game.load.sprite(url[gameTypeString].sprite);
+    game.load.image(url[gameTypeString].image);
+
+  },
+
+  /**
+   * Main code
+   */
+  create: function () {
+
+    const iconScale = 0.7;
+    const baseY = 270 - 40;
+    this.menuIcons = [];
+    this.activeIcons = this.menuIcons;
+
+    // Background color
+    game.add.graphic.rect(0, 0, 900, 600, undefined, 0, colors.blueBckg, 1);
+    // Floor
+    for (let i = 0; i < defaultWidth / 100; i++) { game.add.image(i * 100, 501, 'floor'); }
+
+    // Overtitle : Selected game
+    game.add.text(defaultWidth / 2, 40, game.lang.game + ": " + menuState.menuIcons, textStyles.h4_brown);
+    // Title : Customize the selected game
+    game.add.text(defaultWidth / 2, 80, game.lang.custom_game, textStyles.h1_green);
+
+    // Loads navigation icons
+    navigationIcons.func_addIcons(
+      true, false, false,
+      true, true,
+      'menu', false);
+
+    let x = 150;
+    let y = 200 - 40;
+    let width = 5;
+    let height = 280 + 80;
+    let offsetW = 600 / 6;
+    let offsetH, infoIcon;
+
+    // Label 'Game Mode'
+    game.add.text(x + offsetW - 12, y, game.lang.game_mode, textStyles.h2_blue_2);
+
+    infoIcon = game.add.image(x + 2 * offsetW - 30, y - 40, 'info', 0.5, 0.6);
+    infoIcon.anchor(0.5, 0.5);
+    infoIcon.iconType = 'infoIcon';
+    this.menuIcons.push(infoIcon);
+
+    // Label 'Operation'
+    game.add.text(x + 3 * offsetW, y, game.lang.operation, textStyles.h2_blue_2);
+
+    infoIcon = game.add.image(x + 4 * offsetW - 30, y - 40, 'info', 0.5, 0.6);
+    infoIcon.anchor(0.5, 0.5);
+    infoIcon.iconType = 'infoIcon';
+    this.menuIcons.push(infoIcon);
+
+    // Label 'Difficulty'
+    game.add.text(x + 5 * offsetW, y, game.lang.difficulty, textStyles.h2_blue_2);
+
+    infoIcon = game.add.image(x + 6 * offsetW - 30, y - 40, 'info', 0.5, 0.6);
+    infoIcon.anchor(0.5, 0.5);
+    infoIcon.iconType = 'infoIcon';
+    this.menuIcons.push(infoIcon);
+
+    // Horizontal line
+    game.add.graphic.rect(x - 25, y + 10, 600 + 50, width, undefined, 0, colors.blueMenuLine).anchor(0, 0.5);
+    // Vertical lines
+    game.add.graphic.rect(x + 2 * offsetW, y - 25, width, height, undefined, 0, colors.blueMenuLine).anchor(0.5, 0);
+    game.add.graphic.rect(x + 4 * offsetW, y - 25, width, height, undefined, 0, colors.blueMenuLine).anchor(0.5, 0);
+
+    // --------------------------- TURN ON/OFF FRACTION LABELS / RECTANGLE GUIDE
+
+    // Horizontal line
+    game.add.graphic.rect(x + 4 * offsetW, y + 136, 200 + 25, width, undefined, 0, colors.blueMenuLine).anchor(0, 0.5);
+
+    // Label 'Show Fractions / Auxiliar rectangles'
+    game.add.text(x + 5 * offsetW, y + 102, game.lang.show, textStyles.h4_blue_2);
+
+    infoIcon = game.add.image(x + 6 * offsetW + 20, y + 102, 'info', 0.5, 0.6);
+    infoIcon.anchor(0.5, 0.5);
+    infoIcon.iconType = 'infoIcon';
+    this.menuIcons.push(infoIcon);
+
+    if (gameTypeString == 'squareTwo') {
+      game.add.text(x + 5 * offsetW + 10, y + 102 + 24, game.lang.aux_rectangle, textStyles.h4_blue_2);
+    } else {
+      game.add.text(x + 5 * offsetW, y + 102 + 24, game.lang.title, textStyles.h2_blue_2);
+    }
+
+    // Selection box
+    y += 40;
+    const frame = (fractionLabel) ? 1 : 0;
+
+    const selectionBox = game.add.sprite(x + 5 * offsetW, y + 102 + 24 - 2, 'select', frame, 0.11);
+    selectionBox.anchor(0.5, 0.5);
+    selectionBox.iconType = 'selectionBox';
+    this.menuIcons.push(selectionBox);
+
+    // --------------------------- GAME MODE ICONS
+
+    x = 150 + offsetW;
+    y = baseY;
+    offsetH = this.func_getOffset(height, info[gameTypeString].gameModeType.length);
+
+    for (let i = 0; i < info[gameTypeString].gameModeTypeUrl.length; i++, y += offsetH) {
+      const icon = game.add.sprite(x, y, info[gameTypeString].gameModeTypeUrl[i], 0, iconScale, 1);
+      icon.anchor(0.5, 0.5);
+
+      icon.gameModeType = info[gameTypeString].gameModeType[i];
+      icon.iconType = 'gameMode';
+      if (i == 0) {
+        gameModeType = icon.gameModeType;
+        icon.curFrame = 1;
+      }
+
+      this.menuIcons.push(icon);
+    }
+
+    // --------------------------- GAME OPERATION ICONS
+
+    x += 2 * offsetW;
+    y = baseY;
+    offsetH = this.func_getOffset(height, info[gameTypeString].gameOperationType.length);
+
+    let icon;
+    let aux = [];
+    aux['squareOne'] = [
+      ['operation_plus', 'Plus'],
+      ['operation_minus', 'Minus']
+    ];
+    aux['circleOne'] = [
+      ['operation_plus', 'Plus'],
+      ['operation_minus', 'Minus'],
+      ['operation_mixed', 'Mixed']
+    ];
+    aux['squareTwo'] = [
+      ['operation_equals', 'Equals'],
+    ];
+
+    // Placing math operation icons
+    for (let i = 0; i < aux[gameTypeString].length; i++, y += offsetH) {
+      icon = game.add.sprite(x, y, aux[gameTypeString][i][0], 0, iconScale, 1);
+      icon.anchor(0.5, 0.5);
+
+      icon.gameOperationType = aux[gameTypeString][i][1];
+      icon.iconType = 'gameOperation';
+
+      if (i == 0) {
+        gameOperationType = icon.gameOperationType;
+        icon.curFrame = 1;
+      }
+
+      this.menuIcons.push(icon);
+    }
+
+    // --------------------------- DIFFICULTY ICONS
+
+    x = (gameTypeString == 'squareOne') ? 625 : 585;
+    y = baseY - 25;
+
+    for (let i = 0; i < info[gameTypeString].gameDifficulty; i++) {
+      // Parameters
+      const curX = x + (30 + 10) * i;
+
+      // Difficulty menuIcons
+      const icon = game.add.graphic.rect(curX, y, 30, 30, undefined, 0, colors.gray, 1);
+      icon.anchor(0.5, 0.5);
+      icon.difficulty = i + 1;
+      icon.iconType = 'difficulty';
+
+      if (i == 0) {
+        gameDifficulty = icon.difficulty;
+        icon.fillColor = colors.blue;
+      }
+      this.menuIcons.push(icon);
+
+      // Difficulty numbers
+      game.add.text(curX, y + 7, i + 1, textStyles.h4_white);
+    }
+
+    // --------------------------- ENTER ICON
+
+    x = defaultWidth - 100;
+    y = defaultHeight - 110;
+
+    const enterIcon = game.add.image(x, y, 'bush');
+    enterIcon.anchor(0.5, 0.5);
+    enterIcon.iconType = 'enter';
+
+    this.menuIcons.push(enterIcon);
+
+    this.enterText = game.add.text(x, y, game.lang.continue, textStyles.h4_white);
+
+    // --------------------------- INFORMATION BOX
+
+    let cur;
+    this.infoBoxElements = []; // grouped to be displayed/hidden when info box is oppened/closed
+
+    cur = game.add.graphic.rect(0, 0, defaultWidth, defaultHeight, undefined, 0, colors.black, 0.6);
+    cur.alpha = 0;
+    cur.originalAlpha = 0.6;
+    this.infoBoxElements.push(cur);
+
+    cur = game.add.graphic.rect(100, 100, defaultWidth - 200, defaultHeight - 200, colors.blue, 2, colors.blueBckg, 1);
+    cur.alpha = 0;
+    this.infoBoxElements.push(cur);
+
+    this.closeIcon = game.add.image(defaultWidth - 128, 125, 'close', 0.12);
+    this.closeIcon.anchor(0.5, 0.5);
+    this.closeIcon.alpha = 0;
+    this.closeIcon.iconType = 'infoBox';
+    this.infoBoxElements.push(this.closeIcon);
+
+    // ------------- EVENTS
+
+    game.event.add('click', this.func_onInputDown);
+    game.event.add('mousemove', this.func_onInputOver);
+
+  },
+
+  /**
+   * Saves information selected by the player 
+   * 
+   * @param {object} icon selected icon
+   */
+  func_load: function (icon) {
+
+    if (audioStatus) game.audio.beepSound.play();
+
+    const type = icon.iconType;
+    switch (type) {
+      case 'gameMode': gameModeType = icon.gameModeType; break;
+      case 'gameOperation': gameOperationType = icon.gameOperationType; break;
+      case 'difficulty': gameDifficulty = icon.difficulty; break;
+      case 'infoIcon': self.func_showInfoBox(); break;
+      case 'infoBox': self.func_closeInfoBox(); 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('Game State: ' + gameTypeString + ', ' + gameModeType);
+        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;
+    }
+
+  },
+
+  /**
+   * Calculate spacing for icons on the menu screen
+   * 
+   * @param {number} width width of the available part of the screen
+   * @param {number} numberOfIcons number or icons to be put on the screen
+   * @returns {number}
+   */
+  func_getOffset: function (width, numberOfIcons) {
+    return width / (numberOfIcons + 1);
+  },
+
+  /**
+   * Displays game menu information boxes.
+   */
+  func_showInfoBox: function () {
+    navigationIcons.func_addIcons( // Turn off navigation icons
+      false, false, false,
+      false, false,
+      false, false);
+    self.infoBoxElements.forEach(cur => { cur.alpha = (cur.originalAlpha) ? cur.originalAlpha : 1; }); // Make info box visible
+    self.activeIcons = [self.closeIcon]; // Update activeIcons to info box icons
+  },
+
+  /**
+   * Closes game menu information boxes.
+   */
+  func_closeInfoBox: function () {
+    navigationIcons.func_addIcons( // Turn on navigation icons
+      true, false, false,
+      true, true,
+      'menu', false);
+    self.infoBoxElements.forEach(cur => { cur.alpha = 0; }); // Make info box invisible
+    self.activeIcons = self.menuIcons; // Update activeIcons to custom menu icons
+  },
+
+  /**
+   * Called by mouse click event
+   * 
+   * @param {object} mouseEvent contains the mouse click coordinates
+   */
+  func_onInputDown: function (mouseEvent) {
+    const x = mouseEvent.offsetX, y = mouseEvent.offsetY;
+    let overIcon;
+
+    // Check if clicked on an icon
+    for (let i in self.activeIcons) {
+      if (game.math.isOverIcon(x, y, self.activeIcons[i])) {
+        overIcon = i;
+        break;
+      }
+    }
+
+    // Update gui
+    if (overIcon) { // if has clicked on an icon
+      document.body.style.cursor = 'pointer';
+      self.activeIcons.forEach(cur => {
+        if (cur.iconType == self.activeIcons[overIcon].iconType) { // if its in the same icon category
+          if (cur == self.activeIcons[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.func_load(self.activeIcons[overIcon]);
+
+    } else document.body.style.cursor = 'auto';
+
+    navigationIcons.func_onInputDown(x, y);
+
+    game.render.all();
+
+  },
+
+  /**
+   * Called by mouse move event
+   * 
+   * @param {object} mouseEvent contains the mouse move coordinates
+   */
+  func_onInputOver: function (mouseEvent) {
+    const x = mouseEvent.offsetX, y = mouseEvent.offsetY;
+    let overIcon;
+
+    // Check if pointer is over an icon
+    for (let i in self.activeIcons) {
+      if (game.math.isOverIcon(x, y, self.activeIcons[i])) {
+        overIcon = i;
+        break;
+      }
+    }
+
+    // Update gui
+    if (overIcon) { // if pointer is over icon
+      document.body.style.cursor = 'pointer';
+      self.activeIcons.forEach(cur => {
+        if (cur.iconType == self.activeIcons[overIcon].iconType) { // if its in the same icon category
+          if (cur == self.activeIcons[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
+      self.enterText.style = textStyles.h4_white;
+      self.activeIcons.forEach(cur => { cur.scale = cur.originalScale; });
+      document.body.style.cursor = 'auto';
+    }
+
+    // Check navigation icons
+    navigationIcons.func_onInputOver(x, y);
+
+    game.render.all();
+
+  },
+
+}

js/gameMechanics.js

@@ -5,19 +5,18 @@
  */
 const game = {
 
-  audio: {}, lang: {}, // Holds cache reference to media : Directly used in code to get audio and dicitonary
-  image: {}, sprite: {}, // Holds cache reference to media : Not directly used in code 
+  audio: {}, lang: {}, // Holds cache reference to media - used in code to get audio and dicitonary
+  image: {}, sprite: {}, // [Not directly used] Holds cache reference to media 
 
-  mediaTypes: ['lang', 'audio', 'image', 'sprite'],
-  loadedMedia: [],
-  isLoaded: [],
+  mediaTypes: ['lang', 'audio', 'image', 'sprite'], // [Not directly used]
+  loadedMedia: [], // [Not directly used]
+  isLoaded: [], // [Not directly used]
 
   /**
-   * Load URLs to cache 
-   * To be used only inside function preload() if a state needs to load media
+   * Load URLs to cache <br>
+   * To be used only inside function preload() if a state needs to load media <br>
    * URLs are in globals.js
-   * game.load.<mediaType>(<arrayOfUrlsFromCurrentState>))
-   * 
+   *
    * @namespace
    */
   load: {
@@ -92,7 +91,7 @@ const game = {
       }
     },
     /**
-     * Loads spritesheets to cache 
+     * Loads spritesheets to cache
      * 
      * @param {array} urls spritesheet urls for the current state
      */
@@ -162,17 +161,18 @@ const game = {
   },
 
   /**
-   * Adds new media to 'media queue'
+   * Adds new media to 'media queue' <br>
    * All queued media is actually drawn on the canvas using game.render.all() 
    * 
    * @namespace
    */
   add: {
-    // game.add.image(x, y, img)
-    // game.add.image(x, y, img, scale)
-    // game.add.image(x, y, img, scale, alpha)
     /**
-     * Adds image to media queue
+     * Adds image to media queue <br><br>
+     * 
+     * game.add.image(x, y, img) <br>
+     * game.add.image(x, y, img, scale) <br>
+     * game.add.image(x, y, img, scale, alpha)
      * 
      * @param {number} x default x coordinate for the figure
      * @param {number} y default x coordinate for the figure
@@ -217,12 +217,13 @@ const game = {
         return med;
       }
     },
-    // game.add.sprite(x, y, img) 
-    // game.add.sprite(x, y, img, curFrame) 
-    // game.add.sprite(x, y, img, curFrame, scale) 
-    // game.add.sprite(x, y, img, curFrame, scale, alpha) 
-    /**
-     * Adds spritesheet to media queue
+    /** 
+     * Adds spritesheet to media queue <br><br>
+     * 
+     * game.add.sprite(x, y, img) <br>
+     * game.add.sprite(x, y, img, curFrame) <br>
+     * game.add.sprite(x, y, img, curFrame, scale) <br>
+     * game.add.sprite(x, y, img, curFrame, scale, alpha) 
      * 
      * @param {number} x default x coordinate for the figure
      * @param {number} y default x coordinate for the figure
@@ -270,10 +271,11 @@ const game = {
         return med;
       }
     },
-    // game.add.text(x, y, text, style) 
-    // game.add.text(x, y, text, style, align) 
     /**
-     * Adds text to media queue
+     * Adds text to media queue <br><br>
+     * 
+     * game.add.text(x, y, text, style) <br>
+     * game.add.text(x, y, text, style, align)
      * 
      * @param {number} x default x coordinate for the figure
      * @param {number} y default x coordinate for the figure
@@ -306,7 +308,7 @@ const game = {
           align: align || style.align || game.add._default.align,
 
           anchor: function () { console.error('Game error: there\'s no anchor for text'); },
-          set style (style) {
+          set style(style) {
             this.font = style.font;
             this.fill = style.fill;
             this.align = style.align;
@@ -320,17 +322,17 @@ const game = {
     },
     /**
      * Adds geometric shapes
-     * 
      * @namespace
      */
     graphic: {
-      // game.add.graphic.rect(x, y, width, height)
-      // game.add.graphic.rect(x, y, width, height, lineColor)
-      // game.add.graphic.rect(x, y, width, height, lineColor, lineWidth)
-      // game.add.graphic.rect(x, y, width, height, lineColor, lineWidth, fillColor)
-      // game.add.graphic.rect(x, y, width, height, lineColor, lineWidth, fillColor, alpha)
       /**
-       * Adds rectangle to media queue
+       * Adds rectangle to media queue <br><br>
+       * 
+       * game.add.graphic.rect(x, y, width, height) <br>
+       * game.add.graphic.rect(x, y, width, height, lineColor) <br>
+       * game.add.graphic.rect(x, y, width, height, lineColor, lineWidth) <br>
+       * game.add.graphic.rect(x, y, width, height, lineColor, lineWidth, fillColor) <br>
+       * game.add.graphic.rect(x, y, width, height, lineColor, lineWidth, fillColor, alpha) 
        * 
        * @param {number} x default x coordinate for top left corner of the rectangle
        * @param {number} y default y coordinate for top left corner of the rectangle
@@ -384,13 +386,14 @@ const game = {
           return med;
         }
       },
-      // game.add.graphic.circle(x, y, diameter)
-      // game.add.graphic.circle(x, y, diameter, lineColor)
-      // game.add.graphic.circle(x, y, diameter, lineColor, lineWidth)
-      // game.add.graphic.circle(x, y, diameter, lineColor, lineWidth, fillColor)
-      // game.add.graphic.circle(x, y, diameter, lineColor, lineWidth, fillColor, alpha)
       /**
-       * Adds circle to media queue
+       * Adds circle to media queue <br><br>
+       * 
+       * game.add.graphic.circle(x, y, diameter) <br>
+       * game.add.graphic.circle(x, y, diameter, lineColor) <br>
+       * game.add.graphic.circle(x, y, diameter, lineColor, lineWidth) <br>
+       * game.add.graphic.circle(x, y, diameter, lineColor, lineWidth, fillColor) <br>
+       * game.add.graphic.circle(x, y, diameter, lineColor, lineWidth, fillColor, alpha)
        * 
        * @param {number} x default x coordinate for the circle center
        * @param {number} y default y coordinate for the circle center
@@ -453,14 +456,15 @@ const game = {
           return med;
         }
       },
-      // game.add.graphic.arc(x, y, diameter, angleStart, angleEnd)
-      // game.add.graphic.arc(x, y, diameter, angleStart, angleEnd, anticlockWise)
-      // game.add.graphic.arc(x, y, diameter, angleStart, angleEnd, anticlockWise, lineColor)
-      // game.add.graphic.arc(x, y, diameter, angleStart, angleEnd, anticlockWise, lineColor, lineWidth)
-      // game.add.graphic.arc(x, y, diameter, angleStart, angleEnd, anticlockWise, lineColor, lineWidth, fillColor)
-      // game.add.graphic.arc(x, y, diameter, angleStart, angleEnd, anticlockWise, lineColor, lineWidth, fillColor, alpha)
       /**
-       * Adds arc to media queue
+       * Adds arc to media queue <br><br>
+       * 
+       * game.add.graphic.arc(x, y, diameter, angleStart, angleEnd) <br>
+       * game.add.graphic.arc(x, y, diameter, angleStart, angleEnd, anticlockWise) <br>
+       * game.add.graphic.arc(x, y, diameter, angleStart, angleEnd, anticlockWise, lineColor) <br>
+       * game.add.graphic.arc(x, y, diameter, angleStart, angleEnd, anticlockWise, lineColor, lineWidth) <br>
+       * game.add.graphic.arc(x, y, diameter, angleStart, angleEnd, anticlockWise, lineColor, lineWidth, fillColor) <br>
+       * game.add.graphic.arc(x, y, diameter, angleStart, angleEnd, anticlockWise, lineColor, lineWidth, fillColor, alpha)
        * 
        * @param {number} x default x coordinate for the arc center
        * @param {number} y default y coordinate for the arc center
@@ -525,6 +529,7 @@ const game = {
         }
       }
     },
+    // [Not directly used]
     _default: {
       // All media
       x: 0,
@@ -562,14 +567,14 @@ const game = {
   },
 
   /**
-   * Renders media on current screen
+   * Renders media on current screen <br>
    * Uses properties of html canvas to draw media on screen during game loop
    * 
    * @namespace
    */
   render: {
-    queue: [], // Media queue to be rendered by the current state
-    /**
+    queue: [], // [Not directly used] Media queue to be rendered by the current state
+    /** [Not directly used] 
      * Renders image on canvas
      * 
      * @param {object} cur current media in media queue
@@ -596,7 +601,7 @@ const game = {
       context.globalAlpha = 1;
       if (cur.rotate && cur.rotate != 0) context.restore();
     },
-    /**
+    /** [Not directly used] 
      * Renders spritesheet on canvas
      * 
      * @param {object} cur current media in media queue
@@ -627,7 +632,7 @@ const game = {
       context.globalAlpha = 1;
       if (cur.rotate && cur.rotate != 0) context.restore();
     },
-    /**
+    /** [Not directly used] 
      * Renders text on canvas
      * 
      * @param {object} cur current media in media queue
@@ -651,7 +656,7 @@ const game = {
       context.globalAlpha = 1;
       if (cur.rotate && cur.rotate != 0) context.restore();
     },
-    /**
+    /**[Not directly used] 
      * Renders geometric shapes
      * 
      * @namespace
@@ -731,9 +736,8 @@ const game = {
         if (cur.rotate && cur.rotate != 0) context.restore();
       },
     },
-    // game.render.all()
     /**
-     * Renders all queued media on screen (called during game loop)
+     * Renders all queued media on screen (called during game loop) <br><br>
      */
     all: function () {
       game.render.queue.forEach(cur => {
@@ -746,9 +750,8 @@ const game = {
         }
       });
     },
-    // game.render.clear()
     /**
-     * Clears all queued media (used when changing states)
+     * Clears all queued media (used when changing states) <br><br>
      */
     clear: function () {
       game.render.queue = [];
@@ -828,14 +831,13 @@ const game = {
 
   /**
    * Timer used to get the time spent to complete a game
-   *
+   * 
    * @namespace
    */
   timer: {
-    _start: 0,	// Start time
-    _end: 0,	// End time
-    elapsed: 0, // Elapsed time
-    // game.timer.start()
+    _start: 0,	// [Not directly used] Start time
+    _end: 0,	// [Not directly used] End time
+    elapsed: 0, // [Not directly used] Elapsed time
     /**
      * Start timer
      */
@@ -843,7 +845,6 @@ const game = {
       game.timer._start = game.timer._end = game.timer._elapsed = 0; // Clear
       game.timer._start = new Date().getTime(); // Set start time
     },
-    // game.timer.stop()
     /**
      * Stop timer
      */
@@ -862,7 +863,7 @@ const game = {
    * @namespace
    */
   event: {
-    _list: [], // List of events in current state
+    _list: [], // [Not directly used] List of events in current state
     /**
      * Create events
      * 
@@ -873,8 +874,7 @@ const game = {
       canvas.addEventListener(name, func);
       game.event._list.push([name, func]);
     },
-    // game.event.clear()
-    /**
+    /** [Not directly used] 
      * Clear list of events
      */
     clear: function () {
@@ -885,22 +885,23 @@ const game = {
     },
   },
 
-  /** Game loop - Handles repetition of function update() and sprite animation
-   * After the media queue is filled in create(), the game loop starts
+  /** [Not directly used] 
+   * Game loop - Handles repetition of function update() and sprite animation <br>
+   * After the media queue is filled in create(), the game loop starts <br>
    * It calls update() iteratively and rerenders the screen
-   * 
+   *
    * @namespace
    */
   loop: {
-    id: undefined, // Holds animation event
-    curState: undefined, // State that called the loop
-    status: 'off', // Loop status can be : 'on', 'ending' or 'off'
-    waitingToStart: undefined,
-    startTime: 0,
-    duration: 1000 / 60, // 1000: 1 second | 60: expected frames per second
-    // game.loop.start(<state>)
-    /**
+    id: undefined, // [Not directly used] Holds animation event
+    curState: undefined, // [Not directly used] State that called the loop
+    status: 'off', // [Not directly used] Loop status can be : 'on', 'ending' or 'off'
+    waitingToStart: undefined, // [Not directly used]
+    startTime: 0, // [Not directly used]
+    duration: 1000 / 60, // [Not directly used] 1000: 1 second | 60: expected frames per second
+    /** [Not directly used] 
      * Start game loop
+     * 
      * @param {object} state current state
      */
     start: function (state) {
@@ -914,14 +915,15 @@ const game = {
         if (game.loop.status == 'on') game.loop.stop();
       }
     },
-    // game.loop.stop()
     /**
+     * [Not directly used] 
      * Stop game loop
      */
     stop: function () {
       if (game.loop.status == 'on') game.loop.status = 'ending';
     },
     /**
+     * [Not directly used] 
      * Execute game loop
      */
     _run: function () {
@@ -945,6 +947,7 @@ const game = {
       }
     },
     /**
+     * [Not directly used] 
      * Resets game loop values 
      */
     _clear: function () {
@@ -964,16 +967,15 @@ const game = {
   },
 
   /**
-   * Handles spritesheet animation
-   * Called by game loop
+   * Handles spritesheet animation <br>
+   * Called by game loop <br>
    * Changes through frames in queued spritesheets 
    * 
    * @namespace
    */
   animation: {
-    queue: [], // Animation queue for current level
-    count: 0,
-    // game.animation.play(<animationName>)
+    queue: [], // [Not directly used] Animation queue for current level
+    count: 0, // [Not directly used]
     /**
      * Play animation
      * 
@@ -991,7 +993,6 @@ const game = {
       // If found, saves object in game.animation.queue
       if (newAnimation != undefined) game.animation.queue.push(newAnimation);
     },
-    // game.animation.stop(<animationName>)
     /**
      * Stop animation
      * 
@@ -1006,6 +1007,7 @@ const game = {
       });
     },
     /**
+     * [Not directly used] 
      * Executes animation
      */
     _run: function () {
@@ -1023,9 +1025,11 @@ const game = {
       });
       game.animation.count++;
     },
-    // game.animation.clear()
     /**
-     * Clear animation queue
+     * [Not directly used] 
+     * Clear animation queue <br><br>
+     * 
+     * game.animation.clear()
      */
     clear: function () {
       // Resets animation count
@@ -1041,19 +1045,19 @@ const game = {
     },
   },
 
-  /** Handles game states
-   * When an state is associated with an object, its preload(), create() and update() functions 
-   * will be executed acconrding to these rules:
-   *	* preload() : first function to be called when state is called. Loads media. Runs only once.(optional)
-   *  * create() : called right after preload(). Where the main code goes. Runs only once.
+  /** 
+   * Handles game states <br>
+   * When an state is associated with an object, its preload(), create() and update() functions <br>
+   * will be executed acconrding to these rules: <br>
+   *	* preload() : first function to be called when state is called. Loads media. Runs only once.(optional) <br>
+   *  * create() : called right after preload(). Where the main code goes. Runs only once. <br>
    *  * update() : called right after create(). Is iteratively called by game loop until end of the state. (optional)
    *
    * @namespace 
    */
   state: {
-    list: [],
-    name: undefined,
-    // game.state.add(<newStateName>,<state>)
+    list: [], // [Not directly used]
+    name: undefined, // [Not directly used]
     /**
      * Create new state
      * 
@@ -1063,7 +1067,6 @@ const game = {
     add: function (name, obj) {
       game.state.list[name] = obj;
     },
-    // game.state.start(<stateName>)
     /**
      * Start new state
      * 
@@ -1080,6 +1083,7 @@ const game = {
       else game.state._create();
     },
     /**
+     * [Not directly used] 
      * Encapsulate create() function in the current state
      */
     _create: function () {

js/globals.js

@@ -33,7 +33,7 @@ let canvas;
  * Can be the objects: squareOne, squareTwo or circleOne.
  * 
  * @type {object}
- */ 
+ */
 let gameType;
 /**
  * Name of the selected game.<br>
@@ -84,7 +84,7 @@ const debugMode = false;
  * Turns game audio ON/OFF
  * @type {boolean}
  */
-let audioStatus = false; 
+let audioStatus = false;
 /**
  * Turns displaying the fraction labels on levels ON/OFF
  * @type {boolean}
@@ -115,7 +115,7 @@ let mapPosition;
 /**
  * When true, the character can move to next position in the map
  * @type {boolean}
- */     
+ */
 let mapMove;
 /**
  * Number of finished levels in the map
@@ -207,7 +207,7 @@ const info = {
 /**
  * Preset colors for graphic elements.
  * @type {object}
- */ 
+ */
 const colors = {
   // Blues
   blueBckg: '#cce5ff', // Background color 

js/map.js

@@ -339,7 +339,7 @@ const endState = {
 
       } else {
 
-        animate = false;
+        self.animate = false;
         completedLevels = 0;
         game.animation.stop(self.character.animation[0]);
         game.state.start('menu');

js/menu.js

@@ -59,33 +59,36 @@ const menuState = {
       icon.iconType = 'game';
 
       this.menuIcons.push(icon);
-      
-      infoIcon = game.add.image(x + 70, defaultHeight / 2 - 70 - 80, 'info', 0.6);
-      infoIcon.anchor(0.5,0.5);
+
+      infoIcon = game.add.image(x + 70, defaultHeight / 2 - 70 - 80, 'info', 0.6, 0.6);
+      infoIcon.anchor(0.5, 0.5);
       infoIcon.iconType = 'infoIcon';
       this.menuIcons.push(infoIcon);
 
     }
 
-     // --------------------------- INFORMATION BOX
-    
-     let cur;
-     this.infoBoxElements = []; // grouped to be displayed/hidden when info box is oppened/closed
-     
-     cur = game.add.graphic.rect(0, 0, defaultWidth, defaultHeight, undefined, 0, colors.black, 0.6);
-     cur.alpha = 0;
-     cur.originalAlpha = 0.6;
-     this.infoBoxElements.push(cur);
-     
-     cur = game.add.graphic.rect(100,  100, defaultWidth - 200, defaultHeight - 200, colors.blue, 2, colors.blueBckg, 1);
-     cur.alpha = 0;
-     this.infoBoxElements.push(cur);
-     
-     this.closeIcon = game.add.image(defaultWidth - 128, 125, 'close', 0.12);
-     this.closeIcon.anchor(0.5,0.5);
-     this.closeIcon.alpha = 0;
-     this.closeIcon.iconType = 'infoBox';
-     this.infoBoxElements.push(this.closeIcon);
+    // --------------------------- INFORMATION BOX
+
+    let cur;
+    this.infoBoxElements = []; // grouped to be displayed/hidden when info box is oppened/closed
+
+    cur = game.add.graphic.rect(0, 0, defaultWidth, defaultHeight, undefined, 0, colors.black, 0.6);
+    cur.alpha = 0;
+    cur.originalAlpha = 0.6;
+    this.infoBoxElements.push(cur);
+
+    cur = game.add.graphic.rect(100, 100, defaultWidth - 200, defaultHeight - 200, colors.blue, 2, colors.blueBckg, 1);
+    cur.alpha = 0;
+    //cur.shadow = true;
+    //cur.shadowColor = colors.black;
+    //cur.shadowBlur = 10;
+    this.infoBoxElements.push(cur);
+
+    this.closeIcon = game.add.image(defaultWidth - 128, 125, 'close', 0.12);
+    this.closeIcon.anchor(0.5, 0.5);
+    this.closeIcon.alpha = 0;
+    this.closeIcon.iconType = 'infoBox';
+    this.infoBoxElements.push(this.closeIcon);
 
     // ------------- EVENTS
 
@@ -116,7 +119,7 @@ const menuState = {
           default: console.error('Game error: the name of the game is not valid');
         }
         self.menuIcons = self.lbl_game.name;
-        game.state.start('customMenu');  
+        game.state.start('customMenu');
         break;
       default: console.error("Game error: Problem with selected icon.");
     }
@@ -154,16 +157,16 @@ const menuState = {
   func_clearTitle: function () {
     self.lbl_game.name = '';
   },
-  
+
   /**
    * Displays game menu information boxes.
    */
   func_showInfoBox: function () {
     navigationIcons.func_addIcons( // Turn off navigation icons
-      false, false, false, 
-      false, false, 
+      false, false, false,
+      false, false,
       false, false);
-    self.infoBoxElements.forEach( cur => { cur.alpha = (cur.originalAlpha) ? cur.originalAlpha : 1; }); // Make info box visible
+    self.infoBoxElements.forEach(cur => { cur.alpha = (cur.originalAlpha) ? cur.originalAlpha : 1; }); // Make info box visible
     self.activeIcons = [self.closeIcon]; // Update activeIcons to info box icons
   },
 
@@ -175,7 +178,7 @@ const menuState = {
       false, false, false,
       true, true,
       false, false);
-    self.infoBoxElements.forEach( cur => { cur.alpha = 0; }); // Make info box invisible
+    self.infoBoxElements.forEach(cur => { cur.alpha = 0; }); // Make info box invisible
     self.activeIcons = self.menuIcons; // Update activeIcons to custom menu icons
   },
 
@@ -184,7 +187,7 @@ const menuState = {
    * 
    * @param {object} mouseEvent contains the mouse click coordinates
    */
-   func_onInputDown: function (mouseEvent) {
+  func_onInputDown: function (mouseEvent) {
     const x = mouseEvent.offsetX, y = mouseEvent.offsetY;
 
     // Check menu icons
@@ -214,7 +217,7 @@ const menuState = {
 
     // Check menu icons
     for (let i in self.activeIcons) {
-      if (game.math.isOverIcon(x, y, self.activeIcons[i])) {        
+      if (game.math.isOverIcon(x, y, self.activeIcons[i])) {
         overIcon = i;
         break;
       }

js/squareTwo.js

@@ -119,7 +119,7 @@ const squareTwo = {
     let blockWidth = this.figureWidth / totalBlocksA; // Width of each block in A
     let lineColor = colors.darkRed;
     let fillColor = colors.lightRed;
-    
+
     // Create blocks
     for (let i = 0; i < totalBlocksA; i++) {
       const x = xA + i * blockWidth;