From 29772ad3aed8716704fd59a1bdec23b23f6d6106 Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 22 Feb 2019 13:35:47 +1000 Subject: [PATCH 1/2] UI updates --- client/src/scenes/constants.js | 2 +- client/src/scenes/elements/item.js | 3 +- client/src/scenes/item.info.js | 7 +-- client/src/scenes/item.list.js | 9 ++- client/src/scenes/specsheet.js | 98 ------------------------------ client/src/scenes/statsheet.js | 52 +++++----------- 6 files changed, 27 insertions(+), 144 deletions(-) mode change 100644 => 100755 client/src/scenes/constants.js mode change 100644 => 100755 client/src/scenes/item.info.js delete mode 100644 client/src/scenes/specsheet.js diff --git a/client/src/scenes/constants.js b/client/src/scenes/constants.js old mode 100644 new mode 100755 index 5d11ba70..d879c23c --- a/client/src/scenes/constants.js +++ b/client/src/scenes/constants.js @@ -27,7 +27,7 @@ const menuNavigationY = () => Math.floor(CANVAS_HEIGHT * 0.7); const menuMainWidth = () => Math.floor(CANVAS_WIDTH * 0.7); const menuMainHeight = () => Math.floor(CANVAS_HEIGHT * 0.5); -const menuMainX = () => Math.floor(CANVAS_WIDTH * 0.3); +const menuMainX = () => Math.floor(CANVAS_WIDTH * 0.4); const menuMainY = () => headerHeight(); diff --git a/client/src/scenes/elements/item.js b/client/src/scenes/elements/item.js index 35ca1e58..4a4abee1 100755 --- a/client/src/scenes/elements/item.js +++ b/client/src/scenes/elements/item.js @@ -16,7 +16,7 @@ function FindColour(item) { } class Item extends Phaser.GameObjects.Container { - constructor(scene, item, index, x, y, width, height, clickFn) { + constructor(scene, item, index, x, y, width, height) { super(scene, x, y); this.state = 'deselect'; @@ -42,7 +42,6 @@ class Item extends Phaser.GameObjects.Container { this.setSize(width, height); this.setInteractive(); - if (clickFn) this.on('pointerdown', clickFn); } changeOrigin(x, y) { diff --git a/client/src/scenes/item.info.js b/client/src/scenes/item.info.js old mode 100644 new mode 100755 index d8519ca4..52195da8 --- a/client/src/scenes/item.info.js +++ b/client/src/scenes/item.info.js @@ -12,11 +12,8 @@ class ItemInfo extends Phaser.Scene { } create(item) { - this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT); - // this.item = item; - this.add.text(WIDTH / 10, 0, item, TEXT.HEADER); - this.add.text(WIDTH / 10, 50, 'descriptions go here', TEXT.NORMAL); - // this.addItemInfo(item); + this.add.text(X, Y, item, TEXT.HEADER); + this.add.text(X, Y + HEIGHT * 0.1, 'descriptions go here', TEXT.NORMAL); } cleanUp() { diff --git a/client/src/scenes/item.list.js b/client/src/scenes/item.list.js index fbc1022c..bde7e0b2 100755 --- a/client/src/scenes/item.list.js +++ b/client/src/scenes/item.list.js @@ -189,7 +189,9 @@ class ItemList extends Phaser.Scene { const ITEM_X = ITEM_WIDTH * 1.1 * (i % INV_COLUMNS) + INV_X + ITEM_WIDTH * 0.5; const ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / INV_COLUMNS) + INV_Y + ITEM_HEIGHT * 0.5; const clickFn = () => this.registry.set('itemInfo', item); - const itemBox = new Item(this, item, i, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT, clickFn); + const itemBox = new Item(this, item, i, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT); + itemBox.on('pointerdown', clickFn); + this.input.setDraggable(itemBox); this.add.existing(itemBox); }); @@ -201,7 +203,10 @@ class ItemList extends Phaser.Scene { this.registry.set('itemInfo', item); ws.sendVboxAccept(vbox.instance, i); }; - this.add.existing(new Item(this, item, i, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT, clickFn)); + const itemBox = new Item(this, item, i, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT); + itemBox.on('pointerdown', clickFn); + + this.add.existing(itemBox); }); // Restore previous combiner item slots diff --git a/client/src/scenes/specsheet.js b/client/src/scenes/specsheet.js deleted file mode 100644 index c2e86c10..00000000 --- a/client/src/scenes/specsheet.js +++ /dev/null @@ -1,98 +0,0 @@ -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(); -const TEXT_MARGIN = 24; - -const menuX = WIDTH / 10; -const menuY = HEIGHT * 0.8; -const menuWidth = WIDTH / 10; -const menuHeight = HEIGHT * 0.2; - -const X_MARGIN = WIDTH * 1 / 4; - -function addButton(scene, x, y, cback, name) { - const button = scene.add - .rectangle(x, y, menuWidth, menuHeight, 0x222222) - .setInteractive() - .setOrigin(0) - .on('pointerdown', cback); - scene.add.text(button.getCenter().x, button.getCenter().y, name, TEXT.HEADER) - .setOrigin(0.5, 0.5); -} - -class StatSheet extends Phaser.Scene { - constructor() { - super({ key: 'SpecSheet' }); - } - - create(cryp) { - this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT); - this.registry.events.on('changedata', this.updateData, this); - this.cryp = cryp; - this.forget = false; - this.add.text(WIDTH / 10, 0, cryp.name, TEXT.HEADER); - this.addSpecs(cryp); - addButton(this, menuX, menuY, () => this.registry.set('crypStats', cryp), 'Stats'); - } - - updateData(parent, key, data) { - if (key === 'cryps') { - const cryp = data.find(c => c.id === this.cryp.id); - this.addSpecs(cryp); - if (this.hoverText) this.hoverText.destroy(); - } - } - - addSpecs(cryp) { - if (this.specs) this.specs.destroy(true); - this.specs = this.add.group(); - const listSpecs = (list, specInfo, i) => { - const SPEC_X = X_MARGIN * list; - const SPEC_Y = (i + 1) * TEXT_MARGIN; - - this.specs.add(this.add.text(SPEC_X, SPEC_Y, specInfo.spec, TEXT.NORMAL) - .setInteractive() - .on('pointerdown', () => { - this.registry.get('ws').sendSpecForget(cryp.id, specInfo); - }) - .on('pointerover', (pointer) => { - if (!this.forget) { - this.displayText(SPEC_X, SPEC_Y, `Affects ${specInfo.affects} - level ${specInfo.level}`, pointer); - } - }) - .on('pointerout', () => { - if (this.hoverText) this.hoverText.destroy(); - })); - }; - - this.specs.add(this.add.text(X_MARGIN, 0, 'Common', TEXT.HEADER)); - cryp.specs.common.forEach((specInfo, i) => listSpecs(1, specInfo, i)); - - this.specs.add(this.add.text(X_MARGIN * 2, 0, 'Uncommon', TEXT.HEADER)); - cryp.specs.uncommon.forEach((specInfo, i) => listSpecs(2, specInfo, i)); - - this.specs.add(this.add.text(X_MARGIN * 3, 0, 'Rare', TEXT.HEADER)); - cryp.specs.rare.forEach((specInfo, i) => listSpecs(3, specInfo, i)); - } - - displayText(x, y, description, pointer) { - if (this.hoverText) this.hoverText.destroy(); - this.hoverText = this.add.text(x, y, description, TEXT.HOVER).setPadding(32); - this.hoverText.setAlpha(0.8); - this.hoverText.setOrigin(pointer.x >= WIDTH * 0.65 ? 0 : 1, - pointer.y >= HEIGHT * 0.25 ? 1 : 0); - this.hoverText.setWordWrapWidth(450); - } - - - cleanUp() { - this.registry.events.off('changedata', this.updateData, this); - this.scene.remove(); - } -} - -module.exports = StatSheet; diff --git a/client/src/scenes/statsheet.js b/client/src/scenes/statsheet.js index b009a5fc..1e58097b 100755 --- a/client/src/scenes/statsheet.js +++ b/client/src/scenes/statsheet.js @@ -8,37 +8,13 @@ const WIDTH = MENU_MAIN.width(); const HEIGHT = MENU_MAIN.height(); const TEXT_MARGIN = 24; -const menuX = Math.floor(WIDTH / 10); -const menuY = Math.floor(HEIGHT * 0.8); -const menuWidth = Math.floor(WIDTH / 10); -const menuHeight = Math.floor(HEIGHT * 0.2); - -const Y_SKILLS = Math.floor(HEIGHT * 0.5); - - -function addButton(scene, x, y, cback, name) { - const button = scene.add - .rectangle(x, y, menuWidth, menuHeight, 0x222222) - .setInteractive() - .setOrigin(0) - .on('pointerdown', cback); - scene.add.text(button.getCenter().x, button.getCenter().y, name, TEXT.HEADER) - .setOrigin(0.5, 0.5); -} +const SKILL_WIDTH = Math.floor(WIDTH / 20); class StatSheet extends Phaser.Scene { constructor() { super({ key: 'StatSheet' }); } - create(cryp) { - this.registry.events.on('changedata', this.updateData, this); - this.cryp = cryp; - this.add.text(X + WIDTH / 10, Y, cryp.name, TEXT.HEADER); - this.addStats(cryp); - this.addKnownSkills(cryp); - addButton(this, X + menuX, Y + menuY, () => this.registry.set('crypSpec', cryp), 'Spec'); - } updateData(parent, key, data) { if (key === 'cryps') { @@ -47,10 +23,14 @@ class StatSheet extends Phaser.Scene { } } - addStats(cryp) { + create(cryp) { + this.registry.events.on('changedata', this.updateData, this); + this.cryp = cryp; + this.add.text(X, Y, cryp.name, TEXT.HEADER); + const crypStat = (stat, i) => { - const STAT_X = X + WIDTH / 10; - const STAT_Y = Y + (i + 1) * TEXT_MARGIN; + const STAT_X = X; + const STAT_Y = Y + (i + 2) * TEXT_MARGIN; this.add.text(STAT_X, STAT_Y, `${stat.stat}: ${stat.base}`, TEXT.NORMAL); }; @@ -65,15 +45,15 @@ class StatSheet extends Phaser.Scene { ]; CRYP_STATS.forEach(crypStat); - } - - addKnownSkills(cryp) { - this.add.text(X + menuX, Y + Y_SKILLS, 'Skills', TEXT.HEADER); + this.add.text(X + WIDTH * 0.175, Y, 'Skills', TEXT.HEADER); const knownSkill = (skill, i) => { - const SKILL_X = X + menuX + 250 + 100 * i; - const SKILL_Y = Y + 25; - const clickFn = console.log('grep'); - this.add.existing(new Item(this, skill.skill, i, SKILL_X, SKILL_Y, 75, 75, clickFn)); + const SKILL_X = X + WIDTH * 0.2 + WIDTH * 0.06 * 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); + }); + this.add.existing(itemObj); }; cryp.skills.forEach(knownSkill); } From 51358824233935f0df1397669111919b9a99c72f Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 22 Feb 2019 14:07:32 +1000 Subject: [PATCH 2/2] Bug fixes --- client/src/scenes/constants.js | 6 +++--- client/src/scenes/cryps.js | 2 +- client/src/scenes/menu.js | 3 --- 3 files changed, 4 insertions(+), 7 deletions(-) mode change 100644 => 100755 client/src/scenes/cryps.js mode change 100644 => 100755 client/src/scenes/menu.js diff --git a/client/src/scenes/constants.js b/client/src/scenes/constants.js index a859c7bd..dcd0daf2 100755 --- a/client/src/scenes/constants.js +++ b/client/src/scenes/constants.js @@ -25,9 +25,9 @@ const menuNavigationHeight = () => Math.floor(CANVAS_HEIGHT() * 0.3); const menuNavigationX = () => Math.floor(CANVAS_WIDTH() * 0.5); const menuNavigationY = () => Math.floor(CANVAS_HEIGHT() * 0.7); -const menuMainWidth = () => Math.floor(CANVAS_WIDTH * 0.7); -const menuMainHeight = () => Math.floor(CANVAS_HEIGHT * 0.5); -const menuMainX = () => Math.floor(CANVAS_WIDTH * 0.4); +const menuMainWidth = () => Math.floor(CANVAS_WIDTH() * 0.7); +const menuMainHeight = () => Math.floor(CANVAS_HEIGHT() * 0.5); +const menuMainX = () => Math.floor(CANVAS_WIDTH() * 0.4); const menuMainY = () => headerHeight(); diff --git a/client/src/scenes/cryps.js b/client/src/scenes/cryps.js old mode 100644 new mode 100755 index e657dcb3..5ba5267b --- a/client/src/scenes/cryps.js +++ b/client/src/scenes/cryps.js @@ -11,7 +11,7 @@ function renderCryps() { // backgroundColor: '#181818', resolution: window.devicePixelRatio, scale: { - mode: Phaser.Scale.RESIZE, + mode: Phaser.Scale.FIT, width: Math.floor(window.innerHeight * 1.6), height: Math.floor(window.innerHeight), max: { diff --git a/client/src/scenes/menu.js b/client/src/scenes/menu.js old mode 100644 new mode 100755 index 74dd42f8..2743ead4 --- a/client/src/scenes/menu.js +++ b/client/src/scenes/menu.js @@ -8,7 +8,6 @@ const ItemList = require('./item.list'); const Zones = require('./zones'); const GameList = require('./game.list'); const StatSheet = require('./statsheet'); -const SpecSheet = require('./specsheet'); const ItemInfo = require('./item.info'); const FIXED_MENU_SCENES = [ @@ -21,7 +20,6 @@ const MAIN_MENU_SCENES = [ 'Zones', 'GameList', 'StatSheet', - 'SpecSheet', 'ItemInfo', ]; @@ -55,7 +53,6 @@ class Menu extends Phaser.Scene { case 'zone': return this.newMainScene('Zones', Zones, data); case 'gameList': return this.newMainScene('GameList', GameList, data); case 'crypStats': return this.newMainScene('StatSheet', StatSheet, data); - case 'crypSpec': return this.newMainScene('SpecSheet', SpecSheet, data); case 'itemInfo': return this.newMainScene('ItemInfo', ItemInfo, data); default: return false; }