Ifractions-web/js/menu.js

/**
 * MAIN MENU STATE: main menu - player can select the game he wants to play 
 * 
 * @namespace
 */
const menuState = {

  /**
   * Preloads media for current state
   */
  preload: function () {

    // LOADING MEDIA
    game.load.image(url.menu.image);

  },

  /**
   * Main code
   */
  create: function () {

    // BACKGROUND

    game.add.graphic.rect(0, 0, 900, 600, undefined, 0, colors.blueBckg, 1);

    for (let i = 0; i < defaultWidth / 100; i++) {
      game.add.image(i * 100, 501, 'floor');
    }

    // LABELS

    // Overtitle: Welcome, <player name>!
    game.add.text(defaultWidth / 2, 40, game.lang.welcome + ', ' + playerName + '!', textStyles.h4_brown);

    // Title : Select a game
    game.add.text(defaultWidth / 2, 80, game.lang.menu_title, textStyles.h1_green);

    // Subtitle : <game mode> 
    this.lbl_game = game.add.text(defaultWidth / 2, 110, '', textStyles.h2_blue_2);

    // NAVIGATION ICONS

    // Loads navigation icons
    navigationIcons.func_addIcons(
      false, false, false,
      true, true,
      false, false);

    // -------------------- GAME ICONS 
    this.menuIcons = [];

    const offset = defaultWidth / (info.gameType.length + 1);

    for (let i = 0, x = offset; i < info.gameType.length; i++, x += offset) {

      const icon = game.add.image(x, defaultHeight / 2 - 70, info.gameTypeUrl[i], 1);
      icon.anchor(0.5, 0.5);

      icon.gameShape = info.gameShape[i];
      icon.gameType = info.gameType[i];

      this.menuIcons.push(icon);

    }

    // EVENTS

    game.event.add('click', this.func_onInputDown);
    game.event.add('mousemove', this.func_onInputOver);

  },



  /* EVENTS */

  /**
   * Called by mouse click event
   * 
   * @param {object} mouseEvent contains the mouse click coordinates
   */
  func_onInputDown: function (mouseEvent) {
    const x = mouseEvent.offsetX, y = mouseEvent.offsetY;

    // Check menu icons
    for (let i in self.menuIcons) {
      // If mouse is within the bounds of an icon
      if (game.math.isOverIcon(x, y, self.menuIcons[i])) {
        // Click first valid icon
        self.func_load(self.menuIcons[i]);
        break;
      }
    }

    // Check navigation icons
    navigationIcons.func_onInputDown(x, y);
  },

  /**
   * 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 flag = false;

    // Check menu icons
    self.menuIcons.forEach(cur => {
      if (game.math.isOverIcon(x, y, cur)) {
        cur.scale = 1.08;
        self.func_showTitle(cur);
        flag = true;
      } else {
        cur.scale = 1;
      }
    });

    if (flag) {
      document.body.style.cursor = 'pointer';
    } else {
      self.func_clearTitle();
      document.body.style.cursor = 'auto';
    }

    // Check navigation icons
    navigationIcons.func_onInputOver(x, y);

    game.render.all();
  },



  /* GAME FUNCTIONS */

  /**
   * Saves info from selected game and goes to next state
   * 
   * @param {object} icon clicked icon
   */
  func_load: function (icon) {

    if (audioStatus) game.audio.beepSound.play();

    gameShape = icon.gameShape;
    gameTypeString = icon.gameType;
    switch (gameTypeString) {
      case 'squareOne': gameType = squareOne; break;
      case 'squareTwo': gameType = squareTwo; break;
      case 'circleOne': gameType = circleOne; break;
      default: console.error('Game error: the name of the game is not valid');
    }

    self.menuIcons = self.lbl_game.name;

    game.state.start('customMenu');

  },

  /**
   * Display the name of the game on screen
   * 
   * @param {object} icon icon for the game
   */
  func_showTitle: function (icon) {

    let title;

    switch (icon.gameShape) {
      case 'circle': title = game.lang.circle_name; break;
      case 'square': title = game.lang.square_name; break;
    }

    const type = icon.gameType.substring(icon.gameType.length - 3);

    switch (type) {
      case 'One': title += ' I'; break;
      case 'Two': title += ' II'; break;
    }

    self.lbl_game.name = title;

  },

  /**
   * Remove the name of the game from screen
   */
  func_clearTitle: function () {
    self.lbl_game.name = '';
  },

};

