Updated battle UI

client/src/events.js

@@ -6,6 +6,8 @@ function registerEvents(store, registry, events) {
         const state = store.getState();
         registry.set('cryps', state.cryps);
         registry.set('ws', state.ws);
+        registry.set('game', state.game);
+        registry.set('account', state.account);
     });
 
     events.on('CRYP_ACTIVE', (cryp) => {

client/src/scenes/combat.cryps.js

@@ -0,0 +1,63 @@
+const Phaser = require('phaser');
+
+const { TEXT } = require('./constants');
+
+const ROW_HEIGHT = 200;
+const ROW_WIDTH = 400;
+const ROW_FILL = 0x888888;
+
+const TOP_MARGIN = 50;
+const ROW_MARGIN = 50;
+const TEXT_MARGIN = 24;
+
+const CRYP_MARGIN = 250;
+const TEAM_MARGIN = 450;
+
+const xPos = i => 0;
+const yPos = i => (i * ROW_HEIGHT + ROW_MARGIN) + TOP_MARGIN;
+
+class CrypAvatar extends Phaser.GameObjects.Image {
+    constructor(scene, j, team, cryp, avatar) {
+        // Avatar will be a property of cryp
+        super(scene, 100 + TEAM_MARGIN * team, 150 + CRYP_MARGIN * j, avatar);
+        this.setScale(0.5);
+        this.setInteractive();
+        this.cryp = cryp;
+    }
+}
+
+class CrypSkill extends Phaser.GameObjects.Text {
+    constructor(scene, i, j, team, skill) {
+        // Avatar will be a property of cryp
+        super(scene, 200 + TEAM_MARGIN * team, 50 + TEXT_MARGIN * (i + 2) + CRYP_MARGIN * j, skill.skill, TEXT.NORMAL);
+        this.setInteractive();
+        this.skill = skill;
+    }
+}
+
+class DrawCrypTeam extends Phaser.GameObjects.Group {
+    constructor(scene, team, cryps, x, y) {
+        super(scene);
+        // this.id = cryp.id;
+        this.scene = scene;
+        this.ws = scene.registry.get('ws');
+        // Cryp Avatar
+        const avatar = team ? 'magmar' : 'alk';
+
+        const renderCryp = (cryp, j) => {
+            this.add(scene.add.existing(new CrypAvatar(scene, j, team, cryp, avatar)));
+            // Cryp HP and Name
+            const crypHp = `${cryp.hp.base.toString()} / ${cryp.stamina.base.toString()} HP`;
+            this.add(scene.add.text(50 + TEAM_MARGIN * team, 50 + CRYP_MARGIN * j, crypHp, TEXT.NORMAL));
+            this.add(scene.add.text(50 + TEAM_MARGIN * team, 50 + TEXT_MARGIN + CRYP_MARGIN * j, cryp.name, TEXT.HEADER));
+            // Cryp Skills
+            const knownSkill = (skill, i) => {
+                this.add(scene.add.existing(new CrypSkill(scene, i, j, team, skill)));
+            };
+            cryp.skills.forEach(knownSkill);
+        };
+        cryps.forEach(renderCryp);
+    }
+}
+
+module.exports = { DrawCrypTeam, CrypAvatar, CrypSkill };

client/src/scenes/combat.js

@@ -1,9 +1,10 @@
 const Phaser = require('phaser');
 const fs = require('fs');
+const { DrawCrypTeam, CrypAvatar, CrypSkill } = require('./combat.cryps');
 
 class PhaserCombat extends Phaser.Scene {
     constructor() {
-        super('combat');
+        super('Combat');
     }
 
     preload() {
@@ -30,25 +31,41 @@ class PhaserCombat extends Phaser.Scene {
 
     create() {
         this.add.image(400, 300, 'sky');// Background image
-        this.createPlayers();
         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
+            this.scene.switch('CrypList'); // Switch back to cryp list
         }, 0, this);
+
+        this.input.on('pointerup', (pointer, gameObjects) => {
+            if (gameObjects[0] instanceof CrypAvatar) {
+                console.log(gameObjects[0].cryp.id);
+            }
+            if (gameObjects[0] instanceof CrypSkill) {
+                console.log(gameObjects[0].skill.skill);
+            }
+        });
     }
 
-    createPlayers() {
-        this.players = this.physics.add.staticGroup();
-        const img = this.players.create(100, 300, 'alk');
-        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.playerTwoHp = this.add.text(450, 200, '', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' });
+    updateData(parent, key, data) {
+        if (key === 'game' && data !== this.gameData) {
+            const account = this.registry.get('account');
+            const playerOneCryp = data.teams.find(t => t.id === account.id).cryps;
+            const playerTwoCryp = data.teams.filter(t => t.id !== account.id)[0].cryps;
+
+            if (this.CrypSkillsOne && this.CrypSkillsTwo) {
+                this.CrypSkillsOne.destroy(true);
+            }
+            if (this.CrypSkillsTwo) {
+                this.CrypSkillsTwo.destroy(true);
+            }
+
+            this.CrypSkillsOne = new DrawCrypTeam(this, 0, playerOneCryp);
+            this.CrypSkillsTwo = new DrawCrypTeam(this, 1, playerTwoCryp);
+        }
     }
 
     createAnim() {
@@ -68,23 +85,7 @@ class PhaserCombat extends Phaser.Scene {
         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');
+PhaserCombat.prototype.skills = require('./combat.skills.js');
 
 module.exports = PhaserCombat;

client/src/scenes/cryps.js

@@ -2,6 +2,7 @@ const Phaser = require('phaser');
 
 const CrypList = require('./cryp.list');
 const Menu = require('./menu');
+const Combat = require('./combat');
 // const Passives = require('./passives');
 
 function renderCryps(store, socket) {
@@ -22,10 +23,12 @@ function renderCryps(store, socket) {
         scene: [
             Menu,
             CrypList,
+            Combat,
         ],
     };
 
     const game = new Phaser.Game(config);
+    game.scene.sleep('Combat');
 
     window.addEventListener('mouseup', () => game.registry.set('pan', false));
     window.addEventListener('mousedown', () => game.registry.set('pan', true));

client/src/scenes/lobbies.js

@@ -44,6 +44,7 @@ class Lobbies extends Phaser.GameObjects.Group {
 
         pve.on('pointerdown', () => {
             const team = cryps.filter(c => c.active).map(c => c.id);
+            list.scene.switch('Combat');
             return ws.sendGamePve(team);
         });