diff --git a/client/src/scenes/combat.hitbox.js b/client/src/scenes/combat.hitbox.js index 4d99d37e..a1acd60c 100644 --- a/client/src/scenes/combat.hitbox.js +++ b/client/src/scenes/combat.hitbox.js @@ -6,14 +6,22 @@ const CRYP_WIDTH = COMBAT.width() * 0.2; const TEAM_MARGIN = COMBAT.width() * 0.775; const Y_PADDING = COMBAT.height() * 0.1; -const teamHitBox = (scene, size, team, cback) => { - const height = CRYP_HEIGHT * (size) + (Y_PADDING * 0.5) * (size - 1); - scene.add - .rectangle(TEAM_MARGIN * team, Y_PADDING, CRYP_WIDTH, height, 0x222222) - .setInteractive() - .setOrigin(0) - .on('pointerup', cback); -}; +class TeamHitBox extends Phaser.GameObjects.Rectangle { + constructor(scene, size, team, cback) { + const height = CRYP_HEIGHT * (size) + (Y_PADDING * 0.5) * (size - 1); + super(scene, TEAM_MARGIN * team, Y_PADDING, CRYP_WIDTH, height, 0x222222); + this.setOrigin(0); + this.clickHandler = () => cback(); + } + + select() { + this.setFillStyle(0x003300); + } + + deselect() { + this.setFillStyle(0x222222); + } +} class CrypHitBox extends Phaser.GameObjects.Rectangle { constructor(scene, iter, team, cback) { @@ -22,6 +30,14 @@ class CrypHitBox extends Phaser.GameObjects.Rectangle { this.setOrigin(0); this.clickHandler = () => cback(); } + + select() { + this.setFillStyle(0x003300); + } + + deselect() { + this.setFillStyle(0x222222); + } } class CombatHitBox extends Phaser.Scene { @@ -74,7 +90,7 @@ class CombatHitBox extends Phaser.Scene { }; const team = t.id === account.id ? 0 : 1; const size = t.cryps.length; - teamHitBox(this, size, team, cback); + this.add.existing(new TeamHitBox(this, size, team, cback)); }); this.scene.sendToBack(); } diff --git a/client/src/scenes/combat.skills.js b/client/src/scenes/combat.skills.js index 46b49fc3..30bff97b 100644 --- a/client/src/scenes/combat.skills.js +++ b/client/src/scenes/combat.skills.js @@ -29,6 +29,17 @@ const targetTextPosition = (crypIter, teamIter) => { return [ skillTextX, skillTextY ]; }; +const skillCheckHitBox = (scenePlugin, pointer) => { + const { list } = scenePlugin.get('CombatHitBox').children; + for (let i = 0; i < list.length; i += 1) { + if (Phaser.Geom.Rectangle.ContainsPoint(list[i].getBounds(), + pointer.position)) return list[i]; + } + // If we didn't find a hitbox deselect them all + for (let i = 0; i < list.length; i += 1) list[i].deselect(); + return false; +}; + class CrypName extends Phaser.GameObjects.Text { constructor(scene, x, y, cryp) { super(scene, x, y, cryp.name, TEXT.HEADER); @@ -82,20 +93,18 @@ class CombatSkills extends Phaser.Scene { this.registry.events.on('changedata', this.updateData, this); this.account = this.registry.get('account'); - this.input.on('dragstart', (pointer, obj) => { - obj.clickHandler(); - }); - + this.input.on('dragstart', (pointer, obj) => obj.clickHandler()); this.input.on('drag', (pointer, obj, dragX, dragY) => { + const hitBox = skillCheckHitBox(this.scene, pointer); + if (hitBox) hitBox.select(); obj.setPosition(dragX, dragY); }); - this.input.on('dragend', (pointer, obj) => { - const hitBoxScene = this.scene.get('CombatHitBox'); - hitBoxScene.children.list.forEach((hitBox) => { - if (Phaser.Geom.Rectangle - .ContainsPoint(hitBox.getBounds(), pointer.position)) hitBox.clickHandler(); - }); + const hitBox = skillCheckHitBox(this.scene, pointer); + if (hitBox) { + hitBox.clickHandler(); + hitBox.deselect(); + } obj.setPosition(obj.origX, obj.origY); }); @@ -131,6 +140,7 @@ class CombatSkills extends Phaser.Scene { const addSkill = (i, j, skill, cryp) => { const skillTextPos = skillTextPosition(i, j + 2); const skillObj = new CrypSkill(this, skillTextPos[0], skillTextPos[1], skill, cryp); + this.input.setDraggable(skillObj); this.add.existing(skillObj); return skillObj; };