/**
 * SECUNDARY MENU STATE: player can select level, sublevel and 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 () {

    let x, y, width, height, offsetH, offsetW;
    const iconScale = 0.5;

    // 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'); }

    // LABELS

    // Add Title : Select a game
    game.add.text(defaultWidth / 2, 80, game.lang.custom_game, textStyles.h1_green);

    // Selected game
    game.add.text(defaultWidth / 2, 40, menuState.menuIcons, textStyles.h4_brown);

    // Loads animation icons
    navigationIcons.func_addIcons(
      true, false, false,
      true, true,
      'menu', false);


    this.menuIcons = [];

    offsetW = 600 / 6;
    x = 150;
    y = 200;
    height = 280;
    width = 5;

    // Label 'Level'
    game.add.text(x + offsetW, y, game.lang.level, textStyles.h2_blue_2);
    // Label 'Sublevel'
    const sublevelLabel = game.add.text(x + 3 * offsetW, y, game.lang.sublevel, textStyles.h2_blue_2);
    // Label 'Difficulty'
    game.add.text(x + 5 * offsetW, y, game.lang.difficulty, textStyles.h2_blue_2);

    // Horizontal line
    game.add.graphic.rect(x, y + 10, 600, width, undefined, 0, colors.blueMenuLine).anchor(0, 0.5);

    // Vertical line
    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

    if (gameTypeString == 'squareTwo') {

      sublevelLabel.alpha = 0.3;

    } else {

      // Horizontal line
      game.add.graphic.rect(x + 4 * offsetW, y + 136, 200, width, undefined, 0, colors.blueMenuLine).anchor(0, 0.5);

      // Label 'Show Fractions'
      game.add.text(x + 5 * offsetW, y + 102, game.lang.show, textStyles.h4_blue_2);
      game.add.text(x + 5 * offsetW, y + 102 + 24, game.lang.title, textStyles.h2_blue_2);

      const frame = (fractionLabel) ? 1 : 0;

      // Selection box
      y += 40;
      const selectionBox = game.add.sprite(x + 5 * offsetW, y + 102 + 24 - 2, 'select', frame, 0.1);
      selectionBox.anchor(0.5, 0.5);
      selectionBox.iconType = 'selectionBox';
      selectionBox.originalScale = 0.1;
      this.menuIcons.push(selectionBox);
    }

    // ---------------------------- LEVEL ICONS

    offsetH = this.func_getOffset(height, info[gameTypeString].levelType.length);

    x = 150 + offsetW;
    y = 270;

    for (let i = 0; i < info[gameTypeString].levelTypeUrl.length; i++, y += offsetH) {

      const icon = game.add.image(x, y, info[gameTypeString].levelTypeUrl[i], iconScale, 1);
      icon.anchor(0.5, 0.5);

      icon.levelType = info[gameTypeString].levelType[i];
      icon.iconType = 'level';
      icon.originalScale = iconScale;
      if (i == 0) {
        levelType = icon.levelType;
        icon.shadow = true;
      }

      this.menuIcons.push(icon);

    }

    // ---------------------------- SUBLEVEL ICONS

    offsetH = this.func_getOffset(height, info[gameTypeString].sublevelType.length);

    if (gameTypeString != 'squareTwo') x += 2 * offsetW;
    y = 270;

    let icon;
    let aux = [];
    aux['squareOne'] = [
      ['sublevel_right', 'Plus'],
      ['sublevel_left', 'Minus']
    ];
    aux['circleOne'] = [
      ['sublevel_right', 'Plus'],
      ['sublevel_left', 'Minus'],
      ['sublevel_mixed', 'Mixed']
    ];
    aux['squareTwo'] = [
      // ['sublevel_top', 'A'],
      ['sublevel_bottom', 'B'],
      ['sublevel_top', 'C'],
    ];
    // Placing sublevel icons
    for (let i = 0; i < aux[gameTypeString].length; i++, y += offsetH) {

      icon = game.add.image(x, y, aux[gameTypeString][i][0], iconScale);
      icon.anchor(0.5, 0.5);
      icon.alpha = 1;

      icon.sublevelType = aux[gameTypeString][i][1];
      icon.iconType = 'sublevel';
      icon.originalScale = iconScale;

      if (i == 0) {
        sublevelType = icon.sublevelType;
        icon.shadow = true;
      }

      this.menuIcons.push(icon);

    }

    // --------------------------- DIFFICULTY ICONS

    x = (gameTypeString == 'squareOne') ? 600 : 570;
    y = 235;

    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.green, 1);
      icon.anchor(0.5, 0.5);
      icon.difficulty = i + 1;
      icon.iconType = 'difficulty';
      icon.originalScale = 1;

      if (i == 0) {
        gameDifficulty = icon.difficulty;
        icon.shadow = true;
      }
      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';
    enterIcon.originalScale = 0.9;

    this.menuIcons.push(enterIcon);

    game.add.text(x, y, game.lang.continue.toUpperCase(), textStyles.p_white);

    // EVENTS

    game.event.add('click', this.func_onInputDown);
    game.event.add('mousemove', this.func_onInputOver);

  },

  /* GAME FUNCTIONS */

  /**
   * 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 'level': levelType = icon.levelType; break;
      case 'sublevel': sublevelType = icon.sublevelType; break;
      case 'difficulty': gameDifficulty = icon.difficulty; 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 + ', ' + levelType);
        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);
  },

  /* EVENTS */

  /**
   * 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.menuIcons) {
      if (game.math.isOverIcon(x, y, self.menuIcons[i])) {
        overIcon = i;
        break;
      }
    }

    // Update gui
    if (overIcon) {

      document.body.style.cursor = 'pointer';

      self.menuIcons.forEach(cur => {
        if (cur.iconType == self.menuIcons[overIcon].iconType) {
          if (cur == self.menuIcons[overIcon]) {
            cur.shadow = true;
          } else {
            cur.shadow = false;
          }
        }
      });

      self.func_load(self.menuIcons[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.menuIcons) {
      if (game.math.isOverIcon(x, y, self.menuIcons[i])) {
        overIcon = i;
        break;
      }
    }

    // Update gui
    if (overIcon) {
      document.body.style.cursor = 'pointer';

      self.menuIcons.forEach(cur => {
        if (cur.iconType == self.menuIcons[overIcon].iconType) {
          if (cur == self.menuIcons[overIcon]) {
            cur.scale = cur.originalScale * 1.1;
          } else {
            cur.scale = cur.originalScale;
          }
        }
      });
    } else {
      self.menuIcons.forEach(cur => {
        cur.scale = cur.originalScale;
      });
      document.body.style.cursor = 'auto';
    }

    // Check navigation icons
    navigationIcons.func_onInputOver(x, y);

    game.render.all();

  },

}