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

Added colours and specs to cryp avatar, click skills and dialog to unequip

Browse Source
This commit is contained in:
Mashy 2019-03-18 12:50:03 +10:00
parent 0d37444b73
commit d22ea2a25d
3 changed files with 62 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
client/src/scenes/item.info.js
View File

@ -6,14 +6,34 @@ const Y = MENU_MAIN.y();
const WIDTH = MENU_MAIN.width();
const HEIGHT = MENU_MAIN.height();
const UNEQUIP_Y = Y + Math.floor(HEIGHT * 0.5);
const UNEQUIP_WIDTH = Math.floor(WIDTH * 0.4);
const UNEQUIP_HEIGHT = Math.floor(HEIGHT * 0.15);
class ItemInfo extends Phaser.Scene {
constructor() {
super({ key: 'ItemInfo' });
}
create(item) {
create(props) {
const { item, cryp } = props;
if (!item) return false;
this.add.text(X, Y, item, TEXT.HEADER);
this.add.text(X, Y + HEIGHT * 0.1, 'descriptions go here', TEXT.NORMAL);
if (!cryp) return true;
const ws = this.registry.get('ws');
const { vbox } = this.registry.get('player');
const unEquip = this.add.rectangle(X, UNEQUIP_Y, UNEQUIP_WIDTH, UNEQUIP_HEIGHT, 0x222222)
.setOrigin(0, 0)
.setInteractive()
.on('pointerdown', () => {
ws.sendVboxUnequip(vbox.instance, cryp.id, item);
this.registry.set('crypStats', cryp);
});
this.add.text(unEquip.getCenter().x, unEquip.getCenter().y, 'unequip', TEXT.HEADER)
.setOrigin(0.5, 0.5);
return true;
}
cleanUp() {

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

@ -191,7 +191,7 @@ class ItemList extends Phaser.Scene {
vbox.bound.forEach((item, i) => {
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 clickFn = () => this.registry.set('itemInfo', { item });
const itemBox = new Item(this, item, i, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT);
itemBox.on('pointerdown', clickFn);
@ -204,7 +204,7 @@ class ItemList extends Phaser.Scene {
const ITEM_X = ITEM_WIDTH * 1.1 * i + BOX_X + ITEM_WIDTH * 0.5;
const ITEM_Y = ITEM_HEIGHT * 1.1 * j + BOX_Y + ITEM_HEIGHT * 0.5;
const clickFn = () => {
this.registry.set('itemInfo', item);
this.registry.set('itemInfo', { item });
ws.sendVboxAccept(vbox.instance, i, j);
};
const itemBox = new Item(this, item, i, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT);

60
client/src/scenes/menu.cryps.list.js
View File

@ -5,7 +5,7 @@ const genAvatar = require('./avatar');
const Item = require('./elements/item');
const BOX_WIDTH = Math.floor(CRYP_LIST.width());
const BOX_HEIGHT = Math.floor(CRYP_LIST.height() / 3.5);
const BOX_HEIGHT = Math.floor(CRYP_LIST.height() / 3.34);
const TEXT_MARGIN = 24;
@ -21,7 +21,6 @@ class MenuCrypList extends Phaser.Scene {
}
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 player = this.registry.get('player');
@ -51,7 +50,7 @@ class MenuCrypList extends Phaser.Scene {
this.registry.set('crypStats', cryp);
};
// Cryp avatar and interaction box
// Cryp interaction box for adding items
const crypInteract = this.add
.rectangle(ROW_X, ROW_Y, BOX_WIDTH, BOX_HEIGHT, FILL, ACTIVE_FILL)
.setInteractive()
@ -65,43 +64,62 @@ class MenuCrypList extends Phaser.Scene {
};
crypInteract.cryp = cryp;
const crypInfoText = this.add.text(crypInteract.x + crypInteract.width / 5, crypInteract.y + TEXT_MARGIN, cryp.name, TEXT.HEADER)
.setOrigin(0.5, 0.5);
// Cryp Avatar
const { name } = cryp;
const crypImage = this.add.image(
crypInteract.getCenter().x - crypInteract.width / 4,
crypInteract.getCenter().y,
'aztec',
genAvatar(cryp.name)
genAvatar(name)
);
this.crypGroup.addMultiple([crypInteract, crypImage, crypInfoText]);
const crypGems = (stat, j) => {
// Add text info
const yCrypTextAlgin = Math.floor(crypInteract.y + TEXT_MARGIN / 2);
const xCrypNameAlign = Math.floor(crypInteract.x + crypInteract.width * 1 / 10);
const crypInfoText = this.add.text(xCrypNameAlign, yCrypTextAlgin, name, TEXT.HEADER);
const colourText = (c, j) => {
// Placeholder for when gems are implemented
const gemText = this.add
.text(crypInteract.getCenter().x, crypInteract.y + TEXT_MARGIN * (2 + j), `${stat}: 0`, TEXT.NORMAL)
.setOrigin(0.5, 0.5);
const gemText = this.add.text(crypInteract.x + crypInteract.width * (j + 3) / 6, yCrypTextAlgin, `${c[0]} - ${c[1]}`, TEXT.HEADER);
this.crypGroup.add(gemText);
};
/* const CRYP_GEMS = [
'Red',
'Green',
'Blue',
const { red, green, blue } = cryp.colours;
const CRYP_COLOURS = [
['R', red],
['G', green],
['B', blue],
];
CRYP_GEMS.forEach(crypGems);
*/
CRYP_COLOURS.forEach(colourText);
this.crypGroup.addMultiple([crypInteract, crypImage, crypInfoText]);
const crypSkill = (stat, j) => {
const SKILL_WIDTH = Math.floor(BOX_WIDTH / 2);
const SKILL_HEIGHT = Math.floor(BOX_HEIGHT / 6);
const SKILL_HEIGHT = Math.floor(BOX_HEIGHT / 8);
const SKILL_X = crypInteract.getCenter().x + crypInteract.width / 4;
const SKILL_Y = crypInteract.y + SKILL_HEIGHT * 1.1 * (j + 0.6);
const SKILL_Y = crypInteract.y + SKILL_HEIGHT * 1.15 * (j + 1.6);
const itemObj = new Item(this, stat.skill, j, SKILL_X, SKILL_Y, SKILL_WIDTH, SKILL_HEIGHT);
this.add.existing(itemObj);
itemObj.setInteractive();
const itemInfo = { item: stat.skill, cryp };
itemObj.on('pointerdown', () => this.registry.set('itemInfo', itemInfo));
this.crypGroup.add(itemObj);
};
cryp.skills.forEach(crypSkill);
const crypSpec = (spec, j) => {
const SKILL_WIDTH = Math.floor(BOX_WIDTH * 0.15);
const SKILL_HEIGHT = Math.floor(BOX_HEIGHT * 0.2);
const SKILL_X = Math.floor(crypInteract.x + BOX_WIDTH * (0.6 + j) * 0.175);
const SKILL_Y = Math.floor(crypInteract.y + BOX_HEIGHT * 0.875);
const itemObj = new Item(this, spec, j, SKILL_X, SKILL_Y, SKILL_WIDTH, SKILL_HEIGHT);
itemObj.setInteractive();
const itemInfo = { item: spec, cryp };
itemObj.on('pointerdown', () => this.registry.set('itemInfo', itemInfo));
this.add.existing(itemObj);
this.crypGroup.add(itemObj);
};
cryp.specs.forEach(crypSpec);
};
cryps.forEach(addCryp);