Refactor for more phasor skills

client/src/components/phaser.combat.js

@@ -1,13 +1,15 @@
 const Phaser = require('phaser');
+const fs = require('fs');
 
 class PhaserCombat extends Phaser.Scene {
     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('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('alk', 'https://i.imgur.com/RFP8Pfz.png');
-        this.load.image('magmar', 'https://i.imgur.com/CBNokzR.png');
         /* Spritesheets */
         this.load.spritesheet({
             key: 'explosion',
@@ -27,24 +29,12 @@ class PhaserCombat extends Phaser.Scene {
     createPlayers() {
         this.players = this.physics.add.staticGroup();
         const img = this.players.create(100, 300, 'alk');
-        const imgTwo = this.players.create(450, 300, 'magmar');
+        const imgTwo = this.players.create(500, 300, 'magmar');
         img.setScale(0.5);
         imgTwo.setScale(0.5);
-        this.playerOneHp = this.add.text(20, 200, '', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' });
+        this.playerOneHp = this.add.text(20, 200, 'HP', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' });
-        this.playerTwoHp = this.add.text(420, 200, '', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' });
+        this.playerTwoHp = this.add.text(450, 200, 'HP', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' });
-    }
+        this.loaded = true;
-
-    createProj() {
-        this.combat = true;
-        this.proj = this.physics.add.image(-100, 300, 'proj');
-        const particles = this.add.particles('blue');
-        this.emitter = particles.createEmitter({
-            speed: 25,
-            scale: { start: 1, end: 0 },
-            blendMode: 'ADD',
-        });
-        this.emitter.startFollow(this.proj);
-        this.physics.add.overlap(this.proj, this.players, this.explode, null, this);
     }
 
     createAnim() {
@@ -65,21 +55,6 @@ class PhaserCombat extends Phaser.Scene {
         this.playerTwoHp.text = health;
     }
 
-    shootRight() {
-        if (!this.combat) {
-            this.createProj();
-            this.proj.x = 180;
-            this.proj.setVelocity(250, 0);
-        }
-    }
-
-    shootLeft() {
-        if (!this.combat) {
-            this.createProj();
-            this.proj.x = 400;
-            this.proj.setVelocity(-250, 0);
-        }
-    }
 
     explode(proj) {
         this.proj.disableBody(true, true);
@@ -89,6 +64,6 @@ class PhaserCombat extends Phaser.Scene {
         this.combat = false;
     }
 }
-
+PhaserCombat.prototype.skills = require('./phaser.skills.js');
 
 module.exports = PhaserCombat;

client/src/components/phaser.container.jsx

@@ -7,7 +7,7 @@ const addState = connect(
     function receiveState(state) {
         const { game, activeSkill, activeIncoming, account } = state;
         return {game, activeSkill, activeIncoming, account };
-    }    
+    }
 );
 
 class PhaserInstance extends preact.Component {
@@ -19,14 +19,15 @@ class PhaserInstance extends preact.Component {
     componentWillReceiveProps(nextProps) {
         const playerTeam = nextProps.game.teams.find(t => t.id === nextProps.account.id);
         const otherTeams = nextProps.game.teams.filter(t => t.id !== nextProps.account.id);
-        if (playerTeam !== null && otherTeams !== null) {
+
+        if (playerTeam && otherTeams[0] && this.PhaserCombat.loaded) {
             this.PhaserCombat.setPlayerOneHp(`${playerTeam.cryps[0].hp.value.toString()} / ${playerTeam.cryps[0].stam.value.toString()} HP`);
             this.PhaserCombat.setPlayerTwoHp(`${otherTeams[0].cryps[0].hp.value.toString()} / ${otherTeams[0].cryps[0].stam.value.toString()} HP`);
 
             if (playerTeam.cryps[0].hp.value === 0) {
-                this.PhaserCombat.shootLeft();
+                this.PhaserCombat.skills('blast', 400, -250); //Left Blast
             } else if (otherTeams[0].cryps[0].hp.value === 0) {
-                this.PhaserCombat.shootRight();
+                this.PhaserCombat.skills('blast', 180, 250); //Right Blast
             }
         }
     }

client/src/components/phaser.skills.js

@@ -0,0 +1,27 @@
+// Skill function called by phaser combat
+
+function skills(skill, speed, location) {
+    if (this.combat) {
+        return;
+    }
+    this.combat = true;
+
+    switch (skill) {
+        case 'blast':
+            this.proj = this.physics.add.image(-100, 300, 'proj');
+            this.emitter = this.add.particles('blue').createEmitter({
+                speed: 25,
+                scale: { start: 1, end: 0 },
+                blendMode: 'ADD',
+            });
+            this.emitter.startFollow(this.proj);
+            this.physics.add.overlap(this.proj, this.players, this.explode, null, this);
+            this.proj.x = speed;
+            this.proj.setVelocity(location, 0);
+            break;
+        default:
+            break;
+    }
+}
+
+module.exports = skills;