Added block animations, misc ui fixes

client/src/scenes/combat.animations.js

@@ -15,7 +15,7 @@ const animationParams = (isAlly) => {
     return { spawnLocation, speed, img, angleMin, angleMax };
 };
 
-const randomAnimation = () => {
+const randomAttack = () => {
     const animations = ['wall', 'spit', 'gravBlast', 'gravBomb', 'chargeBall'];
     return animations[Math.floor(Math.random() * 5)];
 };
@@ -27,25 +27,18 @@ class CombatSkills extends Phaser.GameObjects.Group {
     }
 
     getSkill(type, isAlly, castLocation) {
-        if (type === 'attack') {
+        const genericHeal = ['Heal', 'Triage', 'TriageTick'];
-            this[randomAnimation()](isAlly);
+        const genericBlock = ['Block', 'Parry', 'Evasion', 'Shield'];
+
+        if (genericHeal.includes(type)) {
+            this.genericHeal(isAlly, castLocation);
+        } else if (genericBlock.includes(type)) {
+            this.genericBlock(isAlly);
         } else {
-            this[type](isAlly, castLocation);
+            this[randomAttack()](isAlly);
         }
     }
 
-    Heal(isAlly, castLocation) {
-        this.genericHeal(isAlly, castLocation);
-    }
-
-    Triage(isAlly, castLocation) {
-        this.genericHeal(isAlly, castLocation);
-    }
-
-    TriageTick(isAlly, castLocation) {
-        this.genericHeal(isAlly, castLocation);
-    }
-
     genericHeal(isAlly, castLocation) {
         // const { sourceX, sourceY } = getCrypPosition(sourcePos, 0);
         const lifespan = DELAYS.ANIMATION_DURATION;
@@ -88,7 +81,7 @@ class CombatSkills extends Phaser.GameObjects.Group {
         this.scene.time.delayedCall(lifespan, () => { emitter.stop(); }, [], this);
     }
 
-    Block(isAlly) {
+    genericBlock(isAlly) {
         const lifespan = DELAYS.ANIMATION_DURATION;
         const colour = randomColour();
         const x = isAlly ? COMBAT.width() * 0.3 : COMBAT.width() * 0.7;

client/src/scenes/combat.hitbox.js

@@ -66,6 +66,7 @@ class CombatHitBox extends Phaser.Scene {
                 const cback = () => {
                     const { activeSkill } = skillScene;
                     if (activeSkill) {
+                        this.scene.get('CombatSkills').clearCrypActive(activeSkill.cryp.id);
                         activeSkill.activate();
                         skillScene.activeSkill = null;
                         this.game.events.emit('SEND_SKILL', game.id, activeSkill.cryp.id, c.id, activeSkill.skill.skill);

client/src/scenes/combat.js

@@ -1,6 +1,7 @@
 const Phaser = require('phaser');
 const { throttle } = require('lodash');
 
+const { POSITIONS: { COMBAT }, TEXT } = require('./constants');
 const CombatLog = require('./combat.log');
 const CombatCryps = require('./combat.cryps');
 const CombatSkills = require('./combat.skills');
@@ -27,9 +28,21 @@ class Combat extends Phaser.Scene {
         console.log('creating game');
         this.registry.events.off('changedata', this.updateData);
         this.registry.events.on('changedata', this.updateData, this);
+
         this.input.keyboard.on('keydown_BACKSPACE', () => {
             this.cleanUp();
         }, 0, this);
+        const leaveGame = this.add
+            .rectangle(COMBAT.width() * 0.8, COMBAT.height() * 0.8, COMBAT.width() * 0.1, COMBAT.height() * 0.1, 0xff9215)
+            .setInteractive()
+            .setOrigin(0)
+            .on('pointerdown', () => {
+                this.cleanUp();
+            });
+        this.add
+            .text(leaveGame.getCenter().x, leaveGame.getCenter().y, 'Leave Game', TEXT.HEADER)
+            .setOrigin(0.5, 0.5);
+
         this.registry.set('gamePhase', false);
         this.registry.set('inGame', true);
         this.registry.set('gameAnimating', false);
@@ -106,10 +119,10 @@ class Combat extends Phaser.Scene {
         this.registry.set('menu', true);
         this.registry.set('game', null);
 
-        this.scene.get('CombatLog').cleanUp();
+        const ACTIVE_SCENES = ['CombatLog', 'CombatCryps', 'CombatSkills', 'CombatHitBox'];
-        this.scene.get('CombatCryps').cleanUp();
+        ACTIVE_SCENES.forEach((sKey) => {
-        this.scene.get('CombatSkills').cleanUp();
+            if (this.scene.get(sKey)) this.scene.get(sKey).cleanUp();
-        this.scene.get('CombatHitBox').cleanUp();
+        });
         this.scene.remove();
 
         return true;

client/src/scenes/combat.log.js

@@ -8,7 +8,8 @@ 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.cameras.main.setViewport(COMBAT.LOG.x(), COMBAT.LOG.y(), COMBAT.LOG.width(), COMBAT.LOG.height());
+        this.log = this.add.text(0, 0, '', TEXT.NORMAL);
         this.logIndex = game.log.length;
         this.logData = game.log;
         this.log.setWordWrapWidth(COMBAT.LOG.width());

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

@@ -77,9 +77,7 @@ function animatePhase(scene, game, resolution, cb) {
         const isAlly = sourceSpawn.cryp.account === account.id;
 
         // animate animation
-        const workingSkills = ['Heal', 'Block', 'Triage', 'TriageTick'];
+        animations.getSkill(resolution.skill, isAlly, castLocation);
-        if (workingSkills.includes(resolution.skill)) animations.getSkill(resolution.skill, isAlly, castLocation);
-        else animations.getSkill('attack', isAlly);
 
         // Target cryp takes damage
         scene.time.delayedCall(ANIMATION_DURATION, () => {

client/src/scenes/combat.skills.js

@@ -202,12 +202,14 @@ class CombatSkills extends Phaser.Scene {
                     TARGET_KEY_MAP.forEach(k => keyboard.removeListener(k));
 
                     CRYP_KEY_MAP.forEach(k => keyboard.on(k, () => {
+                        this.clearCrypActive(crypId);
                         button.activate();
                         this.activeSkill = null;
                         this.game.events.emit('SEND_SKILL', gameId, crypId, alliesId, button.skill.skill);
                     }));
 
                     TARGET_KEY_MAP.forEach(k => keyboard.on(k, () => {
+                        this.clearCrypActive(crypId);
                         button.activate();
                         this.activeSkill = null;
                         this.game.events.emit('SEND_SKILL', gameId, crypId, enemyId, button.skill.skill);
@@ -283,6 +285,12 @@ class CombatSkills extends Phaser.Scene {
         return true;
     }
 
+    clearCrypActive(crypId) {
+        this.scene.scene.children.list.forEach((s) => {
+            if (s.cryp.id === crypId && s.state === 'activate') s.deselect();
+        });
+    }
+
     clearKeys() {
         TARGET_KEY_MAP.forEach(tKey => this.input.keyboard.removeListener(tKey));
         CRYP_KEY_MAP.forEach(tKey => this.input.keyboard.removeListener(tKey));

client/src/scenes/constants.js

@@ -43,10 +43,10 @@ const statsLearnableX = () => Math.floor(statsX() + statsWidth() / 2);
 const statsTextMargin = () => 24;
 const statsLearnableMargin = () => 12;
 
-const logWidth = () => combatWidth();
+const logWidth = () => combatWidth() * 0.5;
 const logHeight = () => combatHeight() * 0.3;
 const logY = () => headerHeight() + (combatHeight() * 0.7);
-const logX = () => combatWidth() * 0.6;
+const logX = () => combatWidth() * 0.2;
 
 
 module.exports = {