complete disregard

client/src/scenes/combat.cryps.js

@@ -100,23 +100,6 @@ class HealthBar extends Phaser.GameObjects.Graphics {
     }
 }
 
-function renderCryp(scene, group, cryp, game, team, iter) {
-    // Add Image Avatar Class
-    const avatar = team ? 'magmar' : 'alk';
-    // Add cryp hp
-    const { nameTextX, nameTextY, healthTextX, healthTextY } = crypAvatarText(team, iter);
-    const crypName = scene.add.text(nameTextX, nameTextY, cryp.name, TEXT.NORMAL);
-    const crypHpText = scene.add.text(healthTextX, healthTextY, '', TEXT.NORMAL);
-    const healthBar = scene.add.existing(new HealthBar(scene, cryp, team, iter, crypHpText));
-    // Add cryp name
-    const crypSpawn = new CrypImage(scene, team, iter, avatar, cryp, healthBar);
-    scene.add.existing(crypSpawn)
-        .setScale(0.5)
-        .setInteractive();
-    group.addMultiple([crypHpText, healthBar, crypSpawn, crypName]);
-    return crypSpawn;
-}
-
 const CRYP_KEY_MAP = ['keydown_ONE', 'keydown_TWO', 'keydown_THREE'];
 
 class CombatCryps extends Phaser.Scene {
@@ -134,6 +117,7 @@ class CombatCryps extends Phaser.Scene {
         this.account = this.registry.get('account');
         this.drawCryps(game);
         this.registry.events.on('changedata', this.updateData, this);
+        this.registry.set('crypLoaded', true);
     }
 
     updateData(parent, key, data) {
@@ -147,12 +131,27 @@ class CombatCryps extends Phaser.Scene {
     }
 
     drawCryps(game) {
+        const renderCryp = (cryp, iter, team) => {
+            // Add Image Avatar Class
+            const avatar = team ? 'magmar' : 'alk';
+            // Add cryp hp
+            const { nameTextX, nameTextY, healthTextX, healthTextY } = crypAvatarText(team, iter);
+            this.add.text(nameTextX, nameTextY, cryp.name, TEXT.NORMAL);
+            const crypHpText = this.add.text(healthTextX, healthTextY, '', TEXT.NORMAL);
+            const healthBar = this.add.existing(new HealthBar(this, cryp, team, iter, crypHpText));
+            // Add cryp name
+            this.cryps.add(
+                this.add.existing(new CrypImage(this, team, iter, avatar, cryp, healthBar))
+                    .setScale(0.5)
+                    .setInteractive()
+            );
+        };
+
         const renderTeam = (cryp, iter, team) => {
-            const crypObj =
+            const crypObj = this.cryps.children.entries
-                this.cryps.children.entries
+                .filter(obj => obj instanceof CrypImage)
-                    .filter(obj => obj instanceof CrypImage)
+                .find(c => c.cryp.id === cryp.id);
-                    .find(c => c.cryp.id === cryp.id)
+            if (!crypObj) renderCryp(cryp, iter, team);
-                || renderCryp(this, this.cryps, cryp, game, team, iter);
         };
 
         const allyTeam = game.teams.find(t => t.id === this.account.id);

client/src/scenes/combat.js

@@ -43,7 +43,7 @@ class Combat extends Phaser.Scene {
                 return ws.sendGameState(game.id);
             }
             return false;
-        }, 1000);
+        }, 2000);
         return true;
     }
 
