From cdfa66fa72655197011a91899e312c81b2a0a861 Mon Sep 17 00:00:00 2001 From: Mashy Date: Mon, 25 Feb 2019 16:09:10 +1000 Subject: [PATCH 1/2] Added multi scene to homepage, placeholder for rankings / news / shop --- client/src/scenes/home.cryps.js | 12 ++++--- client/src/scenes/home.js | 44 ++++++++++++++++++++--- client/src/scenes/home.navigation.js | 52 ++++++++++++++++++++++++++++ client/src/scenes/home.news.js | 24 +++++++++++++ client/src/scenes/home.rankings.js | 24 +++++++++++++ client/src/scenes/home.shop.js | 23 ++++++++++++ client/src/scenes/menu.js | 3 +- 7 files changed, 172 insertions(+), 10 deletions(-) create mode 100644 client/src/scenes/home.navigation.js create mode 100644 client/src/scenes/home.news.js create mode 100644 client/src/scenes/home.rankings.js create mode 100644 client/src/scenes/home.shop.js diff --git a/client/src/scenes/home.cryps.js b/client/src/scenes/home.cryps.js index e9648f22..57905c6e 100644 --- a/client/src/scenes/home.cryps.js +++ b/client/src/scenes/home.cryps.js @@ -7,6 +7,8 @@ const genAvatar = require('./avatar'); const ROW_HEIGHT = CRYP_LIST.height() * 0.2; const ROW_WIDTH = CRYP_LIST.width(); +const menuY = CRYP_LIST.height() * 1.6; + const KEY_MAP = [ 'keydown-ONE', 'keydown-TWO', @@ -42,8 +44,8 @@ class HomeCrypList extends Phaser.Scene { 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 ROW_X = BOX_WIDTH * 2 * (i % 3); + const ROW_Y = CRYP_LIST.y() + (Math.floor(i / 3)) * ROW_HEIGHT * 1.5; const ACTIVE_FILL = 0.2; const FILL = Object.values(COLOURS)[i]; @@ -85,7 +87,7 @@ class HomeCrypList extends Phaser.Scene { // 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) + .rectangle(ROW_WIDTH * 0.05, menuY, ROW_WIDTH * 0.2, ROW_HEIGHT * 0.5, 0x888888) .setInteractive() .setOrigin(0) .on('pointerdown', () => { @@ -96,7 +98,7 @@ class HomeCrypList extends Phaser.Scene { .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) + .rectangle(ROW_WIDTH * 0.3, menuY, ROW_WIDTH * 0.4, ROW_HEIGHT * 0.5, 0x888888) .setInteractive() .setOrigin(0) .on('pointerdown', () => { @@ -109,7 +111,7 @@ class HomeCrypList extends Phaser.Scene { .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) + .rectangle(ROW_WIDTH * 0.8, menuY, ROW_WIDTH * 0.4, ROW_HEIGHT * 0.5, 0x888888) .setInteractive() .setOrigin(0) .on('pointerdown', () => { diff --git a/client/src/scenes/home.js b/client/src/scenes/home.js index db16e0a2..eb06b91f 100644 --- a/client/src/scenes/home.js +++ b/client/src/scenes/home.js @@ -1,12 +1,21 @@ const Phaser = require('phaser'); const HomeCryps = require('./home.cryps'); +const HomeNavigation = require('./home.navigation'); + +const HomeRankings = require('./home.rankings'); +const HomeNews = require('./home.news'); +const HomeShop = require('./home.shop'); const FIXED_SCENES = [ 'HomeCryps', + 'HomeNavigation', ]; const VAR_SCENES = [ + 'HomeRankings', + 'HomeNews', + 'HomeShop', ]; class Home extends Phaser.Scene { @@ -18,15 +27,42 @@ class Home extends Phaser.Scene { this.registry.events.on('changedata', this.updateData, this); this.registry.events.on('setdata', this.updateData, this); this.scene.manager.add('HomeCryps', HomeCryps, true); + this.scene.manager.add('HomeNavigation', HomeNavigation, true); + return true; } updateData(parent, key, data) { if (!data) return false; - if (key === 'menu') { - console.log(this.scene.manager); - this.cleanUp(); - } return true; + // Controls which scene shows in the main top right section + switch (key) { + case 'game': return this.cleanUp(); + case 'menu': return this.cleanUp(); + case 'homeRankings': return this.newMainScene('HomeRankings', HomeRankings, data); + case 'homeNews': return this.newMainScene('HomeNews', HomeNews, data); + case 'homeShop': return this.newMainScene('HomeShop', HomeShop, data); + + + default: return false; + } + } + + newMainScene(key, scene, data) { + let addScene = true; + // List of scenes which could be occupying the main section of the menu + VAR_SCENES.forEach((sKey) => { + if (this.scene.manager.keys[sKey]) { + if (key === sKey) { + // If there is new data for the current scene restart + this.scene.manager.keys[sKey].scene.restart(data); + addScene = false; + } else { + // Delete the old scene + this.scene.manager.keys[sKey].cleanUp(); + } + } + }); + if (addScene) this.scene.manager.add(key, scene, true, data); } cleanUp() { diff --git a/client/src/scenes/home.navigation.js b/client/src/scenes/home.navigation.js new file mode 100644 index 00000000..c1c0e547 --- /dev/null +++ b/client/src/scenes/home.navigation.js @@ -0,0 +1,52 @@ +const Phaser = require('phaser'); + +const { TEXT, POSITIONS: { NAVIGATION } } = require('./constants'); + +const X = NAVIGATION.x(); +const Y = NAVIGATION.y(); +const WIDTH = NAVIGATION.width(); +const HEIGHT = NAVIGATION.height(); + +const BTN_WIDTH = Math.floor(WIDTH / 6); +const BTN_HEIGHT = Math.floor(HEIGHT / 3); + +class HomeNavigation extends Phaser.Scene { + constructor() { + super({ key: 'HomeNavigation' }); + } + + create() { + const ranks = this.add + .rectangle(X, Y, BTN_WIDTH, BTN_HEIGHT, 0x222222) + .setInteractive() + .setOrigin(0); + this.add + .text(ranks.getCenter().x, ranks.getCenter().y, 'Rankings', TEXT.HEADER) + .setOrigin(0.5, 0.5); + ranks.on('pointerdown', () => this.registry.set('homeRankings', true)); + + const news = this.add + .rectangle(X + BTN_WIDTH * 1.5, Y, BTN_WIDTH, BTN_HEIGHT, 0x222222) + .setInteractive() + .setOrigin(0); + this.add + .text(news.getCenter().x, news.getCenter().y, 'News', TEXT.HEADER) + .setOrigin(0.5, 0.5); + news.on('pointerdown', () => this.registry.set('homeNews', true)); + + const shop = this.add + .rectangle(X + BTN_WIDTH * 3, Y, BTN_WIDTH, BTN_HEIGHT, 0x222222) + .setInteractive() + .setOrigin(0); + this.add + .text(shop.getCenter().x, shop.getCenter().y, 'Shop', TEXT.HEADER) + .setOrigin(0.5, 0.5); + shop.on('pointerdown', () => this.registry.set('homeShop', true)); + } + + cleanUp() { + this.scene.remove(); + } +} + +module.exports = HomeNavigation; diff --git a/client/src/scenes/home.news.js b/client/src/scenes/home.news.js new file mode 100644 index 00000000..3ef298b7 --- /dev/null +++ b/client/src/scenes/home.news.js @@ -0,0 +1,24 @@ +const Phaser = require('phaser'); +const { POSITIONS: { MENU_MAIN }, TEXT } = require('./constants'); + +const X = MENU_MAIN.x(); +const Y = MENU_MAIN.y(); +const WIDTH = MENU_MAIN.width(); +const HEIGHT = MENU_MAIN.height(); + +class HomeNews extends Phaser.Scene { + constructor() { + super({ key: 'HomeNews' }); + } + + create() { + this.add.text(X, Y, 'News Scene', TEXT.HEADER); + this.add.text(X, Y + HEIGHT * 0.1, 'some other stuff here', TEXT.NORMAL); + } + + cleanUp() { + this.scene.remove(); + } +} + +module.exports = HomeNews; diff --git a/client/src/scenes/home.rankings.js b/client/src/scenes/home.rankings.js new file mode 100644 index 00000000..062ade85 --- /dev/null +++ b/client/src/scenes/home.rankings.js @@ -0,0 +1,24 @@ +const Phaser = require('phaser'); +const { POSITIONS: { MENU_MAIN }, TEXT } = require('./constants'); + +const X = MENU_MAIN.x(); +const Y = MENU_MAIN.y(); +const WIDTH = MENU_MAIN.width(); +const HEIGHT = MENU_MAIN.height(); + +class HomeRankings extends Phaser.Scene { + constructor() { + super({ key: 'HomeRankings' }); + } + + create() { + this.add.text(X, Y, 'Rankings Scene', TEXT.HEADER); + this.add.text(X, Y + HEIGHT * 0.1, 'some stuff here', TEXT.NORMAL); + } + + cleanUp() { + this.scene.remove(); + } +} + +module.exports = HomeRankings; diff --git a/client/src/scenes/home.shop.js b/client/src/scenes/home.shop.js new file mode 100644 index 00000000..d25319df --- /dev/null +++ b/client/src/scenes/home.shop.js @@ -0,0 +1,23 @@ +const Phaser = require('phaser'); +const { POSITIONS: { MENU_MAIN }, TEXT } = require('./constants'); + +const X = MENU_MAIN.x(); +const Y = MENU_MAIN.y(); +const HEIGHT = MENU_MAIN.height(); + +class HomeShop extends Phaser.Scene { + constructor() { + super({ key: 'HomeShop' }); + } + + create() { + this.add.text(X, Y, 'Shop Scene', TEXT.HEADER); + this.add.text(X, Y + HEIGHT * 0.1, 'rulul', TEXT.NORMAL); + } + + cleanUp() { + this.scene.remove(); + } +} + +module.exports = HomeShop; diff --git a/client/src/scenes/menu.js b/client/src/scenes/menu.js index cd74e9e4..3b8a6b48 100644 --- a/client/src/scenes/menu.js +++ b/client/src/scenes/menu.js @@ -75,7 +75,6 @@ class Menu extends Phaser.Scene { } 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 @@ -85,6 +84,8 @@ class Menu extends Phaser.Scene { FIXED_MENU_SCENES.forEach(removeScenes); MAIN_MENU_SCENES.forEach(removeScenes); this.registry.set('inMenu', false); + this.combinerItems = this.registry.set('combinerItems', null); + this.scene.remove(); } From b093374391f3742f048fd1cc489548f55de04ca8 Mon Sep 17 00:00:00 2001 From: Mashy Date: Tue, 26 Feb 2019 14:00:29 +1000 Subject: [PATCH 2/2] unlearn skills, just need rpc call --- client/src/scenes/statsheet.js | 63 ++++++++++++++++++++++++++++++---- 1 file changed, 57 insertions(+), 6 deletions(-) diff --git a/client/src/scenes/statsheet.js b/client/src/scenes/statsheet.js index 1e58097b..cf56d7b1 100644 --- a/client/src/scenes/statsheet.js +++ b/client/src/scenes/statsheet.js @@ -8,7 +8,34 @@ const WIDTH = MENU_MAIN.width(); const HEIGHT = MENU_MAIN.height(); const TEXT_MARGIN = 24; -const SKILL_WIDTH = Math.floor(WIDTH / 20); +const SKILL_WIDTH = Math.floor(WIDTH / 10); + + +class DeleteHitBox extends Phaser.GameObjects.Rectangle { + constructor(scene, x, y) { + super(scene, x, y, SKILL_WIDTH, SKILL_WIDTH, 0x222222); + this.setOrigin(0); + this.itemSelect = () => this.setFillStyle(0xff0000); + this.itemDeselect = () => this.setFillStyle(0x222222); + } +} + +const itemCheckHitbox = (scene, pointer) => { + const { list } = scene.scene.get('MenuCrypList').children; + const hitboxes = list.filter(c => c.cryp) + .concat(scene.children.list.filter(c => c instanceof DeleteHitBox)); + + let found; + for (let i = 0; i < hitboxes.length; i += 1) { + if (Phaser.Geom.Rectangle.ContainsPoint(hitboxes[i].getBounds(), pointer.position)) { + found = hitboxes[i]; + } else { + hitboxes[i].itemDeselect(); + } + } + + return found; +}; class StatSheet extends Phaser.Scene { constructor() { @@ -26,6 +53,11 @@ class StatSheet extends Phaser.Scene { create(cryp) { this.registry.events.on('changedata', this.updateData, this); this.cryp = cryp; + + const del = this.add.existing(new DeleteHitBox(this, X + WIDTH * 0.7, Y + HEIGHT * 0.6)); + this.add.text(del.getCenter().x, del.getCenter().y, 'Unlearn', TEXT.HEADER) + .setOrigin(0.5, 0.5); + this.add.text(X, Y, cryp.name, TEXT.HEADER); const crypStat = (stat, i) => { @@ -47,15 +79,34 @@ class StatSheet extends Phaser.Scene { CRYP_STATS.forEach(crypStat); this.add.text(X + WIDTH * 0.175, Y, 'Skills', TEXT.HEADER); const knownSkill = (skill, i) => { - const SKILL_X = X + WIDTH * 0.2 + WIDTH * 0.06 * i; + const SKILL_X = X + WIDTH * 0.21 + WIDTH * 0.125 * i; const SKILL_Y = Y + HEIGHT * 0.15; - const itemObj = new Item(this, skill.skill, i, SKILL_X, SKILL_Y, SKILL_WIDTH, SKILL_WIDTH); - itemObj.on('pointerdown', () => { - console.log(skill.skill); - }); + const itemObj = new Item(this, skill.skill, i, SKILL_X, SKILL_Y, SKILL_WIDTH, Math.floor(SKILL_WIDTH / 2)); + // itemObj.on('pointerdown', () => ); + this.input.setDraggable(itemObj); this.add.existing(itemObj); }; cryp.skills.forEach(knownSkill); + + this.input.on('drag', (pointer, item, dragX, dragY) => { + if (!(item instanceof Item)) return false; + item.setPosition(dragX, dragY); + const hitBox = itemCheckHitbox(this, pointer); + if (hitBox) hitBox.itemSelect(); + return true; + }); + + this.input.on('dragend', (pointer, item) => { + if (!(item instanceof Item)) return false; + item.setPosition(item.origX, item.origY); + const hitBox = itemCheckHitbox(this, pointer); + if (hitBox) { + hitBox.itemDeselect(); + // add socket function for unlearn here + console.log(`delete: ${item.item}`); + } + return true; + }); } displaySkillText(x, y, description, pointer) {