diff --git a/client/src/events.js b/client/src/events.js index 18222741..9d5891d7 100644 --- a/client/src/events.js +++ b/client/src/events.js @@ -50,9 +50,7 @@ function registerEvents(registry, events, tutorial) { registry.set('player', player); if (!registry.get('inMenu')) { setMenu(); - setCryps(player.cryps); } - setVbox(player.vbox); } function setZone(zone) { diff --git a/client/src/scenes/item.list.js b/client/src/scenes/item.list.js index bde7e0b2..9dee549e 100644 --- a/client/src/scenes/item.list.js +++ b/client/src/scenes/item.list.js @@ -126,14 +126,15 @@ class ItemList extends Phaser.Scene { } updateData(parent, key, data) { - if (key === 'vbox') { + if (key === 'player') { this.registry.events.off('changedata', this.updateData, this); this.registry.events.off('setdata', this.updateData, this); - this.scene.restart(data); + this.scene.restart(); } } - create(vbox) { + create() { + const { vbox } = this.registry.get('player'); this.registry.events.on('changedata', this.updateData, this); this.registry.events.on('setdata', this.updateData, this); if (!vbox.bound) return false; diff --git a/client/src/scenes/menu.cryps.list.js b/client/src/scenes/menu.cryps.list.js index 328d4bcf..33b36683 100644 --- a/client/src/scenes/menu.cryps.list.js +++ b/client/src/scenes/menu.cryps.list.js @@ -23,24 +23,22 @@ class MenuCrypList extends Phaser.Scene { // 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); - this.addCrypRows(this.registry.get('cryps')); - this.addControls(); + this.drawCryps(this.registry.get('player').cryps); } updateData(parent, key, data) { - if (key === 'cryps') { - KEY_MAP.forEach(k => this.input.keyboard.removeListener(k)); - this.scene.restart(data); + if (key === 'player') { + console.log(data.cryps); + // KEY_MAP.forEach(k => this.input.keyboard.removeListener(k)); + this.drawCryps(data.cryps); } } - addCrypRows(cryps) { + drawCryps(cryps) { if (!cryps) return true; - // We only display 3 cryps others can be viewed in cryp list (soon TM) - const crypDispLength = cryps.length < 3 ? cryps.length : 3; - - for (let i = 0; i < crypDispLength; i += 1) { - const cryp = cryps[i]; + if (this.crypGroup) this.crypGroup.destroy(true); + this.crypGroup = this.add.group(); + const addCryp = (cryp, i) => { const BOX_WIDTH = Math.floor(ROW_WIDTH / 5); const ROW_X = i * BOX_WIDTH * 2; const ROW_Y = CRYP_LIST.y(); @@ -53,7 +51,6 @@ class MenuCrypList extends Phaser.Scene { const FILL = Object.values(COLOURS)[i]; // Selection of cryps const selectFn = () => { - // this.game.events.emit('CRYP_ACTIVE', cryp); this.registry.set('crypStats', cryp); }; @@ -63,22 +60,20 @@ class MenuCrypList extends Phaser.Scene { .setInteractive() .setOrigin(0) .on('pointerdown', selectFn); - crypInteract.itemSelect = () => { crypInteract.setFillStyle(COLOURS.SELECT); }; crypInteract.itemDeselect = () => { crypInteract.setFillStyle(FILL, ACTIVE_FILL); }; - crypInteract.cryp = cryp; - this.add.image( + + const crypImage = this.add.image( crypInteract.getCenter().x, crypInteract.getCenter().y, 'aztec', genAvatar(cryp.name) ); - // Cryp information box (names + skills) const crypInfo = this.add .rectangle(ROW_X, ROW_Y, BOX_WIDTH * 2, ROW_HEIGHT * 2.5, FILL, ACTIVE_FILL) @@ -86,14 +81,17 @@ class MenuCrypList extends Phaser.Scene { .setInteractive() .on('pointerdown', selectFn); - this.add.text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN, cryp.name, TEXT.HEADER) + const crypInfoText = this.add.text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN, cryp.name, TEXT.HEADER) .setOrigin(0.5, 0.5); + this.crypGroup.addMultiple([crypInteract, crypImage, crypInfo, crypInfoText]) + const crypGems = (stat, j) => { - this.add - // Placeholder for when gems are implemented + // Placeholder for when gems are implemented + const gemText = this.add .text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN * (2 + j), `${stat}: 0`, TEXT.NORMAL) .setOrigin(0.5, 0.5); + this.crypGroup.add(gemText); }; const CRYP_GEMS = [ @@ -104,39 +102,16 @@ class MenuCrypList extends Phaser.Scene { CRYP_GEMS.forEach(crypGems); const crypSkill = (stat, j) => { - this.add + const skillText = this.add .text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN * (6 + j), `${stat.skill}`, TEXT.NORMAL) .setOrigin(0.5, 0.5); + this.crypGroup.add(skillText); }; cryp.skills.forEach(crypSkill); - } - return true; - } + }; + cryps.forEach(addCryp); - addControls() { - // 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); - // 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); + return true; } cleanUp() {