skill refactor, random skills during combat

client/src/scenes/combat.cryps.js

@@ -91,7 +91,7 @@ function renderCryp(scene, group, cryp, game, team, iter) {
     group.add(crypName);
 }
 
-function renderSkills(scene, group, game, cryp, iter, team) {
+function renderSkills(scene, group, cryp, game, team, iter) {
     if (game.phase === 'Skill') {
         cryp.skills.forEach((skill, i) => {
             group.add(scene.add.existing(new CrypSkill(scene, i, iter, team, skill, cryp)));
@@ -103,19 +103,19 @@ function renderSkills(scene, group, game, cryp, iter, team) {
 }
 
 class DrawCrypTeams extends Phaser.GameObjects.Group {
-    constructor(scene, game, resolve) {
+    constructor(scene, game) {
         super(scene);
         const account = scene.registry.get('account');
-        const renderTeam = (cryp, iter, team) => {
+        const renderTeam = (cryp, team, iter) => {
             renderCryp(scene, this, cryp, game, team, iter);
-            renderSkills(scene, this, game, cryp, iter, team);
+            renderSkills(scene, this, cryp, game, team, iter);
         };
-        if (resolve) {
+        if (scene.registry.get('resolve')) {
-            renderTeam(game.teams.find(t => t.id === account.id).cryps[0], 1, 0);
+            renderCryp(scene, this, game.teams.find(t => t.id === account.id).cryps[0], game, 0, 1);
-            renderTeam(game.teams.filter(t => t.id !== account.id)[0].cryps[0], 1, 1);
+            renderCryp(scene, this, game.teams.filter(t => t.id !== account.id)[0].cryps[0], game, 1, 1);
         } else {
-            game.teams.find(t => t.id === account.id).cryps.forEach((cryp, i) => renderTeam(cryp, i, 0));
+            game.teams.find(t => t.id === account.id).cryps.forEach((cryp, i) => renderTeam(cryp, 0, i));
-            game.teams.filter(t => t.id !== account.id)[0].cryps.forEach((cryp, i) => renderTeam(cryp, i, 1));
+            game.teams.filter(t => t.id !== account.id)[0].cryps.forEach((cryp, i) => renderTeam(cryp, 1, i));
         }
     }
 }

client/src/scenes/combat.js

@@ -3,9 +3,11 @@ const fs = require('fs');
 
 const { POSITIONS: { COMBAT }, TEXT } = require('./constants');
 const { DrawCrypTeams, CrypImage, CrypSkill } = require('./combat.cryps');
+const combatRender = require('./combat.render');
+const CombatSkills = require('./combat.skills');
 
 class Combat extends Phaser.Scene {
-    constructor(props) {
+    constructor() {
         super({ key: 'Combat' });
     }
 
@@ -13,19 +15,12 @@ class Combat extends Phaser.Scene {
         /* 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('sky', 'http://labs.phaser.io/assets/skies/nebula.jpg');
         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');
-        /* Spritesheets */
-        this.load.spritesheet({
-            key: 'explosion',
-            url: 'http://labs.phaser.io/assets/sprites/explosion.png',
-            frameConfig: { frameWidth: 64, frameHeight: 64, endFrame: 23 },
-        });
     }
 
     create() {
@@ -46,8 +41,9 @@ class Combat extends Phaser.Scene {
         const logX = COMBAT.LOG.x();
         const logY = COMBAT.LOG.y();
         const logWidth = COMBAT.LOG.width();
+        this.skills = new CombatSkills(this);
         this.logIndex = 0;
-        this.resolve = false;
+        this.registry.set('resolve', false);
         this.log = this.add.text(logX, logY, '', TEXT.NORMAL);
         this.log.setWordWrapWidth(logWidth);
         return true;
@@ -56,49 +52,34 @@ class Combat extends Phaser.Scene {
     updateData(parent, key, data) {
         if (key === 'game') {
             if (!this.registry.get('activeSkill')) {
-                this.checkLog(data);
+                this.renderLog(data);
             }
         }
         return true;
     }
 
-    checkLog(game) {
+    renderLog(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
+        if (!this.registry.get('resolve')) {
+            this.iterateLog(game);
+        }
         this.log.setText(Array.from(game.log).slice(0, this.logIndex).reverse());
         this.renderCryps(game);
         return true;
     }
 
-    renderCombat(game) {
+    iterateLog(game) {
-        let delay = 0;
+        if (this.registry.get('resolve')) {
-        if (game.log[this.logIndex].match(/(\w|\s)*\w(?=")|\w+/g)[1] === 'bamboo basher') {
+            this.logIndex += 1;
-            delay = this.skills('wall', 'green', COMBAT.width() * 0.175, 250);
+            return true;
-        } else {
+        } while (game.log.length !== this.logIndex) {
-            delay = this.skills('wall', 'green', COMBAT.width() * 0.55, -250);
+            if (game.log[this.logIndex] === '<Resolve Phase>') {
-        }
+                this.registry.set('resolve', true);
-        this.logIndex += 1;
+                this.logIndex += 1;
-        this.log.setText(Array.from(game.log).slice(0, this.logIndex).reverse());
+                combatRender(this, game);
-        if (game.log[this.logIndex] === '<Skill Phase>' || this.logIndex === game.log.length) {
+                break;
-            this.time.delayedCall(delay, () => {
+            } this.logIndex += 1;
-                this.resolve = false;
-                this.renderCryps(game);
-            });
-        } else {
-            this.time.delayedCall(delay, () => {
-                this.renderCombat(game);
-                this.renderCryps(game);
-            });
         }
         return true;
     }
@@ -107,10 +88,9 @@ class Combat extends Phaser.Scene {
         if (this.crypTeamRender) {
             this.crypTeamRender.destroy(true);
         }
-        this.crypTeamRender = new DrawCrypTeams(this, game, this.resolve);
+        this.crypTeamRender = new DrawCrypTeams(this, game);
         return true;
     }
 }
-Combat.prototype.skills = require('./combat.skills.js');
 
 module.exports = Combat;

client/src/scenes/combat.render.js

@@ -0,0 +1,31 @@
+const randomSkill = () => {
+    const skills = ['wall', 'spit', 'gravBlast', 'gravBomb', 'chargeBall'];
+    return skills[Math.floor(Math.random() * 5)];
+};
+
+function combatRender(scene, game) {
+    let delay = 0;
+    const skill = randomSkill();
+    // Need to update this with proper cryp / team / skill checking
+    const target = game.log[scene.logIndex].match(/(\w|\s)*\w(?=")|\w+/g)[1] === 'bamboo basher';
+    delay = scene.skills[skill](target);
+
+    scene.iterateLog(game);
+    scene.log.setText(Array.from(game.log).slice(0, scene.logIndex).reverse());
+    if (game.log[scene.logIndex] === '<Skill Phase>' || scene.logIndex === game.log.length) {
+        scene.time.delayedCall(delay, () => {
+            scene.skills.cleanup();
+            scene.registry.set('resolve', false);
+            scene.renderCryps(game);
+        });
+    } else {
+        scene.time.delayedCall(delay, () => {
+            scene.skills.cleanup();
+            combatRender(scene, game);
+            scene.renderCryps(game);
+        });
+    }
+    return true;
+}
+
+module.exports = combatRender;

client/src/scenes/combat.skills.js

@@ -1,139 +1,151 @@
-// Skill function called by phaser combat
 const Phaser = require('phaser');
 const { POSITIONS: { COMBAT } } = require('./constants');
 
-function skills(skill, img, location, spd) {
+const randomColour = () => {
-    const particles = this.add.particles(img);
+    const colours = ['green', 'blue', 'red', 'white', 'yellow'];
+    return colours[Math.floor(Math.random() * 5)];
+};
 
-    switch (skill) {
+const animationParams = (target) => {
-        case 'blast':
+    const spawnLocation = target ? COMBAT.width() * 0.175 : COMBAT.width() * 0.55;
-            this.proj = this.physics.add.image(-100, 300, 'proj');
+    const speed = target ? 250 : -250;
-            this.emitter = particles.createEmitter({
+    const img = randomColour();
-                speed: 25,
+    const angleMin = target ? 320 : 180;
-                scale: { start: 1, end: 0 },
+    const angleMax = target ? 360 : 220;
-                blendMode: 'ADD',
+    return { spawnLocation, speed, img, angleMin, angleMax };
-            });
+};
-            this.emitter.startFollow(this.proj);
-            this.physics.add.overlap(this.proj, this.players, this.explode, null, this);
-            this.proj.x = location;
-            this.proj.setVelocity(spd, 0);
-            return 3000;
 
-        case 'wall':
+class CombatSkills extends Phaser.GameObjects.Group {
-            this.emitter = particles.createEmitter({
+    constructor(scene) {
-                x: location,
+        super(scene);
-                y: { min: COMBAT.height() * 0.45, max: COMBAT.height() * 0.7 },
+        this.scene = scene;
-                lifespan: 2000,
+    }
-                speedX: { min: spd, max: spd * 2 },
-                scale: { start: 0.4, end: 0 },
-                quantity: 4,
-                blendMode: 'ADD',
-            });
-            this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this);
-            return 3000;
 
-        case 'spit':
+    wall(target) {
-            if (location > 250) {
+        const { spawnLocation, speed, img } = animationParams(target);
-                this.angleMin = 180;
+        const particles = this.scene.add.particles(img);
-                this.angleMax = 220;
+        const emitter = particles.createEmitter({
-            } else {
+            x: spawnLocation,
-                this.angleMin = 320;
+            y: { min: COMBAT.height() * 0.45, max: COMBAT.height() * 0.7 },
-                this.angleMax = 360;
+            lifespan: 2000,
-            }
+            speedX: { min: speed, max: speed * 2 },
-            this.emitter = particles.createEmitter({
+            scale: { start: 0.4, end: 0 },
-                x: location,
+            quantity: 4,
-                y: 300,
+            blendMode: 'ADD',
-                lifespan: 2000,
+        });
-                angle: { min: this.angleMin, max: this.angleMax },
+        this.add(particles);
-                speed: spd * 2,
+        this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this.scene);
-                scale: { start: 0.4, end: 1 },
+        return 3000;
-                gravityY: 250,
+    }
-                quantity: 4,
-                blendMode: 'ADD',
-            });
-            this.time.delayedCall(1000, () => { this.emitter.stop(); this.combat = false;}, [], this);
-            return 3000;
-        case 'gravBomb':
-            this.well = particles.createGravityWell({
-                x: 150,
-                y: 150,
-                power: 4,
-                gravity: 500,
-            });
-            this.emitter = particles.createEmitter({
-                x: 150,
-                y: 150,
-                lifespan: 1500,
-                speed: 1000,
-                scale: { start: 0.7, end: 1 },
-                blendMode: 'ADD',
-            });
-            this.time.delayedCall(1000, () => {
-                this.emitter.stop();
-                this.well.active = false;
-            }, [], this);
-            return 2500;
-        case 'gravBlast':
-            this.well = particles.createGravityWell({
-                x: 400,
-                y: 300,
-                power: 4,
-                gravity: 500,
-            });
-            this.emitter = particles.createEmitter({
-                x: 400,
-                y: 300,
-                lifespan: 2000,
-                speed: 1000,
-                scale: { start: 0.7, end: 1 },
-                blendMode: 'ADD',
-                bounds: {
-                    x: 0, y: 250, w: 450, h: 150,
-                },
-            });
-            this.time.delayedCall(1000, () => {
-                this.emitter.stop();
-                this.well.x = 100;
-            }, [], this);
-            this.time.delayedCall(3000, () => {
-                this.well.active = false;
-            }, [], this);
-            return 3000;
-        case 'chargeBall':
 
-            this.emitter = particles.createEmitter({
+    spit(target) {
-                x: -400,
+        const { spawnLocation, speed, img, angleMin, angleMax } = animationParams(target);
-                y: -100,
+        const particles = this.scene.add.particles(img);
-                lifespan: 1000,
+        const emitter = particles.createEmitter({
-                moveToX: 450,
+            x: spawnLocation,
-                moveToY: 150,
+            y: COMBAT.height() * 0.5,
-                scale: 0.75,
+            lifespan: 2000,
-                quantity: 4,
+            angle: { min: angleMin, max: angleMax },
-                _frequency: 20,
+            speed: speed * 2,
-                blendMode: 'ADD',
+            scale: { start: 0.4, end: 1 },
-                emitZone: { source: new Phaser.Geom.Rectangle(0, 0, 1600, 700) },
+            gravityY: 250,
-            });
+            quantity: 4,
-            this.emitter2 = particles.createEmitter({
+            blendMode: 'ADD',
-                radial: false,
+        });
-                x: { min: 450, max: 50, steps: 256 },
+        this.add(particles);
-                y: { min: 150, max: 300, steps: 256 },
+        this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this);
-                lifespan: 1000,
+        return 3000;
-                speedX: { min: 200, max: 400 },
+    }
-                quantity: 4,
+
-                gravityY: 0,
+    gravBomb(target) {
-                scale: { start: 1.5, end: 0, ease: 'Power3' },
+        const { spawnLocation, img } = animationParams(!target);
-                blendMode: 'ADD',
+        const particles = this.scene.add.particles(img);
-                active: false,
+        const location = target ? COMBAT.width() * 0.6 : COMBAT.width() * 0.1;
-            });
+        const well = particles.createGravityWell({
-            this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this);
+            x: location,
-            this.time.delayedCall(2000, () => { this.emitter2.active = true; }, [], this);
+            y: COMBAT.height() * 0.25,
-            this.time.delayedCall(3000, () => { this.emitter2.stop(); 
+            power: 4,
-                this.combat = false;}, [], this);
+            gravity: 500,
-            return 4000;
+        });
-        default:
+        this.emitter = particles.createEmitter({
-            return false;
+            x: spawnLocation,
+            y: COMBAT.height() * 0.25,
+            lifespan: 1500,
+            speed: 1000,
+            scale: { start: 0.7, end: 1 },
+            blendMode: 'ADD',
+        });
+        this.add(particles);
+        this.scene.time.delayedCall(1000, () => { this.emitter.stop(); well.active = false; }, [], this.scene);
+        return 2500;
+    }
+
+    gravBlast(target) {
+        const img = randomColour();
+        const spawnLocation = target ? COMBAT.width() * 0.2 : COMBAT.width() * 0.45;
+        const targetLocation = target ? COMBAT.width() * 0.6 : COMBAT.width() * 0.1;
+        const particles = this.scene.add.particles(img);
+        const bounds = target
+            ? { x: COMBAT.width() * 0.15, y: COMBAT.height() * 0.35, w: COMBAT.width() * 0.55, h: COMBAT.height() * 0.2 }
+            : { x: 0, y: COMBAT.height() * 0.35, w: COMBAT.width() * 0.55, h: COMBAT.height() * 0.2 };
+        const well = particles.createGravityWell({
+            x: spawnLocation,
+            y: COMBAT.height() * 0.5,
+            power: 4,
+            gravity: 500,
+        });
+        const emitter = particles.createEmitter({
+            x: spawnLocation,
+            y: COMBAT.height() * 0.5,
+            lifespan: 2000,
+            speed: 1000,
+            scale: { start: 0.7, end: 1 },
+            blendMode: 'ADD',
+            bounds,
+        });
+        this.add(particles);
+        this.scene.time.delayedCall(1000, () => { emitter.stop(); well.x = targetLocation; }, [], this.scene);
+        this.scene.time.delayedCall(3000, () => { well.active = false; }, [], this.scene);
+        return 3000;
+    }
+
+    chargeBall(target) {
+        const { img, spawnLocation } = animationParams(target);
+        const targetLocation = target ? 0.7 * COMBAT.width() : 0;
+        const particles = this.scene.add.particles(img);
+        const emitter = particles.createEmitter({
+            x: 0,
+            y: 0,
+            lifespan: 1000,
+            moveToX: spawnLocation,
+            moveToY: COMBAT.height() * 0.2,
+            scale: 0.75,
+            quantity: 4,
+            _frequency: 20,
+            blendMode: 'ADD',
+            emitZone: { source: new Phaser.Geom.Rectangle(0, 0, COMBAT.width(), COMBAT.height()) },
+        });
+        const emitter2 = particles.createEmitter({
+            radial: false,
+            x: { min: spawnLocation, max: targetLocation, steps: 256 },
+            y: { min: COMBAT.height() * 0.2, max: COMBAT.height() * 0.6, steps: 256 },
+            lifespan: 1000,
+            quantity: 4,
+            gravityY: 0,
+            scale: { start: 1.5, end: 0, ease: 'Power3' },
+            blendMode: 'ADD',
+            active: false,
+        });
+        this.add(particles);
+        this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this.scene);
+        this.scene.time.delayedCall(2000, () => { emitter2.active = true; }, [], this.scene);
+        this.scene.time.delayedCall(3000, () => { emitter2.stop(); }, [], this.scene);
+        return 4000;
+    }
+
+    cleanup() {
+        this.children.entries.forEach(obj => obj.destroy());
     }
 }
 
-
+module.exports = CombatSkills;
-module.exports = skills;