ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UI updates

Browse Source
This commit is contained in:
Mashy 2019-02-22 13:35:47 +10:00
parent caf827e42b
commit 29772ad3ae
6 changed files with 27 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/scenes/constants.js Normal file → Executable file
View File

@ -27,7 +27,7 @@ const menuNavigationY = () => Math.floor(CANVAS_HEIGHT * 0.7);
const menuMainWidth = () => Math.floor(CANVAS_WIDTH * 0.7); const menuMainWidth = () => Math.floor(CANVAS_WIDTH * 0.7);
const menuMainHeight = () => Math.floor(CANVAS_HEIGHT * 0.5); 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(); const menuMainY = () => headerHeight();

3
client/src/scenes/elements/item.js
View File

@ -16,7 +16,7 @@ function FindColour(item) {
} }
class Item extends Phaser.GameObjects.Container { 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); super(scene, x, y);
this.state = 'deselect'; this.state = 'deselect';
@ -42,7 +42,6 @@ class Item extends Phaser.GameObjects.Container {
this.setSize(width, height); this.setSize(width, height);
this.setInteractive(); this.setInteractive();
if (clickFn) this.on('pointerdown', clickFn);
} }
changeOrigin(x, y) { changeOrigin(x, y) {

7
client/src/scenes/item.info.js Normal file → Executable file
View File

@ -12,11 +12,8 @@ class ItemInfo extends Phaser.Scene {
} }
create(item) { create(item) {
this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT); this.add.text(X, Y, item, TEXT.HEADER);
// this.item = item; this.add.text(X, Y + HEIGHT * 0.1, 'descriptions go here', TEXT.NORMAL);
this.add.text(WIDTH / 10, 0, item, TEXT.HEADER);
this.add.text(WIDTH / 10, 50, 'descriptions go here', TEXT.NORMAL);
// this.addItemInfo(item);
} }
cleanUp() { cleanUp() {

9
client/src/scenes/item.list.js
View File

@ -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_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 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 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.input.setDraggable(itemBox);
this.add.existing(itemBox); this.add.existing(itemBox);
}); });
@ -201,7 +203,10 @@ class ItemList extends Phaser.Scene {
this.registry.set('itemInfo', item); this.registry.set('itemInfo', item);
ws.sendVboxAccept(vbox.instance, i); 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 // Restore previous combiner item slots

98
client/src/scenes/specsheet.js
View File

@ -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;

52
client/src/scenes/statsheet.js
View File

@ -8,37 +8,13 @@ const WIDTH = MENU_MAIN.width();
const HEIGHT = MENU_MAIN.height(); const HEIGHT = MENU_MAIN.height();
const TEXT_MARGIN = 24; const TEXT_MARGIN = 24;
const menuX = Math.floor(WIDTH / 10); const SKILL_WIDTH = Math.floor(WIDTH / 20);
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);
}
class StatSheet extends Phaser.Scene { class StatSheet extends Phaser.Scene {
constructor() { constructor() {
super({ key: 'StatSheet' }); 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) { updateData(parent, key, data) {
if (key === 'cryps') { 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 crypStat = (stat, i) => {
const STAT_X = X + WIDTH / 10; const STAT_X = X;
const STAT_Y = Y + (i + 1) * TEXT_MARGIN; const STAT_Y = Y + (i + 2) * TEXT_MARGIN;
this.add.text(STAT_X, STAT_Y, `${stat.stat}: ${stat.base}`, TEXT.NORMAL); 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); CRYP_STATS.forEach(crypStat);
} this.add.text(X + WIDTH * 0.175, Y, 'Skills', TEXT.HEADER);
addKnownSkills(cryp) {
this.add.text(X + menuX, Y + Y_SKILLS, 'Skills', TEXT.HEADER);
const knownSkill = (skill, i) => { const knownSkill = (skill, i) => {
const SKILL_X = X + menuX + 250 + 100 * i; const SKILL_X = X + WIDTH * 0.2 + WIDTH * 0.06 * i;
const SKILL_Y = Y + 25; const SKILL_Y = Y + HEIGHT * 0.15;
const clickFn = console.log('grep'); const itemObj = new Item(this, skill.skill, i, SKILL_X, SKILL_Y, SKILL_WIDTH, SKILL_WIDTH);
this.add.existing(new Item(this, skill.skill, i, SKILL_X, SKILL_Y, 75, 75, clickFn)); itemObj.on('pointerdown', () => {
console.log(skill.skill);
});
this.add.existing(itemObj);
}; };
cryp.skills.forEach(knownSkill); cryp.skills.forEach(knownSkill);
} }