diff --git a/client/src/events.js b/client/src/events.js
index 19d922cd..734f0fb9 100644
--- a/client/src/events.js
+++ b/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 = '';
+ const PASSWORD_INPUT = '';
+ const LOGIN_BUTTON = '';
+ const 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 = '';
+ const 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,
diff --git a/client/src/scenes/cryp.list.js b/client/src/scenes/cryp.list.js
index 43f1ab17..ad51fd3a 100644
--- a/client/src/scenes/cryp.list.js
+++ b/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) {
diff --git a/client/src/scenes/game.list.js b/client/src/scenes/game.list.js
index 21462a1b..ffffda18 100644
--- a/client/src/scenes/game.list.js
+++ b/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
- .rectangle(X, GAME_LIST.y(0), WIDTH, HEIGHT, 0x440000)
+ const spawn = list.add
+ .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);
diff --git a/client/src/socket.js b/client/src/socket.js
index 469dc043..2897e63d 100644
--- a/client/src/socket.js
+++ b/client/src/socket.js
@@ -39,37 +39,12 @@ function createSocket(events) {
// Connection opened
ws.addEventListener('open', (event) => {
- // toast.info({
- // message: 'connected',
- // });
-
- iziToast.question({
- drag: false,
- close: false,
- overlay: true,
- title: 'Login',
- message: 'Enter login details',
- position: 'center',
- inputs: [
- ['', 'keyup', function (instance, toast, input, e) {
- console.info(input.value);
- }, true], // true to focus
- ['', 'change', function (instance, toast, select, e) {
- console.info(select.options[select.selectedIndex].value);
- }]
- ],
- buttons: [
- ['', 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
- ]
+ toast.info({
+ message: 'connected',
});
- 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,