Team animations come from source, skill buttons

client/src/scenes/combat.animations.js

@@ -26,18 +26,35 @@ class CombatSkills extends Phaser.GameObjects.Group {
         this.scene = scene;
     }
 
-    getSkill(type, isAlly) {
+    getSkill(type, isAlly, castLocation) {
         if (type === 'attack') {
             this[randomAnimation()](isAlly);
         } else {
-            this[type](isAlly);
+            this[type](isAlly, castLocation);
         }
     }
 
-    Heal(isAlly) {
+    Heal(isAlly, castLocation) {
+        // const { sourceX, sourceY } = getCrypPosition(sourcePos, 0);
         const lifespan = DELAYS.ANIMATION_DURATION;
-        const particles = this.scene.add.particles(randomColour());
+        const colour = randomColour();
+        const particles = this.scene.add.particles(colour);
         const x = isAlly ? COMBAT.width() * 0.7 : COMBAT.width() * 0.3;
+
+        const emitter2 = particles.createEmitter({
+            x: castLocation.x,
+            y: castLocation.y,
+            moveToX: x,
+            moveToY: COMBAT.height() * 0.2,
+            speed: 500,
+            lifespan: lifespan / 3,
+            scale: { start: 0.5, end: 1 },
+            quantity: 3,
+            _frequency: 20,
+            blendMode: 'ADD',
+            emitZone: { source: new Phaser.Geom.Rectangle(-200, -100, 400, 200) },
+        });
+
         const emitter = particles.createEmitter({
             x,
             y: COMBAT.height() * 0.2,
@@ -48,8 +65,14 @@ class CombatSkills extends Phaser.GameObjects.Group {
             scale: { start: 0.1, end: 1 },
             blendMode: 'ADD',
             lifespan,
+            active: false,
         });
+
+
         this.add(particles);
+        this.scene.time.delayedCall(lifespan / 3, () => { emitter2.stop(); }, [], this);
+        this.scene.time.delayedCall(lifespan / 3, () => { emitter.active = true; }, [], this);
+
         this.scene.time.delayedCall(lifespan, () => { emitter.stop(); }, [], this);
     }
 

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

@@ -31,7 +31,6 @@ function calculateTweenParams(sourceSpawn, targetSpawn, account) {
             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
@@ -59,7 +58,13 @@ function animatePhase(scene, game, resolution, cb) {
         moveSourceBattle, moveSourceOrig, moveTargetBattle, moveTargetOrig,
     } = calculateTweenParams(sourceSpawn, targetSpawn, account);
 
-    // ew
+    const castParams = () => {
+        const x = (sourceSpawn === targetSpawn) ? moveTargetBattle.x : sourceSpawn.x;
+        const y = (sourceSpawn === targetSpawn) ? moveTargetBattle.y : sourceSpawn.y;
+        return { x, y };
+    };
+    const castLocation = castParams();
+
     const { resolution: { results } } = resolution;
 
     if (results.length === 0) return cb();
@@ -72,7 +77,7 @@ function animatePhase(scene, game, resolution, cb) {
         const isAlly = resolution.target_team_id !== account.id;
         // animate animation
         const workingSkills = ['Heal', 'Block'];
-        if (workingSkills.includes(resolution.skill)) animations.getSkill(resolution.skill, isAlly);
+        if (workingSkills.includes(resolution.skill)) animations.getSkill(resolution.skill, isAlly, castLocation);
         else animations.getSkill('attack', isAlly);
 
         // Target cryp takes damage

client/src/scenes/combat.skills.js

@@ -67,7 +67,7 @@ class CrypSkill extends Phaser.GameObjects.Container {
         this.scene.children.list.forEach((skill) => {
             if (skill.state === 'select') skill.deselect();
         });
-        this.skillBox.setFillStyle(0x9d9ea0);
+        this.skillBox.setFillStyle(0x004bfe);
         this.state = 'select';
     }
 
@@ -148,7 +148,11 @@ class CombatSkills extends Phaser.Scene {
         const addSkill = (i, j, skill, cryp) => {
             const skillTextPos = skillPosition(i, j);
             const skillObj = new CrypSkill(this, skillTextPos[0], skillTextPos[1], skill, cryp);
+            if (skill.cd) {
+                skillObj.skillBox.setFillStyle(0x9d9ea0);
+            } else {
                 this.input.setDraggable(skillObj);
+            }
             this.add.existing(skillObj);
             return skillObj;
         };
@@ -238,7 +242,7 @@ class CombatSkills extends Phaser.Scene {
             // Don't add interaction for self_target skills
             const crypSkill = cryp.skills.find(s => s.skill === skill.skill);
             if (crypSkill.self_targeting) {
-                skillObj.skillBox.setFillStyle(0x9d9ea0);
+                skillObj.skillBox.setFillStyle(0xff0000);
             } else {
                 this.input.setDraggable(skillObj);
                 keyboard.on(