diff --git a/client/src/scenes/combat.skills.js b/client/src/scenes/combat.animations.js
similarity index 97%
rename from client/src/scenes/combat.skills.js
rename to client/src/scenes/combat.animations.js
index 74e35ce8..87d6a339 100644
--- a/client/src/scenes/combat.skills.js
+++ b/client/src/scenes/combat.animations.js
@@ -1,155 +1,155 @@
-const Phaser = require('phaser');
-const { POSITIONS: { COMBAT }, DELAYS } = require('./constants');
-
-const randomColour = () => {
-    const colours = ['green', 'blue', 'red', 'white', 'yellow'];
-    return colours[Math.floor(Math.random() * 5)];
-};
-
-const animationParams = (isAlly) => {
-    const spawnLocation = isAlly ? COMBAT.width() * 0.35 : COMBAT.width() * 0.65;
-    const speed = isAlly ? 250 : -250;
-    const img = randomColour();
-    const angleMin = isAlly ? 320 : 180;
-    const angleMax = isAlly ? 360 : 220;
-    return { spawnLocation, speed, img, angleMin, angleMax };
-};
-
-class CombatSkills extends Phaser.GameObjects.Group {
-    constructor(scene) {
-        super(scene);
-        this.scene = scene;
-    }
-
-    wall(isAlly) {
-        const lifespan = DELAYS.ANIMATION_DURATION;
-        const { spawnLocation, speed, img } = animationParams(isAlly);
-        const particles = this.scene.add.particles(img);
-        const emitter = particles.createEmitter({
-            x: spawnLocation,
-            y: { min: COMBAT.height() * 0.2, max: COMBAT.height() * 0.5 },
-            speedX: { min: speed, max: speed * 2 },
-            scale: { start: 0.4, end: 0 },
-            quantity: 4,
-            blendMode: 'ADD',
-            lifespan: 2000,
-        });
-        this.add(particles);
-        this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this.scene);
-    }
-
-    spit(isAlly) {
-        const lifespan = DELAYS.ANIMATION_DURATION;
-        const { spawnLocation, speed, img, angleMin, angleMax } = animationParams(isAlly);
-        const particles = this.scene.add.particles(img);
-        const emitter = particles.createEmitter({
-            x: spawnLocation,
-            y: COMBAT.height() * 0.35,
-            angle: { min: angleMin, max: angleMax },
-            speed: speed * 2,
-            scale: { start: 0.4, end: 1 },
-            gravityY: 250,
-            quantity: 4,
-            blendMode: 'ADD',
-            lifespan,
-        });
-        this.add(particles);
-        this.scene.time.delayedCall(lifespan, () => { emitter.stop(); }, [], this);
-    }
-
-    gravBomb(isAlly) {
-        const lifespan = DELAYS.ANIMATION_DURATION;
-
-        const { spawnLocation, img } = animationParams(!isAlly);
-        const particles = this.scene.add.particles(img);
-        const well = particles.createGravityWell({
-            x: spawnLocation,
-            y: COMBAT.height() * 0.25,
-            power: 4,
-            gravity: 500,
-        });
-        this.emitter = particles.createEmitter({
-            x: spawnLocation,
-            y: COMBAT.height() * 0.25,
-            speed: 1000,
-            scale: { start: 0.7, end: 1 },
-            blendMode: 'ADD',
-            lifespan,
-        });
-        this.add(particles);
-        this.scene.time.delayedCall(lifespan, () => { this.emitter.stop(); well.active = false; }, [], this.scene);
-    }
-
-    gravBlast(isAlly) {
-        const lifespan = DELAYS.ANIMATION_DURATION;
-        const WELL_END = lifespan / 2;
-
-        const img = randomColour();
-        const spawnLocation = isAlly ? COMBAT.width() * 0.35 : COMBAT.width() * 0.65;
-        const isEnemyLocation = isAlly ? COMBAT.width() * 0.7 : COMBAT.width() * 0.3;
-        const particles = this.scene.add.particles(img);
-        const bounds = isAlly
-            ? { x: COMBAT.width() * 0.3, y: COMBAT.height() * 0.2, w: COMBAT.width() * 0.5, h: COMBAT.height() * 0.2 }
-            : { x: 0.2 * COMBAT.width(), y: COMBAT.height() * 0.2, w: COMBAT.width() * 0.5, h: COMBAT.height() * 0.2 };
-        const well = particles.createGravityWell({
-            x: spawnLocation,
-            y: COMBAT.height() * 0.35,
-            power: 4,
-            gravity: 500,
-        });
-        const emitter = particles.createEmitter({
-            x: spawnLocation,
-            y: COMBAT.height() * 0.35,
-            speed: 1000,
-            scale: { start: 0.7, end: 1 },
-            blendMode: 'ADD',
-            bounds,
-            lifespan,
-        });
-        this.add(particles);
-        this.scene.time.delayedCall(WELL_END, () => { emitter.stop(); well.x = isEnemyLocation; }, [], this.scene);
-        this.scene.time.delayedCall(lifespan, () => { well.active = false; }, [], this.scene);
-    }
-
-    chargeBall(isAlly) {
-        const lifespan = DELAYS.ANIMATION_DURATION;
-        const CHARGE_LIFESPAN = lifespan / 3;
-
-        const { img, spawnLocation } = animationParams(isAlly);
-        const targetLocation = isAlly ? 0.7 * COMBAT.width() : 0.25 * COMBAT.width();
-        const particles = this.scene.add.particles(img);
-        const emitter = particles.createEmitter({
-            x: 0,
-            y: 0,
-            moveToX: spawnLocation,
-            moveToY: COMBAT.height() * 0.1,
-            scale: 0.75,
-            quantity: 4,
-            _frequency: 20,
-            blendMode: 'ADD',
-            emitZone: { source: new Phaser.Geom.Rectangle(0, 0, COMBAT.width(), COMBAT.height()) },
-            lifespan: CHARGE_LIFESPAN,
-        });
-        const emitter2 = particles.createEmitter({
-            radial: false,
-            x: { min: spawnLocation, max: targetLocation, steps: 90 },
-            y: { min: COMBAT.height() * 0.1, max: COMBAT.height() * 0.4, steps: 90 },
-            quantity: 4,
-            gravityY: 0,
-            scale: { start: 2, end: 0.1, ease: 'Power3' },
-            blendMode: 'ADD',
-            active: false,
-            lifespan: CHARGE_LIFESPAN,
-        });
-        this.add(particles);
-        this.scene.time.delayedCall(CHARGE_LIFESPAN, () => { emitter.stop(); }, [], this.scene);
-        this.scene.time.delayedCall(CHARGE_LIFESPAN * 2, () => { emitter2.active = true; }, [], this.scene);
-        this.scene.time.delayedCall(lifespan, () => { emitter2.stop(); }, [], this.scene);
-    }
-
-    cleanup() {
-        this.children.entries.forEach(obj => obj.destroy());
-    }
-}
-
-module.exports = CombatSkills;
+const Phaser = require('phaser');
+const { POSITIONS: { COMBAT }, DELAYS } = require('./constants');
+
+const randomColour = () => {
+    const colours = ['green', 'blue', 'red', 'white', 'yellow'];
+    return colours[Math.floor(Math.random() * 5)];
+};
+
+const animationParams = (isAlly) => {
+    const spawnLocation = isAlly ? COMBAT.width() * 0.35 : COMBAT.width() * 0.65;
+    const speed = isAlly ? 250 : -250;
+    const img = randomColour();
+    const angleMin = isAlly ? 320 : 180;
+    const angleMax = isAlly ? 360 : 220;
+    return { spawnLocation, speed, img, angleMin, angleMax };
+};
+
+class CombatSkills extends Phaser.GameObjects.Group {
+    constructor(scene) {
+        super(scene);
+        this.scene = scene;
+    }
+
+    wall(isAlly) {
+        const lifespan = DELAYS.ANIMATION_DURATION;
+        const { spawnLocation, speed, img } = animationParams(isAlly);
+        const particles = this.scene.add.particles(img);
+        const emitter = particles.createEmitter({
+            x: spawnLocation,
+            y: { min: COMBAT.height() * 0.2, max: COMBAT.height() * 0.5 },
+            speedX: { min: speed, max: speed * 2 },
+            scale: { start: 0.4, end: 0 },
+            quantity: 4,
+            blendMode: 'ADD',
+            lifespan: 2000,
+        });
+        this.add(particles);
+        this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this.scene);
+    }
+
+    spit(isAlly) {
+        const lifespan = DELAYS.ANIMATION_DURATION;
+        const { spawnLocation, speed, img, angleMin, angleMax } = animationParams(isAlly);
+        const particles = this.scene.add.particles(img);
+        const emitter = particles.createEmitter({
+            x: spawnLocation,
+            y: COMBAT.height() * 0.35,
+            angle: { min: angleMin, max: angleMax },
+            speed: speed * 2,
+            scale: { start: 0.4, end: 1 },
+            gravityY: 250,
+            quantity: 4,
+            blendMode: 'ADD',
+            lifespan,
+        });
+        this.add(particles);
+        this.scene.time.delayedCall(lifespan, () => { emitter.stop(); }, [], this);
+    }
+
+    gravBomb(isAlly) {
+        const lifespan = DELAYS.ANIMATION_DURATION;
+
+        const { spawnLocation, img } = animationParams(!isAlly);
+        const particles = this.scene.add.particles(img);
+        const well = particles.createGravityWell({
+            x: spawnLocation,
+            y: COMBAT.height() * 0.25,
+            power: 4,
+            gravity: 500,
+        });
+        this.emitter = particles.createEmitter({
+            x: spawnLocation,
+            y: COMBAT.height() * 0.25,
+            speed: 1000,
+            scale: { start: 0.7, end: 1 },
+            blendMode: 'ADD',
+            lifespan,
+        });
+        this.add(particles);
+        this.scene.time.delayedCall(lifespan, () => { this.emitter.stop(); well.active = false; }, [], this.scene);
+    }
+
+    gravBlast(isAlly) {
+        const lifespan = DELAYS.ANIMATION_DURATION;
+        const WELL_END = lifespan / 2;
+
+        const img = randomColour();
+        const spawnLocation = isAlly ? COMBAT.width() * 0.35 : COMBAT.width() * 0.65;
+        const isEnemyLocation = isAlly ? COMBAT.width() * 0.7 : COMBAT.width() * 0.3;
+        const particles = this.scene.add.particles(img);
+        const bounds = isAlly
+            ? { x: COMBAT.width() * 0.3, y: COMBAT.height() * 0.2, w: COMBAT.width() * 0.5, h: COMBAT.height() * 0.2 }
+            : { x: 0.2 * COMBAT.width(), y: COMBAT.height() * 0.2, w: COMBAT.width() * 0.5, h: COMBAT.height() * 0.2 };
+        const well = particles.createGravityWell({
+            x: spawnLocation,
+            y: COMBAT.height() * 0.35,
+            power: 4,
+            gravity: 500,
+        });
+        const emitter = particles.createEmitter({
+            x: spawnLocation,
+            y: COMBAT.height() * 0.35,
+            speed: 1000,
+            scale: { start: 0.7, end: 1 },
+            blendMode: 'ADD',
+            bounds,
+            lifespan,
+        });
+        this.add(particles);
+        this.scene.time.delayedCall(WELL_END, () => { emitter.stop(); well.x = isEnemyLocation; }, [], this.scene);
+        this.scene.time.delayedCall(lifespan, () => { well.active = false; }, [], this.scene);
+    }
+
+    chargeBall(isAlly) {
+        const lifespan = DELAYS.ANIMATION_DURATION;
+        const CHARGE_LIFESPAN = lifespan / 3;
+
+        const { img, spawnLocation } = animationParams(isAlly);
+        const targetLocation = isAlly ? 0.7 * COMBAT.width() : 0.25 * COMBAT.width();
+        const particles = this.scene.add.particles(img);
+        const emitter = particles.createEmitter({
+            x: 0,
+            y: 0,
+            moveToX: spawnLocation,
+            moveToY: COMBAT.height() * 0.1,
+            scale: 0.75,
+            quantity: 4,
+            _frequency: 20,
+            blendMode: 'ADD',
+            emitZone: { source: new Phaser.Geom.Rectangle(0, 0, COMBAT.width(), COMBAT.height()) },
+            lifespan: CHARGE_LIFESPAN,
+        });
+        const emitter2 = particles.createEmitter({
+            radial: false,
+            x: { min: spawnLocation, max: targetLocation, steps: 90 },
+            y: { min: COMBAT.height() * 0.1, max: COMBAT.height() * 0.4, steps: 90 },
+            quantity: 4,
+            gravityY: 0,
+            scale: { start: 2, end: 0.1, ease: 'Power3' },
+            blendMode: 'ADD',
+            active: false,
+            lifespan: CHARGE_LIFESPAN,
+        });
+        this.add(particles);
+        this.scene.time.delayedCall(CHARGE_LIFESPAN, () => { emitter.stop(); }, [], this.scene);
+        this.scene.time.delayedCall(CHARGE_LIFESPAN * 2, () => { emitter2.active = true; }, [], this.scene);
+        this.scene.time.delayedCall(lifespan, () => { emitter2.stop(); }, [], this.scene);
+    }
+
+    cleanup() {
+        this.children.entries.forEach(obj => obj.destroy());
+    }
+}
+
+module.exports = CombatSkills;
diff --git a/client/src/scenes/combat.cryps.js b/client/src/scenes/combat.cryps.js
index 787a3da2..09cd40e3 100644
--- a/client/src/scenes/combat.cryps.js
+++ b/client/src/scenes/combat.cryps.js
@@ -1,207 +1,207 @@
-const Phaser = require('phaser');
-
-const { DELAYS, TEXT, POSITIONS: { COMBAT }, COLOURS } = require('./constants');
-
-const calcMargin = () => {
-    const CRYP_MARGIN = COMBAT.height() / 5;
-    const TEXT_MARGIN = COMBAT.height() / 35;
-    const TEAM_MARGIN = COMBAT.width() * 0.7;
-    const X_PADDING = COMBAT.width() / 10;
-    const Y_PADDING = COMBAT.height() / 7;
-    return { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING };
-};
-
-const healthBarDimensions = (team, iter) => {
-    const { TEAM_MARGIN, TEXT_MARGIN, CRYP_MARGIN } = calcMargin();
-    const healthBarX = 1.25 * TEAM_MARGIN * team;
-    const healthBarY = COMBAT.y() + TEXT_MARGIN + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
-    const healthBarWidth = TEAM_MARGIN / 10;
-    const healthBarHeight = TEXT_MARGIN / 1.5;
-    return { healthBarX, healthBarY, healthBarWidth, healthBarHeight };
-};
-
-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;
-    const healthTextY = COMBAT.y() + TEXT_MARGIN * 2 + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
-    return { nameTextX, nameTextY, healthTextX, healthTextY };
-};
-
-const skillTextPosition = (crypIter, skillIter) => {
-    const { TEXT_MARGIN } = calcMargin();
-    const skillTextX = 0.15 * COMBAT.width() * crypIter;
-    const skillTextY = COMBAT.y() + COMBAT.height() * 0.7 + TEXT_MARGIN * skillIter;
-    return [skillTextX, skillTextY];
-};
-
-const crypPosition = (team, iter) => {
-    const { CRYP_MARGIN, TEAM_MARGIN, Y_PADDING } = calcMargin();
-    const crypAvatarX = COMBAT.width() / 8 + TEAM_MARGIN * team;
-    const crypAvatarY = Y_PADDING * 1.25 + CRYP_MARGIN * iter;
-    return { crypAvatarX, crypAvatarY };
-};
-
-class CrypImage extends Phaser.GameObjects.Image {
-    constructor(scene, team, iter, avatar, cryp, healthbar) {
-        // Avatar will be a property of cryp
-        const { crypAvatarX, crypAvatarY } = crypPosition(team, iter);
-        super(scene, crypAvatarX, crypAvatarY, avatar);
-        this.scene = scene; this.cryp = cryp; this.iter = iter;
-        this.healthbar = healthbar;
-    }
-
-    clickHandler() {
-        this.scene.game.events.emit('SEND_ACTIVE_SKILL', this.cryp);
-    }
-
-    takeDamage(damage) {
-        this.setTint(0xff0000);
-        this.healthbar.takeDamage(damage);
-        this.scene.time.delayedCall(DELAYS.DAMAGE_TICK, () => {
-            this.clearTint();
-        });
-    }
-}
-
-class CrypSkill extends Phaser.GameObjects.Text {
-    constructor(scene, x, y, skill, cryp) {
-        // Avatar will be a property of cryp
-        if (skill) {
-            const CD_TEXT = skill.cd ? `(${skill.cd}T)` : '';
-            const SKILL_TEXT = `${skill.skill} ${CD_TEXT}`;
-            super(scene, x, y, SKILL_TEXT, TEXT.NORMAL);
-            this.cryp = cryp;
-            this.skill = skill;
-            this.scene = scene;
-            this.setInteractive();
-        } else {
-            super(scene, x, y, cryp.name, TEXT.HEADER);
-        }
-    }
-
-    clickHandler() {
-        this.scene.game.events.emit('SET_ACTIVE_SKILL', this);
-    }
-}
-
-class HealthBar extends Phaser.GameObjects.Graphics {
-    constructor(scene, cryp, team, iter, crypHpText) {
-        super(scene);
-        this.team = team; this.iter = iter; 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);
-        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);
-        } else if (healthPercentage < 0.65) {
-            this.fillStyle(COLOURS.YELLOW);
-        } else {
-            this.fillStyle(0x00ff00); // str8 up green
-        }
-        const healthWidth = Math.floor(healthBarWidth * healthPercentage);
-        this.fillRect(healthBarX + 2, healthBarY + 2, healthWidth, healthBarHeight - 4);
-    }
-
-    takeDamage(damage) {
-        this.hp -= damage;
-        this.clear();
-        this.drawHealthBar();
-    }
-}
-
-function renderCryp(scene, group, cryp, game, team, iter) {
-    // Add Image Avatar Class
-    const avatar = team ? 'magmar' : 'alk';
-    // 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, '', 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))
-        .setScale(0.5)
-        .setInteractive();
-    group.addMultiple([crypHpText, healthBar, crypSpawn, crypName]);
-    return crypSpawn;
-}
-
-function renderSkills(scene, group, cryp, game, iter) {
-    const skillList = [];
-    // If the cryps have been spawned already put the skills in a corresponding pos
-    const namePos = skillTextPosition(iter, 0);
-    const addSkill = (skill, i) => {
-        // Draw skill group name as part of the "skill class" so we can destroy it later
-        if (i === 0) group.add(scene.add.existing(new CrypSkill(scene, namePos[0], namePos[1], false, cryp)));
-        const skillTextPos = skillTextPosition(iter, i + 2);
-        const skillObj = new CrypSkill(scene, skillTextPos[0], skillTextPos[1], skill, cryp);
-        group.add(scene.add.existing(skillObj));
-        skillList.push(skillObj);
-    };
-    if (game.phase === 'Skill' && cryp.account === scene.account.id) {
-        if (cryp.hp.base === 0) return true;
-        cryp.skills.forEach(addSkill);
-    } else if (game.phase === 'Target' && cryp.account !== scene.account.id) {
-        const blockSkill = game.stack.find(skill => skill.source_cryp_id === cryp.id);
-        // cryp not casting this turn
-        if (!blockSkill) return false;
-        addSkill(blockSkill, 0);
-    }
-    return skillList;
-}
-
-class DrawCrypTeams extends Phaser.GameObjects.Group {
-    constructor(scene, game) {
-        super(scene);
-        this.scene = scene;
-        this.updateCryps(game, true);
-    }
-
-    updateCryps(game, createCryps) {
-        // Setting gamePhase will stop redraw unless phase changes again
-        this.scene.registry.set('gamePhase', game.phase);
-        // Destroy skills currently shown as the game state has changed
-        this.removeSkills();
-        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 = 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();
-            crypObj.skills = renderSkills(this.scene, this, cryp, game, crypObj.iter);
-            const addKeys = (game.phase === 'Skill' && !team) || (game.phase === 'Target' && team);
-            if (addKeys) this.scene.crypKeyHandler(crypObj, crypObj.iter);
-        };
-        allyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 0));
-        enemyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 1));
-    }
-
-    removeSkills() {
-        this.children.entries.filter(obj => obj instanceof CrypSkill).forEach(obj => obj.destroy());
-    }
-}
-
-module.exports = { CrypImage, CrypSkill, DrawCrypTeams, renderCryp };
+const Phaser = require('phaser');
+
+const { DELAYS, TEXT, POSITIONS: { COMBAT }, COLOURS } = require('./constants');
+
+const calcMargin = () => {
+    const CRYP_MARGIN = COMBAT.height() / 5;
+    const TEXT_MARGIN = COMBAT.height() / 35;
+    const TEAM_MARGIN = COMBAT.width() * 0.7;
+    const X_PADDING = COMBAT.width() / 10;
+    const Y_PADDING = COMBAT.height() / 7;
+    return { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING };
+};
+
+const healthBarDimensions = (team, iter) => {
+    const { TEAM_MARGIN, TEXT_MARGIN, CRYP_MARGIN } = calcMargin();
+    const healthBarX = 1.25 * TEAM_MARGIN * team;
+    const healthBarY = COMBAT.y() + TEXT_MARGIN + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
+    const healthBarWidth = TEAM_MARGIN / 10;
+    const healthBarHeight = TEXT_MARGIN / 1.5;
+    return { healthBarX, healthBarY, healthBarWidth, healthBarHeight };
+};
+
+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;
+    const healthTextY = COMBAT.y() + TEXT_MARGIN * 2 + CRYP_MARGIN * iter + COMBAT.height() * 0.07;
+    return { nameTextX, nameTextY, healthTextX, healthTextY };
+};
+
+const skillTextPosition = (crypIter, skillIter) => {
+    const { TEXT_MARGIN } = calcMargin();
+    const skillTextX = 0.15 * COMBAT.width() * crypIter;
+    const skillTextY = COMBAT.y() + COMBAT.height() * 0.7 + TEXT_MARGIN * skillIter;
+    return [skillTextX, skillTextY];
+};
+
+const crypPosition = (team, iter) => {
+    const { CRYP_MARGIN, TEAM_MARGIN, Y_PADDING } = calcMargin();
+    const crypAvatarX = COMBAT.width() / 8 + TEAM_MARGIN * team;
+    const crypAvatarY = Y_PADDING * 1.25 + CRYP_MARGIN * iter;
+    return { crypAvatarX, crypAvatarY };
+};
+
+class CrypImage extends Phaser.GameObjects.Image {
+    constructor(scene, team, iter, avatar, cryp, healthbar) {
+        // Avatar will be a property of cryp
+        const { crypAvatarX, crypAvatarY } = crypPosition(team, iter);
+        super(scene, crypAvatarX, crypAvatarY, avatar);
+        this.scene = scene; this.cryp = cryp; this.iter = iter;
+        this.healthbar = healthbar;
+    }
+
+    clickHandler() {
+        this.scene.game.events.emit('SEND_ACTIVE_SKILL', this.cryp);
+    }
+
+    takeDamage(damage) {
+        this.setTint(0xff0000);
+        this.healthbar.takeDamage(damage);
+        this.scene.time.delayedCall(DELAYS.DAMAGE_TICK, () => {
+            this.clearTint();
+        });
+    }
+}
+
+class CrypSkill extends Phaser.GameObjects.Text {
+    constructor(scene, x, y, skill, cryp) {
+        // Avatar will be a property of cryp
+        if (skill) {
+            const CD_TEXT = skill.cd ? `(${skill.cd}T)` : '';
+            const SKILL_TEXT = `${skill.skill} ${CD_TEXT}`;
+            super(scene, x, y, SKILL_TEXT, TEXT.NORMAL);
+            this.cryp = cryp;
+            this.skill = skill;
+            this.scene = scene;
+            this.setInteractive();
+        } else {
+            super(scene, x, y, cryp.name, TEXT.HEADER);
+        }
+    }
+
+    clickHandler() {
+        this.scene.game.events.emit('SET_ACTIVE_SKILL', this);
+    }
+}
+
+class HealthBar extends Phaser.GameObjects.Graphics {
+    constructor(scene, cryp, team, iter, crypHpText) {
+        super(scene);
+        this.team = team; this.iter = iter; 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);
+        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);
+        } else if (healthPercentage < 0.65) {
+            this.fillStyle(COLOURS.YELLOW);
+        } else {
+            this.fillStyle(0x00ff00); // str8 up green
+        }
+        const healthWidth = Math.floor(healthBarWidth * healthPercentage);
+        this.fillRect(healthBarX + 2, healthBarY + 2, healthWidth, healthBarHeight - 4);
+    }
+
+    takeDamage(damage) {
+        this.hp -= damage;
+        this.clear();
+        this.drawHealthBar();
+    }
+}
+
+function renderCryp(scene, group, cryp, game, team, iter) {
+    // Add Image Avatar Class
+    const avatar = team ? 'magmar' : 'alk';
+    // 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, '', 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))
+        .setScale(0.5)
+        .setInteractive();
+    group.addMultiple([crypHpText, healthBar, crypSpawn, crypName]);
+    return crypSpawn;
+}
+
+function renderSkills(scene, group, cryp, game, iter) {
+    const skillList = [];
+    // If the cryps have been spawned already put the skills in a corresponding pos
+    const namePos = skillTextPosition(iter, 0);
+    const addSkill = (skill, i) => {
+        // Draw skill group name as part of the "skill class" so we can destroy it later
+        if (i === 0) group.add(scene.add.existing(new CrypSkill(scene, namePos[0], namePos[1], false, cryp)));
+        const skillTextPos = skillTextPosition(iter, i + 2);
+        const skillObj = new CrypSkill(scene, skillTextPos[0], skillTextPos[1], skill, cryp);
+        group.add(scene.add.existing(skillObj));
+        skillList.push(skillObj);
+    };
+    if (game.phase === 'Skill' && cryp.account === scene.account.id) {
+        if (cryp.hp.base === 0) return true;
+        cryp.skills.forEach(addSkill);
+    } else if (game.phase === 'Target' && cryp.account !== scene.account.id) {
+        const blockSkill = game.stack.find(skill => skill.source_cryp_id === cryp.id);
+        // cryp not casting this turn
+        if (!blockSkill) return false;
+        addSkill(blockSkill, 0);
+    }
+    return skillList;
+}
+
+class DrawCrypTeams extends Phaser.GameObjects.Group {
+    constructor(scene, game) {
+        super(scene);
+        this.scene = scene;
+        this.updateCryps(game, true);
+    }
+
+    updateCryps(game, createCryps) {
+        // Setting gamePhase will stop redraw unless phase changes again
+        this.scene.registry.set('gamePhase', game.phase);
+        // Destroy skills currently shown as the game state has changed
+        this.removeSkills();
+        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 = 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();
+            crypObj.skills = renderSkills(this.scene, this, cryp, game, crypObj.iter);
+            const addKeys = (game.phase === 'Skill' && !team) || (game.phase === 'Target' && team);
+            if (addKeys) this.scene.crypKeyHandler(crypObj, crypObj.iter);
+        };
+        allyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 0));
+        enemyTeam.cryps.forEach((cryp, i) => renderTeam(cryp, i, 1));
+    }
+
+    removeSkills() {
+        this.children.entries.filter(obj => obj instanceof CrypSkill).forEach(obj => obj.destroy());
+    }
+}
+
+module.exports = { CrypImage, CrypSkill, DrawCrypTeams, renderCryp };
diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js
index 59a949f5..77d76b36 100644
--- a/client/src/scenes/combat.js
+++ b/client/src/scenes/combat.js
@@ -1,108 +1,106 @@
-const Phaser = require('phaser');
-const fs = require('fs');
-
-const { POSITIONS: { COMBAT }, TEXT } = require('./constants');
-const { DrawCrypTeams, CrypImage, CrypSkill } = require('./combat.cryps');
-const renderResolutions = require('./combat.render.resolutions');
-
-const CRYP_KEY_MAP = ['keydown_ONE', 'keydown_TWO', 'keydown_THREE'];
-const SKILL_KEY_MAP = ['keydown_Q', 'keydown_W', 'keydown_E', 'keydown_R'];
-const CombatSkills = require('./combat.skills');
-
-
-class Combat extends Phaser.Scene {
-    constructor() {
-        super({ key: 'Combat' });
-    }
-
-    preload() {
-        /* Static Images */
-        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');
-        this.load.image('blue', 'http://labs.phaser.io/assets/particles/blue.png');
-        this.load.image('green', 'http://labs.phaser.io/assets/particles/green.png');
-        this.load.image('red', 'http://labs.phaser.io/assets/particles/red.png');
-        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
-        }, 0, this);
-
-        this.input.on('pointerup', (pointer, obj) => {
-            if (obj[0] instanceof CrypImage || obj[0] instanceof CrypSkill) {
-                obj[0].clickHandler();
-            } else if (this.registry.get('activeSkill')) {
-                this.registry.get('activeSkill').clearTint();
-                this.registry.set('activeSkill', null);
-            }
-        });
-        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);
-        this.log.setWordWrapWidth(COMBAT.LOG.width());
-        return true;
-    }
-
-    updateData(parent, key, data) {
-        if (key === 'game') {
-            if (!data) return false;
-            if (!this.registry.get('gamePhase')) { // Game hasn't started yet
-                this.crypTeamRender = new DrawCrypTeams(this, data);
-            }
-
-            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') && !(this.registry.get('gamePhase') === game.phase);
-        if (!updatedNeeded) return false;
-
-        // do we need to render resolution animations?
-        if (game.resolved.length !== this.renderedResolves) {
-            // Turn skills off...in future we might get it to show something else instead
-            this.crypTeamRender.removeSkills();
-            const newResolutions = game.resolved.slice(this.renderedResolves);
-            renderResolutions(this, game, this.crypTeamRender, newResolutions);
-            this.renderedResolves = game.resolved.length;
-            return true;
-        }
-
-        // If not animating resolutions render static skill / block phase
-        // Update relevant parts of the game state without redrawing it all
-        this.crypTeamRender.updateCryps(game, false);
-
-        // update log
-        // shallow copy because reverse mutates
-        this.log.setText(Array.from(game.log).slice(0, this.logIter).reverse());
-
-        return true;
-    }
-
-    crypKeyHandler(cryp, iter) {
-        if (CRYP_KEY_MAP[iter]) {
-            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], () => {
-                    SKILL_KEY_MAP.forEach(k => this.input.keyboard.removeListener(k));
-                    cryp.skills.forEach((skill, i) => {
-                        this.input.keyboard.on(SKILL_KEY_MAP[i], () => {
-                            this.game.events.emit('SET_ACTIVE_SKILL', skill);
-                            skill.setActive();
-                        }, this);
-                    });
-                }, this);
-            }
-        }
-    }
-}
-
-module.exports = Combat;
+const Phaser = require('phaser');
+const fs = require('fs');
+
+const { POSITIONS: { COMBAT }, TEXT } = require('./constants');
+const { DrawCrypTeams, CrypImage, CrypSkill } = require('./combat.cryps');
+const renderResolutions = require('./combat.render.resolutions');
+
+const CRYP_KEY_MAP = ['keydown_ONE', 'keydown_TWO', 'keydown_THREE'];
+const SKILL_KEY_MAP = ['keydown_Q', 'keydown_W', 'keydown_E', 'keydown_R'];
+
+class Combat extends Phaser.Scene {
+    constructor() {
+        super({ key: 'Combat' });
+    }
+
+    preload() {
+        /* Static Images */
+        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');
+        this.load.image('blue', 'http://labs.phaser.io/assets/particles/blue.png');
+        this.load.image('green', 'http://labs.phaser.io/assets/particles/green.png');
+        this.load.image('red', 'http://labs.phaser.io/assets/particles/red.png');
+        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
+        }, 0, this);
+
+        this.input.on('pointerup', (pointer, obj) => {
+            if (obj[0] instanceof CrypImage || obj[0] instanceof CrypSkill) {
+                obj[0].clickHandler();
+            } else if (this.registry.get('activeSkill')) {
+                this.registry.get('activeSkill').clearTint();
+                this.registry.set('activeSkill', null);
+            }
+        });
+        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);
+        this.log.setWordWrapWidth(COMBAT.LOG.width());
+        return true;
+    }
+
+    updateData(parent, key, data) {
+        if (key === 'game') {
+            if (!data) return false;
+            if (!this.registry.get('gamePhase')) { // Game hasn't started yet
+                this.crypTeamRender = new DrawCrypTeams(this, data);
+            }
+
+            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') && !(this.registry.get('gamePhase') === game.phase);
+        if (!updatedNeeded) return false;
+
+        // do we need to render resolution animations?
+        if (game.resolved.length !== this.renderedResolves) {
+            // Turn skills off...in future we might get it to show something else instead
+            this.crypTeamRender.removeSkills();
+            const newResolutions = game.resolved.slice(this.renderedResolves);
+            renderResolutions(this, game, this.crypTeamRender, newResolutions);
+            this.renderedResolves = game.resolved.length;
+            return true;
+        }
+
+        // If not animating resolutions render static skill / block phase
+        // Update relevant parts of the game state without redrawing it all
+        this.crypTeamRender.updateCryps(game, false);
+
+        // update log
+        // shallow copy because reverse mutates
+        this.log.setText(Array.from(game.log).slice(0, this.logIter).reverse());
+
+        return true;
+    }
+
+    crypKeyHandler(cryp, iter) {
+        if (CRYP_KEY_MAP[iter]) {
+            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], () => {
+                    SKILL_KEY_MAP.forEach(k => this.input.keyboard.removeListener(k));
+                    cryp.skills.forEach((skill, i) => {
+                        this.input.keyboard.on(SKILL_KEY_MAP[i], () => {
+                            this.game.events.emit('SET_ACTIVE_SKILL', skill);
+                            skill.setActive();
+                        }, this);
+                    });
+                }, this);
+            }
+        }
+    }
+}
+
+module.exports = Combat;
\ No newline at end of file
diff --git a/client/src/scenes/combat.render.resolutions.js b/client/src/scenes/combat.render.resolutions.js
index 394a019d..b5d89c59 100644
--- a/client/src/scenes/combat.render.resolutions.js
+++ b/client/src/scenes/combat.render.resolutions.js
@@ -1,105 +1,105 @@
-const { eachSeries } = require('async');
-
-const CombatSkills = require('./combat.skills');
-const { CrypImage } = require('./combat.cryps');
-const {
-    DELAYS: { ANIMATION_DURATION, MOVE_CREEP, DAMAGE_TICK },
-    POSITIONS: { COMBAT },
-} = require('./constants');
-
-const randomSkill = () => {
-    const skills = ['chargeBall'];
-    return skills[Math.floor(Math.random() * 1)];
-};
-
-function findResolutionCryps(scene, group, resolution, allyTeam, enemyTeam) {
-    const allyCryp = allyTeam.cryps.find(
-        c => c.id === resolution.source_cryp_id || c.id === resolution.target_cryp_id
-    );
-    const allySpawn = group.children.entries
-        .filter(obj => obj instanceof CrypImage)
-        .find(c => c.cryp.id === allyCryp.id);
-
-    const enemyCryp = enemyTeam.cryps.find(
-        c => c.id === resolution.source_cryp_id || c.id === resolution.target_cryp_id
-    );
-    const enemySpawn = group.children.entries
-        .filter(obj => obj instanceof CrypImage)
-        .find(c => c.cryp.id === enemyCryp.id);
-
-    const target = allyCryp.id === resolution.target_cryp_id ? enemySpawn : allySpawn;
-    return { allySpawn, enemySpawn, target };
-}
-
-function animatePhase(scene, group, game, resolution, cb) {
-    scene.skills = new CombatSkills(scene);
-
-    // Find cryps and targets
-    const tweenParams = (targets, centreSpot, enemy) => {
-        let x = centreSpot ? COMBAT.width() * 0.3 : targets.x;
-        x = (enemy && centreSpot) ? x + COMBAT.width() * 0.4 : x;
-        const y = centreSpot ? COMBAT.height() * 13.25 / 35 : targets.y;
-        const ease = 'Power1';
-        const duration = MOVE_CREEP;
-        return { targets, x, y, ease, duration };
-    };
-
-    // find the teams
-    const account = 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 { allySpawn, enemySpawn, target } = findResolutionCryps(scene, group, resolution, allyTeam, enemyTeam);
-
-    const moveAllyBattle = tweenParams(allySpawn, true, false);
-    const moveAllyOrig = tweenParams(allySpawn, false, false);
-    const moveEnemyBattle = tweenParams(enemySpawn, true, true);
-    const moveEnemyOrig = tweenParams(enemySpawn, false, true);
-
-    // Move cryps into posistion
-    scene.tweens.add(moveAllyBattle);
-    scene.tweens.add(moveEnemyBattle);
-
-    // animate skill
-    const skill = randomSkill();
-    scene.time.delayedCall(MOVE_CREEP, () => {
-        const isAlly = resolution.target_team_id === account.id;
-        scene.skills[skill](isAlly);
-
-        // Target cryp takes damage
-        scene.time.delayedCall(ANIMATION_DURATION, () => {
-            target.takeDamage(100);
-
-            // Move cryps back
-            scene.time.delayedCall(DAMAGE_TICK, () => {
-                scene.tweens.add(moveAllyOrig);
-                scene.tweens.add(moveEnemyOrig);
-
-                // all done
-                scene.time.delayedCall(MOVE_CREEP, () => {
-                    scene.skills.cleanup();
-                    scene.skills.destroy();
-                    return cb();
-                });
-            });
-        });
-    });
-}
-
-function renderResolutions(scene, game, group, resolutions) {
-    scene.registry.set('gameAnimating', true);
-
-    eachSeries(
-        resolutions,
-        (resolution, cb) => animatePhase(scene, group, game, resolution, cb),
-        (err) => {
-            if (err) return console.error(err);
-            scene.registry.set('gameAnimating', false);
-            return true;
-        }
-    );
-
-    return true;
-}
-
-module.exports = renderResolutions;
+const { eachSeries } = require('async');
+
+const CombatAnimations = require('./combat.animations');
+const { CrypImage } = require('./combat.cryps');
+const {
+    DELAYS: { ANIMATION_DURATION, MOVE_CREEP, DAMAGE_TICK },
+    POSITIONS: { COMBAT },
+} = require('./constants');
+
+const randomAnimation = () => {
+    const animations = ['wall', 'spit', 'gravBlast', 'gravBomb', 'chargeBall'];
+    return animations[Math.floor(Math.random() * 5)];
+};
+
+function findResolutionCryps(scene, group, resolution, allyTeam, enemyTeam) {
+    const allyCryp = allyTeam.cryps.find(
+        c => c.id === resolution.source_cryp_id || c.id === resolution.target_cryp_id
+    );
+    const allySpawn = group.children.entries
+        .filter(obj => obj instanceof CrypImage)
+        .find(c => c.cryp.id === allyCryp.id);
+
+    const enemyCryp = enemyTeam.cryps.find(
+        c => c.id === resolution.source_cryp_id || c.id === resolution.target_cryp_id
+    );
+    const enemySpawn = group.children.entries
+        .filter(obj => obj instanceof CrypImage)
+        .find(c => c.cryp.id === enemyCryp.id);
+
+    const target = allyCryp.id === resolution.target_cryp_id ? enemySpawn : allySpawn;
+    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;
+        x = (enemy && centreSpot) ? x + COMBAT.width() * 0.4 : x;
+        const y = centreSpot ? COMBAT.height() * 13.25 / 35 : targets.y;
+        const ease = 'Power1';
+        const duration = MOVE_CREEP;
+        return { targets, x, y, ease, duration };
+    };
+
+    // find the teams
+    const account = 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 { allySpawn, enemySpawn, target } = findResolutionCryps(scene, group, resolution, allyTeam, enemyTeam);
+
+    const moveAllyBattle = tweenParams(allySpawn, true, false);
+    const moveAllyOrig = tweenParams(allySpawn, false, false);
+    const moveEnemyBattle = tweenParams(enemySpawn, true, true);
+    const moveEnemyOrig = tweenParams(enemySpawn, false, true);
+
+    // 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;
+        animations[animation](isAlly);
+
+        // Target cryp takes damage
+        scene.time.delayedCall(ANIMATION_DURATION, () => {
+            target.takeDamage(100);
+
+            // Move cryps back
+            scene.time.delayedCall(DAMAGE_TICK, () => {
+                scene.tweens.add(moveAllyOrig);
+                scene.tweens.add(moveEnemyOrig);
+
+                // all done
+                scene.time.delayedCall(MOVE_CREEP, () => {
+                    animations.cleanup();
+                    animations.destroy();
+                    return cb();
+                });
+            });
+        });
+    });
+}
+
+function renderResolutions(scene, game, group, resolutions) {
+    scene.registry.set('gameAnimating', true);
+
+    eachSeries(
+        resolutions,
+        (resolution, cb) => animatePhase(scene, group, game, resolution, cb),
+        (err) => {
+            if (err) return console.error(err);
+            scene.registry.set('gameAnimating', false);
+            return true;
+        }
+    );
+
+    return true;
+}
+
+module.exports = renderResolutions;