From 1c1ff0cc0d7e009df709ffcfcb8962a5ba6e2033 Mon Sep 17 00:00:00 2001 From: Mashy Date: Mon, 18 Feb 2019 14:16:23 +1000 Subject: [PATCH] Inventory scene now uses vbox --- client/src/scenes/constants.js | 4 +- client/src/scenes/elements/item.js | 4 +- client/src/scenes/item.list.js | 71 +++++++++++++++++++++++------- client/src/scenes/menu.js | 3 -- client/src/scenes/vbox.js | 47 -------------------- 5 files changed, 59 insertions(+), 70 deletions(-) delete mode 100644 client/src/scenes/vbox.js diff --git a/client/src/scenes/constants.js b/client/src/scenes/constants.js index eca2225a..e83fb634 100644 --- a/client/src/scenes/constants.js +++ b/client/src/scenes/constants.js @@ -17,8 +17,8 @@ const itemListWidth = () => Math.floor(CANVAS_WIDTH * 0.5); const itemListHeight = () => Math.floor(CANVAS_HEIGHT * 0.5); const itemListX = () => 0; const itemListY = () => Math.floor(CANVAS_HEIGHT * 0.5); -const itemBlockWidth = () => Math.floor(itemListWidth() * 0.1); -const itemBlockHeight = () => Math.floor(itemListHeight() * 0.16); +const itemBlockWidth = () => Math.floor(itemListWidth() * 0.075); +const itemBlockHeight = () => Math.floor(itemListHeight() * 0.12); const menuNavigationWidth = () => Math.floor(CANVAS_WIDTH * 0.5); const menuNavigationHeight = () => Math.floor(CANVAS_HEIGHT * 0.3); diff --git a/client/src/scenes/elements/item.js b/client/src/scenes/elements/item.js index 9febb941..092a5508 100644 --- a/client/src/scenes/elements/item.js +++ b/client/src/scenes/elements/item.js @@ -6,7 +6,7 @@ const { } = require('../constants'); class Item extends Phaser.GameObjects.Container { - constructor(scene, action, count, x, y, width, height) { + constructor(scene, action, x, y, width, height) { super(scene, x, y); this.state = 'deselect'; @@ -21,7 +21,7 @@ class Item extends Phaser.GameObjects.Container { this.text = scene.add // .text(0, 0, `${action} x${count}`, TEXT.NORMAL) - .text(0, 0, `x${count}`, TEXT.NORMAL) + .text(0, 0, `${action}`, TEXT.NORMAL) .setOrigin(0.5, 0.5); this.add(this.box); diff --git a/client/src/scenes/item.list.js b/client/src/scenes/item.list.js index 2b4ee19a..5eb6d556 100644 --- a/client/src/scenes/item.list.js +++ b/client/src/scenes/item.list.js @@ -16,15 +16,34 @@ const ITEM_WIDTH = ITEM_LIST.itemWidth(); const ITEM_HEIGHT = ITEM_LIST.itemHeight(); const INV_X = X + ITEM_WIDTH * 0.325; -const INV_Y = Y + ITEM_HEIGHT * 1.5; +const INV_Y = Y + ITEM_HEIGHT; const INV_ROWS = 3; -const INV_COLUMNS = 5; +const INV_COLUMNS = 3; const COMB_X = INV_X + ITEM_WIDTH * 6.75; const COMB_Y = INV_Y; const COMB_ROWS = 2; const COMB_COLUMNS = 2; +const BOX_X = X + ITEM_WIDTH * 2; +const BOX_Y = Y + ITEM_HEIGHT * 5; +const BOX_ROWS = 3; +const BOX_COLUMNS = 6; + + +const drawVbox = (graphics) => { + const boxDrawX = BOX_X - ITEM_WIDTH * 0.05; + const boxDrawY = BOX_Y - ITEM_HEIGHT * 0.05; + for (let i = 0; i <= BOX_COLUMNS; i += 1) { + const x = boxDrawX + i * ITEM_WIDTH * 1.1; + graphics.lineBetween(x, boxDrawY, x, boxDrawY + ITEM_HEIGHT * 1.1 * BOX_ROWS); + } + for (let i = 0; i <= BOX_ROWS; i += 1) { + const y = boxDrawY + i * ITEM_HEIGHT * 1.1; + graphics.lineBetween(boxDrawX, y, boxDrawX + ITEM_WIDTH * 1.1 * BOX_COLUMNS, y); + } +}; + const drawInventory = (graphics) => { const invDrawX = INV_X - ITEM_WIDTH * 0.05; const invDrawY = INV_Y - ITEM_HEIGHT * 0.05; @@ -84,48 +103,68 @@ class ItemList extends Phaser.Scene { } updateData(parent, key, data) { - if (key === 'itemList') { + if (key === 'vbox') { this.registry.events.off('changedata', this.updateData, this); this.registry.events.off('setdata', this.updateData, this); this.scene.restart(data); } } - create(itemList) { - if (!itemList) return false; + create(vbox) { this.registry.events.on('changedata', this.updateData, this); this.registry.events.on('setdata', this.updateData, this); - this.addStatic(); - this.addItems(itemList); - this.addClickHandlers(itemList); + if (!vbox.free) return false; + this.addStatic(vbox); + this.addItems(vbox); + this.addClickHandlers(vbox); return this; } - addStatic() { + addStatic(vbox) { const graphics = this.add.graphics(); graphics.lineStyle(5, 0x808080, 1.0); drawCombiner(graphics); drawInventory(graphics); - this.add.text(X + WIDTH / 4, Y + HEIGHT / 8, 'Inventory', TEXT.HEADER); - this.add.text(X + WIDTH * 3 / 4, Y + HEIGHT / 8, 'Combiner', TEXT.HEADER); + drawVbox(graphics); + this.add.text(X + WIDTH / 10, Y, 'Inventory', TEXT.HEADER); + this.add.text(X + WIDTH * 11 / 20, Y, 'Combiner', TEXT.HEADER); + this.add.text(X + WIDTH * 7 / 20, Y + HEIGHT / 2, 'Varibox', TEXT.HEADER); + + const reroll = this.add.rectangle(0, Y + HEIGHT * 2 / 3, ITEM_WIDTH * 1.5, ITEM_HEIGHT * 1.5, 0x222222) + .setInteractive() + .setOrigin(0) + .on('pointerdown', () => this.registry.get('ws').sendVboxDiscard(vbox.game)); + this.add.text(reroll.getCenter().x, reroll.getCenter().y, 'Reroll', TEXT.HEADER) + .setOrigin(0.5, 0.5); + } - addItems(itemList) { - const actions = countBy(itemList, i => i.action); - + addItems(vbox) { for (let i = 0; i < (COMB_COLUMNS * COMB_ROWS); i += 1) { const ITEM_X = ITEM_WIDTH * 1.1 * (i % COMB_COLUMNS) + INV_X + ITEM_WIDTH * 6.75; const ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / COMB_COLUMNS) + INV_Y; this.add.existing(new CombinerHitBox(this, ITEM_X, ITEM_Y, i)); } - Object.keys(actions).forEach((action, i) => { + vbox.bound.forEach((action, 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 itemBox = new Item(this, action, actions[action], ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT); + const itemBox = new Item(this, action, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT); this.input.setDraggable(itemBox); this.add.existing(itemBox); }); + + vbox.free.forEach((action, i) => { + const ITEM_X = ITEM_WIDTH * 1.1 * (i % BOX_COLUMNS) + BOX_X + ITEM_WIDTH * 0.5; + const ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / BOX_COLUMNS) + BOX_Y + ITEM_HEIGHT * 0.5; + const itemBox = new Item(this, action, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT); + itemBox + .setInteractive() + .on('pointerdown', () => { + this.registry.get('ws').sendVboxAccept(vbox.game, i); + }); + this.add.existing(itemBox); + }); } addClickHandlers(itemList) { diff --git a/client/src/scenes/menu.js b/client/src/scenes/menu.js index cdaead6a..77a1c53b 100644 --- a/client/src/scenes/menu.js +++ b/client/src/scenes/menu.js @@ -10,7 +10,6 @@ const GameList = require('./game.list'); const StatSheet = require('./statsheet'); const SpecSheet = require('./specsheet'); const ItemInfo = require('./item.info'); -const Vbox = require('./vbox'); const FIXED_MENU_SCENES = [ 'MenuCrypList', @@ -24,7 +23,6 @@ const MAIN_MENU_SCENES = [ 'StatSheet', 'SpecSheet', 'ItemInfo', - 'Vbox', ]; const NULL_UUID = '00000000-0000-0000-0000-000000000000'; @@ -59,7 +57,6 @@ class Menu extends Phaser.Scene { case 'crypStats': return this.newMainScene('StatSheet', StatSheet, data); case 'crypSpec': return this.newMainScene('SpecSheet', SpecSheet, data); case 'itemInfo': return this.newMainScene('ItemInfo', ItemInfo, data); - case 'vbox': return this.newMainScene('Vbox', Vbox, data); default: return false; } } diff --git a/client/src/scenes/vbox.js b/client/src/scenes/vbox.js deleted file mode 100644 index 048898c8..00000000 --- a/client/src/scenes/vbox.js +++ /dev/null @@ -1,47 +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(); - -class Vbox extends Phaser.Scene { - constructor() { - super({ key: 'Vbox' }); - } - - create(vbox) { - this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT); - this.add.text(WIDTH / 10, 0, 'free', TEXT.HEADER); - this.add.text(WIDTH / 5, 0, 'bound', TEXT.HEADER); - - const drawFree = (item, i) => { - this.add - .text(WIDTH / 10, 25 * (i + 2), item, TEXT.NORMAL) - .setInteractive() - .on('pointerdown', () => { - this.registry.get('ws').sendVboxAccept(vbox.game, i); - console.log(item); - }); - }; - - const drawBound = (item, i) => { - this.add - .text(WIDTH / 5, 25 * (i + 2), item, TEXT.NORMAL) - .setInteractive() - .on('pointerdown', () => { - // this.registry.get('ws').sendVboxAccept(vbox.game, i); - console.log(item); - }); - }; - vbox.free.forEach(drawFree); - vbox.bound.forEach(drawBound); - } - - cleanUp() { - this.scene.remove(); - } -} - -module.exports = Vbox;