scene restart stuff, doesn't spam rerender

client/src/events.js

@@ -50,8 +50,10 @@ function registerEvents(registry, events) {
                 } else if (game.phase === 'Target') {
                     ws.sendGameTarget(game.id, cryp.id, activeSkill.skill.id);
                 }
-            }
                 activeSkill.setTint(0xff0000);
+            } else {
+                activeSkill.clearTint();
+            }
             registry.set('activeSkill', null);
         }
     });

client/src/scenes/combat.animations.js

@@ -32,7 +32,7 @@ class CombatSkills extends Phaser.GameObjects.Group {
             scale: { start: 0.4, end: 0 },
             quantity: 4,
             blendMode: 'ADD',
-            lifespan: 2000,
+            lifespan,
         });
         this.add(particles);
         this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this.scene);

client/src/scenes/combat.cryps.js

@@ -119,7 +119,8 @@ class HealthBar extends Phaser.GameObjects.Graphics {
     }
 
     takeDamage(damage) {
-        this.hp -= damage;
+        const takeDamage = (damage > this.hp) ? this.hp : damage;
+        this.hp -= takeDamage;
         this.clear();
         this.drawHealthBar();
     }
@@ -134,7 +135,8 @@ function renderCryp(scene, group, cryp, game, team, iter) {
     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 = scene.add.existing(new CrypImage(scene, team, iter, avatar, cryp, healthBar))
+    const crypSpawn = new CrypImage(scene, team, iter, avatar, cryp, healthBar);
+    scene.add.existing(crypSpawn)
         .setScale(0.5)
         .setInteractive();
     group.addMultiple([crypHpText, healthBar, crypSpawn, crypName]);
@@ -171,17 +173,20 @@ class CombatCryps extends Phaser.GameObjects.Group {
         this.scene = scene;
     }
 
-    update(game) {
+    update(game, createCryps) {
         // Setting gamePhase will stop redraw unless phase changes again
-        this.scene.registry.set('gamePhase', game.phase);
+        this.removeSkills();
         // Destroy skills currently shown as the game state has changed
         const account = this.scene.registry.get('account');
         const allyTeam = game.teams.find(t => t.id === account.id);
         // in future there will be more than one
         const [enemyTeam] = game.teams.filter(t => t.id !== account.id);
-
         const renderTeam = (cryp, iter, team) => {
-            const crypObj = renderCryp(this.scene, this, cryp, game, team, iter);
+            const crypObj = createCryps
+                ? renderCryp(this.scene, this, cryp, game, team, iter)
+                : this.children.entries
+                    .filter(obj => obj instanceof CrypImage)
+                    .find(c => c.cryp.id === cryp.id);
             // Update to health bars wont be needed when dmg taken is done properly
             crypObj.healthbar.hp = cryp.hp.base;
             crypObj.healthbar.drawHealthBar();
@@ -191,6 +196,11 @@ class CombatCryps extends Phaser.GameObjects.Group {
         };
         allyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 0));
         enemyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 1));
+        return true;
+    }
+
+    removeSkills() {
+        this.children.entries.filter(obj => obj instanceof CrypSkill).forEach(obj => obj.destroy());
     }
 }
 

client/src/scenes/combat.js

