Combat animation and HP from state

client/src/components/phaser.combat.js

@@ -2,34 +2,97 @@ const Phaser = require('phaser');
 
 class PhaserCombat extends Phaser.Scene {
     preload() {
-        this.load.setBaseURL('http://labs.phaser.io');
-        this.load.image('sky', 'assets/skies/space3.png');
-        this.load.image('logo', 'assets/sprites/bullet.png');
-        this.load.image('red', 'assets/particles/red.png');
+        /* Static Images */
+        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('red', 'http://labs.phaser.io/assets/particles/red.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',
+            url: 'http://labs.phaser.io/assets/sprites/explosion.png',
+            frameConfig: { frameWidth: 64, frameHeight: 64, endFrame: 23 },
+        });
     }
 
     create() {
-        this.add.image(400, 300, 'sky');
+        this.add.image(400, 300, 'sky');// Background image
+        this.createPlayers();
+        this.createAnim();
+        this.cursors = this.input.keyboard.createCursorKeys();
+        this.combat = false;
+    }
+
+    createPlayers() {
+        this.players = this.physics.add.staticGroup();
+        const img = this.players.create(100, 300, 'alk');
+        const imgTwo = this.players.create(450, 300, 'magmar');
+        img.setScale(0.5);
+        imgTwo.setScale(0.5);
+        this.playerOneHp = this.add.text(20, 200, '', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' });
+        this.playerTwoHp = this.add.text(420, 200, '', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' });
+    }
+
+    createProj() {
+        this.proj = this.physics.add.image(-100, 300, 'proj');
         const particles = this.add.particles('red');
-        const emitter = particles.createEmitter({
+        this.emitter = particles.createEmitter({
             speed: 100,
             scale: { start: 1, end: 0 },
             blendMode: 'ADD',
         });
-        this.logo = this.physics.add.image(400, 100, 'logo');
-        this.logo.x = -100;
-        this.direction = true;
-        emitter.startFollow(this.logo);
+        this.emitter.startFollow(this.proj);
+    }
+
+    createColliders() {
+        this.physics.add.overlap(this.proj, this.players, this.explode, null, this);
+    }
+
+    createAnim() {
+        const config = {
+            key: 'explodeAnimation',
+            frames: this.anims.generateFrameNumbers('explosion', { start: 0, end: 23, first: 23 }),
+            frameRate: 20,
+            repeat: 0,
+        };
+        this.anims.create(config);
+    }
+
+    setPlayerOneHp(health) {
+        this.playerOneHp.text = health;
+    }
+
+    setPlayerTwoHp(health) {
+        this.playerTwoHp.text = health;
     }
 
     shootRight() {
-        this.logo.x = -1;
-        this.logo.setVelocity(500, 0);
+        if (!this.combat) {
+            this.combat = true;
+            this.createProj();
+            this.createColliders();
+            this.proj.x = 180;
+            this.proj.setVelocity(150, 0);
+        }
     }
 
     shootLeft() {
-        this.logo.x = 610;
-        this.logo.setVelocity(-500, 0);
+        if (!this.combat) {
+            this.combat = true;
+            this.createProj();
+            this.createColliders();
+            this.proj.x = 450;
+            this.proj.setVelocity(-150, 0);
+        }
+    }
+
+    explode(proj) {
+        this.proj.disableBody(true, true);
+        this.emitter.stop();
+        const sprite = this.add.sprite(proj.x, proj.y, 'explosion').play('explodeAnimation');
+        sprite.setScale(3);
+        this.combat = false;
     }
 }
 

client/src/components/phaser.container.jsx

@@ -5,8 +5,8 @@ const PhaserCombat = require('./phaser.combat');
 
 const addState = connect(
     function receiveState(state) {
-        const { game, activeSkill, activeIncoming } = state;
-        return {game, activeSkill, activeIncoming };
+        const { game, activeSkill, activeIncoming, account } = state;
+        return {game, activeSkill, activeIncoming, account };
     }    
 );
 
@@ -17,12 +17,19 @@ class PhaserInstance extends preact.Component {
     }
 
     componentWillReceiveProps(nextProps) {
-        if (nextProps.activeIncoming != null) {
+        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) {
+            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();
-        } else {
+            } else if (otherTeams[0].cryps[0].hp.value === 0) {
                 this.PhaserCombat.shootRight();
             }
         }
+    }
 
     componentDidMount() {
     // now mounted, can freely modify the DOM: