Merge branch 'battleui'

client/src/scenes/combat.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/combat.skills.js

@@ -0,0 +1,141 @@
+// Skill function called by phaser combat
+const Phaser = require('phaser');
+
+function skills(skill, img, location, spd) {
+    if (this.combat) {
+        return;
+    }
+    this.combat = true;
+    const particles = this.add.particles(img);
+
+    switch (skill) {
+        case 'blast':
+            this.proj = this.physics.add.image(-100, 300, 'proj');
+            this.emitter = particles.createEmitter({
+                speed: 25,
+                scale: { start: 1, end: 0 },
+                blendMode: 'ADD',
+            });
+            this.emitter.startFollow(this.proj);
+            this.physics.add.overlap(this.proj, this.players, this.explode, null, this);
+            this.proj.x = location;
+            this.proj.setVelocity(spd, 0);
+            break;
+
+        case 'wall':
+            this.emitter = particles.createEmitter({
+                x: location,
+                y: { min: 200, max: 350 },
+                lifespan: 2000,
+                speedX: { min: spd, max: spd * 2 },
+                scale: { start: 0.4, end: 0 },
+                quantity: 4,
+                blendMode: 'ADD',
+            });
+            this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this);
+            break;
+
+        case 'spit':
+            if (location > 250) {
+                this.angleMin = 180;
+                this.angleMax = 220;
+            } else {
+                this.angleMin = 320;
+                this.angleMax = 360;
+            }
+            this.emitter = particles.createEmitter({
+                x: location,
+                y: 300,
+                lifespan: 2000,
+                angle: { min: this.angleMin, max: this.angleMax },
+                speed: spd * 2,
+                scale: { start: 0.4, end: 1 },
+                gravityY: 250,
+                quantity: 4,
+                blendMode: 'ADD',
+            });
+            this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this);
+            break;
+        case 'gravBomb':
+            this.well = particles.createGravityWell({
+                x: 150,
+                y: 150,
+                power: 4,
+                gravity: 500,
+            });
+            this.emitter = particles.createEmitter({
+                x: 150,
+                y: 150,
+                lifespan: 1500,
+                speed: 1000,
+                scale: { start: 0.7, end: 1 },
+                blendMode: 'ADD',
+            });
+            this.time.delayedCall(1000, () => {
+                this.emitter.stop();
+                this.well.active = false;
+            }, [], this);
+            break;
+        case 'gravBlast':
+            this.well = particles.createGravityWell({
+                x: 400,
+                y: 300,
+                power: 4,
+                gravity: 500,
+            });
+            this.emitter = particles.createEmitter({
+                x: 400,
+                y: 300,
+                lifespan: 2000,
+                speed: 1000,
+                scale: { start: 0.7, end: 1 },
+                blendMode: 'ADD',
+                bounds: {
+                    x: 0, y: 250, w: 450, h: 150,
+                },
+            });
+            this.time.delayedCall(1000, () => {
+                this.emitter.stop();
+                this.well.x = 100;
+            }, [], this);
+            this.time.delayedCall(3000, () => {
+                this.well.active = false;
+            }, [], this);
+            break;
+        case 'chargeBall':
+
+            this.emitter = particles.createEmitter({
+                x: -400,
+                y: -100,
+                lifespan: 1000,
+                moveToX: 450,
+                moveToY: 150,
+                scale: 0.75,
+                quantity: 4,
+                _frequency: 20,
+                blendMode: 'ADD',
+                emitZone: { source: new Phaser.Geom.Rectangle(0, 0, 1600, 700) },
+            });
+            this.emitter2 = particles.createEmitter({
+                radial: false,
+                x: { min: 450, max: 50, steps: 256 },
+                y: { min: 150, max: 300, steps: 256 },
+                lifespan: 1000,
+                speedX: { min: 200, max: 400 },
+                quantity: 4,
+                gravityY: 0,
+                scale: { start: 1.5, end: 0, ease: 'Power3' },
+                blendMode: 'ADD',
+                active: false,
+            });
+            this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this);
+            this.time.delayedCall(2000, () => { this.emitter2.active = true; }, [], this);
+            this.time.delayedCall(3000, () => { this.emitter2.stop(); }, [], this);
+            break;
+        default:
+            break;
+    }
+}
+
+
+module.exports = skills;

client/src/scenes/passive.node.js

