Logs and combat working again

client/src/events.js

@@ -47,7 +47,6 @@ function registerEvents(registry, events) {
             // const friendlyTarget = activeSkill.cryp.account === cryp.account;
             // if (!friendlyTarget) {
             if (game.phase === 'Skill') {
-                console.log(cryp.account);
                 ws.sendGameSkill(game.id, activeSkill.cryp.id, cryp.account, activeSkill.skill.skill);
             } else if (game.phase === 'Target') {
                 ws.sendGameTarget(game.id, cryp.id, activeSkill.skill.id);

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 {
@@ -147,12 +130,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 =
-                this.cryps.children.entries
-                    .filter(obj => obj instanceof CrypImage)
-                    .find(c => c.cryp.id === cryp.id)
-                || renderCryp(this, this.cryps, cryp, game, team, iter);
+            const crypObj = this.cryps.children.entries
+                .filter(obj => obj instanceof CrypImage)
+                .find(c => c.cryp.id === cryp.id);
+            if (!crypObj) renderCryp(cryp, iter, team);
         };
 
         const allyTeam = game.teams.find(t => t.id === this.account.id);

client/src/scenes/combat.js

@@ -79,7 +79,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();
                 });
             }
@@ -92,12 +92,13 @@ class Combat extends Phaser.Scene {
         const isAnimating = this.registry.get('gameAnimating');
         if (isAnimating) 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, this.scene.get('CombatCryps').cryps, newResolutions);
             this.renderedResolves = game.resolved.length;
-            this.combatCryps.clearSkills();
             return true;
         }
+        this.registry.set('gameLog', game.log.length);
         return true;
     }
 }

client/src/scenes/combat.log.js

@@ -9,20 +9,31 @@ 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') {
-            if (!data) return false;
-            // update log
-            // shallow copy because reverse mutates
-            this.log.setText(Array.from(data.log).reverse());
+        const UPDATE_KEYS = ['game', 'gameLog'];
+        if (UPDATE_KEYS.includes(key) && data) {
+            if (key === 'game') {
+                this.logData = data.log;
+            }
+            if (key === 'gameLog') {
+                this.logIndex = data;
+            }
+            this.updateLog();
         }
         return true;
     }
 
+    updateLog() {
+        // shallow copy because reverse mutates
+        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,14 +16,12 @@ 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;
@@ -32,7 +29,7 @@ function findResolutionCryps(scene, group, resolution, allyTeam, enemyTeam) {
 }
 
 function animatePhase(scene, group, game, resolution, cb) {
-
+    // Iterate the log
     // return early for disabled skills
     if (resolution.resolution.disable.disabled) return cb();
 
@@ -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, () => {

client/src/scenes/combat.skills.js

@@ -49,9 +49,15 @@ class CombatSkills extends Phaser.Scene {
         super({ key: 'CombatSkills' });
     }
 
-    create() {
+    create(game) {
+        this.input.on('pointerup', (pointer, obj) => {
+            if (obj[0] instanceof CrypSkill) {
+                obj[0].clickHandler();
+            }
+        });
         this.registry.events.on('changedata', this.updateData, this);
         this.account = this.registry.get('account');
+        this.renderSkills(game);
         return true;
     }
 
@@ -66,22 +72,23 @@ class CombatSkills extends Phaser.Scene {
         const shouldUpdate = game.phase !== this.phase;
 
         if (!shouldUpdate) return false;
-
         this.phase = game.phase;
+        this.children.list
+            .filter(obj => obj instanceof CrypSkill || obj instanceof CrypName)
+            .forEach(s => s.destroy());
         if (game.phase === 'Skill') return this.renderSkillPhase(game);
-        if (game.phase === 'Target') return this.renderTargetPhase(game);
+        if (game.phase === 'Target') return this.renderBlockPhase(game);
+        return true;
     }
 
     renderSkillPhase(game) {
-        const { account, scene } = this;
-
         const addSkill = (i, j, skill, cryp) => {
             const skillTextPos = skillTextPosition(i, j + 2);
             const skillObj = new CrypSkill(this, skillTextPos[0], skillTextPos[1], skill, cryp);
             this.add.existing(skillObj);
         };
 
-        const team = game.teams.find(t => t.id === account.id);
+        const team = game.teams.find(t => t.id === this.account.id);
 
         team.cryps.forEach((cryp, i) => {
             const namePos = skillTextPosition(i, 0);
@@ -102,13 +109,11 @@ class CombatSkills extends Phaser.Scene {
     }
 
     renderBlockPhase(game) {
-        const { account, scene } = this;
-
-        const skills = game.stack.find(skill => skill.target_team_id === account.id);
-
+        const skills = game.stack.filter(skill => skill.target_team_id === this.account.id);
         skills.forEach((skill, i) => {
-            const cryp = game.teams.find(t => t.cryps.find(c => c.id === skill.source_cryp_id));
-
+            const cryp = game.teams
+                .find(t => t.cryps.find(c => c.id === skill.source_cryp_id)).cryps
+                .find(c => c.id === skill.source_cryp_id);
             // Draw the cryp name
             const namePos = skillTextPosition(i, 0);
             this.add.existing(new CrypName(this, namePos[0], namePos[1], cryp));
@@ -138,6 +143,12 @@ class CombatSkills extends Phaser.Scene {
         }
         return true;
     }
+
+    cleanUp() {
+        this.registry.events.off('changedata', this.updateData);
+        this.scene.remove();
+    }
+
 }
 
 module.exports = CombatSkills;