highlight cryp when taking dmg

client/src/scenes/combat.cryps.js

@@ -89,6 +89,7 @@ function renderCryp(scene, group, cryp, game, team, iter) {
     const crypName = scene.add.text(X_PADDING / 2 + TEAM_MARGIN * team,
         Y_PADDING / 2 + TEXT_MARGIN + CRYP_MARGIN * iter, cryp.name, TEXT.HEADER);
     group.add(crypName);
+    return crypSpawn;
 }
 
 function renderSkills(scene, group, cryp, game, team, iter) {
@@ -102,17 +103,6 @@ function renderSkills(scene, group, cryp, game, team, iter) {
     }
 }
 
-function animatePhase(scene, group, game, account) {
-    const resolved = game.resolved[scene.skills.resolvedIter];
-    const allyCryp = game.teams.find(t => t.id === account.id).cryps.find(
-        c => c.id === resolved.source_cryp_id || c.id === resolved.target_cryp_id
-    );
-    const enemyCryp = game.teams.filter(t => t.id !== account.id)[0].cryps.find(
-        c => c.id === resolved.source_cryp_id || c.id === resolved.target_cryp_id
-    );
-    renderCryp(scene, group, allyCryp, game, 0, 1);
-    renderCryp(scene, group, enemyCryp, game, 1, 1);
-}
 
 class DrawCrypTeams extends Phaser.GameObjects.Group {
     constructor(scene, game) {
@@ -122,13 +112,9 @@ class DrawCrypTeams extends Phaser.GameObjects.Group {
             renderCryp(scene, this, cryp, game, team, iter);
             renderSkills(scene, this, cryp, game, team, iter);
         };
-        if (scene.registry.get('resolve')) {
-            animatePhase(scene, this, game, account);
-        } else {
         game.teams.find(t => t.id === account.id).cryps.forEach((cryp, i) => renderTeam(cryp, 0, i));
         game.teams.filter(t => t.id !== account.id)[0].cryps.forEach((cryp, i) => renderTeam(cryp, 1, i));
     }
-    }
 }
 
-module.exports = { CrypImage, CrypSkill, DrawCrypTeams };
+module.exports = { CrypImage, CrypSkill, DrawCrypTeams, renderCryp};

client/src/scenes/combat.js

@@ -42,7 +42,7 @@ class Combat extends Phaser.Scene {
         const logY = COMBAT.LOG.y();
         const logWidth = COMBAT.LOG.width();
         this.skills = new CombatSkills(this);
-        this.logIndex = 0;
+        this.logIter = 0; this.resolvedIter = 0;
         this.registry.set('resolve', false);
         this.log = this.add.text(logX, logY, '', TEXT.NORMAL);
         this.log.setWordWrapWidth(logWidth);
@@ -53,7 +53,6 @@ class Combat extends Phaser.Scene {
         if (key === 'game') {
             if (!this.registry.get('activeSkill')
                 && !this.registry.get('resolve')) {
-                this.renderCryps(data);
                 this.renderLog(data);
             }
         }
@@ -62,30 +61,31 @@ class Combat extends Phaser.Scene {
 
     renderLog(game) {
         if (!game) return false;
-        while (game.log.length !== this.logIndex) {
-            if (game.log[this.logIndex] === '<Resolve Phase>') {
-                this.registry.set('resolve', true);
-                this.logIndex += 1;
-                combatRender(this, game);
-                break;
-            } this.logIndex += 1;
-        }
-        // shallow copy because reverse mutates
-        this.log.setText(Array.from(game.log).slice(0, this.logIndex).reverse());
-        return true;
-    }
 
-    iterateLog() {
-        this.logIndex += 1;
-    }
-
-    renderCryps(game) {
         if (this.crypTeamRender) {
             this.crypTeamRender.destroy(true);
+        } this.crypTeamRender = new DrawCrypTeams(this, game);
+
+        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;
+                combatRender(this, game);
+                break;
+            } this.logIter += 1;
         }
-        this.crypTeamRender = new DrawCrypTeams(this, game);
+        // shallow copy because reverse mutates
+        this.log.setText(Array.from(game.log).slice(0, this.logIter).reverse());
         return true;
     }
+
+    iterateLog(game) {
+        this.logIter += 1;
+        this.resolvedIter += 1;
+        this.log.setText(Array.from(game.log).slice(0, this.logIter).reverse());
+        return this.resolvedIter === game.resolved.length;
+    }
 }
 
 module.exports = Combat;

