diff --git a/client/src/scenes/item.info.js b/client/src/scenes/item.info.js index 52195da8..a72d3492 100644 --- a/client/src/scenes/item.info.js +++ b/client/src/scenes/item.info.js @@ -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() { diff --git a/client/src/scenes/item.list.js b/client/src/scenes/item.list.js index da712503..7444cebf 100644 --- a/client/src/scenes/item.list.js +++ b/client/src/scenes/item.list.js @@ -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); diff --git a/client/src/scenes/menu.cryps.list.js b/client/src/scenes/menu.cryps.list.js index 5a98367a..a6e3c1ea 100644 --- a/client/src/scenes/menu.cryps.list.js +++ b/client/src/scenes/menu.cryps.list.js @@ -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);