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);
    game.load.sprite(url.menu.sprite);

  },

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

    // 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: 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);

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

    // INFO ICONS

    this.menuIcons = [];
    let infoIcon;

    // --------------------------- GAME ICONS 

    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];
      icon.iconType = 'game';

      this.menuIcons.push(icon);

      // "more information" button
      infoIcon = game.add.image(x + 70, defaultHeight / 2 - 70 - 80, 'info', 0.6, 0.6);
      infoIcon.anchor(0.5, 0.5);
      infoIcon.iconType = 'infoIcon';
      infoIcon.id = icon.gameType;
      this.menuIcons.push(infoIcon);

    }

    // --------------------------- INFO BOX

    this.infoBox = document.getElementById('myModal');

    // When the user clicks on the 'x', close the modal
    document.getElementsByClassName('close')[0].onclick = function () {
      self.infoBox.style.display = 'none';
    }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function (event) {
      if (event.target == self.infoBox) {
        self.infoBox.style.display = 'none';
      }
    }

    this.infoBoxContent = {
      squareOne: {
        title: '<b>' + game.lang.game.toLowerCase() + ':</b> ' + game.lang.square + ' I',
        body: game.lang.infoBox_squareOne,
        img: '<center> <img width=300 src="./assets/img/info-box/s1-A.png"> <img width=300 src="./assets/img/info-box/s1-B.png"> </center>'
      },
      squareTwo: {
        title: '<b>' + game.lang.game.toLowerCase() + ':</b> ' + game.lang.square + ' II',
        body: game.lang.infoBox_squareTwo,
        img: '<center> <img width=400 src="./assets/img/info-box/s2.png"> </center>',
      },
      circleOne: {
        title: '<b>' + game.lang.game.toLowerCase() + ':</b> ' + game.lang.circle + ' I',
        body: game.lang.infoBox_circleOne,
        img: '<center> <img width=300 src="./assets/img/info-box/c1-A.png"> <img width=300 src="./assets/img/info-box/c1-B.png"> </center>',
      }
    };

    // ------------- EVENTS

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

  },

  /**
   * Displays game menu information boxes.
   */
  func_showInfoBox: function (icon) {
    self.infoBox.style.display = 'block';

    let msg = '<h3>' + self.infoBoxContent[icon.id].title + '</h3>'
      + '<p>' + self.infoBoxContent[icon.id].body + '</p>'
      + self.infoBoxContent[icon.id].img;

    document.getElementById('infobox-content').innerHTML = msg;
  },

  /**
   * 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();

    switch (icon.iconType) {
      case 'infoIcon': self.func_showInfoBox(icon); break;
      case 'game':
        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');
        break;
      default: console.error("Game error: Problem with selected icon.");
    }

  },

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

    let title = game.lang[icon.gameShape];

    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 = '';
  },

  /**
   * 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);

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

    // Update gui
    if (overIcon) { // if pointer is over icon
      document.body.style.cursor = 'pointer';
      if (self.menuIcons[overIcon].iconType == 'game') self.func_showTitle(self.menuIcons[overIcon]);
      self.menuIcons.forEach(cur => {
        if (cur.iconType == self.menuIcons[overIcon].iconType) { // if its in the same icon category
          if (cur == self.menuIcons[overIcon]) { // if its the icon the pointer is over 
            cur.scale = cur.originalScale * 1.1;
          } else {
            cur.scale = cur.originalScale;
          }
        }
      });
    } else { // if pointer is not over icon
      self.func_clearTitle();
      self.menuIcons.forEach(cur => { cur.scale = cur.originalScale; });
      document.body.style.cursor = 'auto';
    }

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

    game.render.all();
  }

};