@@ -15,7 +15,8 @@ class Combat extends Phaser.Scene {
     }
 
     preload() {
-        /* Static Images */
+        // Textures already loaded can do proper check in future when theres more textures
+        if (!(this.textures.getTextureKeys().length > 0)) {
             this.textures.addBase64('alk', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/alakazam-f.png')).toString('base64')}`);
             this.textures.addBase64('magmar', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/magmar.png')).toString('base64')}`);
             this.load.image('proj', 'http://labs.phaser.io/assets/sprites/bullet.png');
@@ -25,12 +26,12 @@ class Combat extends Phaser.Scene {
             this.load.image('white', 'http://labs.phaser.io/assets/particles/white.png');
             this.load.image('yellow', 'http://labs.phaser.io/assets/particles/yellow.png');
         }
+    }
 
     create() {
         this.registry.events.on('changedata', this.updateData, this);
         this.input.keyboard.on('keydown_S', () => {
-            this.scene.switch('CrypList'); // Switch back to cryp list
+            this.endGame();
-            this.registry.set('game', null);
         }, 0, this);
 
         this.input.on('pointerup', (pointer, obj) => {
@@ -42,9 +43,6 @@ class Combat extends Phaser.Scene {
             }
         });
 
-        this.combatCryps = new CombatCryps(this);
-
-        this.renderedResolves = 0;
         this.registry.set('gameAnimating', false);
         this.account = this.registry.get('account');
         this.log = this.add.text(COMBAT.LOG.x(), COMBAT.LOG.y(), '', TEXT.NORMAL);
@@ -62,6 +60,22 @@ class Combat extends Phaser.Scene {
         return true;
     }
 
+    startGame(game) {
+        this.registry.set('gamePhase', game.phase);
+        this.renderedResolves = game.resolved.length; // In case you rejoin mid way
+        this.combatCryps = new CombatCryps(this);
+        this.combatCryps.update(game, true);
+        return true;
+    }
+
+    endGame() {
+        this.scene.switch('CrypList'); // Switch back to cryp list
+        this.registry.set('game', null);
+        this.registry.set('gamePhase', false);
+        this.scene.stop();
+        return true;
+    }
+
     update() {
         this.fetchGame();
         return true;
@@ -70,30 +84,42 @@ class Combat extends Phaser.Scene {
     updateData(parent, key, data) {
         if (key === 'game') {
             if (!data) return false;
+            if (!this.registry.get('gamePhase')) {
+                this.startGame(data);
+                return true;
+            }
             this.redrawGame(data);
         }
         return true;
     }
 
     redrawGame(game) {
-        // Only redraw if the game is animating or the phase has changed
-        const updatedNeeded = !this.registry.get('gameAnimating');
-        if (!updatedNeeded) return false;
-
         // do we need to render resolution animations?
+        const isAnimating = this.registry.get('gameAnimating');
+        if (isAnimating) return false;
         if (game.resolved.length !== this.renderedResolves) {
             const newResolutions = game.resolved.slice(this.renderedResolves);
             renderResolutions(this, game, this.combatCryps, newResolutions);
             this.renderedResolves = game.resolved.length;
+            this.combatCryps.removeSkills();
             return true;
         }
-
+        // has the phase changed?
-        this.combatCryps.clear(true, true);
+        const phaseChange = (this.registry.get('gamePhase') === game.phase);
-        this.combatCryps.update(game);
+        if (phaseChange) return false;
+        this.registry.set('gamePhase', game.phase);
+        this.combatCryps.update(game, false);
 
         // update log
         // shallow copy because reverse mutates
-        this.log.setText(Array.from(game.log).slice(0, this.logIter).reverse());
+        this.log.setText(Array.from(game.log).reverse());
+
+        // Game over?
+        if (game.phase === 'Finish') {
+            this.time.delayedCall(5000, () => {
+                this.endGame();
+            });
+        }
 
         return true;
     }
@@ -113,6 +139,7 @@ class Combat extends Phaser.Scene {
                 }, this);
             }
         }
+        return true;
     }
 }
 

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

@@ -27,13 +27,12 @@ function findResolutionCryps(scene, group, resolution, allyTeam, enemyTeam) {
         .filter(obj => obj instanceof CrypImage)
         .find(c => c.cryp.id === enemyCryp.id);
 
-    const target = allyCryp.id === resolution.target_cryp_id ? enemySpawn : allySpawn;
+    const target = allyCryp.id === resolution.target_cryp_id ? allySpawn : enemySpawn;
     return { allySpawn, enemySpawn, target };
 }
 
 function animatePhase(scene, group, game, resolution, cb) {
     const animations = new CombatAnimations(scene);
-
     // Find cryps and targets
     const tweenParams = (targets, centreSpot, enemy) => {
         let x = centreSpot ? COMBAT.width() * 0.3 : targets.x;
@@ -59,16 +58,16 @@ function animatePhase(scene, group, game, resolution, cb) {
     // Move cryps into posistion
     scene.tweens.add(moveAllyBattle);
     scene.tweens.add(moveEnemyBattle);
-
     // animate animation
     const animation = randomAnimation();
     scene.time.delayedCall(MOVE_CREEP, () => {
-        const isAlly = resolution.target_team_id === account.id;
+        const isAlly = resolution.target_team_id !== account.id;
         animations[animation](isAlly);
 
         // Target cryp takes damage
         scene.time.delayedCall(ANIMATION_DURATION, () => {
-            target.takeDamage(100);
+            const damage = resolution.resolution.results[0][1].amount;
+            target.takeDamage(damage);
 
             // Move cryps back
             scene.time.delayedCall(DAMAGE_TICK, () => {