game log

client/src/events.js

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

client/src/scenes/combat.js

@@ -1,90 +1,44 @@
 const Phaser = require('phaser');
-const fs = require('fs');
 
-class PhaserCombat extends Phaser.Scene {
+const { POSITIONS, TEXT } = require('./constants');
-    constructor() {
-        super('combat');
-    }
 
-    preload() {
+class Combat extends Phaser.Scene {
-        /* Static Images */
+    constructor(props) {
-        this.textures.addBase64('alk', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/alakazam-f.png')).toString('base64')}`);
+        const x = POSITIONS.COMBAT.x();
-        this.textures.addBase64('magmar', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/magmar.png')).toString('base64')}`);
+        const y = POSITIONS.COMBAT.y();
-
+        super({
-        this.load.image('sky', 'http://labs.phaser.io/assets/skies/nebula.jpg');
+            key: 'Combat',
-        this.load.image('proj', 'http://labs.phaser.io/assets/sprites/bullet.png');
+            active: true,
-        this.load.image('blue', 'http://labs.phaser.io/assets/particles/blue.png');
+            x,
-        this.load.image('green', 'http://labs.phaser.io/assets/particles/green.png');
+            y,
-        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', () => {
+        const logX = POSITIONS.COMBAT.LOG.x();
-            this.scene.switch('passives'); // Switch to battle scene
+        const logY = POSITIONS.COMBAT.LOG.y();
-        }, 0, this);
+        const logWidth = POSITIONS.COMBAT.LOG.width();
-    }
+        this.log = this.add.text(logX, logY, 'loading', TEXT.NORMAL);
-
+        this.log.setWordWrapWidth(logWidth);
-    createPlayers() {
+        return true;
-        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') {
+        if (key === 'game') {
-            this.playerOneHp.text = (`${data.cryps[0].hp.base.toString()} / ${data.cryps[0].stamina.base.toString()} HP`);
+            this.renderCombat(data);
-            if (data.cryps[0].hp.base === 0) {
-                // this.PhaserCombat.skills('blast', 400, -150);
-                this.skills('wall', 'green', 400, -250);
         }
+        return true;
     }
-        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;
+    renderCombat(game) {
+        if (!game) return false;
+
+        console.log('combat render');
+        this.log.setText(game.log.reverse());
+        return true;
+    }
+}
+
+module.exports = Combat;

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,

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,6 +23,7 @@ function renderCryps(store, socket) {
         scene: [
             Menu,
             CrypList,
+            Combat,
         ],
     };