refactoring stuff

client/src/events.js

@@ -36,6 +36,23 @@ function registerEvents(registry, events) {
         return setActiveSkill(skill);
     });
 
+    events.on('SEND_ACTIVE_SKILL', function skillActive(cryp) {
+        const activeSkill = registry.get('activeSkill');
+        const game = registry.get('game');
+        if (activeSkill) {
+            if (activeSkill.cryp.account !== cryp.account) {
+                const ws = registry.get('ws');
+                if (game.phase === 'Skill') {
+                    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);
+                }
+            }
+            activeSkill.clearTint();
+            registry.set('activeSkill', null);
+        }
+    });
+
     events.on('CRYP_ACTIVE', function crypActiveCb(cryp) {
         const cryps = registry.get('cryps');
 

client/src/scenes/combat.cryps.js

@@ -22,7 +22,6 @@ const healthBarDimensions = (team, iter) => {
 
 const crypAvatarText = (team, iter) => {
     const { TEAM_MARGIN, CRYP_MARGIN, TEXT_MARGIN } = calcMargin();
-
     const nameTextX = 1.25 * TEAM_MARGIN * team;
     const nameTextY = COMBAT.y() + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
     const healthTextX = 1.25 * TEAM_MARGIN * team;
@@ -49,28 +48,12 @@ class CrypImage extends Phaser.GameObjects.Image {
         // Avatar will be a property of cryp
         const { crypAvatarX, crypAvatarY } = crypPosition(team, iter);
         super(scene, crypAvatarX, crypAvatarY, avatar);
-        this.scene = scene;
+        this.scene = scene; this.cryp = cryp; this.skills = skills;
-        this.cryp = cryp;
-        this.skills = skills;
         this.healthbar = healthbar;
     }
 
     clickHandler() {
-        const activeSkill = this.scene.registry.get('activeSkill');
+        this.scene.game.events.emit('SEND_ACTIVE_SKILL', this.cryp);
-        const game = this.scene.registry.get('game');
-        if (activeSkill) {
-            if (activeSkill.cryp.account !== this.cryp.account) {
-                const ws = this.scene.registry.get('ws');
-                if (game.phase === 'Skill') {
-                    ws.sendGameSkill(game.id, activeSkill.cryp.id, this.cryp.account, activeSkill.skill.skill);
-                } else if (game.phase === 'Target') {
-                    ws.sendGameTarget(game.id, this.cryp.id, activeSkill.skill.id);
-                }
-            }
-            activeSkill.clearTint();
-            this.scene.registry.set('activeSkill', null);
-            this.scene.registry.set('activeCryp', null);
-        }
     }
 
     takeDamage(damage) {
@@ -86,41 +69,35 @@ class CrypSkill extends Phaser.GameObjects.Text {
     constructor(scene, x, y, team, skill, cryp) {
         // Avatar will be a property of cryp
         super(scene, x, y, skill.skill, TEXT.NORMAL);
-        this.cryp = cryp;
+        this.cryp = cryp; this.skill = skill; this.scene = scene;
-        this.skill = skill;
         this.setInteractive();
     }
 
     clickHandler() {
-        const activeSkill = this.scene.registry.get('activeSkill');
+        this.scene.game.events.emit('SET_ACTIVE_SKILL', this);
-        if (activeSkill) {
-            activeSkill.clearTint();
-        }
-        this.scene.registry.set('activeSkill', this);
-        this.setTint(COLOURS.BLUE);
     }
 }
 
 class HealthBar extends Phaser.GameObjects.Graphics {
     constructor(scene, cryp, team, iter, crypHpText) {
         super(scene);
-        this.team = team;
+        this.team = team; this.iter = iter; this.hp = cryp.hp.base;
-        this.iter = iter;
+        this.stam = cryp.stamina.base; this.hpText = crypHpText;
-        this.hp = cryp.hp.base;
-        this.stam = cryp.stamina.base;
-        this.hpText = crypHpText;
         this.drawHealthBar();
     }
 
     drawHealthBar() {
-        const { healthBarX, healthBarY, healthBarWidth, healthBarHeight } = healthBarDimensions(this.team, this.iter);
+        const {
+            healthBarX, healthBarY, healthBarWidth, healthBarHeight,
+        } = healthBarDimensions(this.team, this.iter);
+        this.hpText.text = `${this.hp.toString()} / ${this.stam.toString()} HP`;
         // Draw Black Border
         this.fillStyle(COLOURS.BLACK);
         this.fillRect(healthBarX, healthBarY, healthBarWidth, healthBarHeight);
         // White fill
         this.fillStyle(COLOURS.WHITE);
         this.fillRect(healthBarX + 2, healthBarY + 2, healthBarWidth - 4, healthBarHeight - 4);
-
+        // Fill the health bar
         const healthPercentage = this.hp / this.stam;
         if (healthPercentage < 0.3) {
             this.fillStyle(COLOURS.RED);
@@ -135,7 +112,6 @@ class HealthBar extends Phaser.GameObjects.Graphics {
 
     takeDamage(damage) {
         this.hp -= damage;
-        this.hpText.text = `${this.hp.toString()} / ${this.stam.toString()} HP`;
         this.clear();
         this.drawHealthBar();
     }
@@ -147,7 +123,7 @@ function renderCryp(scene, group, cryp, skills, game, team, iter) {
     // 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, `${cryp.hp.base.toString()} / ${cryp.stamina.base.toString()} HP`, 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 = scene.add.existing(new CrypImage(scene, team, iter, skills, avatar, cryp, healthBar))
@@ -189,19 +165,15 @@ function renderSkills(scene, group, cryp, account, game, team, iter) {
 class DrawCrypTeams extends Phaser.GameObjects.Group {
     constructor(scene, game) {
         super(scene);
-        this.scene = scene;
-        this.keyboard = scene.input.keyboard;
-        let allyCount = 0; let enemyCount = 0;
         const account = scene.registry.get('account');
-        scene.cryps.forEach((cryp) => {
+        const renderTeam = (cryp, iter, team) => {
-            const team = cryp.account === account.id ? 0 : 1;
-            const iter = cryp.account === account.id ? allyCount : enemyCount;
             const skillsObj = renderSkills(scene, this, cryp, account, game, team, iter);
             const crypObj = renderCryp(scene, this, cryp, skillsObj, game, team, iter);
-            allyCount = cryp.account === account.id ? allyCount += 1 : enemyCount += 1;
             const addKeys = (game.phase === 'Skill' && !team) || (game.phase === 'Target' && team);
             if (addKeys) scene.crypKeyHandler(crypObj, iter);
-        });
+        };
+        scene.allyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 0));
+        scene.enemyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 1));
     }
 }
 

client/src/scenes/combat.js

@@ -48,6 +48,7 @@ class Combat extends Phaser.Scene {
         this.skills = new CombatSkills(this);
         this.logIter = 0; this.resolvedIter = 0;
         this.registry.set('resolve', false);
+        this.account = this.registry.get('account');
         this.log = this.add.text(logX, logY, '', TEXT.NORMAL);
         this.log.setWordWrapWidth(logWidth);
         return true;
@@ -76,8 +77,13 @@ class Combat extends Phaser.Scene {
                 return true;
             } this.logIter += 1;
         }
-        this.cryps = [];
+        game.teams.forEach((t) => {
-        game.teams.forEach(t => t.cryps.forEach(cryp => this.cryps.push(cryp)));
+            if (this.account.id === t.id) {
+                this.allyTeam = t;
+            } else {
+                this.enemyTeam = t;
+            }
+        });
         // If not animating render static skill / block phase
         if (this.crypTeamRender) {
             this.crypTeamRender.destroy(true);
@@ -99,8 +105,6 @@ class Combat extends Phaser.Scene {
             this.input.keyboard.removeListener(CRYP_KEY_MAP[iter]);
             if (cryp.skills.length > 0) { // check there are cryp skills
                 this.input.keyboard.on(CRYP_KEY_MAP[iter], () => {
-                    this.registry.set('activeCryp', cryp);
-                    console.log(cryp.cryp.name);
                     SKILL_KEY_MAP.forEach(k => this.input.keyboard.removeListener(k));
                     cryp.skills.forEach((skill, i) => {
                         this.input.keyboard.on(SKILL_KEY_MAP[i], () => {

client/src/scenes/combat.render.js

@@ -1,9 +1,6 @@
 const { CrypImage } = require('./combat.cryps');
 const { DELAYS, POSITIONS: { COMBAT } } = require('./constants');
 
-const MOVE_CREEP = 1000;
-const DAMAGE_TICK = 750;
-
 const randomSkill = () => {
     const skills = ['wall', 'spit', 'gravBlast', 'gravBomb', 'chargeBall'];
     return skills[Math.floor(Math.random() * 5)];
@@ -12,10 +9,10 @@ const randomSkill = () => {
 function animatePhase(scene, group, game, account, delay) {
     // Find cryps and targets
     const resolved = game.resolved[scene.resolvedIter];
-    const allyCryp = scene.cryps.filter(c => c.account === account.id).find(
+    const allyCryp = scene.allyTeam.cryps.find(
         c => c.id === resolved.source_cryp_id || c.id === resolved.target_cryp_id
     );
-    const enemyCryp = scene.cryps.filter(c => c.account !== account.id).find(
+    const enemyCryp = scene.enemyTeam.cryps.find(
         c => c.id === resolved.source_cryp_id || c.id === resolved.target_cryp_id
     );
     const allySpawn = group.children.entries
@@ -34,7 +31,7 @@ function animatePhase(scene, group, game, account, delay) {
         x: COMBAT.x() + COMBAT.width() * 0.3,
         y: COMBAT.height() * 13.25 / 35,
         ease: 'Power1',
-        duration: MOVE_CREEP,
+        duration: DELAYS.MOVE_CREEP,
     });
 
     scene.tweens.add({
@@ -42,7 +39,7 @@ function animatePhase(scene, group, game, account, delay) {
         x: COMBAT.x() + COMBAT.width() * 0.7,
         y: COMBAT.height() * 13.25 / 35,
         ease: 'Power1',
-        duration: MOVE_CREEP,
+        duration: DELAYS.MOVE_CREEP,
     });
     // Target cryp takes damage into posistion
     scene.time.delayedCall(delay + DELAYS.MOVE_CREEP, () => {
@@ -55,7 +52,7 @@ function animatePhase(scene, group, game, account, delay) {
             x: allyCrypX,
             y: allyCrypY,
             ease: 'Power1',
-            duration: MOVE_CREEP,
+            duration: DELAYS.MOVE_CREEP,
         });
 
         scene.tweens.add({
@@ -63,7 +60,7 @@ function animatePhase(scene, group, game, account, delay) {
             x: enemyCrypX,
             y: enemyCrypY,
             ease: 'Power1',
-            duration: MOVE_CREEP,
+            duration: DELAYS.MOVE_CREEP,
         });
     });
 }
@@ -81,13 +78,13 @@ function combatRender(scene, game, group) {
     animatePhase(scene, group, game, account, delay[0]);
 
     if (scene.iterateLog(game)) {
-        scene.time.delayedCall(delay[1] + DELAYS.MOVE_CREEP * 2 + DELAYS.DAMAGE_TICK, () => {
+        scene.time.delayedCall(delay[1] + DELAYS.MOVE_CREEP * 2, () => {
             scene.registry.set('resolve', false);
             scene.skills.cleanup();
             scene.renderLog(game);
         });
     } else {
-        scene.time.delayedCall(delay[1] + DELAYS.MOVE_CREEP * 2 + DELAYS.DAMAGE_TICK, () => {
+        scene.time.delayedCall(delay[1] + DELAYS.MOVE_CREEP * 2, () => {
             scene.skills.cleanup();
             combatRender(scene, game, group);
         });

client/src/scenes/combat.skills.js

@@ -58,7 +58,7 @@ class CombatSkills extends Phaser.GameObjects.Group {
     gravBomb(target) {
         const { spawnLocation, img } = animationParams(!target);
         const particles = this.scene.add.particles(img);
-        const location = target ? COMBAT.width() * 0.6 : COMBAT.width() * 0.1;
+        const location = target ? COMBAT.width() * 0.65 : COMBAT.width() * 0.35;
         const well = particles.createGravityWell({
             x: location,
             y: COMBAT.height() * 0.25,