mnml/phaser-client/src/events.js

const toast = require('izitoast');

function registerEvents(registry, events, tutorial) {
    function setCryps(cryps) {
        registry.set('cryps', cryps);
        tutorial('homepage');
    }

    function setCrypList(cryps) {
        registry.set('crypList', cryps);
    }


    function setWs(ws) {
        registry.set('ws', ws);
    }

    function setGame(game) {
        if (game.phase === 'Skill') tutorial('skillPhase');
        if (game.phase === 'Target') tutorial('targetPhase');
        if (game.resolved.length) tutorial('resolutionPhase');
        if (game.phase === 'Finish') tutorial('finishPhase');
        return registry.set('game', game);
    }

    function setAccount(account) {
        registry.set('account', account);
        registry.set('home', true);
        events.emit('ACCOUNT', account);
    }

    function setActiveSkill(skill) {
        registry.set('activeSkill', skill);
    }

    function setMenu() {
        registry.set('menu', true);
    }

    function setVbox(items) {
        registry.set('vbox', items);
    }

    function setScores(scores) {
        registry.set('scores', scores);
    }

    function setPlayerList(list) {
        registry.set('playerList', list);
        registry.set('homeInstances', true);
    }

    function setPlayer(player) {
        registry.set('player', player);
        if (!registry.get('inMenu')) {
            setMenu();
        }
    }

    function setZone(zone) {
        registry.set('zone', zone);
    }

    function setGameList(gameList) {
        registry.set('gameList', gameList);
    }

    function setCrypStatusUpdate(id, skill, target) {
        registry.set('crypStatusUpdate', { id, skill, target });
    }

    events.on('SET_PLAYER', setPlayer);

    events.on('SEND_SKILL', function skillActive(gameId, crypId, targetCrypId, skill) {
        const ws = registry.get('ws');
        ws.sendGameSkill(gameId, crypId, targetCrypId, skill);
        setCrypStatusUpdate(crypId, skill, targetCrypId);
    });

    events.on('CRYP_ACTIVE', function crypActiveCb(cryp) {
        const cryps = registry.get('cryps');
        for (let i = 0; i < cryps.length; i += 1) {
            if (cryps[i].id === cryp.id) cryps[i].active = !cryps[i].active;
        }
        return setCryps(cryps);
    });

    const errMessages = {
        select_cryps: 'Select your cryps before battle using the numbered buttons next to the cryp avatar',
        complete_nodes: 'You need to complete the previously connected nodes first',
        max_skills: 'Your cryp can only learn a maximum of 4 skills',

    };

    function errorPrompt(type) {
        const message = errMessages[type];
        const OK_BUTTON = '<button type="submit">OK</button>';
        toast.info({
            theme: 'dark',
            color: 'black',
            timeout: false,
            drag: false,
            position: 'center',
            maxWidth: window.innerWidth / 2,
            close: false,
            buttons: [
                [OK_BUTTON, (instance, thisToast) => instance.hide({ transitionOut: 'fadeOut' }, thisToast)],
            ],
            message,
        });
    }

    function loginPrompt() {
        const USER_INPUT = '<input className="input" type="email" placeholder="username" />';
        const PASSWORD_INPUT = '<input className="input" type="password" placeholder="password" />';
        const LOGIN_BUTTON = '<button type="submit">Login</button>';
        const REGISTER_BUTTON = '<button type="submit">Register</button>';
        const DEMO_BUTTON = '<button type="submit">Demo</button>';

        const ws = registry.get('ws');

        function submitLogin(instance, thisToast, button, e, inputs) {
            const USERNAME = inputs[0].value;
            const PASSWORD = inputs[1].value;
            ws.sendAccountLogin(USERNAME, PASSWORD);
        }

        function submitRegister(instance, thisToast, button, e, inputs) {
            const USERNAME = inputs[0].value;
            const PASSWORD = inputs[1].value;
            ws.sendAccountCreate(USERNAME, PASSWORD);
        }

        function submitDemo() {
            ws.sendAccountDemo();
        }

        const existing = document.querySelector('#login'); // Selector of your toast
        if (existing) toast.hide({}, existing, 'reconnect');

        toast.question({
            id: 'login',
            theme: 'dark',
            color: 'black',
            timeout: false,
            // overlay: true,
            drag: false,
            close: false,
            title: 'LOGIN',
            position: 'center',
            inputs: [
                [USER_INPUT, 'change', () => true, true], // true to focus
                [PASSWORD_INPUT, 'change', () => true],
            ],
            buttons: [
                [LOGIN_BUTTON, submitLogin], // true to focus
                [REGISTER_BUTTON, submitRegister], // true to focus
                [DEMO_BUTTON, submitDemo], // true to focus
            ],
        });

        events.once('ACCOUNT', function closeLoginCb() {
            const prompt = document.querySelector('#login'); // Selector of your toast
            if (prompt) toast.hide({ transitionOut: 'fadeOut' }, prompt, 'event');
        });
    }

    events.on('CRYP_SPAWN', function spawnPrompt() {
        const NAME_INPUT = '<input className="input" type="email" placeholder="name" />';
        const SPAWN_BUTTON = '<button type="submit">SPAWN</button>';

        const ws = registry.get('ws');

        function submitSpawn(instance, thisToast, button, e, inputs) {
            const NAME = inputs[0].value;
            ws.sendCrypSpawn(NAME);
            instance.hide({ transitionOut: 'fadeOut' }, thisToast, 'button');
        }

        toast.question({
            theme: 'dark',
            color: 'black',
            timeout: false,
            // overlay: true,
            drag: false,
            close: true,
            title: 'SPAWN CRYP',
            position: 'center',
            inputs: [
                [NAME_INPUT, 'change', null, true], // true to focus
            ],
            buttons: [
                [SPAWN_BUTTON, submitSpawn], // true to focus
            ],
        });
    });

    tutorial('welcome');

    return {
        errorPrompt,
        loginPrompt,
        setAccount,
        setActiveSkill,
        setCryps,
        setCrypList,
        setGame,
        setMenu,
        setPlayer,
        setPlayerList,
        setVbox,
        setWs,
        setGameList,
        setZone,
        setScores,
    };
}

module.exports = registerEvents;