Merged with log

client/src/scenes/combat.js

@@ -1,10 +1,12 @@
 const Phaser = require('phaser');
 const fs = require('fs');
+
+const { POSITIONS, TEXT } = require('./constants');
 const { DrawCrypTeam, CrypAvatar, CrypSkill } = require('./combat.cryps');
 
-class PhaserCombat extends Phaser.Scene {
+class Combat extends Phaser.Scene {
-    constructor() {
+    constructor(props) {
-        super('Combat');
+        super({ key: 'Combat' });
     }
 
     preload() {
@@ -30,8 +32,6 @@ class PhaserCombat extends Phaser.Scene {
     }
 
     create() {
-        this.add.image(400, 300, 'sky');// Background image
-        this.createAnim();
         this.cursors = this.input.keyboard.createCursorKeys();
         this.combat = false;
         this.registry.events.on('changedata', this.updateData, this);
@@ -48,6 +48,13 @@ class PhaserCombat extends Phaser.Scene {
                 console.log(gameObjects[0].skill.skill);
             }
         });
+
+        const logX = POSITIONS.COMBAT.LOG.x();
+        const logY = POSITIONS.COMBAT.LOG.y();
+        const logWidth = POSITIONS.COMBAT.LOG.width();
+        this.log = this.add.text(logX, logY, 'loading', TEXT.NORMAL);
+        this.log.setWordWrapWidth(logWidth);
+        return true;
     }
 
     updateData(parent, key, data) {
@@ -62,30 +69,21 @@ class PhaserCombat extends Phaser.Scene {
             if (this.CrypSkillsTwo) {
                 this.CrypSkillsTwo.destroy(true);
             }
-
             this.CrypSkillsOne = new DrawCrypTeam(this, 0, playerOneCryp);
             this.CrypSkillsTwo = new DrawCrypTeam(this, 1, playerTwoCryp);
+            
+            this.renderCombat(data);
         }
+        return true;
     }
 
-    createAnim() {
+    renderCombat(game) {
-        const config = {
+        if (!game) return false;
-            key: 'explodeAnimation',
+        console.log('combat render');
-            frames: this.anims.generateFrameNumbers('explosion', { start: 0, end: 23, first: 23 }),
+        this.log.setText(game.log.reverse());
-            frameRate: 20,
+        return true;
-            repeat: 0,
-        };
-        this.anims.create(config);
     }
-
-    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);
 }
+Combat.prototype.skills = require('./combat.skills.js');
 
-}
+module.exports = Combat;
-PhaserCombat.prototype.skills = require('./combat.skills.js');
-
-module.exports = PhaserCombat;

client/src/scenes/combat.old.js

@@ -0,0 +1,90 @@
+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')}`);
+        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() {
+        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
+        }, 0, this);
+    }
+
+    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' });
+    }
+
+    createAnim() {
+        const config = {
+            key: 'explodeAnimation',
+            frames: this.anims.generateFrameNumbers('explosion', { start: 0, end: 23, first: 23 }),
+            frameRate: 20,
+            repeat: 0,
+        };
+        this.anims.create(config);
+    }
+
+    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');
+
+module.exports = PhaserCombat;

client/src/scenes/constants.js

@@ -1,9 +1,44 @@
+// POSITIONING FNS
+const menuWidth = () => window.innerWidth;
+const menuHeight = () => window.innerHeight * 0.1;
+
+const combatWidth = () => window.innerWidth;
+const combatHeight = () => window.innerHeight - menuHeight();
+const combatY = () => menuHeight();
+const combatX = () => 0;
+
+const logWidth = () => combatWidth() * 0.2;
+const logHeight = () => combatHeight();
+const logY = () => menuHeight();
+const logX = () => combatWidth() - logWidth();
+
 module.exports = {
     TEXT: {
         NORMAL: { fontFamily: 'monospace', fontSize: 16, color: '#ffffff' },
         HEADER: { fontFamily: 'monospace', fontSize: 24, color: '#ffffff', fontStyle: 'bold' },
     },
 
+    POSITIONS: {
+        MENU: {
+            width: menuWidth,
+            height: menuHeight,
+        },
+
+        COMBAT: {
+            x: combatX,
+            y: combatY,
+            width: combatWidth,
+            height: combatHeight,
+
+            LOG: {
+                x: logX,
+                y: logY,
+                width: logWidth,
+                height: logHeight,
+            },
+        },
+    },
+
     COLOURS: {
         BLUE: 0x004bfe,
         CYAN: 0x27e7c0,