COMBAT ANIMATIONZZZZ

client/src/scenes/combat.cryps.js

@@ -103,15 +103,20 @@ function renderSkills(scene, group, game, cryp, iter, team) {
 }
 
 class DrawCrypTeams extends Phaser.GameObjects.Group {
-    constructor(scene, game) {
+    constructor(scene, game, resolve) {
         super(scene);
         const account = scene.registry.get('account');
         const renderTeam = (cryp, iter, team) => {
             renderCryp(scene, this, cryp, game, team, iter);
             renderSkills(scene, this, game, cryp, iter, team);
         };
-        game.teams.find(t => t.id === account.id).cryps.forEach((cryp, i) => renderTeam(cryp, i, 0));
+        if (resolve) {
-        game.teams.filter(t => t.id !== account.id)[0].cryps.forEach((cryp, i) => renderTeam(cryp, i, 1));
+            renderTeam(game.teams.find(t => t.id === account.id).cryps[0], 1, 0);
+            renderTeam(game.teams.filter(t => t.id !== account.id)[0].cryps[0], 1, 1);
+        } else {
+            game.teams.find(t => t.id === account.id).cryps.forEach((cryp, i) => renderTeam(cryp, i, 0));
+            game.teams.filter(t => t.id !== account.id)[0].cryps.forEach((cryp, i) => renderTeam(cryp, i, 1));
+        }
     }
 }
 

client/src/scenes/combat.js

@@ -1,7 +1,7 @@
 const Phaser = require('phaser');
 const fs = require('fs');
 
-const { POSITIONS, TEXT } = require('./constants');
+const { POSITIONS: { COMBAT }, TEXT } = require('./constants');
 const { DrawCrypTeams, CrypImage, CrypSkill } = require('./combat.cryps');
 
 class Combat extends Phaser.Scene {
@@ -34,14 +34,6 @@ class Combat extends Phaser.Scene {
             this.scene.switch('CrypList'); // Switch back to cryp list
         }, 0, this);
 
-        this.input.keyboard.on('keydown_G', () => {
-            this.skills('chargeBall', 'green', 400, -250);
-        }, 0, this);
-
-        this.input.keyboard.on('keydown_H', () => {
-            this.skills('spit', 'blue', 180, 250);
-        }, 0, this);
-
         this.input.on('pointerup', (pointer, obj) => {
             if (obj[0] instanceof CrypImage || obj[0] instanceof CrypSkill) {
                 obj[0].clickHandler();
@@ -51,9 +43,11 @@ class Combat extends Phaser.Scene {
             }
         });
 
-        const logX = POSITIONS.COMBAT.LOG.x();
+        const logX = COMBAT.LOG.x();
-        const logY = POSITIONS.COMBAT.LOG.y();
+        const logY = COMBAT.LOG.y();
-        const logWidth = POSITIONS.COMBAT.LOG.width();
+        const logWidth = COMBAT.LOG.width();
+        this.logIndex = 0;
+        this.resolve = false;
         this.log = this.add.text(logX, logY, '', TEXT.NORMAL);
         this.log.setWordWrapWidth(logWidth);
         return true;
@@ -62,24 +56,58 @@ class Combat extends Phaser.Scene {
     updateData(parent, key, data) {
         if (key === 'game') {
             if (!this.registry.get('activeSkill')) {
-                this.renderCryps(data);
+                this.checkLog(data);
-                this.renderCombat(data);
             }
         }
         return true;
     }
 
+    checkLog(game) {
+        if (!game) return false;
+        if (this.resolve) return true; // Animating combat
+        while (this.logIndex !== game.log.length) {
+            if (game.log[this.logIndex] === '<Resolve Phase>') {
+                this.logIndex += 1;
+                this.resolve = true;
+                this.renderCombat(game);
+                break;
+            }
+            this.logIndex += 1;
+        }
+        // shallow copy because reverse mutates
+        this.log.setText(Array.from(game.log).slice(0, this.logIndex).reverse());
+        this.renderCryps(game);
+        return true;
+    }
+
+    renderCombat(game) {
+        let delay = 0;
+        if (game.log[this.logIndex].match(/(\w|\s)*\w(?=")|\w+/g)[1] === 'bamboo basher') {
+            delay = this.skills('wall', 'green', COMBAT.width() * 0.175, 250);
+        } else {
+            delay = this.skills('wall', 'green', COMBAT.width() * 0.55, -250);
+        }
+        this.logIndex += 1;
+        this.log.setText(Array.from(game.log).slice(0, this.logIndex).reverse());
+        if (game.log[this.logIndex] === '<Skill Phase>' || this.logIndex === game.log.length) {
+            this.time.delayedCall(delay, () => {
+                this.resolve = false;
+                this.renderCryps(game);
+            });
+        } else {
+            this.time.delayedCall(delay, () => {
+                this.renderCombat(game);
+                this.renderCryps(game);
+            });
+        }
+        return true;
+    }
+
     renderCryps(game) {
         if (this.crypTeamRender) {
             this.crypTeamRender.destroy(true);
         }
-        this.crypTeamRender = new DrawCrypTeams(this, game);
+        this.crypTeamRender = new DrawCrypTeams(this, game, this.resolve);
-    }
-
-    renderCombat(game) {
-        if (!game) return false;
-        // shallow copy because reverse mutates
-        this.log.setText(Array.from(game.log).reverse());
         return true;
     }
 }

client/src/scenes/combat.skills.js

@@ -1,11 +1,8 @@
 // Skill function called by phaser combat
 const Phaser = require('phaser');
+const { POSITIONS: { COMBAT } } = require('./constants');
 
 function skills(skill, img, location, spd) {
-    if (this.combat) {
-        return;
-    }
-    this.combat = true;
     const particles = this.add.particles(img);
 
     switch (skill) {
@@ -20,12 +17,12 @@ function skills(skill, img, location, spd) {
             this.physics.add.overlap(this.proj, this.players, this.explode, null, this);
             this.proj.x = location;
             this.proj.setVelocity(spd, 0);
-            break;
+            return 3000;
 
         case 'wall':
             this.emitter = particles.createEmitter({
                 x: location,
-                y: { min: 200, max: 350 },
+                y: { min: COMBAT.height() * 0.45, max: COMBAT.height() * 0.7 },
                 lifespan: 2000,
                 speedX: { min: spd, max: spd * 2 },
                 scale: { start: 0.4, end: 0 },
@@ -33,7 +30,7 @@ function skills(skill, img, location, spd) {
                 blendMode: 'ADD',
             });
             this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this);
-            break;
+            return 3000;
 
         case 'spit':
             if (location > 250) {
@@ -55,7 +52,7 @@ function skills(skill, img, location, spd) {
                 blendMode: 'ADD',
             });
             this.time.delayedCall(1000, () => { this.emitter.stop(); this.combat = false;}, [], this);
-            break;
+            return 3000;
         case 'gravBomb':
             this.well = particles.createGravityWell({
                 x: 150,
@@ -75,7 +72,7 @@ function skills(skill, img, location, spd) {
                 this.emitter.stop();
                 this.well.active = false;
             }, [], this);
-            break;
+            return 2500;
         case 'gravBlast':
             this.well = particles.createGravityWell({
                 x: 400,
@@ -101,7 +98,7 @@ function skills(skill, img, location, spd) {
             this.time.delayedCall(3000, () => {
                 this.well.active = false;
             }, [], this);
-            break;
+            return 3000;
         case 'chargeBall':
 
             this.emitter = particles.createEmitter({
@@ -130,10 +127,11 @@ function skills(skill, img, location, spd) {
             });
             this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this);
             this.time.delayedCall(2000, () => { this.emitter2.active = true; }, [], this);
-            this.time.delayedCall(3000, () => { this.emitter2.stop(); this.combat = false; }, [], this);
+            this.time.delayedCall(3000, () => { this.emitter2.stop(); 
-            break;
+                this.combat = false;}, [], this);
+            return 4000;
         default:
-            break;
+            return false;
     }
 }