All skills draggable, hitbox change color on hover with skill

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) => {
+class TeamHitBox extends Phaser.GameObjects.Rectangle {
-    const height = CRYP_HEIGHT * (size) + (Y_PADDING * 0.5) * (size - 1);
+    constructor(scene, size, team, cback) {
-    scene.add
+        const height = CRYP_HEIGHT * (size) + (Y_PADDING * 0.5) * (size - 1);
-        .rectangle(TEAM_MARGIN * team, Y_PADDING, CRYP_WIDTH, height, 0x222222)
+        super(scene, TEAM_MARGIN * team, Y_PADDING, CRYP_WIDTH, height, 0x222222);
-        .setInteractive()
+        this.setOrigin(0);
-        .setOrigin(0)
+        this.clickHandler = () => cback();
-        .on('pointerup', 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();
     }

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) => {
+        this.input.on('dragstart', (pointer, obj) => obj.clickHandler());
-            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');
+            const hitBox = skillCheckHitBox(this.scene, pointer);
-            hitBoxScene.children.list.forEach((hitBox) => {
+            if (hitBox) {
-                if (Phaser.Geom.Rectangle
+                hitBox.clickHandler();
-                    .ContainsPoint(hitBox.getBounds(), pointer.position)) 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;
         };