revamped hitboxes

client/src/scenes/combat.cryps.js

@@ -31,7 +31,7 @@ const crypAvatarText = (team, iter) => {
 
 const crypPosition = (team, iter) => {
     const { CRYP_MARGIN, TEAM_MARGIN, Y_PADDING } = calcMargin();
-    const crypAvatarX = COMBAT.width() / 8 + TEAM_MARGIN * team;
+    const crypAvatarX = COMBAT.width() / 7.5 + TEAM_MARGIN * team;
     const crypAvatarY = Y_PADDING * 1.25 + CRYP_MARGIN * iter;
     return { crypAvatarX, crypAvatarY };
 };
@@ -48,23 +48,6 @@ class CrypImage extends Phaser.GameObjects.Image {
         this.team = team;
     }
 
-    clickHandler() {
-        const gameId = this.scene.registry.get('game').id;
-        const skillScene = this.scene.scene.get('CombatSkills');
-        const { activeSkill, activeTarget } = skillScene;
-        if (activeSkill) {
-            activeSkill.activate();
-            skillScene.activeSkill = null;
-            this.scene.game.events.emit('SEND_SKILL', gameId, activeSkill.cryp.id,
-                this.cryp.account, activeSkill.skill.skill);
-        }
-        if (activeTarget) {
-            activeTarget.activate();
-            skillScene.activeTarget = null;
-            this.scene.game.events.emit('SEND_TARGET', gameId, this.cryp.id, activeTarget.skill.id);
-        }
-    }
-
     takeDamage(damage) {
         this.setTint(0xff0000);
         this.healthBar.takeDamage(damage);
@@ -123,11 +106,6 @@ class CombatCryps extends Phaser.Scene {
     }
 
     create(game) {
-        this.input.on('pointerup', (pointer, obj) => {
-            if (obj[0] instanceof CrypImage) {
-                obj[0].clickHandler();
-            }
-        });
         this.cryps = this.add.group();
         this.account = this.registry.get('account');
         this.drawCryps(game);
@@ -157,8 +135,7 @@ class CombatCryps extends Phaser.Scene {
             // Add cryp name
             const crypObj = new CrypImage(this, team, iter, avatar, cryp, healthBar);
             this.cryps.add(this.add.existing(crypObj)
-                .setScale(0.5)
+                .setScale(0.5));
-                .setInteractive());
             return crypObj;
         };
 

client/src/scenes/combat.hitbox.js

@@ -0,0 +1,112 @@
+const Phaser = require('phaser');
+const { POSITIONS: { COMBAT } } = require('./constants');
+
+const CRYP_HEIGHT = COMBAT.height() / 7;
+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('pointerdown', cback);
+};
+
+const crypHitBox = (scene, iter, team, cback) => {
+    const y = Y_PADDING + iter * (CRYP_HEIGHT + (Y_PADDING * 0.5));
+    scene.add
+        .rectangle(TEAM_MARGIN * team, y, CRYP_WIDTH, CRYP_HEIGHT, 0x222222)
+        .setInteractive()
+        .setOrigin(0)
+        .on('pointerdown', cback);
+};
+
+class CombatHitBox extends Phaser.Scene {
+    constructor() {
+        super({ key: 'CombatHitBox' });
+    }
+
+    create(phase) {
+        this.phase = phase;
+        this.registry.events.off('changedata', this.updateData);
+        this.registry.events.on('changedata', this.updateData, this);
+        if (phase === 'animating') return true;
+        this.selectHitBox(phase);
+        return true;
+    }
+
+    updateData(parent, key, data) {
+        if (key === 'game' && data && !this.started && data.phase !== 'Start') {
+            this.started = true;
+            this.selectHitBox(data.phase);
+        }
+
+        if (key === 'gamePhase' && data) {
+            const shouldUpdate = data !== this.phase;
+            if (shouldUpdate) this.scene.restart(data);
+            return false;
+        }
+        return true;
+    }
+
+    selectHitBox(phase) {
+        this.phase = phase;
+        const game = this.registry.get('game');
+        if (phase === 'Skill') return this.skillHitBox(game);
+        if (phase === 'Target') return this.targetHitBox(game);
+        return false;
+    }
+
+    skillHitBox(game) {
+        const account = this.registry.get('account');
+        game.teams.forEach((t) => {
+            const cback = () => {
+                const skillScene = this.scene.get('CombatSkills');
+                const { activeSkill } = skillScene;
+                if (activeSkill) {
+                    activeSkill.activate();
+                    skillScene.activeSkill = null;
+                    this.game.events.emit('SEND_SKILL', game.id, activeSkill.cryp.id,
+                        t.id, activeSkill.skill.skill);
+                }
+            };
+            const team = t.id === account.id ? 0 : 1;
+            const size = t.cryps.length;
+            teamHitBox(this, size, team, cback);
+        });
+        this.scene.sendToBack();
+    }
+
+    targetHitBox(game) {
+        const account = this.registry.get('account');
+        const group = this.scene.get('CombatCryps').cryps;
+        const skillScene = this.scene.get('CombatSkills');
+        
+        game.teams.forEach(t => t.cryps.forEach((c) => {
+            const cback = () => {
+                const { activeTarget } = skillScene;
+                if (activeTarget) {
+                    activeTarget.activate();
+                    skillScene.activeTarget = null;
+                    this.game.events.emit('SEND_TARGET', game.id, c.id, activeTarget.skill.id);
+                }
+            };
+
+            const crypSpawn = group.children.entries.find(s => s.cryp.id === c.id);
+            const team = c.account === account.id ? 0 : 1;
+            crypHitBox(this, crypSpawn.iter, team, cback);
+        }));
+        this.scene.sendToBack();
+    }
+
+    cleanUp() {
+        this.registry.events.off('changedata', this.updateData);
+        this.scene.remove();
+    }
+}
+
+module.exports = CombatHitBox;
+

client/src/scenes/combat.js

@@ -5,6 +5,8 @@ const { throttle } = require('lodash');
 const CombatLog = require('./combat.log');
 const CombatCryps = require('./combat.cryps');
 const CombatSkills = require('./combat.skills');
+const CombatHitBox = require('./combat.hitbox');
+
 const renderResolutions = require('./combat.render.resolutions');
 
 
@@ -52,6 +54,7 @@ class Combat extends Phaser.Scene {
         this.scene.manager.add('CombatLog', CombatLog, true, game);
         this.renderedResolves = game.resolved.length; // In case you rejoin mid way
         this.scene.manager.add('CombatSkills', CombatSkills, true, game.phase);
+        this.scene.manager.add('CombatHitBox', CombatHitBox, true, game.phase);
         this.registry.set('gamePhase', game.phase);
         return true;
     }
@@ -62,6 +65,7 @@ class Combat extends Phaser.Scene {
         this.scene.get('CombatLog').cleanUp();
         this.scene.get('CombatCryps').cleanUp();
         this.scene.get('CombatSkills').cleanUp();
+        this.scene.get('CombatHitBox').cleanUp();
         this.scene.remove();
         return true;
     }

client/src/scenes/combat.render.resolutions.js

@@ -19,23 +19,12 @@ function findResolutionCryps(scene, group, resolution, game) {
 
     const targetCryp = game.teams.find(t => t.cryps.find(c => c.id === resolution.target_cryp_id))
         .cryps.find(c => c.id === resolution.target_cryp_id);
-
+    const targetSpawn = group.children.entries.find(c => c.cryp.id === targetCryp.id);
-    const targetSpawn = group.children.entries
-        .find(c => c.cryp.id === targetCryp.id);
 
     return { sourceSpawn, targetSpawn };
 }
 
-function animatePhase(scene, game, resolution, cb) {
+function calculateTweenParams(sourceSpawn, targetSpawn, account) {
-    // Iterate the log
-    // return early for disabled skills
-    if (resolution.resolution.disable.disabled) return cb();
-    const group = scene.scene.get('CombatCryps').cryps;
-    const animations = new CombatAnimations(scene);
-    // Find cryps and targets
-    const account = scene.registry.get('account');
-    const { sourceSpawn, targetSpawn } = findResolutionCryps(scene, group, resolution, game);
-
     const tweenParams = (targets, centreSpot) => {
         const enemy = targets.cryp.account !== account.id;
         let x = centreSpot ? COMBAT.width() * 0.3 : targets.x;
@@ -43,23 +32,44 @@ function animatePhase(scene, game, resolution, cb) {
         const y = centreSpot ? COMBAT.height() * 13.25 / 35 : targets.y;
         const ease = 'Power1';
         const duration = MOVE_CREEP;
-        return { targets, x, y, ease, duration };
+        return {
+            targets, x, y, ease, duration,
+        };
     };
 
     const moveSourceBattle = sourceSpawn.cryp.account !== targetSpawn.cryp.account
         ? tweenParams(sourceSpawn, true) : null;
     const moveSourceOrig = sourceSpawn.cryp.account !== targetSpawn.cryp.account
         ? tweenParams(sourceSpawn, false) : null;
-    const moveEnemyBattle = tweenParams(targetSpawn, true);
+    const moveTargetBattle = tweenParams(targetSpawn, true);
-    const moveEnemyOrig = tweenParams(targetSpawn, false);
+    const moveTargetOrig = tweenParams(targetSpawn, false);
+
+    return {
+        moveSourceBattle, moveSourceOrig, moveTargetBattle, moveTargetOrig,
+    };
+}
+
+function animatePhase(scene, game, resolution, cb) {
+    // return early for disabled skills
+    if (resolution.resolution.disable.disabled) return cb();
+    const group = scene.scene.get('CombatCryps').cryps;
+    const animations = new CombatAnimations(scene);
+    const account = scene.registry.get('account');
+    const animation = randomAnimation();
+
+    // Find cryps, targets
+    const { sourceSpawn, targetSpawn } = findResolutionCryps(scene, group, resolution, game);
+    const {
+        moveSourceBattle, moveSourceOrig, moveTargetBattle, moveTargetOrig,
+    } = calculateTweenParams(sourceSpawn, targetSpawn, account);
 
     // Move cryps into posistion
     if (moveSourceBattle) scene.tweens.add(moveSourceBattle);
-    scene.tweens.add(moveEnemyBattle);
+    scene.tweens.add(moveTargetBattle);
-    // animate animation
+
-    const animation = randomAnimation();
     scene.time.delayedCall(MOVE_CREEP, () => {
         const isAlly = resolution.target_team_id !== account.id;
+        // animate animation
         animations[animation](isAlly);
 
         // Target cryp takes damage
@@ -72,7 +82,7 @@ function animatePhase(scene, game, resolution, cb) {
             // Move cryps back
             scene.time.delayedCall(DAMAGE_TICK, () => {
                 if (moveSourceOrig) scene.tweens.add(moveSourceOrig);
-                scene.tweens.add(moveEnemyOrig);
+                scene.tweens.add(moveTargetOrig);
 
                 // all done
                 scene.time.delayedCall(MOVE_CREEP, () => {