added effects

client/src/scenes/combat.cryps.js

@@ -24,6 +24,12 @@ const crypAvatarText = (team, iter) => {
     return { statusX, statusY, nameX, nameY, healthX, healthY };
 };
 
+const crypEffects = (team, iter) => {
+    const crypEffectsX = COMBAT.width() / 7.5 + TEAM_MARGIN * team;
+    const crypEffectsY = TEXT_MARGIN * 2 + CRYP_MARGIN * iter;
+    return { crypEffectsX, crypEffectsY };
+};
+
 const crypPosition = (team, iter) => {
     const crypAvatarX = COMBAT.width() / 7.5 + TEAM_MARGIN * team;
     const crypAvatarY = TEXT_MARGIN * 5 + CRYP_MARGIN * iter;
@@ -74,6 +80,40 @@ class HealthBar extends Phaser.GameObjects.Graphics {
     }
 }
 
+class Effects extends Phaser.GameObjects.Group {
+    constructor(scene, team, iter) {
+        super(scene);
+        this.scene = scene;
+        const { crypEffectsX, crypEffectsY } = crypEffects(team, iter);
+        this.x = crypEffectsX; this.y = crypEffectsY;
+        this.effectCount = 0;
+    }
+
+    addEffect(effect) {
+        const y = this.y + this.effectCount * TEXT_MARGIN;
+        const text = `${effect.effect} for ${effect.duration} turn`;
+        const e = this.scene.add.text(this.x, y, text, TEXT.NORMAL);
+        e.effect = effect.effect;
+        this.add(e);
+        this.effectCount += 1;
+    }
+
+    removeEffect(effect) {
+        this.children.entries.forEach((e) => {
+            if (e.effect === effect) e.destroy();
+        });
+    }
+
+    update(effects) {
+        this.effectCount = 0;
+        this.children.entries.forEach(e => e.destroy());
+        effects.forEach((effect) => {
+            this.addEffect(effect);
+        });
+        return true;
+    }
+}
+
 class CrypImage extends Phaser.GameObjects.Image {
     constructor(scene, team, iter, cryp) {
         // Get coords
@@ -98,7 +138,8 @@ class CrypImage extends Phaser.GameObjects.Image {
         // Add cryp hp
         const healthText = scene.add.text(healthX, healthY, '', TEXT.NORMAL);
         this.healthBar = scene.add.existing(new HealthBar(scene, cryp, team, iter, healthText));
-        this.statusText = scene.add.text(statusX, statusY, 'grep', TEXT.NORMAL);
+        this.effects = scene.add.existing(new Effects(scene, team, iter));
+        this.statusText = scene.add.text(statusX, statusY, '', TEXT.NORMAL);
     }
 
     clearStatus() {
@@ -126,13 +167,12 @@ 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);
         this.registry.set('crypStatusUpdate', false);
     }
 
     updateData(parent, key, data) {
         if (key === 'game' && data) {
-            const isAnimating = this.registry.get('gameAnimating');
+            const isAnimating = this.phase === 'animating';
             if (isAnimating) return false;
             this.drawCryps(data);
         }
@@ -178,6 +218,7 @@ class CombatCryps extends Phaser.Scene {
                 || renderCryp(cryp, iter, team);
             crypObj.healthBar.hp = cryp.hp.base;
             crypObj.healthBar.drawHealthBar();
+            crypObj.effects.update(cryp.effects);
         };
 
         const allyTeam = game.teams.find(t => t.id === this.account.id);

client/src/scenes/combat.js

@@ -56,6 +56,7 @@ class Combat extends Phaser.Scene {
         this.scene.manager.add('CombatSkills', CombatSkills, true, game.phase);
         this.scene.manager.add('CombatHitBox', CombatHitBox, true, game.phase);
         this.registry.set('gamePhase', game.phase);
+        this.phase = game.phase;
         return true;
     }
 
@@ -93,17 +94,18 @@ class Combat extends Phaser.Scene {
 
     checkAnimation(game) {
         // Check cryps are loaded and whether game is animating
-        const cantAnimate = this.registry.get('gameAnimating') || !this.registry.get('crypLoaded');
+        const cantAnimate = this.registry.get('gamePhase') === 'animating';
         if (cantAnimate) return false;
         if (game.resolved.length !== this.renderedResolves) {
-            this.registry.set('gamePhase', 'animating');
-            this.registry.set('gameLog', this.registry.get('gameLog') + 1);
             const newResolutions = game.resolved.slice(this.renderedResolves);
             renderResolutions(this, game, newResolutions);
             this.renderedResolves = game.resolved.length;
             return true;
         }
+        if (this.phase !== game.phase) {
+            this.phase = game.phase;
             this.registry.set('gamePhase', game.phase);
+        }
         if (this.registry.get('gameLog') !== game.log.length) {
             this.registry.set('gameLog', game.log.length);
         }

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

@@ -94,11 +94,13 @@ function animatePhase(scene, game, resolution, cb) {
                         return setTimeout(tickCb, DAMAGE_TICK);
                     }
                     if (resultType === 'Effect') {
+                        targetSpawn.effects.addEffect(values);
                         console.log('target has new effect', values.effect);
                         return setTimeout(tickCb, DAMAGE_TICK);
                     }
 
                     if (resultType === 'Removal') {
+                        targetSpawn.effects.removeEffect(values.effect);
                         console.log('target effect removed', values.effect);
                         return setTimeout(tickCb, DAMAGE_TICK);
                     }
@@ -122,13 +124,15 @@ function animatePhase(scene, game, resolution, cb) {
 }
 
 function renderResolutions(scene, game, resolutions) {
-    scene.registry.set('gameAnimating', true);
+    scene.registry.set('gamePhase', 'animating');
+    scene.registry.set('gameLog', scene.registry.get('gameLog') + 1);
+
     eachSeries(
         resolutions,
         (resolution, cb) => animatePhase(scene, game, resolution, cb),
         (err) => {
             if (err) return console.error(err);
-            scene.registry.set('gameAnimating', false);
+            scene.registry.set('gamePhase', 'Skill');
             return true;
         }
     );