@@ -80,7 +80,7 @@ class Combat extends Phaser.Scene {
             this.checkAnimation(data);
             // Game over?
             if (data.phase === 'Finish') {
-                this.time.delayedCall(5000, () => {
+                this.time.delayedCall(10000, () => {
                     this.endGame();
                 });
             }
@@ -89,16 +89,19 @@ class Combat extends Phaser.Scene {
     }
 
     checkAnimation(game) {
-        // do we need to render resolution animations?
+        // Check cryps are loaded and whether game is animating
-        const isAnimating = this.registry.get('gameAnimating');
+        const cantAnimate = this.registry.get('gameAnimating') || !this.registry.get('crypLoaded');
-        if (isAnimating) return false;
+        if (cantAnimate) return false;
         if (game.resolved.length !== this.renderedResolves) {
+            this.registry.set('gameLog', this.registry.get('gameLog') + 1);
             const newResolutions = game.resolved.slice(this.renderedResolves);
-            renderResolutions(this, game, this.combatCryps, newResolutions);
+            renderResolutions(this, game, newResolutions);
             this.renderedResolves = game.resolved.length;
-            this.combatCryps.clearSkills();
             return true;
         }
+        if (this.registry.get('gameLog') !== game.log.length) {
+            this.registry.set('gameLog', game.log.length);
+        }
         return true;
     }
 }

client/src/scenes/combat.log.js

@@ -9,20 +9,37 @@ class CombatLog extends Phaser.Scene {
     create(game) {
         this.registry.events.on('changedata', this.updateData, this);
         this.log = this.add.text(COMBAT.LOG.x(), COMBAT.LOG.y(), '', TEXT.NORMAL);
+        this.logIndex = game.log.length;
+        this.logData = game.log;
         this.log.setWordWrapWidth(COMBAT.LOG.width());
         this.log.setText(Array.from(game.log).reverse());
     }
 
     updateData(parent, key, data) {
-        if (key === 'game') {
+        const UPDATE_KEYS = ['game', 'gameLog'];
-            if (!data) return false;
+        if (UPDATE_KEYS.includes(key) && data) {
-            // update log
+            if (key === 'game') {
-            // shallow copy because reverse mutates
+                this.logData = data.log;
-            this.log.setText(Array.from(data.log).reverse());
+            }
+            if (key === 'gameLog') {
+                this.logIndex = data;
+            }
+            this.updateLog();
         }
         return true;
     }
 
+    updateLog() {
+        // shallow copy because reverse mutates
+        if (this.logData.length > this.logIndex + 1
+            && Array.from(this.logData)[this.logIndex].slice(-2) === 'KO') {
+            this.logIndex += 1;
+            this.registry.set('gameLog', this.logIndex);
+        }
+        // }
+        this.log.setText(Array.from(this.logData).slice(0, this.logIndex).reverse());
+    }
+
     cleanUp() {
         this.registry.events.off('changedata', this.updateData);
         this.scene.remove();

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

@@ -1,7 +1,6 @@
 const { eachSeries } = require('async');
 
 const CombatAnimations = require('./combat.animations');
-const { CrypImage } = require('./combat.cryps');
 const {
     DELAYS: { ANIMATION_DURATION, MOVE_CREEP, DAMAGE_TICK },
     POSITIONS: { COMBAT },
@@ -17,25 +16,23 @@ function findResolutionCryps(scene, group, resolution, allyTeam, enemyTeam) {
         c => c.id === resolution.source_cryp_id || c.id === resolution.target_cryp_id
     );
     const allySpawn = group.children.entries
-        .filter(obj => obj instanceof CrypImage)
         .find(c => c.cryp.id === allyCryp.id);
 
     const enemyCryp = enemyTeam.cryps.find(
         c => c.id === resolution.source_cryp_id || c.id === resolution.target_cryp_id
     );
     const enemySpawn = group.children.entries
-        .filter(obj => obj instanceof CrypImage)
         .find(c => c.cryp.id === enemyCryp.id);
 
     const target = allyCryp.id === resolution.target_cryp_id ? allySpawn : enemySpawn;
     return { allySpawn, enemySpawn, target };
 }
 
-function animatePhase(scene, group, game, resolution, cb) {
+function animatePhase(scene, game, resolution, cb) {
-
+    // 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 tweenParams = (targets, centreSpot, enemy) => {
@@ -72,6 +69,7 @@ function animatePhase(scene, group, game, resolution, cb) {
         scene.time.delayedCall(ANIMATION_DURATION, () => {
             const damage = resolution.resolution.results[0][1].amount;
             target.takeDamage(damage);
+            scene.registry.set('gameLog', scene.registry.get('gameLog') + 1);
 
             // Move cryps back
             scene.time.delayedCall(DAMAGE_TICK, () => {
@@ -88,12 +86,11 @@ function animatePhase(scene, group, game, resolution, cb) {
     });
 }
 
-function renderResolutions(scene, game, group, resolutions) {
+function renderResolutions(scene, game, resolutions) {
     scene.registry.set('gameAnimating', true);
-
     eachSeries(
         resolutions,
-        (resolution, cb) => animatePhase(scene, group, game, resolution, cb),
+        (resolution, cb) => animatePhase(scene, game, resolution, cb),
         (err) => {
             if (err) return console.error(err);
             scene.registry.set('gameAnimating', false);