From c6329de8abcda3e092b7807aab7d3fa2b9e13b00 Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 22 Feb 2019 17:45:41 +1000 Subject: [PATCH] Added home page --- client/src/events.js | 13 ++- client/src/scenes/constants.js | 0 client/src/scenes/cryps.js | 8 +- client/src/scenes/elements/item.js | 0 client/src/scenes/home.cryps.js | 150 +++++++++++++++++++++++++++ client/src/scenes/home.js | 48 +++++++++ client/src/scenes/item.info.js | 0 client/src/scenes/item.list.js | 0 client/src/scenes/menu.cryps.list.js | 0 client/src/scenes/menu.js | 3 - client/src/scenes/menu.navigation.js | 8 -- client/src/scenes/statsheet.js | 0 client/src/socket.js | 7 +- 13 files changed, 222 insertions(+), 15 deletions(-) mode change 100755 => 100644 client/src/scenes/constants.js mode change 100755 => 100644 client/src/scenes/cryps.js mode change 100755 => 100644 client/src/scenes/elements/item.js create mode 100644 client/src/scenes/home.cryps.js create mode 100644 client/src/scenes/home.js mode change 100755 => 100644 client/src/scenes/item.info.js mode change 100755 => 100644 client/src/scenes/item.list.js mode change 100755 => 100644 client/src/scenes/menu.cryps.list.js mode change 100755 => 100644 client/src/scenes/menu.js mode change 100755 => 100644 client/src/scenes/menu.navigation.js mode change 100755 => 100644 client/src/scenes/statsheet.js mode change 100755 => 100644 client/src/socket.js diff --git a/client/src/events.js b/client/src/events.js index a04ed554..2fd75e2a 100644 --- a/client/src/events.js +++ b/client/src/events.js @@ -20,7 +20,7 @@ function registerEvents(registry, events, tutorial) { function setAccount(account) { registry.set('account', account); - registry.set('menu', true); + registry.set('home', true); events.emit('ACCOUNT', account); } @@ -28,10 +28,19 @@ function registerEvents(registry, events, tutorial) { registry.set('activeSkill', skill); } + function setMenu() { + registry.set('menu', true); + } + + function setVbox(items) { registry.set('vbox', items); } + function setInstance(instance) { + registry.set('instance', instance); + } + function setZone(zone) { registry.set('zone', zone); } @@ -177,6 +186,8 @@ function registerEvents(registry, events, tutorial) { setActiveSkill, setCryps, setGame, + setInstance, + setMenu, setVbox, setWs, setGameList, diff --git a/client/src/scenes/constants.js b/client/src/scenes/constants.js old mode 100755 new mode 100644 diff --git a/client/src/scenes/cryps.js b/client/src/scenes/cryps.js old mode 100755 new mode 100644 index a41df321..45ac57ce --- a/client/src/scenes/cryps.js +++ b/client/src/scenes/cryps.js @@ -1,9 +1,11 @@ const Phaser = require('phaser'); const Header = require('./header'); +const Home = require('./home'); const Menu = require('./menu'); const Combat = require('./combat'); -const Background = require('./background'); + +// const Background = require('./background'); function renderCryps() { const config = { @@ -41,6 +43,10 @@ function renderCryps() { // Don't load other scenes if you're not logged in if (!game.registry.get('account')) return false; + if (key === 'home') { + if (data) return game.scene.add('Home', Home, true); + } + if (key === 'menu') { if (data) return game.scene.add('Menu', Menu, true); } diff --git a/client/src/scenes/elements/item.js b/client/src/scenes/elements/item.js old mode 100755 new mode 100644 diff --git a/client/src/scenes/home.cryps.js b/client/src/scenes/home.cryps.js new file mode 100644 index 00000000..626c9f97 --- /dev/null +++ b/client/src/scenes/home.cryps.js @@ -0,0 +1,150 @@ +const Phaser = require('phaser'); +const { remove } = require('lodash'); + +const { TEXT, COLOURS, POSITIONS: { CRYP_LIST } } = require('./constants'); +const genAvatar = require('./avatar'); + +const ROW_HEIGHT = CRYP_LIST.height() * 0.2; +const ROW_WIDTH = CRYP_LIST.width(); + +const TEXT_MARGIN = 24; + +const KEY_MAP = [ + 'keydown-ONE', + 'keydown-TWO', + 'keydown-THREE', +]; + +const NULL_UUID = '00000000-0000-0000-0000-000000000000'; + +class HomeCrypList extends Phaser.Scene { + constructor() { + super({ key: 'HomeCryps' }); + } + + + updateData(parent, key, data) { + if (key === 'cryps') { + KEY_MAP.forEach(k => this.input.keyboard.removeListener(k)); + this.scene.restart(); + } + } + + create() { + // this.cameras.main.setViewport(CRYP_LIST.x(), CRYP_LIST.y(), CRYP_LIST.width(), CRYP_LIST.height()); + this.registry.events.on('changedata', this.updateData, this); + this.registry.events.on('setdata', this.updateData, this); + const cryps = this.registry.get('cryps'); + + + if (!cryps) return true; + const ws = this.registry.get('ws'); + this.activeCryps = []; + // We only display 3 cryps others can be viewed in cryp list (soon TM) + for (let i = 0; i < cryps.length; i += 1) { + const cryp = cryps[i]; + const BOX_WIDTH = Math.floor(ROW_WIDTH / 5); + const ROW_X = i * BOX_WIDTH * 2; + const ROW_Y = CRYP_LIST.y(); + const ACTIVE_FILL = 0.2; + + const FILL = Object.values(COLOURS)[i]; + // Selection of cryps + + // Cryp avatar and interaction box + const crypInteract = this.add + .rectangle(ROW_X, ROW_Y + ROW_HEIGHT * 0.2, BOX_WIDTH * 2, ROW_HEIGHT, FILL) + .setInteractive() + .setOrigin(0); + crypInteract.setAlpha(0.2); + crypInteract.on('pointerdown', () => { + if (this.activeCryps.includes(crypInteract)) { + remove(this.activeCryps, n => n === crypInteract); + crypInteract.setAlpha(0.2); + } else { + this.activeCryps.push(crypInteract); + crypInteract.setAlpha(1); + } + console.log(this.activeCryps); + }); + + crypInteract.itemSelect = () => { + crypInteract.setFillStyle(COLOURS.SELECT); + }; + crypInteract.itemDeselect = () => { + crypInteract.setFillStyle(FILL, ACTIVE_FILL); + }; + + crypInteract.cryp = cryp; + this.add.image( + crypInteract.getCenter().x, + crypInteract.getCenter().y, + 'aztec', + genAvatar(cryp.name) + ); + this.add.text(ROW_X + BOX_WIDTH, ROW_Y, cryp.name, TEXT.HEADER) + .setOrigin(0.5, 0.5); + } + + // Add Spawn Cryp Option + const spawn = this.add + .rectangle(ROW_WIDTH * 0.05, ROW_HEIGHT * 4, ROW_WIDTH * 0.2, ROW_HEIGHT * 0.5, 0x888888) + .setInteractive() + .setOrigin(0) + .on('pointerdown', () => { + this.game.events.emit('CRYP_SPAWN'); + }); + this.add + .text(spawn.getCenter().x, spawn.getCenter().y, '+', TEXT.HEADER) + .setOrigin(0.5, 0.5); + + const joinNormal = this.add + .rectangle(ROW_WIDTH * 0.3, ROW_HEIGHT * 4, ROW_WIDTH * 0.4, ROW_HEIGHT * 0.5, 0x888888) + .setInteractive() + .setOrigin(0) + .on('pointerdown', () => { + const playerCryps = []; + this.activeCryps.forEach(obj => playerCryps.push(obj.cryp.id)); + ws.sendPlayerCrypsSet(NULL_UUID, playerCryps); + }); + this.add + .text(joinNormal.getCenter().x, joinNormal.getCenter().y, 'Join Normal', TEXT.HEADER) + .setOrigin(0.5, 0.5); + + const joinInstance = this.add + .rectangle(ROW_WIDTH * 0.8, ROW_HEIGHT * 4, ROW_WIDTH * 0.4, ROW_HEIGHT * 0.5, 0x888888) + .setInteractive() + .setOrigin(0) + .on('pointerdown', () => { + const playerCryps = []; + this.activeCryps.forEach(obj => playerCryps.push(obj.cryp.id)); + ws.sendInstanceJoin(playerCryps); + }); + this.add + .text(joinInstance.getCenter().x, joinInstance.getCenter().y, 'Join Instance', TEXT.HEADER) + .setOrigin(0.5, 0.5); + + + // Dialog to view all cryps + // const crypList = this.add + // .rectangle(ROW_WIDTH * 0.55, ROW_HEIGHT * 3.5, ROW_WIDTH * 0.4, ROW_HEIGHT, 0xff9215) + // .setInteractive() + // .setOrigin(0) + // .on('pointerdown', () => { + // // this.game.events.emit('CRYP_LIST'); + // // Placeholder will give a full list of all cryps in the center + // }); + // this.add + // .text(crypList.getCenter().x, crypList.getCenter().y, 'Cryp List (soon)', TEXT.NORMAL) + // .setOrigin(0.5, 0.5); + } + + cleanUp() { + KEY_MAP.forEach(k => this.input.keyboard.removeListener(k)); + this.registry.events.off('changedata', this.updateData, this); + this.registry.events.off('setdata', this.updateData, this); + this.scene.remove(); + } +} + +module.exports = HomeCrypList; diff --git a/client/src/scenes/home.js b/client/src/scenes/home.js new file mode 100644 index 00000000..2a3279d3 --- /dev/null +++ b/client/src/scenes/home.js @@ -0,0 +1,48 @@ +const Phaser = require('phaser'); + +const HomeCryps = require('./home.cryps'); + +const FIXED_SCENES = [ + 'HomeCryps', +]; + +const VAR_SCENES = [ +]; + +class Home extends Phaser.Scene { + constructor() { + super({ key: 'Home', active: true }); + } + + create() { + this.registry.events.on('changedata', this.updateData, this); + this.registry.events.on('setdata', this.updateData, this); + this.scene.manager.add('HomeCryps', HomeCryps, true); + + return true; + } + + updateData(parent, key, data) { + if (!data) return false; + if (key === 'menu') { + this.cleanUp(); + } return true; + } + + cleanUp() { + this.registry.events.off('changedata', this.updateData, this); + this.registry.events.off('setdata', this.updateData, this); + // Delete scenes which could be showing before switching to battle scene + + const removeScenes = (sKey) => { + if (this.scene.get(sKey)) this.scene.get(sKey).cleanUp(); + }; + FIXED_SCENES.forEach(removeScenes); + VAR_SCENES.forEach(removeScenes); + + + this.scene.remove(); + } +} + +module.exports = Home; diff --git a/client/src/scenes/item.info.js b/client/src/scenes/item.info.js old mode 100755 new mode 100644 diff --git a/client/src/scenes/item.list.js b/client/src/scenes/item.list.js old mode 100755 new mode 100644 diff --git a/client/src/scenes/menu.cryps.list.js b/client/src/scenes/menu.cryps.list.js old mode 100755 new mode 100644 diff --git a/client/src/scenes/menu.js b/client/src/scenes/menu.js old mode 100755 new mode 100644 index 2743ead4..b7f15041 --- a/client/src/scenes/menu.js +++ b/client/src/scenes/menu.js @@ -23,8 +23,6 @@ const MAIN_MENU_SCENES = [ 'ItemInfo', ]; -const NULL_UUID = '00000000-0000-0000-0000-000000000000'; - class Menu extends Phaser.Scene { constructor() { super({ key: 'Menu', active: true }); @@ -36,7 +34,6 @@ class Menu extends Phaser.Scene { // When we load the menu request the latest items // Item list will restart when the data comes in - this.registry.get('ws').sendPlayerState(NULL_UUID); this.scene.manager.add('MenuCrypList', MenuCrypList, true); this.scene.manager.add('MenuNavigation', MenuNavigation, true); diff --git a/client/src/scenes/menu.navigation.js b/client/src/scenes/menu.navigation.js old mode 100755 new mode 100644 index 7c57fda5..aca662d8 --- a/client/src/scenes/menu.navigation.js +++ b/client/src/scenes/menu.navigation.js @@ -27,12 +27,6 @@ class MenuNavigation extends Phaser.Scene { .text(play.getCenter().x, play.getCenter().y, 'Play Cryps', TEXT.HEADER) .setOrigin(0.5, 0.5); play.on('pointerdown', () => { - const cryps = this.registry.get('cryps'); - const crypJoinList = [0, 0, 0]; - for (let i = 0; i <= 2; i += 1) { - crypJoinList[i] = cryps[i].id; - } - ws.sendInstanceJoin(crypJoinList); this.selectMode(ws); play.destroy(); playText.destroy(); @@ -59,12 +53,10 @@ class MenuNavigation extends Phaser.Scene { .setOrigin(0.5, 0.5); pve.on('pointerdown', () => { - this.addPveModes(ws); pve.destroy(); pveText.destroy(); pvp.destroy(); pvpText.destroy(); - ws.sendAccountZone(); }); pvp.on('pointerdown', () => { diff --git a/client/src/scenes/statsheet.js b/client/src/scenes/statsheet.js old mode 100755 new mode 100644 diff --git a/client/src/socket.js b/client/src/socket.js old mode 100755 new mode 100644 index fb1a0bb0..b41c6bb7 --- a/client/src/socket.js +++ b/client/src/socket.js @@ -81,8 +81,8 @@ function createSocket(events) { send({ method: 'cryp_unspec', params: { id, spec } }); } - function sendPlayerCrypsSet(instanceId) { - send({ method: 'player_cryps_set', params: { instance_id: instanceId } }); + function sendPlayerCrypsSet(instanceId, crypIds) { + send({ method: 'player_cryps_set', params: { instance_id: instanceId, cryp_ids: crypIds } }); } function sendPlayerState(instanceId) { @@ -177,6 +177,9 @@ function createSocket(events) { function playerState(response) { const [structName, player] = response; + events.setMenu(); + events.setCryps(player.cryps); + events.setInstance(player.instance); events.setVbox(player.vbox); }