client/src/scenes/combat.render.js

@@ -1,25 +1,51 @@
+const Phaser = require('phaser');
+const { renderCryp } = require('./combat.cryps');
+
 const randomSkill = () => {
     const skills = ['wall', 'spit', 'gravBlast', 'gravBomb', 'chargeBall'];
     return skills[Math.floor(Math.random() * 5)];
 };
 
+function animatePhase(scene, group, game, account, delay) {
+    const resolved = game.resolved[scene.resolvedIter];
+    const allyCryp = game.teams.find(t => t.id === account.id).cryps.find(
+        c => c.id === resolved.source_cryp_id || c.id === resolved.target_cryp_id
+    );
+    const enemyCryp = game.teams.filter(t => t.id !== account.id)[0].cryps.find(
+        c => c.id === resolved.source_cryp_id || c.id === resolved.target_cryp_id
+    );
+    const allySpawn = renderCryp(scene, group, allyCryp, game, 0, 1);
+    const enemySpawn = renderCryp(scene, group, enemyCryp, game, 1, 1);
+
+    const target = allyCryp.id === resolved.target_cryp_id ? allySpawn : enemySpawn;
+    scene.time.delayedCall(delay, () => {
+        target.setTint(0xff0000);
+    });
+}
+
+
 function combatRender(scene, game) {
     let delay = 0;
-    // const skill = randomSkill();
+    const skill = randomSkill();
-    const resolved = game.resolved[scene.skills.resolvedIter];
+    const resolved = game.resolved[scene.resolvedIter];
-    const target = resolved.source_team_id === scene.registry.get('account').id;
+    const account = scene.registry.get('account');
-    delay = scene.skills[resolved.skill](target);
+    const animatedGroup = new Phaser.GameObjects.Group(scene);
-    scene.iterateLog(game);
+    const target = resolved.source_team_id === account.id;
-    scene.log.setText(Array.from(game.log).slice(0, scene.logIndex).reverse());
+
-    scene.renderCryps(game);
+    delay = scene.skills[skill](target);
-    if (scene.skills.checkSkillLog(game)) {
+    animatePhase(scene, animatedGroup, game, account, delay[0]);
-        scene.time.delayedCall(delay, () => {
+
+    if (scene.iterateLog(game)) {
+        scene.time.delayedCall(delay[1], () => {
             scene.registry.set('resolve', false);
             scene.skills.cleanup();
+            animatedGroup.destroy(true);
+            scene.renderLog(game);
         });
     } else {
-        scene.time.delayedCall(delay, () => {
+        scene.time.delayedCall(delay[1], () => {
             scene.skills.cleanup();
+            animatedGroup.destroy(true);
             combatRender(scene, game);
         });
     }

client/src/scenes/combat.skills.js

@@ -19,15 +19,9 @@ class CombatSkills extends Phaser.GameObjects.Group {
     constructor(scene) {
         super(scene);
         this.scene = scene;
-        this.resolvedIter = 0;
     }
 
-    checkSkillLog(game) {
+    wall(target) {
-        this.resolvedIter += 1;
-        return this.resolvedIter === game.resolved.length;
-    }
-
-    Attack(target) {
         const { spawnLocation, speed, img } = animationParams(target);
         const particles = this.scene.add.particles(img);
         const emitter = particles.createEmitter({
@@ -41,7 +35,7 @@ class CombatSkills extends Phaser.GameObjects.Group {
         });
         this.add(particles);
         this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this.scene);
-        return 3000;
+        return [1500, 3000];
     }
 
     spit(target) {
@@ -60,7 +54,7 @@ class CombatSkills extends Phaser.GameObjects.Group {
         });
         this.add(particles);
         this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this);
-        return 3000;
+        return [1500, 3000];
     }
 
     gravBomb(target) {
@@ -83,7 +77,7 @@ class CombatSkills extends Phaser.GameObjects.Group {
         });
         this.add(particles);
         this.scene.time.delayedCall(1000, () => { this.emitter.stop(); well.active = false; }, [], this.scene);
-        return 2500;
+        return [1000, 2500];
     }
 
     gravBlast(target) {
@@ -112,7 +106,7 @@ 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 3000;
+        return [1500, 3000];
     }
 
     chargeBall(target) {
@@ -146,7 +140,7 @@ 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 4000;
+        return [3000, 4000];
     }
 
     cleanup() {