Cryps move for combat

client/src/scenes/combat.cryps.js

@@ -1,6 +1,6 @@
 const Phaser = require('phaser');
 
-const { TEXT, POSITIONS: { COMBAT }, COLOURS } = require('./constants');
+const { DELAYS, TEXT, POSITIONS: { COMBAT }, COLOURS } = require('./constants');
 
 const calcMargin = () => {
     const CRYP_MARGIN = COMBAT.height() / 5;
@@ -72,6 +72,14 @@ class CrypImage extends Phaser.GameObjects.Image {
             this.scene.registry.set('activeCryp', null);
         }
     }
+
+    takeDamage(damage) {
+        this.setTint(0xff0000);
+        this.healthbar.takeDamage(damage);
+        this.scene.time.delayedCall(DELAYS.DAMAGE_TICK, () => {
+            this.clearTint();
+        });
+    }
 }
 
 class CrypSkill extends Phaser.GameObjects.Text {

client/src/scenes/combat.js

@@ -5,8 +5,9 @@ const { POSITIONS: { COMBAT }, TEXT } = require('./constants');
 const { DrawCrypTeams, CrypImage, CrypSkill } = require('./combat.cryps');
 const combatRender = require('./combat.render');
 const CombatSkills = require('./combat.skills');
+
 const CRYP_KEY_MAP = ['keydown_ONE', 'keydown_TWO', 'keydown_THREE'];
-    const SKILL_KEY_MAP = ['keydown_Q', 'keydown_W', 'keydown_E', 'keydown_R'];
+const SKILL_KEY_MAP = ['keydown_Q', 'keydown_W', 'keydown_E', 'keydown_R'];
 
 
 class Combat extends Phaser.Scene {
@@ -68,10 +69,10 @@ class Combat extends Phaser.Scene {
         while (game.log.length !== this.logIter) {
             if (game.log[this.logIter] === '<Resolve Phase>') {
                 this.registry.set('resolve', true);
-                this.crypTeamRender.destroy(true);
                 this.logIter += 1;
+                this.crypTeamRender.destroy(true);
                 this.crypTeamRender = new DrawCrypTeams(this, game);
-                combatRender(this, game);
+                combatRender(this, game, this.crypTeamRender);
                 return true;
             } this.logIter += 1;
         }

client/src/scenes/combat.render.js

@@ -1,5 +1,8 @@
-const Phaser = require('phaser');
+const { CrypImage } = require('./combat.cryps');
-const { renderCryp } = require('./combat.cryps');
+const { DELAYS, POSITIONS: { COMBAT } } = require('./constants');
+
+const MOVE_CREEP = 1000;
+const DAMAGE_TICK = 750;
 
 const randomSkill = () => {
     const skills = ['wall', 'spit', 'gravBlast', 'gravBomb', 'chargeBall'];
@@ -7,6 +10,7 @@ const randomSkill = () => {
 };
 
 function animatePhase(scene, group, game, account, delay) {
+    // Find cryps and targets
     const resolved = game.resolved[scene.resolvedIter];
     const allyCryp = scene.cryps.filter(c => c.account === account.id).find(
         c => c.id === resolved.source_cryp_id || c.id === resolved.target_cryp_id
@@ -14,43 +18,78 @@ function animatePhase(scene, group, game, account, delay) {
     const enemyCryp = scene.cryps.filter(c => c.account !== account.id).find(
         c => c.id === resolved.source_cryp_id || c.id === resolved.target_cryp_id
     );
-    const allySpawn = renderCryp(scene, group, allyCryp, game, 0, 1);
+    const allySpawn = group.children.entries
-    const enemySpawn = renderCryp(scene, group, enemyCryp, game, 1, 1);
+        .filter(obj => obj instanceof CrypImage)
+        .find(c => c.cryp.id === allyCryp.id);
+    const enemySpawn = group.children.entries
+        .filter(obj => obj instanceof CrypImage)
+        .find(c => c.cryp.id === enemyCryp.id);
 
     const target = allyCryp.id === resolved.target_cryp_id ? allySpawn : enemySpawn;
-    const targetCrypData = allyCryp.id === resolved.target_cryp_id ? allyCryp : enemyCryp;
+    const allyCrypX = allySpawn.x; const allyCrypY = allySpawn.y;
+    const enemyCrypX = enemySpawn.x; const enemyCrypY = enemySpawn.y;
+    // Move cryps into posistion
+    scene.tweens.add({
+        targets: allySpawn,
+        x: COMBAT.x() + COMBAT.width() * 0.3,
+        y: COMBAT.height() * 13.25 / 35,
+        ease: 'Power1',
+        duration: MOVE_CREEP,
+    });
 
-    scene.time.delayedCall(delay, () => {
+    scene.tweens.add({
-        targetCrypData.hp.base -= 100; // Mutates stored cryp data
+        targets: enemySpawn,
-        target.healthbar.takeDamage(100);
+        x: COMBAT.x() + COMBAT.width() * 0.7,
-        target.setTint(0xff0000);
+        y: COMBAT.height() * 13.25 / 35,
+        ease: 'Power1',
+        duration: MOVE_CREEP,
+    });
+    // Target cryp takes damage into posistion
+    scene.time.delayedCall(delay + DELAYS.MOVE_CREEP, () => {
+        target.takeDamage(100);
+    });
+    // Move cryps back
+    scene.time.delayedCall(delay + DELAYS.MOVE_CREEP + DELAYS.DAMAGE_TICK, () => {
+        scene.tweens.add({
+            targets: allySpawn,
+            x: allyCrypX,
+            y: allyCrypY,
+            ease: 'Power1',
+            duration: MOVE_CREEP,
+        });
+
+        scene.tweens.add({
+            targets: enemySpawn,
+            x: enemyCrypX,
+            y: enemyCrypY,
+            ease: 'Power1',
+            duration: MOVE_CREEP,
+        });
     });
 }
 
 
-function combatRender(scene, game) {
+function combatRender(scene, game, group) {
-    let delay = 0;
     const skill = randomSkill();
     const resolved = game.resolved[scene.resolvedIter];
     const account = scene.registry.get('account');
-    const animatedGroup = new Phaser.GameObjects.Group(scene);
     const target = resolved.source_team_id === account.id;
-
+    const delay = DELAYS[skill];
-    delay = scene.skills[skill](target);
+    scene.time.delayedCall(DELAYS.MOVE_CREEP, () => {
-    // animatePhase(scene, animatedGroup, game, account, delay[0]);
+        scene.skills[skill](target);
+    });
+    animatePhase(scene, group, game, account, delay[0]);
 
     if (scene.iterateLog(game)) {
-        scene.time.delayedCall(delay[1], () => {
+        scene.time.delayedCall(delay[1] + DELAYS.MOVE_CREEP * 2 + DELAYS.DAMAGE_TICK, () => {
             scene.registry.set('resolve', false);
             scene.skills.cleanup();
-            animatedGroup.destroy(true);
             scene.renderLog(game);
         });
     } else {
-        scene.time.delayedCall(delay[1], () => {
+        scene.time.delayedCall(delay[1] + DELAYS.MOVE_CREEP * 2 + DELAYS.DAMAGE_TICK, () => {
             scene.skills.cleanup();
-            animatedGroup.destroy(true);
+            combatRender(scene, game, group);
-            combatRender(scene, game);
         });
     }
     return true;

client/src/scenes/combat.skills.js

@@ -7,7 +7,7 @@ const randomColour = () => {
 };
 
 const animationParams = (target) => {
-    const spawnLocation = target ? COMBAT.width() * 0.175 : COMBAT.width() * 0.55;
+    const spawnLocation = target ? COMBAT.width() * 0.35 : COMBAT.width() * 0.65;
     const speed = target ? 250 : -250;
     const img = randomColour();
     const angleMin = target ? 320 : 180;
@@ -26,7 +26,7 @@ class CombatSkills extends Phaser.GameObjects.Group {
         const particles = this.scene.add.particles(img);
         const emitter = particles.createEmitter({
             x: spawnLocation,
-            y: { min: COMBAT.height() * 0.45, max: COMBAT.height() * 0.7 },
+            y: { min: COMBAT.height() * 0.2, max: COMBAT.height() * 0.5 },
             lifespan: 2000,
             speedX: { min: speed, max: speed * 2 },
             scale: { start: 0.4, end: 0 },
@@ -35,7 +35,6 @@ class CombatSkills extends Phaser.GameObjects.Group {
         });
         this.add(particles);
         this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this.scene);
-        return [1500, 3000];
     }
 
     spit(target) {
@@ -43,7 +42,7 @@ class CombatSkills extends Phaser.GameObjects.Group {
         const particles = this.scene.add.particles(img);
         const emitter = particles.createEmitter({
             x: spawnLocation,
-            y: COMBAT.height() * 0.5,
+            y: COMBAT.height() * 0.35,
             lifespan: 2000,
             angle: { min: angleMin, max: angleMax },
             speed: speed * 2,
@@ -54,7 +53,6 @@ class CombatSkills extends Phaser.GameObjects.Group {
         });
         this.add(particles);
         this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this);
-        return [1500, 3000];
     }
 
     gravBomb(target) {
@@ -77,26 +75,25 @@ class CombatSkills extends Phaser.GameObjects.Group {
         });
         this.add(particles);
         this.scene.time.delayedCall(1000, () => { this.emitter.stop(); well.active = false; }, [], this.scene);
-        return [1000, 2500];
     }
 
     gravBlast(target) {
         const img = randomColour();
-        const spawnLocation = target ? COMBAT.width() * 0.2 : COMBAT.width() * 0.45;
+        const spawnLocation = target ? COMBAT.width() * 0.35 : COMBAT.width() * 0.65;
-        const targetLocation = target ? COMBAT.width() * 0.6 : COMBAT.width() * 0.1;
+        const targetLocation = target ? COMBAT.width() * 0.7 : COMBAT.width() * 0.3;
         const particles = this.scene.add.particles(img);
         const bounds = target
-            ? { x: COMBAT.width() * 0.15, y: COMBAT.height() * 0.35, w: COMBAT.width() * 0.55, h: COMBAT.height() * 0.2 }
+            ? { x: COMBAT.width() * 0.3, y: COMBAT.height() * 0.2, w: COMBAT.width() * 0.5, h: COMBAT.height() * 0.2 }
-            : { x: 0, y: COMBAT.height() * 0.35, w: COMBAT.width() * 0.55, h: COMBAT.height() * 0.2 };
+            : { x: 0.2 * COMBAT.width(), y: COMBAT.height() * 0.2, w: COMBAT.width() * 0.5, h: COMBAT.height() * 0.2 };
         const well = particles.createGravityWell({
             x: spawnLocation,
-            y: COMBAT.height() * 0.5,
+            y: COMBAT.height() * 0.35,
             power: 4,
             gravity: 500,
         });
         const emitter = particles.createEmitter({
             x: spawnLocation,
-            y: COMBAT.height() * 0.5,
+            y: COMBAT.height() * 0.35,
             lifespan: 2000,
             speed: 1000,
             scale: { start: 0.7, end: 1 },
@@ -106,19 +103,18 @@ class CombatSkills extends Phaser.GameObjects.Group {
         this.add(particles);
         this.scene.time.delayedCall(1000, () => { emitter.stop(); well.x = targetLocation; }, [], this.scene);
         this.scene.time.delayedCall(3000, () => { well.active = false; }, [], this.scene);
-        return [1500, 3000];
     }
 
     chargeBall(target) {
         const { img, spawnLocation } = animationParams(target);
-        const targetLocation = target ? 0.7 * COMBAT.width() : 0;
+        const targetLocation = target ? 0.7 * COMBAT.width() : 0.25 * COMBAT.width();
         const particles = this.scene.add.particles(img);
         const emitter = particles.createEmitter({
             x: 0,
             y: 0,
             lifespan: 1000,
             moveToX: spawnLocation,
-            moveToY: COMBAT.height() * 0.2,
+            moveToY: COMBAT.height() * 0.1,
             scale: 0.75,
             quantity: 4,
             _frequency: 20,
@@ -128,7 +124,7 @@ class CombatSkills extends Phaser.GameObjects.Group {
         const emitter2 = particles.createEmitter({
             radial: false,
             x: { min: spawnLocation, max: targetLocation, steps: 256 },
-            y: { min: COMBAT.height() * 0.2, max: COMBAT.height() * 0.6, steps: 256 },
+            y: { min: COMBAT.height() * 0.1, max: COMBAT.height() * 0.4, steps: 256 },
             lifespan: 1000,
             quantity: 4,
             gravityY: 0,
@@ -140,7 +136,6 @@ class CombatSkills extends Phaser.GameObjects.Group {
         this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this.scene);
         this.scene.time.delayedCall(2000, () => { emitter2.active = true; }, [], this.scene);
         this.scene.time.delayedCall(3000, () => { emitter2.stop(); }, [], this.scene);
-        return [3000, 4000];
     }
 
     cleanup() {

client/src/scenes/constants.js

@@ -103,6 +103,16 @@ module.exports = {
         WHITE: 0xffffff,
     },
 
+    DELAYS: {
+        MOVE_CREEP: 1000,
+        DAMAGE_TICK: 750,
+        wall: [1500, 3000],
+        spit: [1500, 3000],
+        gravBomb: [1500, 3000],
+        gravBlast: [1500, 3000],
+        chargeBall: [3000, 4000],
+    },
+
     SKILLS: {
         LEARNABLE: [
             'Attack',