Ifractions-web/js/preMenu.js

/**
 LInE - Free Education, Private Data
 */

/**
 * BOOT STATE: First state called. Loads main media
 * @namespace
 */
const bootState = {

  /**
   * Preloads media for current state
   */
  preload: function () {
    // LOADING MEDIA
    game.load.audio(url.boot.audio);
    game.load.image(url.boot.image);
    game.load.sprite(url.boot.sprite);
  },

  /**
   * Main code
   */
  create: function () {
    // Calls first screen seen by the player
    game.state.start('lang');
  }
};


/**
 * LANGUAGE STATE: the player can choose a preferred language for the text to be displayed in the game
 * 
 * @namespace
 */
const langState = {

  /**
   * Main code
   */
  create: function () {
    // Background color
    game.add.graphic.rect(0, 0, 900, 600, colors.white, 0, colors.blueBckg, 1);

    // Parameters for the elements on the screen
    this.listOfFlags = [];

    this.langs = {
      text: ['FRAÇÕES  ', 'FRAZIONI  ', 'FRACTIONS  ', 'FRACCIONES  ', 'FRACTIONS  '], // Language names
      flag: ['flag_BR', 'flag_IT', 'flag_US', 'flag_PE', 'flag_FR'], // Icon names
      lang: ['pt_BR', 'it_IT', 'en_US', 'es_PE', 'fr_FR'], // Parameters sent for language object
      x: [-220, -220, -220, 200, 200],
      y: [-180, 0, 180, -100, 100]
    };

    // Create elements on screen  
    for (let i in this.langs.flag) {
      // Add text for language names
      game.add.text(defaultWidth / 2 + this.langs.x[i], defaultHeight / 2 + this.langs.y[i], this.langs.text[i], textStyles.h2_green, 'right');

      // Add icons for flags
      const flag = game.add.image(defaultWidth / 2 + this.langs.x[i] + 100, defaultHeight / 2 + this.langs.y[i], this.langs.flag[i]);
      flag.anchor(0.5, 0.5);

      this.listOfFlags.push(flag);
    }

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


  /* EVENT HANDLER*/

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

    self.listOfFlags.forEach(cur => {
      if (game.math.isOverIcon(x, y, cur)) {
        for (let i in self.langs.flag) {
          if (self.langs.flag[i] == cur.name) {
            self.func_setLang(self.langs.lang[i]);
            break;
          }
        }
      }
    });
  },

  /**
   * Called by mouse move event
   * 
   * @param {object} mouseEvent contains the mouse move coordinates
   */
  func_onInputOver: function (mouseEvent) {
    const x = mouseEvent.offsetX;
    const y = mouseEvent.offsetY;
    let flag = false;

    self.listOfFlags.forEach(cur => {
      if (game.math.isOverIcon(x, y, cur)) {
        flag = true;
        cur.scale = cur.scale = 1.05;
      } else {
        cur.scale = cur.scale = 1;
      }
    });

    if (flag) document.body.style.cursor = 'pointer';
    else document.body.style.cursor = 'auto';

    game.render.all();
  },



  /* GAME FUNCTIONS */

  /**
   * Calls state that loads selected language
   * 
   * @param {string} selectedLang language selected by player
   */
  func_setLang: function (selectedLang) {
    // Saves language name e.g 'pt_BR'
    langString = selectedLang;
    // Calls loading screen
    game.state.start('loadLang');
  }
};


/**
 * LOADING LANGUAGE STATE: Loads selected language to be able to translate the game text 
 * 
 *  @namespace
 */
const loadLangState = {

  /**
   * Preloads media for current state
   */
  preload: function () {
    // LOADING MEDIA : selected language
    game.load.lang('assets/lang/' + langString);
  },

  /**
   * Main code
   */
  create: function () {
    if (debugMode) console.log('Language: ' + langString);

    // 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')
    } else {
      game.state.start('menu'); // If changing language during the game ('language' >> >> 'menu')         
    }
  }
};



/**
 * NAME STATE: asks for player's name
 * 
 * @namespace
 */
const nameState = {

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

    // Background color
    game.add.graphic.rect(0, 0, 900, 600, colors.white, 0, colors.blueBckg, 1);

    // Set title and warning text

    game.add.text(defaultWidth / 2, defaultHeight / 2 - 100, game.lang.insert_name, textStyles.h1_green);

    this.warningEmptyName = game.add.text(defaultWidth / 2, defaultHeight / 2 - 70, '', textStyles.h4_brown);

    // Set 'ok' button that gets player's information
    this.okBtn = game.add.graphic.rect(defaultWidth / 2 - 84, defaultHeight / 2 + 70, 168, 60, undefined, 0, colors.gray, 0.6);

    // Set button Text
    game.add.text(defaultWidth / 2 + 1, defaultHeight / 2 + 112, game.lang.ready, textStyles.h1_white);

    // Makes text field visible
    document.getElementById('textbox').style.visibility = 'visible';

    // Does the same as the button click when the player presses 'enter'
    document.getElementById('textbox-content').addEventListener('keypress', function (e) {
      const keycode = e.key || e.code;
      if (keycode == 'Enter') {
        if (self.func_checkEmptyName()) self.func_saveName();
        game.render.all(); // Can show empty name
      }
    });

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

  },


  /* EVENT HANDLER*/

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

    if (game.math.isOverIcon(x, y, cur)) {
      if (self.func_checkEmptyName()) {
        self.func_saveName();
      }
    }
    game.render.all();
  },

  /**
   * Called by mouse move event
   * 
   * @param {object} mouseEvent contains the mouse move coordinates
   */
  func_onInputOver: function (mouseEvent) {
    const x = mouseEvent.offsetX;
    const y = mouseEvent.offsetY;
    const cur = self.okBtn;

    if (game.math.isOverIcon(x, y, cur)) {
      document.body.style.cursor = 'pointer';
      cur.alpha = 0.4;
    } else {
      document.body.style.cursor = 'auto';
      cur.alpha = 0.6;
    }

    game.render.all();
  },


  /* GAME FUNCTIONS */

  /**
   * Checks if player entered name in text box
   * 
   * @returns {boolean}
   */
  func_checkEmptyName: function () {
    // If text field is empty displays error message
    if (document.getElementById('textbox-content').value == '') {
      self.warningEmptyName.name = game.lang.empty_name;
      return false;
    }
    return true;
  },

  /**
   * Saves player name and calls next state
   */
  func_saveName: function () {
    // Saves player's input in global variable 'playerName'
    playerName = document.getElementById('textbox-content').value;

    // Hides and clears text field
    document.getElementById('textbox').style.visibility = 'hidden';
    document.getElementById('textbox-content').value = '';

    if (audioStatus) game.audio.beepSound.play();
    if (debugMode) console.log('Username: ' + playerName);

    // Calls 'menu' state
    game.state.start('menu');
  }

};