@@ -6,7 +6,7 @@ class PassiveNode extends Phaser.GameObjects.Sprite {
         this.setTexture('eye');
         this.scene = scene;
         this.alloc = alloc;
-        this.text = text;
+        this.text = (text.indexOf(',') > -1) ? text.split(',') : text;
         this.id = id;
         this.setPosition(x, y);
 
@@ -30,11 +30,7 @@ class PassiveNode extends Phaser.GameObjects.Sprite {
     }
 
     allocate(alloc) {
-        if (alloc !== undefined) {
+        this.alloc = (alloc !== undefined) ? alloc : !this.alloc;
-            this.alloc = alloc;
-        } else {
-            this.alloc = !this.alloc;
-        }
         this.updateNode();
     }
 

client/src/scenes/passives.js

@@ -7,29 +7,23 @@ const passiveDataEdge = require('./passive.data.edge');
 // Mouse click hold to move, Q + E to zoom in and out
 // Press 'A' to reset allocated passive nodes
 
-class Passives extends Phaser.Scene {
+class PhaserPassives extends Phaser.Scene {
+    constructor() {
+        super('passives');
+    }
+
     preload() {
         this.load.image('eye', 'https://labs.phaser.io/assets/particles/green-orb.png');
-        this.load.image('background', 'http://labs.phaser.io/assets/skies/nebula.jpg');
     }
 
     create() {
-        this.background = this.add.image(0, 0, 'background');
-        this.background.setScale(5);
-        this.background.setInteractive();
         this.graphics = this.add.graphics();
-        this.nodeText = this.add.text(10000, 10000, 'grep', {
-            fontSize: '32px',
-            fontFamily: 'Arial',
-            color: '#ffffff',
-            backgroundColor: '#000000',
-        }).setPadding(32);
-
         this.passiveNodeData = passiveDataNode;
         this.passiveEdgeData = passiveDataEdge;
         this.addPassiveNodes();
+        this.addCameraControl();
+        this.addEvents();
         this.drawPassiveEdges();
-        this.addCanmeraControl();
     }
 
     addPassiveNodes() {
@@ -39,20 +33,32 @@ class Passives extends Phaser.Scene {
                 new PassiveNode(this, n.x, n.y, n.id, n.alloc, n.text)
             ).setInteractive();
         });
+    }
 
+    addCameraControl() {
+        this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({
+            camera: this.cameras.main,
+            zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
+            zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
+            acceleration: 0.005,
+            drag: 0.0005,
+            maxSpeed: 0.001,
+        });
+    }
+
+    addEvents() {
         this.input.on('pointerover', (pointer, gameObjects) => {
             if (gameObjects[0] instanceof PassiveNode) {
-                if (!gameObjects[0].alloc) gameObjects[0].setTint(0xff00ff);
+                if (!gameObjects[0].alloc) {
-                this.nodeText.x = pointer.x + this.cameras.main.scrollX;
+                    gameObjects[0].setTint(0xff00ff);
-                this.nodeText.y = pointer.y + this.cameras.main.scrollY;
+                }
-                this.nodeText.text = gameObjects[0].text;
+                this.displayPassiveText(gameObjects[0], pointer);
-            } else {
-                this.nodeText.text = '';
             }
         });
         this.input.on('pointerout', (pointer, gameObjects) => {
             if (gameObjects[0] instanceof PassiveNode) {
                 if (!gameObjects[0].alloc) gameObjects[0].clearTint();
+                this.nodeText.destroy();
             }
         });
         this.input.on('pointerup', (pointer, gameObjects) => {
@@ -65,10 +71,20 @@ class Passives extends Phaser.Scene {
                 }
             }
         });
-
+        this.input.on('pointermove', (pointer) => {
+            const zoomFactor = 2 / this.cameras.main.zoom;
+            if (this.pan) {
+                const points = pointer.getInterpolatedPosition(2);
+                this.cameras.main.scrollX -= zoomFactor * (points[1].x - points[0].x);
+                this.cameras.main.scrollY -= zoomFactor * (points[1].y - points[0].y);
+            }
+        }, this);
         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() {
@@ -87,22 +103,18 @@ class Passives extends Phaser.Scene {
         });
     }
 
-    addCanmeraControl() {
+    displayPassiveText(node, pointer) {
-        this.input.on('pointermove', (pointer) => {
+        if (this.nodeText) this.nodeText.destroy();
-            if (this.pan) {
+        this.nodeText = this.add.text(node.x, node.y, node.text, {
-                const points = pointer.getInterpolatedPosition(2);
+            fontSize: '20px',
-                this.cameras.main.scrollX -= (points[1].x - points[0].x) * 2;
+            fontFamily: 'Arial',
-                this.cameras.main.scrollY -= (points[1].y - points[0].y) * 2;
+            color: '#ffffff',
-            }
+            backgroundColor: '#222222',
-        }, this);
+        }).setPadding(32);
-        this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({
+        this.nodeText.setAlpha(0.8);
-            camera: this.cameras.main,
+        this.nodeText.setOrigin(pointer.x >= 600 ? 1 : 0, pointer.y >= 450 ? 1 : 0);
-            zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q),
+        this.nodeText.setWordWrapWidth(450);
-            zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E),
+        this.nodeText.setScale(1 / this.cameras.main.zoom);
-            acceleration: 0.005,
-            drag: 0.0005,
-            maxSpeed: 0.001,
-        });
     }
 
     updatePassives() {
@@ -123,4 +135,4 @@ class Passives extends Phaser.Scene {
     }
 }
 
-module.exports = Passives;
+module.exports = PhaserPassives;