diff --git a/client/src/scenes/elements/item.js b/client/src/scenes/elements/item.js old mode 100755 new mode 100644 diff --git a/client/src/scenes/item.list.js b/client/src/scenes/item.list.js old mode 100755 new mode 100644 index 5d404b07..2b4ee19a --- a/client/src/scenes/item.list.js +++ b/client/src/scenes/item.list.js @@ -17,33 +17,37 @@ const ITEM_HEIGHT = ITEM_LIST.itemHeight(); const INV_X = X + ITEM_WIDTH * 0.325; const INV_Y = Y + ITEM_HEIGHT * 1.5; +const INV_ROWS = 3; +const INV_COLUMNS = 5; -const ROWS = 3; -const COLUMNS = 5; +const COMB_X = INV_X + ITEM_WIDTH * 6.75; +const COMB_Y = INV_Y; +const COMB_ROWS = 2; +const COMB_COLUMNS = 2; const drawInventory = (graphics) => { const invDrawX = INV_X - ITEM_WIDTH * 0.05; const invDrawY = INV_Y - ITEM_HEIGHT * 0.05; - for (let i = 0; i <= COLUMNS; i += 1) { + for (let i = 0; i <= INV_COLUMNS; i += 1) { const x = invDrawX + i * ITEM_WIDTH * 1.1; - graphics.lineBetween(x, invDrawY, x, invDrawY + ITEM_HEIGHT * 1.1 * ROWS); + graphics.lineBetween(x, invDrawY, x, invDrawY + ITEM_HEIGHT * 1.1 * INV_ROWS); } - for (let i = 0; i <= ROWS; i += 1) { + for (let i = 0; i <= INV_ROWS; i += 1) { const y = invDrawY + i * ITEM_HEIGHT * 1.1; - graphics.lineBetween(invDrawX, y, invDrawX + ITEM_WIDTH * 1.1 * COLUMNS, y); + graphics.lineBetween(invDrawX, y, invDrawX + ITEM_WIDTH * 1.1 * INV_COLUMNS, y); } }; const drawCombiner = (graphics) => { - const combDrawX = INV_X - ITEM_WIDTH * 0.05 + ITEM_WIDTH * 6.75; - const combDrawY = INV_Y - ITEM_HEIGHT * 0.05; - for (let i = 0; i <= 2; i += 1) { + const combDrawX = COMB_X - ITEM_WIDTH * 0.05; + const combDrawY = COMB_Y - ITEM_HEIGHT * 0.05; + for (let i = 0; i <= COMB_COLUMNS; i += 1) { const x = combDrawX + i * ITEM_WIDTH * 1.1; - graphics.lineBetween(x, combDrawY, x, combDrawY + ITEM_HEIGHT * 1.1 * 2); + graphics.lineBetween(x, combDrawY, x, combDrawY + ITEM_HEIGHT * 1.1 * COMB_ROWS); } - for (let i = 0; i <= 2; i += 1) { + for (let i = 0; i <= COMB_ROWS; i += 1) { const y = combDrawY + i * ITEM_HEIGHT * 1.1; - graphics.lineBetween(combDrawX, y, combDrawX + ITEM_WIDTH * 1.1 * 2, y); + graphics.lineBetween(combDrawX, y, combDrawX + ITEM_WIDTH * 1.1 * COMB_COLUMNS, y); } }; @@ -109,15 +113,15 @@ class ItemList extends Phaser.Scene { addItems(itemList) { const actions = countBy(itemList, i => i.action); - for (let i = 0; i < 4; i += 1) { - const ITEM_X = ITEM_WIDTH * 1.1 * (i % 2) + INV_X + ITEM_WIDTH * 6.75; - const ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / 2) + INV_Y; + 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) => { - const ITEM_X = ITEM_WIDTH * 1.1 * (i % COLUMNS) + INV_X + ITEM_WIDTH * 0.5; - const ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / COLUMNS) + INV_Y + ITEM_HEIGHT * 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 itemBox = new Item(this, action, actions[action], ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT); this.input.setDraggable(itemBox); this.add.existing(itemBox); diff --git a/client/src/scenes/menu.cryps.list.js b/client/src/scenes/menu.cryps.list.js index 8936b893..621470bc 100644 --- a/client/src/scenes/menu.cryps.list.js +++ b/client/src/scenes/menu.cryps.list.js @@ -20,7 +20,7 @@ class MenuCrypList extends Phaser.Scene { } create() { - this.cameras.main.setViewport(CRYP_LIST.x(), CRYP_LIST.y(), CRYP_LIST.width(), CRYP_LIST.height()); + // 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); this.addCrypRows(this.registry.get('cryps')); @@ -40,12 +40,17 @@ class MenuCrypList extends Phaser.Scene { this.crypRows = this.add.group(); // We only display 3 cryps others can be viewed in cryp list (soon TM) const crypDispLength = cryps.length < 3 ? cryps.length : 3; + const crypStat = (stat, i, crypInfo) => { + this.crypRows.add(this.add + .text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN * (2 + i), `${stat.stat}: ${stat.base}`, TEXT.NORMAL) + .setOrigin(0.5, 0.5)); + }; for (let i = 0; i < crypDispLength; i += 1) { const cryp = cryps[i]; - const ROW_X = 0; - const ROW_Y = (i * ROW_HEIGHT); - const BOX_WIDTH = Math.floor(ROW_WIDTH / 5); + const ROW_X = i * BOX_WIDTH * 2; + const ROW_Y = CRYP_LIST.y(); + const ACTIVE_FILL = cryp.active ? 1 @@ -55,13 +60,14 @@ class MenuCrypList extends Phaser.Scene { // Selection of cryps const selectFn = () => { this.game.events.emit('CRYP_ACTIVE', cryp); + this.registry.set('crypStats', cryp); }; if (KEY_MAP[i]) { this.input.keyboard.on(KEY_MAP[i], selectFn, this); } - const crypSelect = this.add +/* const crypSelect = this.add .rectangle(ROW_X, ROW_Y, BOX_WIDTH, ROW_HEIGHT, FILL, 1) .setInteractive() .setOrigin(0) @@ -69,17 +75,16 @@ class MenuCrypList extends Phaser.Scene { this.crypRows.add(crypSelect); this.crypRows.add(this.add .text(crypSelect.getCenter().x, crypSelect.y + TEXT_MARGIN, i + 1, TEXT.HEADER) - .setOrigin(0.5, 0.5)); + .setOrigin(0.5, 0.5));*/ // Cryp avatar and interaction box const crypInteract = this.add - .rectangle(ROW_X + BOX_WIDTH, ROW_Y, BOX_WIDTH * 2, ROW_HEIGHT, FILL, ACTIVE_FILL) + .rectangle(ROW_X, ROW_Y + ROW_HEIGHT * 2.5, BOX_WIDTH * 2, ROW_HEIGHT, FILL, ACTIVE_FILL) .setInteractive() .setOrigin(0) - .on('pointerdown', () => { - this.registry.set('crypStats', cryp); - }); + .on('pointerdown', selectFn); + crypInteract.itemSelect = () => { crypInteract.setFillStyle(COLOURS.SELECT); }; @@ -97,15 +102,24 @@ class MenuCrypList extends Phaser.Scene { // Cryp information box (names + skills) const crypInfo = this.add - .rectangle(ROW_X + BOX_WIDTH * 3, ROW_Y, BOX_WIDTH * 2, ROW_HEIGHT, FILL, ACTIVE_FILL) - .setOrigin(0); + .rectangle(ROW_X, ROW_Y, BOX_WIDTH * 2, ROW_HEIGHT * 2.5, FILL, ACTIVE_FILL) + .setOrigin(0) + .setInteractive() + .on('pointerdown', selectFn); + this.crypRows.add(crypInfo); this.crypRows.add(this.add .text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN, cryp.name, TEXT.HEADER) .setOrigin(0.5, 0.5)); - this.crypRows.add(this.add - .text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN * 2, `Level: ${cryp.lvl}`, TEXT.NORMAL) - .setOrigin(0.5, 0.5)); + const CRYP_STATS = [ + cryp.stamina, + cryp.armour, + cryp.spell_shield, + cryp.phys_dmg, + cryp.spell_dmg, + cryp.speed, + ]; + CRYP_STATS.forEach((stat, j) => crypStat(stat, j, crypInfo)); } return true; } @@ -113,7 +127,7 @@ class MenuCrypList extends Phaser.Scene { addControls() { // Add Spawn Cryp Option const spawn = this.add - .rectangle(ROW_WIDTH * 0.05, ROW_HEIGHT * 3.5, ROW_WIDTH * 0.4, ROW_HEIGHT, 0x888888) + .rectangle(ROW_WIDTH * 0.05, ROW_HEIGHT * 4, ROW_WIDTH * 0.2, ROW_HEIGHT * 0.5, 0x888888) .setInteractive() .setOrigin(0) .on('pointerdown', () => {