diff --git a/client/src/scenes/constants.js b/client/src/scenes/constants.js index 309b1e09..e40e5001 100644 --- a/client/src/scenes/constants.js +++ b/client/src/scenes/constants.js @@ -26,9 +26,9 @@ const gameListRowY = i => menuHeight() + (gameListHeight() * (i + 2)); const itemListWidth = () => Math.floor(CANVAS_WIDTH * 0.2); const itemListHeight = () => Math.floor(CANVAS_HEIGHT / 10); -const itemListX = () => crypListWidth(); +const itemListX = () => crypListWidth() * 1.5; const itemListY = i => menuHeight() + (itemListHeight() * i); -const itemListRowY = i => menuHeight() + (itemListHeight() * (i + 2)); +const itemListRowY = i => menuHeight() + ((itemListHeight() * 1.5) * i); const statsWidth = () => Math.floor(CANVAS_WIDTH - crypListWidth() - gameListWidth()); const statsHeight = () => CANVAS_HEIGHT - menuHeight(); @@ -123,6 +123,8 @@ module.exports = { BLACK: 0x000000, RED: 0xff0000, WHITE: 0xffffff, + + SELECT: 0x003300, }, DELAYS: { diff --git a/client/src/scenes/item.list.js b/client/src/scenes/item.list.js index 71b0b9f5..f5c3422c 100644 --- a/client/src/scenes/item.list.js +++ b/client/src/scenes/item.list.js @@ -2,6 +2,7 @@ const Phaser = require('phaser'); const { TEXT, + COLOURS, POSITIONS: { ITEM_LIST }, } = require('./constants'); @@ -9,13 +10,18 @@ const itemCheckHitbox = (scenePlugin, pointer) => { const { list } = scenePlugin.get('MenuCrypList').children; const hitboxes = list.filter(c => c.cryp); + let found; + for (let i = 0; i < hitboxes.length; i += 1) { if (hitboxes[i].cryp && Phaser.Geom.Rectangle.ContainsPoint(hitboxes[i].getBounds(), - pointer.position)) return hitboxes[i]; + pointer.position)) { + found = hitboxes[i]; + } else { + hitboxes[i].itemDeselect(); + } } - // If we didn't find a hitbox deselect them all - for (let i = 0; i < hitboxes.length; i += 1) hitboxes[i].itemDeselect(); - return false; + + return found; }; class Item extends Phaser.GameObjects.Container { @@ -55,7 +61,7 @@ class Item extends Phaser.GameObjects.Container { this.scene.children.list.forEach((item) => { if (item.state === 'select') item.deselect(); }); - this.box.setFillStyle(0x004bfe); + this.box.setFillStyle(COLOURS.SELECT); this.state = 'select'; } diff --git a/client/src/scenes/menu.cryps.list.js b/client/src/scenes/menu.cryps.list.js index 90980952..0c66792e 100644 --- a/client/src/scenes/menu.cryps.list.js +++ b/client/src/scenes/menu.cryps.list.js @@ -8,6 +8,8 @@ const KEY_MAP = [ 'keydown_ONE', 'keydown_TWO', 'keydown_THREE', + 'keydown_FOUR', + 'keydown_FIVE', ]; class MenuCrypList extends Phaser.Scene { @@ -19,7 +21,6 @@ class MenuCrypList extends Phaser.Scene { this.registry.events.on('changedata', this.updateData, this); this.registry.events.on('setdata', this.updateData, this); this.addCrypRows(this.registry.get('cryps')); - } updateData(parent, key, data) { @@ -54,7 +55,7 @@ class MenuCrypList extends Phaser.Scene { }); row.itemSelect = () => { - row.setFillStyle(0x004bfe); + row.setFillStyle(COLOURS.SELECT); }; row.itemDeselect = () => { @@ -82,12 +83,12 @@ class MenuCrypList extends Phaser.Scene { const CRYP_STATS = [cryp.stamina, cryp.phys_dmg, cryp.spell_dmg]; CRYP_STATS.forEach(crypStat); - // const selectBtn = this.add - // .rectangle(ROW_WIDTH - 50, ROW_Y, 50, ROW_HEIGHT, FILL, 0.5) - // .setInteractive() - // .setOrigin(0); + const selectBtn = this.add + .rectangle(0, ROW_Y + (ROW_HEIGHT * 0.9), ROW_WIDTH, ROW_HEIGHT / 10, FILL, 0.5) + .setInteractive() + .setOrigin(0); - // selectBtn.on('pointerdown', selectFn); + selectBtn.on('pointerdown', selectFn); this.crypRows.add(this.add.text(ROW_WIDTH - 20, ROW_Y, i + 1, TEXT.HEADER)); this.crypRows.add(this.add.text(ROW_X, ROW_Y + (TEXT_MARGIN * 0), cryp.name, TEXT.HEADER)); diff --git a/client/src/scenes/menu.game.list.js b/client/src/scenes/menu.game.list.js index 5b965f6c..3d8ec545 100644 --- a/client/src/scenes/menu.game.list.js +++ b/client/src/scenes/menu.game.list.js @@ -19,6 +19,7 @@ class MenuGameList extends Phaser.Scene { updateData(parent, key, data) { if (key === 'gameList') { + console.log('got game list'); this.addGameList(data); } }