logins back

client/src/events.js

@@ -16,6 +16,7 @@ function registerEvents(registry, events) {
 
     function setAccount(account) {
         registry.set('account', account);
+        events.emit('ACCOUNT', account);
     }
 
     function setActiveSkill(skill) {
@@ -69,7 +70,84 @@ function registerEvents(registry, events) {
         return setCryps(cryps);
     });
 
+    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 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);
+        }
+
+        toast.question({
+            id: 'login',
+            theme: 'dark',
+            color: 'black',
+            timeout: false,
+            // overlay: true,
+            drag: false,
+            close: false,
+            title: 'LOGIN',
+            position: 'center',
+            inputs: [
+                [USER_INPUT, 'change', null, true], // true to focus
+                [PASSWORD_INPUT, 'change', null],
+            ],
+            buttons: [
+                [LOGIN_BUTTON, submitLogin], // true to focus
+                [REGISTER_BUTTON, submitRegister], // true to focus
+            ],
+        });
+
+        const prompt = document.querySelector('#login'); // Selector of your toast
+        events.once('ACCOUNT', function closeLoginCb() {
+            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: false,
+            title: 'SPAWN CRYP',
+            position: 'center',
+            inputs: [
+                [NAME_INPUT, 'change', null, true], // true to focus
+            ],
+            buttons: [
+                [SPAWN_BUTTON, submitSpawn], // true to focus
+            ],
+        });
+    });
+
     return {
+        loginPrompt,
         setAccount,
         setActiveSkill,
         setCryps,

client/src/scenes/cryp.list.js

@@ -56,7 +56,7 @@ class CrypList extends Phaser.Scene {
             this.gameList.destroy(true);
         }
 
-        this.gameList = new GameList({ list: this, ws, cryps, gameList });
+        this.gameList = new GameList({ list: this, ws, cryps, gameList, events: this.game.events });
     }
 
     displaySkills(cryp) {

client/src/scenes/game.list.js

@@ -10,29 +10,36 @@ class GameList extends Phaser.GameObjects.Group {
     constructor(args) {
         super(list);
 
-        const { list, ws, cryps, gameList } = args;
+        const { list, events, ws, cryps, gameList } = args;
 
         const X = GAME_LIST.x();
-        const WIDTH = GAME_LIST.width();
+        const WIDTH = Math.floor(GAME_LIST.width() / 2);
         const HEIGHT = GAME_LIST.height();
         const TEXT_MARGIN = 24;
 
-        const pvp = list.add
+        const spawn = list.add
-            .rectangle(X, GAME_LIST.y(0), WIDTH, HEIGHT, 0x440000)
+            .rectangle(X, GAME_LIST.y(0), WIDTH, HEIGHT, 0x888888)
             .setInteractive()
             .setOrigin(0);
 
-        this.add(list.add.text(pvp.getCenter().x, pvp.getCenter().y, 'NEW', TEXT.HEADER));
+        this.add(list.add.text(spawn.getCenter().x, spawn.getCenter().y, 'SPAWN', TEXT.HEADER));
+
+        const pvp = list.add
+            .rectangle(X + WIDTH, GAME_LIST.y(0), WIDTH, HEIGHT, 0x440000)
+            .setInteractive()
+            .setOrigin(0);
+
+        this.add(list.add.text(pvp.getCenter().x, pvp.getCenter().y, 'PVP', TEXT.HEADER));
 
         const pve = list.add
-            .rectangle(X, GAME_LIST.y(1), Math.floor(WIDTH / 2), HEIGHT, 0x004400)
+            .rectangle(X, GAME_LIST.y(1), WIDTH, HEIGHT, 0x004400)
             .setInteractive()
             .setOrigin(0);
 
         this.add(list.add.text(pve.getCenter().x, pve.getCenter().y, 'PVE', TEXT.HEADER));
 
         const refresh = list.add
-            .rectangle(X + Math.floor(WIDTH / 2), GAME_LIST.y(1), Math.floor(WIDTH / 2), HEIGHT, 0x000044)
+            .rectangle(X + WIDTH, GAME_LIST.y(1), WIDTH, HEIGHT, 0x000044)
             .setInteractive()
             .setOrigin(0);
 
@@ -44,7 +51,7 @@ class GameList extends Phaser.GameObjects.Group {
             const GAME_Y = GAME_LIST.rowY(i);
 
             const gameBox = list.add
-                .rectangle(GAME_X, GAME_Y, WIDTH, HEIGHT, 0x111111)
+                .rectangle(GAME_X, GAME_Y, WIDTH * 2, HEIGHT, 0x111111)
                 .setInteractive()
                 .setOrigin(0);
 
@@ -59,6 +66,10 @@ class GameList extends Phaser.GameObjects.Group {
 
         gameList.forEach(gameRow);
 
+        spawn.on('pointerdown', () => {
+            events.emit('CRYP_SPAWN');
+        });
+
         pvp.on('pointerdown', () => {
             const team = cryps.filter(c => c.active).map(c => c.id);
             return ws.sendGamePvp(team);

client/src/socket.js

@@ -39,37 +39,12 @@ function createSocket(events) {
 
         // Connection opened
         ws.addEventListener('open', (event) => {
-            // toast.info({
+            toast.info({
-            //     message: 'connected',
+                message: 'connected',
-            // });
-
-            iziToast.question({
-                drag: false,
-                close: false,
-                overlay: true,
-                title: 'Login',
-                message: 'Enter login details',
-                position: 'center',
-                inputs: [
-                    ['<input type="text">', 'keyup', function (instance, toast, input, e) {
-                        console.info(input.value);
-                    }, true], // true to focus
-                    ['<input type="text">', 'change', function (instance, toast, select, e) {
-                        console.info(select.options[select.selectedIndex].value);
-                    }]
-                ],
-                buttons: [
-                    ['<button><b>Confirm</b></button>', function (instance, toast, button, e, inputs) {
-
-                        alert('First field: ' + inputs[0].value)
-                        alert('Second field: ' + inputs[1].options[inputs[1].selectedIndex].value)
-
-                        instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
-                    }, false], // true to focus
-                ]
             });
 
-            send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
+            events.loginPrompt();
+            // send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
         });
 
         // Listen for messages
@@ -152,7 +127,7 @@ function createSocket(events) {
         send({ method: 'account_login', params: { name, password } });
     }
 
-    function sendAccountRegister(name, password) {
+    function sendAccountCreate(name, password) {
         send({ method: 'account_create', params: { name, password } });
     }
 
@@ -253,7 +228,7 @@ function createSocket(events) {
     return {
         clearGameStateInterval,
         sendAccountLogin,
-        sendAccountRegister,
+        sendAccountCreate,
         sendGameState,
         sendGamePve,
         sendGamePvp,