diff --git a/client/src/scenes/constants.js b/client/src/scenes/constants.js index dcd0daf2..379f4775 100644 --- a/client/src/scenes/constants.js +++ b/client/src/scenes/constants.js @@ -7,29 +7,32 @@ const CANVAS_HEIGHT = () => Math.floor(window.innerHeight); const headerWidth = () => CANVAS_WIDTH(); const headerHeight = () => Math.floor(CANVAS_HEIGHT() * 0.05); - const menuCrypListWidth = () => Math.floor(CANVAS_WIDTH() * 0.3); const menuCrypListHeight = () => Math.floor(CANVAS_HEIGHT() * 0.5); -const menuCrypListX = () => 0; +const menuCrypListX = () => Math.floor(CANVAS_WIDTH() * 0.3); const menuCrypListY = () => headerHeight(); const itemListWidth = () => Math.floor(CANVAS_WIDTH() * 0.5); -const itemListHeight = () => Math.floor(CANVAS_HEIGHT() * 0.5); +const itemListHeight = () => Math.floor(CANVAS_HEIGHT() * 0.95); const itemListX = () => 0; -const itemListY = () => Math.floor(CANVAS_HEIGHT() * 0.5); -const itemBlockWidth = () => Math.floor(itemListWidth() * 0.075); -const itemBlockHeight = () => Math.floor(itemListHeight() * 0.12); +const itemListY = () => headerHeight(); +const itemBlockWidth = () => Math.floor(itemListWidth() * 0.12); +const itemBlockHeight = () => Math.floor(itemListHeight() * 0.04); const menuNavigationWidth = () => Math.floor(CANVAS_WIDTH() * 0.5); const menuNavigationHeight = () => Math.floor(CANVAS_HEIGHT() * 0.3); const menuNavigationX = () => Math.floor(CANVAS_WIDTH() * 0.5); const menuNavigationY = () => Math.floor(CANVAS_HEIGHT() * 0.7); -const menuMainWidth = () => Math.floor(CANVAS_WIDTH() * 0.7); +const menuMainWidth = () => Math.floor(CANVAS_WIDTH() * 0.4); const menuMainHeight = () => Math.floor(CANVAS_HEIGHT() * 0.5); -const menuMainX = () => Math.floor(CANVAS_WIDTH() * 0.4); +const menuMainX = () => Math.floor(CANVAS_WIDTH() * 0.6); const menuMainY = () => headerHeight(); +const homeMainWidth = () => Math.floor(CANVAS_WIDTH() * 0.6); +const homeMainHeight = () => Math.floor(CANVAS_HEIGHT() * 0.5); +const homeMainX = () => Math.floor(CANVAS_WIDTH() * 0.4); +const homeMainY = () => headerHeight(); const combatWidth = () => CANVAS_WIDTH(); const combatHeight = () => CANVAS_HEIGHT() - headerHeight(); @@ -82,6 +85,15 @@ module.exports = { }, + HOME_MAIN: { + x: homeMainX, + y: homeMainY, + width: homeMainWidth, + height: homeMainHeight, + + }, + + NAVIGATION: { x: menuNavigationX, y: menuNavigationY, diff --git a/client/src/scenes/header.js b/client/src/scenes/header.js index bccae709..f2cd78e3 100644 --- a/client/src/scenes/header.js +++ b/client/src/scenes/header.js @@ -1,7 +1,7 @@ const Phaser = require('phaser'); +const fs = require('fs'); const { TEXT } = require('./constants'); -const fs = require('fs'); const aztecAtlas = require('../../assets/aztec.atlas.json'); diff --git a/client/src/scenes/home.instances.js b/client/src/scenes/home.instances.js index fa2bd2c3..aec7f198 100644 --- a/client/src/scenes/home.instances.js +++ b/client/src/scenes/home.instances.js @@ -1,10 +1,11 @@ const Phaser = require('phaser'); -const { POSITIONS: { MENU_MAIN }, TEXT } = require('./constants'); +const { POSITIONS: { HOME_MAIN }, TEXT } = require('./constants'); + +const X = HOME_MAIN.x(); +const Y = HOME_MAIN.y(); +const WIDTH = HOME_MAIN.width(); +const HEIGHT = HOME_MAIN.height(); -const X = MENU_MAIN.x(); -const Y = MENU_MAIN.y(); -const WIDTH = MENU_MAIN.width(); -const HEIGHT = MENU_MAIN.height(); const NULL_UUID = '00000000-0000-0000-0000-000000000000'; class HomeRankings extends Phaser.Scene { diff --git a/client/src/scenes/home.news.js b/client/src/scenes/home.news.js index 3ef298b7..9e7937df 100644 --- a/client/src/scenes/home.news.js +++ b/client/src/scenes/home.news.js @@ -1,10 +1,10 @@ const Phaser = require('phaser'); -const { POSITIONS: { MENU_MAIN }, TEXT } = require('./constants'); +const { POSITIONS: { HOME_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 X = HOME_MAIN.x(); +const Y = HOME_MAIN.y(); +const WIDTH = HOME_MAIN.width(); +const HEIGHT = HOME_MAIN.height(); class HomeNews extends Phaser.Scene { constructor() { diff --git a/client/src/scenes/home.rankings.js b/client/src/scenes/home.rankings.js index 062ade85..0d6dc0d1 100644 --- a/client/src/scenes/home.rankings.js +++ b/client/src/scenes/home.rankings.js @@ -1,10 +1,10 @@ const Phaser = require('phaser'); -const { POSITIONS: { MENU_MAIN }, TEXT } = require('./constants'); +const { POSITIONS: { HOME_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 X = HOME_MAIN.x(); +const Y = HOME_MAIN.y(); +const WIDTH = HOME_MAIN.width(); +const HEIGHT = HOME_MAIN.height(); class HomeRankings extends Phaser.Scene { constructor() { diff --git a/client/src/scenes/home.shop.js b/client/src/scenes/home.shop.js index d25319df..24ed0921 100644 --- a/client/src/scenes/home.shop.js +++ b/client/src/scenes/home.shop.js @@ -1,9 +1,10 @@ const Phaser = require('phaser'); -const { POSITIONS: { MENU_MAIN }, TEXT } = require('./constants'); +const { POSITIONS: { HOME_MAIN }, TEXT } = require('./constants'); -const X = MENU_MAIN.x(); -const Y = MENU_MAIN.y(); -const HEIGHT = MENU_MAIN.height(); +const X = HOME_MAIN.x(); +const Y = HOME_MAIN.y(); +const WIDTH = HOME_MAIN.width(); +const HEIGHT = HOME_MAIN.height(); class HomeShop extends Phaser.Scene { constructor() { diff --git a/client/src/scenes/item.list.js b/client/src/scenes/item.list.js index fe64196a..3cc88380 100644 --- a/client/src/scenes/item.list.js +++ b/client/src/scenes/item.list.js @@ -14,21 +14,20 @@ const HEIGHT = ITEM_LIST.height(); 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; +const BOX_X = X + ITEM_WIDTH * 0.5; +const BOX_Y = Y + ITEM_HEIGHT + ITEM_HEIGHT * 2; +const BOX_ROWS = 6; +const BOX_COLUMNS = 3; + +const INV_X = X + ITEM_WIDTH * 0.5; +const INV_Y = Y + ITEM_HEIGHT * 12; const INV_ROWS = 3; const INV_COLUMNS = 3; -const COMB_X = INV_X + ITEM_WIDTH * 5.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 COMB_X = X + ITEM_WIDTH * 0.5; +const COMB_Y = Y + ITEM_HEIGHT * 19; +const COMB_ROWS = 1; +const COMB_COLUMNS = 3; const drawVbox = (graphics) => { const boxDrawX = BOX_X - ITEM_WIDTH * 0.05; @@ -95,10 +94,10 @@ class CombinerHitBox extends Phaser.GameObjects.Rectangle { class DeleteHitBox extends Phaser.GameObjects.Rectangle { constructor(scene, x, y) { - super(scene, x, y, ITEM_WIDTH * 1.25, ITEM_HEIGHT * 1.25, 0x222222); + super(scene, x, y, ITEM_WIDTH * 3.4, ITEM_HEIGHT * 1.25, 0x444444); this.setOrigin(0); this.itemSelect = () => this.setFillStyle(0xff0000); - this.itemDeselect = () => this.setFillStyle(0x222222); + this.itemDeselect = () => this.setFillStyle(0x444444); } } @@ -140,7 +139,6 @@ class ItemList extends Phaser.Scene { this.registry.events.on('changedata', this.updateData, this); this.registry.events.on('setdata', this.updateData, this); if (!vbox.bound) return false; - this.combinerItems = this.registry.get('combinerItems'); if (!this.combinerItems || vbox.bound.length < this.registry.get('boundLength')) { this.combinerItems = [-1, -1, -1]; } @@ -154,20 +152,22 @@ class ItemList extends Phaser.Scene { drawInventory(graphics); drawVbox(graphics); - this.add.text(X + WIDTH * 0.1, Y, 'Inventory', TEXT.HEADER); - this.add.text(X + WIDTH * 0.47, Y, 'Combiner', TEXT.HEADER); - this.add.text(X + WIDTH * 0.35, Y + HEIGHT / 2, 'Varibox', TEXT.HEADER); + this.add.text(X + ITEM_WIDTH * 0.5, Y + ITEM_HEIGHT * 0.5, `Varibox - $${vbox.balance} available`, TEXT.HEADER); + this.add.text(X + ITEM_WIDTH * 0.5, Y + ITEM_HEIGHT * 11, 'Inventory', TEXT.HEADER); + this.add.text(X + ITEM_WIDTH * 0.5, Y + ITEM_HEIGHT * 18, 'Combiner', TEXT.HEADER); + this.add.text(X + ITEM_WIDTH * 0.5, Y + ITEM_HEIGHT * 23, `Wins: ${player.score.wins}`, TEXT.HEADER); + this.add.text(X + ITEM_WIDTH * 0.5, Y + ITEM_HEIGHT * 24, `Losses: ${player.score.losses}`, TEXT.HEADER); const reroll = this.add - .rectangle(WIDTH * 0.01, Y + HEIGHT * 0.775, ITEM_WIDTH * 1.25, ITEM_HEIGHT * 1.25, 0x222222) + .rectangle(X + ITEM_WIDTH * 0.4, Y + ITEM_HEIGHT * 1.5, ITEM_WIDTH * 3.4, ITEM_HEIGHT * 1.25, 0x444444) .setInteractive() .setOrigin(0) .on('pointerdown', () => this.registry.get('ws').sendVboxDiscard(vbox.instance)); - this.add.text(reroll.getCenter().x, reroll.getCenter().y, 'Reroll', TEXT.HEADER) + this.add.text(reroll.getCenter().x, reroll.getCenter().y, 'Reroll - $0 cost', TEXT.HEADER) .setOrigin(0.5, 0.5); const combine = this.add - .rectangle(ITEM_WIDTH * 1.1 + COMB_X, ITEM_HEIGHT * 1.1 + COMB_Y, ITEM_WIDTH, ITEM_HEIGHT, 0x222222) + .rectangle(X + ITEM_WIDTH * 0.4, Y + ITEM_HEIGHT * 20.25, ITEM_WIDTH * 3.4, ITEM_HEIGHT * 1.25, 0x444444) .setInteractive() .setOrigin(0) .on('pointerdown', () => { @@ -175,7 +175,7 @@ class ItemList extends Phaser.Scene { this.combinerItems = [-1, -1, -1]; this.children.list.filter(obj => obj instanceof CombinerHitBox).forEach(cBox => cBox.deallocate()); }); - this.add.text(combine.getCenter().x, combine.getCenter().y, 'C', TEXT.HEADER) + this.add.text(combine.getCenter().x, combine.getCenter().y, 'Combine', TEXT.HEADER) .setOrigin(0.5, 0.5); for (let i = 0; i < 3; i += 1) { @@ -183,8 +183,8 @@ class ItemList extends Phaser.Scene { const ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / COMB_COLUMNS) + COMB_Y; this.add.existing(new CombinerHitBox(this, ITEM_X, ITEM_Y, i)); } - const del = this.add.existing(new DeleteHitBox(this, WIDTH * 0.01, Y + HEIGHT * 0.6)); - this.add.text(del.getCenter().x, del.getCenter().y, 'Del', TEXT.HEADER) + const del = this.add.existing(new DeleteHitBox(this, X + ITEM_WIDTH * 0.4, Y + ITEM_HEIGHT * 15.5)); + this.add.text(del.getCenter().x, del.getCenter().y, 'Sell', TEXT.HEADER) .setOrigin(0.5, 0.5); // Generate Items @@ -201,8 +201,8 @@ class ItemList extends Phaser.Scene { vbox.free.forEach((type, i) => { type.forEach((item, j) => { - const ITEM_X = ITEM_WIDTH * 1.1 * j + BOX_X + ITEM_WIDTH * 0.5; - const ITEM_Y = ITEM_HEIGHT * 1.1 * i + BOX_Y + ITEM_HEIGHT * 0.5; + 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); ws.sendVboxAccept(vbox.instance, i, j); diff --git a/client/src/scenes/menu.cryps.list.js b/client/src/scenes/menu.cryps.list.js index aa3bbe00..7a65a509 100644 --- a/client/src/scenes/menu.cryps.list.js +++ b/client/src/scenes/menu.cryps.list.js @@ -3,8 +3,8 @@ const Phaser = require('phaser'); const { TEXT, COLOURS, POSITIONS: { CRYP_LIST } } = require('./constants'); const genAvatar = require('./avatar'); -const ROW_HEIGHT = CRYP_LIST.height() * 0.2; -const ROW_WIDTH = CRYP_LIST.width(); +const BOX_WIDTH = Math.floor(CRYP_LIST.width() / 5); +const BOX_HEIGHT = Math.floor(CRYP_LIST.height() / 5); const TEXT_MARGIN = 24; @@ -29,8 +29,6 @@ class MenuCrypList extends Phaser.Scene { updateData(parent, key, data) { if (key === 'player') { - console.log(data.cryps); - // KEY_MAP.forEach(k => this.input.keyboard.removeListener(k)); this.drawCryps(data.cryps); } } @@ -40,9 +38,8 @@ class MenuCrypList extends Phaser.Scene { if (this.crypGroup) this.crypGroup.destroy(true); this.crypGroup = this.add.group(); const addCryp = (cryp, i) => { - const BOX_WIDTH = Math.floor(ROW_WIDTH / 5); - const ROW_X = i * BOX_WIDTH * 2; - const ROW_Y = CRYP_LIST.y(); + const ROW_X = CRYP_LIST.x(); + const ROW_Y = CRYP_LIST.y() + BOX_HEIGHT * i * 3; const ACTIVE_FILL = cryp.active @@ -57,7 +54,7 @@ class MenuCrypList extends Phaser.Scene { // Cryp avatar and interaction box const crypInteract = this.add - .rectangle(ROW_X, ROW_Y + ROW_HEIGHT * 2.5, BOX_WIDTH * 2, ROW_HEIGHT, FILL, ACTIVE_FILL) + .rectangle(ROW_X, ROW_Y + BOX_HEIGHT * 2, BOX_WIDTH * 4, BOX_HEIGHT * 0.5, FILL, ACTIVE_FILL) .setInteractive() .setOrigin(0) .on('pointerdown', selectFn); @@ -69,15 +66,9 @@ class MenuCrypList extends Phaser.Scene { }; crypInteract.cryp = cryp; - const crypImage = this.add.image( - crypInteract.getCenter().x, - crypInteract.getCenter().y, - 'aztec', - genAvatar(cryp.name) - ); // Cryp information box (names + skills) const crypInfo = this.add - .rectangle(ROW_X, ROW_Y, BOX_WIDTH * 2, ROW_HEIGHT * 2.5, FILL, ACTIVE_FILL) + .rectangle(ROW_X, ROW_Y, BOX_WIDTH * 4, BOX_HEIGHT * 2, FILL, ACTIVE_FILL) .setOrigin(0) .setInteractive() .on('pointerdown', selectFn); @@ -85,7 +76,14 @@ class MenuCrypList extends Phaser.Scene { const crypInfoText = this.add.text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN, cryp.name, TEXT.HEADER) .setOrigin(0.5, 0.5); - this.crypGroup.addMultiple([crypInteract, crypImage, crypInfo, crypInfoText]) + const crypImage = this.add.image( + crypInfo.getCenter().x + crypInfo.width / 4, + crypInfo.getCenter().y, + 'aztec', + genAvatar(cryp.name) + ); + + this.crypGroup.addMultiple([crypInteract, crypImage, crypInfo, crypInfoText]); const crypGems = (stat, j) => { // Placeholder for when gems are implemented @@ -95,16 +93,16 @@ class MenuCrypList extends Phaser.Scene { this.crypGroup.add(gemText); }; - const CRYP_GEMS = [ +/* const CRYP_GEMS = [ 'Red', 'Green', 'Blue', ]; CRYP_GEMS.forEach(crypGems); - +*/ const crypSkill = (stat, j) => { const skillText = this.add - .text(crypInfo.getCenter().x, crypInfo.y + TEXT_MARGIN * (6 + j), `${stat.skill}`, TEXT.NORMAL) + .text(crypInfo.getCenter().x - crypInfo.width / 4, crypInfo.y + TEXT_MARGIN * (3 + j), `${stat.skill}`, TEXT.NORMAL) .setOrigin(0.5, 0.5); this.crypGroup.add(skillText); }; diff --git a/client/src/scenes/menu.js b/client/src/scenes/menu.js index 7b6cfdaf..78e6d749 100644 --- a/client/src/scenes/menu.js +++ b/client/src/scenes/menu.js @@ -3,7 +3,6 @@ const Phaser = require('phaser'); // Scenes constantly showing const MenuCrypList = require('./menu.cryps.list'); const MenuNavigation = require('./menu.navigation'); -const MenuScore = require('./menu.score'); const ItemList = require('./item.list'); // Scenes which change depending on menu context const Zones = require('./zones'); @@ -15,7 +14,6 @@ const FIXED_MENU_SCENES = [ 'MenuCrypList', 'MenuNavigation', 'ItemList', - 'MenuScore', ]; const MAIN_MENU_SCENES = [ @@ -34,17 +32,16 @@ class Menu extends Phaser.Scene { this.registry.events.on('changedata', this.updateData, this); this.registry.events.on('setdata', this.updateData, this); + // Request the latest player state when we load the scene + const player = this.registry.get('player'); + this.registry.get('ws').sendPlayerState(player.instance); // When we load the menu request the latest items // Item list will restart when the data comes in this.scene.manager.add('MenuCrypList', MenuCrypList, true); this.scene.manager.add('MenuNavigation', MenuNavigation, true); - this.scene.manager.add('MenuScore', MenuScore, true); this.scene.manager.add('ItemList', ItemList, true); this.registry.set('inMenu', true); - // Request the latest player state when we load the scene - const player = this.registry.get('player'); - this.registry.get('ws').sendPlayerState(player.instance); return true; } diff --git a/client/src/scenes/menu.score.js b/client/src/scenes/menu.score.js deleted file mode 100644 index 067374e3..00000000 --- a/client/src/scenes/menu.score.js +++ /dev/null @@ -1,26 +0,0 @@ -const Phaser = require('phaser'); -const { POSITIONS: { NAVIGATION }, TEXT } = require('./constants'); - -const X = NAVIGATION.x(); -const Y = NAVIGATION.y(); -const HEIGHT = NAVIGATION.height(); - -class MenuScore extends Phaser.Scene { - constructor() { - super({ key: 'MenuScore' }); - } - - create() { - const player = this.registry.get('player'); - if (!player) return false; - this.add.text(X, Y, `Wins: ${player.score.wins}`, TEXT.HEADER); - this.add.text(X, Y + HEIGHT * 0.1, `Losses: ${player.score.losses}`, TEXT.HEADER); - return true; - } - - cleanUp() { - this.scene.remove(); - } -} - -module.exports = MenuScore; diff --git a/client/src/scenes/statsheet.js b/client/src/scenes/statsheet.js index c5290a67..7ce92ee8 100644 --- a/client/src/scenes/statsheet.js +++ b/client/src/scenes/statsheet.js @@ -79,7 +79,7 @@ class StatSheet extends Phaser.Scene { CRYP_STATS.forEach(crypStat); this.add.text(X + WIDTH * 0.175, Y, 'Skills', TEXT.HEADER); const knownSkill = (skill, i) => { - const SKILL_X = X + WIDTH * 0.21 + WIDTH * 0.125 * i; + const SKILL_X = X + WIDTH * 0.4 + WIDTH * 0.125 * i; const SKILL_Y = Y + HEIGHT * 0.15; const itemObj = new Item(this, skill.skill, i, SKILL_X, SKILL_Y, SKILL_WIDTH, Math.floor(SKILL_WIDTH / 2)); // itemObj.on('pointerdown', () => ); @@ -87,11 +87,11 @@ class StatSheet extends Phaser.Scene { this.add.existing(itemObj); }; cryp.skills.forEach(knownSkill); - this.add.text(X + WIDTH * 0.175, Y, 'Skills', TEXT.HEADER); + this.add.text(X + WIDTH * 0.35, Y, 'Skills', TEXT.HEADER); - this.add.text(X + WIDTH * 0.175, Y + HEIGHT * 0.25, 'Specs', TEXT.HEADER); + this.add.text(X + WIDTH * 0.35, Y + HEIGHT * 0.25, 'Specs', TEXT.HEADER); const knownSpec = (spec, i) => { - const SKILL_X = X + WIDTH * 0.21 + WIDTH * 0.125 * i; + const SKILL_X = X + WIDTH * 0.4 + WIDTH * 0.125 * i; const SKILL_Y = Y + HEIGHT * 0.4; const itemObj = new Item(this, spec, i, SKILL_X, SKILL_Y, SKILL_WIDTH, Math.floor(SKILL_WIDTH / 2)); // itemObj.on('pointerdown', () => );