misc phaser

client/src/components/cryp.ui.js

@@ -0,0 +1,30 @@
+const Phaser = require('phaser');
+const fs = require('fs');
+
+class CrypUi extends Phaser.Scene {
+    constructor() {
+        super('combat');
+    }
+
+    preload() {
+        /* Static Images */
+        this.textures.addBase64('alk', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/alakazam-f.png')).toString('base64')}`);
+    }
+
+    create() {
+        this.createPlayers();
+        this.input.keyboard.on('keydown_S', () => {
+            this.scene.switch('passives'); // Switch to passive scene
+        }, 0, this);
+    }
+
+    createPlayers() {
+        this.players = this.physics.add.staticGroup();
+        const img = this.players.create(100, 300, 'alk');
+        img.setScale(1);
+        this.playerOneHp = this.add.text(20, 200, 'HP', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' });
+        this.loaded = true;
+    }
+}
+
+module.exports = CrypUi;

client/src/components/passive.container.jsx

@@ -2,6 +2,7 @@ const preact = require('preact');
 const { connect } = require('preact-redux');
 const Phaser = require('phaser');
 const PhaserPassives = require('./passive.phaser');
+const PhaserCombat = require('./phaser.combat');
 
 const addState = connect(
     function receiveState(state) {
@@ -38,7 +39,7 @@ class PhaserInstance extends preact.Component {
                     gravity: { y: 0 },
                 },
             },
-            scene: this.PhaserPassives,
+            scene: [this.PhaserPassives, PhaserCombat],
         };
         const game = new Phaser.Game(config);
         game.canvas.addEventListener('mousedown', () => this.PhaserPassives.camPan(true));

client/src/components/passive.phaser.js

@@ -8,26 +8,24 @@ const passiveDataEdge = require('./passive.data.edge');
 // Press 'A' to reset allocated passive nodes
 
 class PhaserPassives extends Phaser.Scene {
+    constructor() {
+        super('passives');
+    }
+
     preload() {
         this.load.image('eye', 'https://labs.phaser.io/assets/particles/green-orb.png');
     }
 
     create() {
-        this.init();
+        this.graphics = this.add.graphics();
+        this.passiveNodeData = passiveDataNode;
+        this.passiveEdgeData = passiveDataEdge;
         this.addPassiveNodes();
         this.addCameraControl();
         this.addEvents();
         this.drawPassiveEdges();
     }
 
-    init() {
-        this.graphics = this.add.graphics();
-        this.textGraphic = new Phaser.GameObjects.Graphics(this);
-        this.add.existing(this.textGraphic);
-        this.passiveNodeData = passiveDataNode;
-        this.passiveEdgeData = passiveDataEdge;
-    }
-
     addPassiveNodes() {
         this.passiveNodes = [];
         this.passiveNodeData.forEach((n) => {
@@ -84,6 +82,9 @@ class PhaserPassives extends Phaser.Scene {
         this.input.keyboard.on('keydown_A', () => {
             this.updatePassives(); // Will update nodes from state
         }, 0, this);
+        this.input.keyboard.on('keydown_S', () => {
+            this.scene.switch('combat');
+        }, 0, this);
     }
 
     drawPassiveEdges() {

client/src/components/phaser.combat.js

@@ -2,6 +2,10 @@ const Phaser = require('phaser');
 const fs = require('fs');
 
 class PhaserCombat extends Phaser.Scene {
+    constructor() {
+        super('combat');
+    }
+
     preload() {
         /* Static Images */
         this.textures.addBase64('alk', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/alakazam-f.png')).toString('base64')}`);
@@ -30,6 +34,11 @@ class PhaserCombat extends Phaser.Scene {
         this.createAnim();
         this.cursors = this.input.keyboard.createCursorKeys();
         this.combat = false;
+        this.registry.events.on('changedata', this.updateData, this);
+
+        this.input.keyboard.on('keydown_S', () => {
+            this.scene.switch('passives'); // Switch to battle scene
+        }, 0, this);
     }
 
     createPlayers() {
@@ -38,9 +47,8 @@ class PhaserCombat extends Phaser.Scene {
         const imgTwo = this.players.create(500, 300, 'magmar');
         img.setScale(0.5);
         imgTwo.setScale(0.5);
-        this.playerOneHp = this.add.text(20, 200, 'HP', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' });
+        this.playerOneHp = this.add.text(20, 200, '', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' });
-        this.playerTwoHp = this.add.text(450, 200, 'HP', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' });
+        this.playerTwoHp = this.add.text(450, 200, '', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' });
-        this.loaded = true;
     }
 
     createAnim() {
@@ -53,21 +61,29 @@ class PhaserCombat extends Phaser.Scene {
         this.anims.create(config);
     }
 
-    setPlayerOneHp(health) {
-        this.playerOneHp.text = health;
-    }
-
-    setPlayerTwoHp(health) {
-        this.playerTwoHp.text = health;
-    }
-
-
     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);
     }
+
+    updateData(parent, key, data) {
+        if (key === 'playerCryps') {
+            this.playerOneHp.text = (`${data.cryps[0].hp.base.toString()} / ${data.cryps[0].stamina.base.toString()} HP`);
+            if (data.cryps[0].hp.base === 0) {
+                // this.PhaserCombat.skills('blast', 400, -150);
+                this.skills('wall', 'green', 400, -250);
+            }
+        }
+        if (key === 'enemyCryps') {
+            this.playerTwoHp.text = `${data.cryps[0].hp.base.toString()} / ${data.cryps[0].stamina.base.toString()} HP`;
+            if (data.cryps[0].hp.base === 0) {
+                // this.PhaserCombat.skills('blast', 180, 150);
+                this.skills('wall', 'green', 180, 250);
+            }
+        }
+    }
 }
 PhaserCombat.prototype.skills = require('./phaser.skills.js');
 

client/src/components/phaser.container.jsx

@@ -2,6 +2,7 @@ const preact = require('preact');
 const { connect } = require('preact-redux');
 const Phaser = require('phaser');
 const PhaserCombat = require('./phaser.combat');
+const PhaserPassives = require('./passive.phaser');
 
 const addState = connect(
     function receiveState(state) {
@@ -21,21 +22,8 @@ class PhaserInstance extends preact.Component {
     }
 
     componentWillReceiveProps(nextProps) {
-        const playerTeam = nextProps.game.teams.find(t => t.id === nextProps.account.id);
+        this.PhaserCombat.registry.set('playerCryps', nextProps.game.teams.find(t => t.id === nextProps.account.id));
-        const otherTeams = nextProps.game.teams.filter(t => t.id !== nextProps.account.id);
+        this.PhaserCombat.registry.set('enemyCryps', nextProps.game.teams.filter(t => t.id !== nextProps.account.id)[0]);
-
-        if (playerTeam && otherTeams[0] && this.PhaserCombat.loaded) {
-            this.PhaserCombat.setPlayerOneHp(`${playerTeam.cryps[0].hp.base.toString()} / ${playerTeam.cryps[0].stamina.base.toString()} HP`);
-            this.PhaserCombat.setPlayerTwoHp(`${otherTeams[0].cryps[0].hp.base.toString()} / ${otherTeams[0].cryps[0].stamina.base.toString()} HP`);
-
-            if (playerTeam.cryps[0].hp.base === 0) {
-                // this.PhaserCombat.skills('blast', 400, -150);
-                this.PhaserCombat.skills('chargeBall', 'green', 400, -250);
-            } else if (otherTeams[0].cryps[0].hp.base === 0) {
-                // this.PhaserCombat.skills('blast', 180, 150);
-                this.PhaserCombat.skills('chargeBall', 'green', 180, 250);
-            }
-        }
     }
 
     componentDidMount() {
@@ -52,7 +40,7 @@ class PhaserInstance extends preact.Component {
                     gravity: { y: 0 },
                 },
             },
-            scene: this.PhaserCombat,
+            scene: [this.PhaserCombat, PhaserPassives],
         };
         const game = new Phaser.Game(config);
     }