Browse Source

Update 'js/preMenu.js'

Header, indentation.
leo 3 years ago
parent
commit
39177634d3
1 changed files with 295 additions and 323 deletions
  1. 295 323
      js/preMenu.js

+ 295 - 323
js/preMenu.js

@@ -1,323 +1,295 @@
-/**
- * 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');
-
-    }
-
-};
+/**
+ 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');
+    }
+
+  };