Ifractions-web/js/preMenu.js

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

    }

};