From 6ac999baa052a41dd7156c56f872fa92f8474e06 Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 26 Oct 2018 14:32:12 +1000 Subject: [PATCH 01/12] Added phaser --- client/src/components/phaser.combat.js | 37 +++++++++++++++ client/src/components/phaser.container.jsx | 53 ++++++++++++++++++++++ 2 files changed, 90 insertions(+) create mode 100755 client/src/components/phaser.combat.js create mode 100755 client/src/components/phaser.container.jsx diff --git a/client/src/components/phaser.combat.js b/client/src/components/phaser.combat.js new file mode 100755 index 00000000..0f9979ab --- /dev/null +++ b/client/src/components/phaser.combat.js @@ -0,0 +1,37 @@ +const Phaser = require('phaser'); + +class PhaserCombat extends Phaser.Scene { + preload() { + this.load.setBaseURL('http://labs.phaser.io'); + this.load.image('sky', 'assets/skies/space3.png'); + this.load.image('logo', 'assets/sprites/bullet.png'); + this.load.image('red', 'assets/particles/red.png'); + } + + create() { + this.add.image(400, 300, 'sky'); + const particles = this.add.particles('red'); + const emitter = particles.createEmitter({ + speed: 100, + scale: { start: 1, end: 0 }, + blendMode: 'ADD', + }); + this.logo = this.physics.add.image(400, 100, 'logo'); + this.logo.x = -100; + this.direction = true; + emitter.startFollow(this.logo); + } + + shootRight() { + this.logo.x = -1; + this.logo.setVelocity(500, 0); + } + + shootLeft() { + this.logo.x = 610; + this.logo.setVelocity(-500, 0); + } +} + + +module.exports = PhaserCombat; diff --git a/client/src/components/phaser.container.jsx b/client/src/components/phaser.container.jsx new file mode 100755 index 00000000..9d5be4eb --- /dev/null +++ b/client/src/components/phaser.container.jsx @@ -0,0 +1,53 @@ +const preact = require('preact'); +const { connect } = require('preact-redux'); +const Phaser = require('phaser'); +const PhaserCombat = require('./phaser.combat'); + +const addState = connect( + function receiveState(state) { + const { game, activeSkill, activeIncoming } = state; + return {game, activeSkill, activeIncoming }; + } +); + +class PhaserInstance extends preact.Component { + constructor(props) { + super(props); + this.props = props; + } + + componentWillReceiveProps(nextProps) { + if (nextProps.activeIncoming != null) { + this.PhaserCombat.shootLeft(); + } else { + this.PhaserCombat.shootRight(); + } + } + + componentDidMount() { + // now mounted, can freely modify the DOM: + this.PhaserCombat = new PhaserCombat(); + const config = { + type: Phaser.AUTO, + width: 600, + height: 400, + parent: 'phaser-example', + physics: { + default: 'arcade', + arcade: { + gravity: { y: 0 }, + }, + }, + scene: this.PhaserCombat, + }; + const game = new Phaser.Game(config); + } + + render() { + return ( +
+
+ ); + } +} +module.exports = addState(PhaserInstance); From 35f3d34399a0b65437229aa3be699dd66375c5d9 Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 26 Oct 2018 14:34:36 +1000 Subject: [PATCH 02/12] game.jsx changes --- client/src/components/game.jsx | 37 +++++++++++++++++++--------------- 1 file changed, 21 insertions(+), 16 deletions(-) diff --git a/client/src/components/game.jsx b/client/src/components/game.jsx index 4ac25bff..66b4b386 100755 --- a/client/src/components/game.jsx +++ b/client/src/components/game.jsx @@ -1,6 +1,6 @@ const preact = require('preact'); const key = require('keymaster'); - +const Phaser = require('./phaser.container'); const SKILL_HOT_KEYS = ['Q', 'W', 'E', 'R']; function GamePanel(props) { @@ -158,25 +158,30 @@ function GamePanel(props) { } return (
-
- {phaseText(game.phase)} +
-
- {PlayerTeam(playerTeam, setActiveSkill)} +
+ +
+
+ {PlayerTeam(playerTeam, setActiveSkill)} +
+
+
+ {otherTeams.map(OpponentTeam)} +
+
+ {incoming} +
+
+
-
-
- {otherTeams.map(OpponentTeam)} -
-
- {incoming} -
-
-
-
log
+
+
{phaseText(game.phase)}
+
log
- ); + ) } module.exports = GamePanel; From dadc6e4a9e82df9486dbf06179a1425f5fa1f11c Mon Sep 17 00:00:00 2001 From: Mashy Date: Tue, 30 Oct 2018 16:25:33 +1000 Subject: [PATCH 03/12] Combat animation and HP from state --- client/src/components/phaser.combat.js | 91 ++++++++++++++++++---- client/src/components/phaser.container.jsx | 19 +++-- 2 files changed, 90 insertions(+), 20 deletions(-) diff --git a/client/src/components/phaser.combat.js b/client/src/components/phaser.combat.js index 0f9979ab..a953d70f 100755 --- a/client/src/components/phaser.combat.js +++ b/client/src/components/phaser.combat.js @@ -2,34 +2,97 @@ const Phaser = require('phaser'); class PhaserCombat extends Phaser.Scene { preload() { - this.load.setBaseURL('http://labs.phaser.io'); - this.load.image('sky', 'assets/skies/space3.png'); - this.load.image('logo', 'assets/sprites/bullet.png'); - this.load.image('red', 'assets/particles/red.png'); + /* Static Images */ + 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('red', 'http://labs.phaser.io/assets/particles/red.png'); + this.load.image('alk', 'https://i.imgur.com/RFP8Pfz.png'); + this.load.image('magmar', 'https://i.imgur.com/CBNokzR.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'); + this.add.image(400, 300, 'sky');// Background image + this.createPlayers(); + this.createAnim(); + this.cursors = this.input.keyboard.createCursorKeys(); + this.combat = false; + } + + createPlayers() { + this.players = this.physics.add.staticGroup(); + const img = this.players.create(100, 300, 'alk'); + const imgTwo = this.players.create(450, 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(420, 200, '', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' }); + } + + createProj() { + this.proj = this.physics.add.image(-100, 300, 'proj'); const particles = this.add.particles('red'); - const emitter = particles.createEmitter({ + this.emitter = particles.createEmitter({ speed: 100, scale: { start: 1, end: 0 }, blendMode: 'ADD', }); - this.logo = this.physics.add.image(400, 100, 'logo'); - this.logo.x = -100; - this.direction = true; - emitter.startFollow(this.logo); + this.emitter.startFollow(this.proj); + } + + createColliders() { + this.physics.add.overlap(this.proj, this.players, this.explode, null, this); + } + + createAnim() { + const config = { + key: 'explodeAnimation', + frames: this.anims.generateFrameNumbers('explosion', { start: 0, end: 23, first: 23 }), + frameRate: 20, + repeat: 0, + }; + this.anims.create(config); + } + + setPlayerOneHp(health) { + this.playerOneHp.text = health; + } + + setPlayerTwoHp(health) { + this.playerTwoHp.text = health; } shootRight() { - this.logo.x = -1; - this.logo.setVelocity(500, 0); + if (!this.combat) { + this.combat = true; + this.createProj(); + this.createColliders(); + this.proj.x = 180; + this.proj.setVelocity(150, 0); + } } shootLeft() { - this.logo.x = 610; - this.logo.setVelocity(-500, 0); + if (!this.combat) { + this.combat = true; + this.createProj(); + this.createColliders(); + this.proj.x = 450; + this.proj.setVelocity(-150, 0); + } + } + + 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); + this.combat = false; } } diff --git a/client/src/components/phaser.container.jsx b/client/src/components/phaser.container.jsx index 9d5be4eb..fa7bdb86 100755 --- a/client/src/components/phaser.container.jsx +++ b/client/src/components/phaser.container.jsx @@ -5,8 +5,8 @@ const PhaserCombat = require('./phaser.combat'); const addState = connect( function receiveState(state) { - const { game, activeSkill, activeIncoming } = state; - return {game, activeSkill, activeIncoming }; + const { game, activeSkill, activeIncoming, account } = state; + return {game, activeSkill, activeIncoming, account }; } ); @@ -17,10 +17,17 @@ class PhaserInstance extends preact.Component { } componentWillReceiveProps(nextProps) { - if (nextProps.activeIncoming != null) { - this.PhaserCombat.shootLeft(); - } else { - this.PhaserCombat.shootRight(); + const playerTeam = nextProps.game.teams.find(t => t.id === nextProps.account.id); + const otherTeams = nextProps.game.teams.filter(t => t.id !== nextProps.account.id); + if (playerTeam !== null && otherTeams !== null) { + this.PhaserCombat.setPlayerOneHp(`${playerTeam.cryps[0].hp.value.toString()} / ${playerTeam.cryps[0].stam.value.toString()} HP`); + this.PhaserCombat.setPlayerTwoHp(`${otherTeams[0].cryps[0].hp.value.toString()} / ${otherTeams[0].cryps[0].stam.value.toString()} HP`); + + if (playerTeam.cryps[0].hp.value === 0) { + this.PhaserCombat.shootLeft(); + } else if (otherTeams[0].cryps[0].hp.value === 0) { + this.PhaserCombat.shootRight(); + } } } From 72886c262ee5ac21ce669e03bf77ae5ea21f5425 Mon Sep 17 00:00:00 2001 From: Mashy Date: Wed, 31 Oct 2018 12:41:34 +1000 Subject: [PATCH 04/12] misc phaser --- client/src/components/phaser.combat.js | 20 +++++++------------- client/src/components/phaser.container.jsx | 2 +- 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/client/src/components/phaser.combat.js b/client/src/components/phaser.combat.js index a953d70f..bee93ba8 100755 --- a/client/src/components/phaser.combat.js +++ b/client/src/components/phaser.combat.js @@ -5,7 +5,7 @@ class PhaserCombat extends Phaser.Scene { /* Static Images */ 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('red', 'http://labs.phaser.io/assets/particles/red.png'); + this.load.image('blue', 'http://labs.phaser.io/assets/particles/blue.png'); this.load.image('alk', 'https://i.imgur.com/RFP8Pfz.png'); this.load.image('magmar', 'https://i.imgur.com/CBNokzR.png'); /* Spritesheets */ @@ -35,17 +35,15 @@ class PhaserCombat extends Phaser.Scene { } createProj() { + this.combat = true; this.proj = this.physics.add.image(-100, 300, 'proj'); - const particles = this.add.particles('red'); + const particles = this.add.particles('blue'); this.emitter = particles.createEmitter({ - speed: 100, + speed: 25, scale: { start: 1, end: 0 }, blendMode: 'ADD', }); this.emitter.startFollow(this.proj); - } - - createColliders() { this.physics.add.overlap(this.proj, this.players, this.explode, null, this); } @@ -69,21 +67,17 @@ class PhaserCombat extends Phaser.Scene { shootRight() { if (!this.combat) { - this.combat = true; this.createProj(); - this.createColliders(); this.proj.x = 180; - this.proj.setVelocity(150, 0); + this.proj.setVelocity(250, 0); } } shootLeft() { if (!this.combat) { - this.combat = true; this.createProj(); - this.createColliders(); - this.proj.x = 450; - this.proj.setVelocity(-150, 0); + this.proj.x = 400; + this.proj.setVelocity(-250, 0); } } diff --git a/client/src/components/phaser.container.jsx b/client/src/components/phaser.container.jsx index fa7bdb86..29946187 100755 --- a/client/src/components/phaser.container.jsx +++ b/client/src/components/phaser.container.jsx @@ -35,7 +35,7 @@ class PhaserInstance extends preact.Component { // now mounted, can freely modify the DOM: this.PhaserCombat = new PhaserCombat(); const config = { - type: Phaser.AUTO, + type: Phaser.DOM.FILL, width: 600, height: 400, parent: 'phaser-example', From 8aebc1dd5b23d0d2c187fc607796e4f84fbdde03 Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 2 Nov 2018 23:54:09 +1000 Subject: [PATCH 05/12] Refactor for more phasor skills --- client/src/components/phaser.combat.js | 43 +++++----------------- client/src/components/phaser.container.jsx | 9 +++-- client/src/components/phaser.skills.js | 27 ++++++++++++++ 3 files changed, 41 insertions(+), 38 deletions(-) create mode 100755 client/src/components/phaser.skills.js diff --git a/client/src/components/phaser.combat.js b/client/src/components/phaser.combat.js index bee93ba8..4904e9b6 100755 --- a/client/src/components/phaser.combat.js +++ b/client/src/components/phaser.combat.js @@ -1,13 +1,15 @@ const Phaser = require('phaser'); +const fs = require('fs'); class PhaserCombat extends Phaser.Scene { 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('alk', 'https://i.imgur.com/RFP8Pfz.png'); - this.load.image('magmar', 'https://i.imgur.com/CBNokzR.png'); /* Spritesheets */ this.load.spritesheet({ key: 'explosion', @@ -27,24 +29,12 @@ class PhaserCombat extends Phaser.Scene { createPlayers() { this.players = this.physics.add.staticGroup(); const img = this.players.create(100, 300, 'alk'); - const imgTwo = this.players.create(450, 300, 'magmar'); + 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(420, 200, '', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' }); - } - - createProj() { - this.combat = true; - this.proj = this.physics.add.image(-100, 300, 'proj'); - const particles = this.add.particles('blue'); - 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.playerOneHp = this.add.text(20, 200, 'HP', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' }); + this.playerTwoHp = this.add.text(450, 200, 'HP', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' }); + this.loaded = true; } createAnim() { @@ -65,21 +55,6 @@ class PhaserCombat extends Phaser.Scene { this.playerTwoHp.text = health; } - shootRight() { - if (!this.combat) { - this.createProj(); - this.proj.x = 180; - this.proj.setVelocity(250, 0); - } - } - - shootLeft() { - if (!this.combat) { - this.createProj(); - this.proj.x = 400; - this.proj.setVelocity(-250, 0); - } - } explode(proj) { this.proj.disableBody(true, true); @@ -89,6 +64,6 @@ class PhaserCombat extends Phaser.Scene { this.combat = false; } } - +PhaserCombat.prototype.skills = require('./phaser.skills.js'); module.exports = PhaserCombat; diff --git a/client/src/components/phaser.container.jsx b/client/src/components/phaser.container.jsx index 29946187..61a740ae 100755 --- a/client/src/components/phaser.container.jsx +++ b/client/src/components/phaser.container.jsx @@ -7,7 +7,7 @@ const addState = connect( function receiveState(state) { const { game, activeSkill, activeIncoming, account } = state; return {game, activeSkill, activeIncoming, account }; - } + } ); class PhaserInstance extends preact.Component { @@ -19,14 +19,15 @@ class PhaserInstance extends preact.Component { componentWillReceiveProps(nextProps) { const playerTeam = nextProps.game.teams.find(t => t.id === nextProps.account.id); const otherTeams = nextProps.game.teams.filter(t => t.id !== nextProps.account.id); - if (playerTeam !== null && otherTeams !== null) { + + if (playerTeam && otherTeams[0] && this.PhaserCombat.loaded) { this.PhaserCombat.setPlayerOneHp(`${playerTeam.cryps[0].hp.value.toString()} / ${playerTeam.cryps[0].stam.value.toString()} HP`); this.PhaserCombat.setPlayerTwoHp(`${otherTeams[0].cryps[0].hp.value.toString()} / ${otherTeams[0].cryps[0].stam.value.toString()} HP`); if (playerTeam.cryps[0].hp.value === 0) { - this.PhaserCombat.shootLeft(); + this.PhaserCombat.skills('blast', 400, -250); //Left Blast } else if (otherTeams[0].cryps[0].hp.value === 0) { - this.PhaserCombat.shootRight(); + this.PhaserCombat.skills('blast', 180, 250); //Right Blast } } } diff --git a/client/src/components/phaser.skills.js b/client/src/components/phaser.skills.js new file mode 100755 index 00000000..2f2902dc --- /dev/null +++ b/client/src/components/phaser.skills.js @@ -0,0 +1,27 @@ +// Skill function called by phaser combat + +function skills(skill, speed, location) { + if (this.combat) { + return; + } + this.combat = true; + + switch (skill) { + case 'blast': + this.proj = this.physics.add.image(-100, 300, 'proj'); + this.emitter = this.add.particles('blue').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 = speed; + this.proj.setVelocity(location, 0); + break; + default: + break; + } +} + +module.exports = skills; From 79374a3cd56c43d3ec1192f0b98ef031909de2ad Mon Sep 17 00:00:00 2001 From: Mashy Date: Mon, 5 Nov 2018 16:31:48 +1000 Subject: [PATCH 06/12] More attack animations --- client/src/components/phaser.combat.js | 7 +- client/src/components/phaser.container.jsx | 14 ++- client/src/components/phaser.skills.js | 122 ++++++++++++++++++++- 3 files changed, 134 insertions(+), 9 deletions(-) diff --git a/client/src/components/phaser.combat.js b/client/src/components/phaser.combat.js index 4904e9b6..98afa3be 100755 --- a/client/src/components/phaser.combat.js +++ b/client/src/components/phaser.combat.js @@ -10,6 +10,12 @@ class PhaserCombat extends Phaser.Scene { 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', @@ -61,7 +67,6 @@ class PhaserCombat extends Phaser.Scene { this.emitter.stop(); const sprite = this.add.sprite(proj.x, proj.y, 'explosion').play('explodeAnimation'); sprite.setScale(3); - this.combat = false; } } PhaserCombat.prototype.skills = require('./phaser.skills.js'); diff --git a/client/src/components/phaser.container.jsx b/client/src/components/phaser.container.jsx index 61a740ae..e9142205 100755 --- a/client/src/components/phaser.container.jsx +++ b/client/src/components/phaser.container.jsx @@ -5,8 +5,12 @@ const PhaserCombat = require('./phaser.combat'); const addState = connect( function receiveState(state) { - const { game, activeSkill, activeIncoming, account } = state; - return {game, activeSkill, activeIncoming, account }; + const { + game, activeSkill, activeIncoming, account, + } = state; + return { + game, activeSkill, activeIncoming, account, + }; } ); @@ -25,9 +29,11 @@ class PhaserInstance extends preact.Component { this.PhaserCombat.setPlayerTwoHp(`${otherTeams[0].cryps[0].hp.value.toString()} / ${otherTeams[0].cryps[0].stam.value.toString()} HP`); if (playerTeam.cryps[0].hp.value === 0) { - this.PhaserCombat.skills('blast', 400, -250); //Left Blast + // this.PhaserCombat.skills('blast', 400, -150); + this.PhaserCombat.skills('chargeBall', 'green', 400, -250); } else if (otherTeams[0].cryps[0].hp.value === 0) { - this.PhaserCombat.skills('blast', 180, 250); //Right Blast + // this.PhaserCombat.skills('blast', 180, 150); + this.PhaserCombat.skills('chargeBall', 'green', 180, 250); } } } diff --git a/client/src/components/phaser.skills.js b/client/src/components/phaser.skills.js index 2f2902dc..16b6b1c5 100755 --- a/client/src/components/phaser.skills.js +++ b/client/src/components/phaser.skills.js @@ -1,27 +1,141 @@ // Skill function called by phaser combat +const Phaser = require('phaser'); -function skills(skill, speed, location) { +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 = this.add.particles('blue').createEmitter({ + 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 = speed; - this.proj.setVelocity(location, 0); + 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; From 8b60f26fc580b11eee5859ab561e378332b04974 Mon Sep 17 00:00:00 2001 From: Mashy Date: Tue, 13 Nov 2018 14:24:39 +1000 Subject: [PATCH 07/12] Basic graph display --- client/src/components/body.component.jsx | 53 +++++++++++---------- client/src/components/passive.container.jsx | 49 +++++++++++++++++++ client/src/components/passive.node.js | 36 ++++++++++++++ 3 files changed, 114 insertions(+), 24 deletions(-) create mode 100755 client/src/components/passive.container.jsx create mode 100755 client/src/components/passive.node.js diff --git a/client/src/components/body.component.jsx b/client/src/components/body.component.jsx index a19e1474..374e7f91 100755 --- a/client/src/components/body.component.jsx +++ b/client/src/components/body.component.jsx @@ -8,28 +8,26 @@ const CrypSpawnContainer = require('./cryp.spawn.container'); const GameJoinButton = require('./game.join.button'); const CrypListContainer = require('./cryp.list.container'); const GameContainer = require('./game.container'); +const Passives = require('./passive.container'); const addState = connect( (state) => { - const { game, ws } = state; - + const { game, ws, account } = state; if (!game) { - console.log('out of game'); ws.clearGameStateInterval(); } - - return { game }; + return state; }, (dispatch) => { function setGame(game) { dispatch(actions.setGame(game)); } return { setGame }; - }, + } ); function renderBody(props) { - const { game, setGame } = props; + const { game, setGame, account } = props; if (game) { return (
@@ -44,26 +42,33 @@ function renderBody(props) {
); } - return ( -
-
-
- - -
-
-
-
- -
-
- + if (account) { + return ( +
+
+
+ + +
+
+
+
+ +
+
+ +
-
-
- ); +
+ +
+ + ); + } else { + return
not ready
; + } } module.exports = addState(renderBody); diff --git a/client/src/components/passive.container.jsx b/client/src/components/passive.container.jsx new file mode 100755 index 00000000..5fb0da7e --- /dev/null +++ b/client/src/components/passive.container.jsx @@ -0,0 +1,49 @@ +const preact = require('preact'); +const { connect } = require('preact-redux'); +const Phaser = require('phaser'); +const PhaserPassives = require('./phaser.passives'); + +const addState = connect( + function receiveState(state) { + const { + game, activeSkill, activeIncoming, account, + } = state; + return { + game, activeSkill, activeIncoming, account, + }; + } +); + +class PhaserInstance extends preact.Component { + constructor(props) { + super(props); + this.props = props; + } + + componentDidMount() { + // now mounted, can freely modify the DOM: + this.PhaserPassives = new PhaserPassives(); + const config = { + type: Phaser.DOM.FILL, + width: 1200, + height: 900, + parent: 'passives', + physics: { + default: 'arcade', + arcade: { + gravity: { y: 0 }, + }, + }, + scene: this.PhaserPassives, + }; + const game = new Phaser.Game(config); + } + + render() { + return ( +
+
+ ); + } +} +module.exports = addState(PhaserInstance); diff --git a/client/src/components/passive.node.js b/client/src/components/passive.node.js new file mode 100755 index 00000000..042375ef --- /dev/null +++ b/client/src/components/passive.node.js @@ -0,0 +1,36 @@ +const Phaser = require('phaser'); + +class PassiveNode extends Phaser.GameObjects.Sprite { + constructor(scene, x, y, id, alloc) { + super(scene, x, y); + this.setTexture('eye'); + + this.scene = scene; + this.alloc = alloc; + this.id = id; + this.setPosition(x, y); + this.setScale(0.25); + + if (this.alloc) { + this.setTint(0xff0000); + } + } + + allocate() { + if (this.alloc) { + this.clearTint(); + this.alloc = false; + } else { + this.alloc = true; + this.setTint(0xff0000); + } + for (let i = 0; i < this.scene.passiveNodes.length; i += 1) { + if (this.scene.passiveNodes[i].id === this.id) { + this.scene.passiveNodes[i].alloc = this.alloc; + } + } + this.scene.drawPassiveEdges(); + } +} + +module.exports = PassiveNode; From d4bf444021ef081beab89a401e1369bb933cedb8 Mon Sep 17 00:00:00 2001 From: Mashy Date: Tue, 13 Nov 2018 14:30:30 +1000 Subject: [PATCH 08/12] passives --- client/src/components/phaser.passives.js | 86 ++++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100755 client/src/components/phaser.passives.js diff --git a/client/src/components/phaser.passives.js b/client/src/components/phaser.passives.js new file mode 100755 index 00000000..53c689bb --- /dev/null +++ b/client/src/components/phaser.passives.js @@ -0,0 +1,86 @@ +const Phaser = require('phaser'); +const PassiveNode = require('./passive.node'); + + +class PhaserPassives extends Phaser.Scene { + preload() { + this.load.image('eye', 'https://labs.phaser.io/assets/particles/green-orb.png'); + } + + create() { + this.passiveNodes = [ + { x: 400, y: 300, id: 'A', alloc: false }, + { x: 100, y: 100, id: 'B', alloc: false }, + { x: 300, y: 200, id: 'C', alloc: false }, + { x: 300, y: 800, id: 'D', alloc: false }, + { x: 600, y: 500, id: 'E', alloc: false }, + { x: 700, y: 400, id: 'F', alloc: false }]; + + this.passiveEdges = [ + ['A', 'B'], + ['F', 'A'], + ['D', 'A'], + ]; + + this.graphics = this.add.graphics(); + this.addCamera(); + this.addPassiveNodes(); + this.drawPassiveEdges(); + } + + addPassiveNodes() { + this.passiveNodes.forEach((n) => { + this.add.existing(new PassiveNode(this, n.x, n.y, n.id, n.alloc)).setInteractive(); + }); + this.input.on('pointerover', (event, gameObjects) => { + if (gameObjects[0] instanceof PassiveNode) { + if (!gameObjects[0].alloc) gameObjects[0].setTint(0xff00ff); + } + }); + this.input.on('pointerout', (event, gameObjects) => { + if (gameObjects[0] instanceof PassiveNode) { + if (!gameObjects[0].alloc) gameObjects[0].clearTint(); + } + }); + this.input.on('pointerdown', (event, gameObjects) => { + if (gameObjects[0] instanceof PassiveNode) { + gameObjects[0].allocate(); + } + }); + } + + drawPassiveEdges() { + this.graphics.clear(); + this.passiveEdges.forEach((e) => { + const drawEdge = this.passiveNodes.filter(n => (e[0] === n.id || e[1] === n.id)); + if (drawEdge[0].alloc && drawEdge[1].alloc) { + this.graphics.lineStyle(50, 0xfff00f, 0.2); + } else { + this.graphics.lineStyle(10, 0x00ffff, 0.2); + } + this.graphics.lineBetween(drawEdge[0].x, drawEdge[0].y, drawEdge[1].x, drawEdge[1].y); + }); + } + + addCamera() { + this.cursors = this.input.keyboard.createCursorKeys(); + this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({ + camera: this.cameras.main, + left: this.cursors.left, + right: this.cursors.right, + up: this.cursors.up, + down: this.cursors.down, + 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, + }); + } + + update(delta) { + this.controls.update(delta); + } +} + +module.exports = PhaserPassives; From bcc3079f73d090bfcacdfc96386d02645f67580f Mon Sep 17 00:00:00 2001 From: Mashy Date: Tue, 13 Nov 2018 17:47:32 +1000 Subject: [PATCH 09/12] stam -> stamina --- client/src/components/body.component.jsx | 5 ++--- client/src/components/cryp.list.container.js | 4 +++- client/src/components/cryp.list.jsx | 4 ++-- client/src/components/game.jsx | 8 +++---- client/src/components/passive.container.jsx | 22 ++++++++++++++++++-- client/src/components/passive.node.js | 1 + client/src/components/phaser.container.jsx | 7 +++++-- 7 files changed, 37 insertions(+), 14 deletions(-) mode change 100644 => 100755 client/src/components/cryp.list.container.js diff --git a/client/src/components/body.component.jsx b/client/src/components/body.component.jsx index 374e7f91..cc3dc3ac 100755 --- a/client/src/components/body.component.jsx +++ b/client/src/components/body.component.jsx @@ -28,6 +28,7 @@ const addState = connect( function renderBody(props) { const { game, setGame, account } = props; + console.log('grep'); if (game) { return (
@@ -66,9 +67,7 @@ function renderBody(props) {
); - } else { - return
not ready
; - } + } return
not ready
; } module.exports = addState(renderBody); diff --git a/client/src/components/cryp.list.container.js b/client/src/components/cryp.list.container.js old mode 100644 new mode 100755 index 78a4cf1a..e1f4a5cf --- a/client/src/components/cryp.list.container.js +++ b/client/src/components/cryp.list.container.js @@ -20,7 +20,9 @@ const addState = connect( return false; } - return { cryps, sendGamePve, sendGamePvp, activeItem, sendItemUse }; + return { + cryps, sendGamePve, sendGamePvp, activeItem, sendItemUse, + }; } ); diff --git a/client/src/components/cryp.list.jsx b/client/src/components/cryp.list.jsx index fb6e4588..a3f094ff 100755 --- a/client/src/components/cryp.list.jsx +++ b/client/src/components/cryp.list.jsx @@ -27,8 +27,8 @@ function CrypList({ -
{cryp.hp.value} / {cryp.stam.value} HP
- +
{cryp.hp.value} / {cryp.stamina.value} HP
+
{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP
diff --git a/client/src/components/game.jsx b/client/src/components/game.jsx index 5af4bf95..c1944f18 100755 --- a/client/src/components/game.jsx +++ b/client/src/components/game.jsx @@ -78,8 +78,8 @@ function GamePanel(props) { -
{cryp.hp.value} / {cryp.stam.value} HP
- +
{cryp.hp.value} / {cryp.stamina.value} HP
+
{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP
@@ -120,8 +120,8 @@ function GamePanel(props) { -
{cryp.hp.value} / {cryp.stam.value} HP
- +
{cryp.hp.value} / {cryp.stamina.value} HP
+
{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP
diff --git a/client/src/components/passive.container.jsx b/client/src/components/passive.container.jsx index 5fb0da7e..84d42e9a 100755 --- a/client/src/components/passive.container.jsx +++ b/client/src/components/passive.container.jsx @@ -6,10 +6,10 @@ const PhaserPassives = require('./phaser.passives'); const addState = connect( function receiveState(state) { const { - game, activeSkill, activeIncoming, account, + game, account, } = state; return { - game, activeSkill, activeIncoming, account, + game, account, }; } ); @@ -20,6 +20,24 @@ class PhaserInstance extends preact.Component { this.props = props; } + componentWillReceiveProps(nextProps) { + const playerTeam = nextProps.game.teams.find(t => t.id === nextProps.account.id); + const otherTeams = nextProps.game.teams.filter(t => t.id !== nextProps.account.id); + + if (playerTeam && otherTeams[0] && this.PhaserCombat.loaded) { + this.PhaserCombat.setPlayerOneHp(`${playerTeam.cryps[0].hp.value.toString()} / ${playerTeam.cryps[0].stamina.value.toString()} HP`); + this.PhaserCombat.setPlayerTwoHp(`${otherTeams[0].cryps[0].hp.value.toString()} / ${otherTeams[0].cryps[0].stamina.value.toString()} HP`); + + if (playerTeam.cryps[0].hp.value === 0) { + // this.PhaserCombat.skills('blast', 400, -150); + this.PhaserCombat.skills('chargeBall', 'green', 400, -250); + } else if (otherTeams[0].cryps[0].hp.value === 0) { + // this.PhaserCombat.skills('blast', 180, 150); + this.PhaserCombat.skills('chargeBall', 'green', 180, 250); + } + } + } + componentDidMount() { // now mounted, can freely modify the DOM: this.PhaserPassives = new PhaserPassives(); diff --git a/client/src/components/passive.node.js b/client/src/components/passive.node.js index 042375ef..65323ec0 100755 --- a/client/src/components/passive.node.js +++ b/client/src/components/passive.node.js @@ -27,6 +27,7 @@ class PassiveNode extends Phaser.GameObjects.Sprite { for (let i = 0; i < this.scene.passiveNodes.length; i += 1) { if (this.scene.passiveNodes[i].id === this.id) { this.scene.passiveNodes[i].alloc = this.alloc; + break; } } this.scene.drawPassiveEdges(); diff --git a/client/src/components/phaser.container.jsx b/client/src/components/phaser.container.jsx index e9142205..1bee8b39 100755 --- a/client/src/components/phaser.container.jsx +++ b/client/src/components/phaser.container.jsx @@ -5,6 +5,7 @@ const PhaserCombat = require('./phaser.combat'); const addState = connect( function receiveState(state) { + console.log('grep'); const { game, activeSkill, activeIncoming, account, } = state; @@ -25,8 +26,8 @@ class PhaserInstance extends preact.Component { const otherTeams = nextProps.game.teams.filter(t => t.id !== nextProps.account.id); if (playerTeam && otherTeams[0] && this.PhaserCombat.loaded) { - this.PhaserCombat.setPlayerOneHp(`${playerTeam.cryps[0].hp.value.toString()} / ${playerTeam.cryps[0].stam.value.toString()} HP`); - this.PhaserCombat.setPlayerTwoHp(`${otherTeams[0].cryps[0].hp.value.toString()} / ${otherTeams[0].cryps[0].stam.value.toString()} HP`); + this.PhaserCombat.setPlayerOneHp(`${playerTeam.cryps[0].hp.value.toString()} / ${playerTeam.cryps[0].stamina.value.toString()} HP`); + this.PhaserCombat.setPlayerTwoHp(`${otherTeams[0].cryps[0].hp.value.toString()} / ${otherTeams[0].cryps[0].stamina.value.toString()} HP`); if (playerTeam.cryps[0].hp.value === 0) { // this.PhaserCombat.skills('blast', 400, -150); @@ -40,6 +41,7 @@ class PhaserInstance extends preact.Component { componentDidMount() { // now mounted, can freely modify the DOM: + console.log('grep'); this.PhaserCombat = new PhaserCombat(); const config = { type: Phaser.DOM.FILL, @@ -58,6 +60,7 @@ class PhaserInstance extends preact.Component { } render() { + console.log('grep'); return (
From c6d342b7c8b141eb53b4d5f9d40d624c777853bd Mon Sep 17 00:00:00 2001 From: Mashy Date: Thu, 15 Nov 2018 13:33:15 +1000 Subject: [PATCH 10/12] Shadow Tree --- client/src/components/body.component.jsx | 3 +- client/src/components/passive.container.jsx | 2 +- client/src/components/passive.data.edge.js | 121 ++++++++++++++++++ client/src/components/passive.data.node.js | 104 +++++++++++++++ client/src/components/passive.node.js | 16 ++- .../{phaser.passives.js => passive.phaser.js} | 26 ++-- client/src/components/phaser.container.jsx | 3 - 7 files changed, 249 insertions(+), 26 deletions(-) create mode 100755 client/src/components/passive.data.edge.js create mode 100755 client/src/components/passive.data.node.js rename client/src/components/{phaser.passives.js => passive.phaser.js} (77%) diff --git a/client/src/components/body.component.jsx b/client/src/components/body.component.jsx index cc3dc3ac..bf3287c5 100755 --- a/client/src/components/body.component.jsx +++ b/client/src/components/body.component.jsx @@ -12,7 +12,7 @@ const Passives = require('./passive.container'); const addState = connect( (state) => { - const { game, ws, account } = state; + const { game, ws } = state; if (!game) { ws.clearGameStateInterval(); } @@ -28,7 +28,6 @@ const addState = connect( function renderBody(props) { const { game, setGame, account } = props; - console.log('grep'); if (game) { return (
diff --git a/client/src/components/passive.container.jsx b/client/src/components/passive.container.jsx index 84d42e9a..7f1d3702 100755 --- a/client/src/components/passive.container.jsx +++ b/client/src/components/passive.container.jsx @@ -1,7 +1,7 @@ const preact = require('preact'); const { connect } = require('preact-redux'); const Phaser = require('phaser'); -const PhaserPassives = require('./phaser.passives'); +const PhaserPassives = require('./passive.phaser'); const addState = connect( function receiveState(state) { diff --git a/client/src/components/passive.data.edge.js b/client/src/components/passive.data.edge.js new file mode 100755 index 00000000..fdbf2460 --- /dev/null +++ b/client/src/components/passive.data.edge.js @@ -0,0 +1,121 @@ +const passiveEdges = [ + ['CMED1', 'CSTAT7'], + ['CSTAT7', 'CSTAT8'], + ['CSTAT8', 'CSTAT9'], + ['CSTAT9', 'CMED20'], + ['CMED20', 'CSTAT10'], + ['CSTAT10', 'CSTAT11'], + ['CSTAT11', 'CSTAT12'], + ['CSTAT12', 'CMED21'], + ['CMED21', 'CSTAT15'], + ['CSTAT15', 'CMED22'], + ['CMED21', 'CSTAT14'], + ['CSTAT14', 'CLRG4'], + ['CLRG4', 'CSTAT16'], + ['CSTAT16', 'CMED22'], + ['CMED22', 'CSTAT17'], + ['CMED23', 'CSTAT17'], + ['CMED23', 'CSTAT13'], + ['CSTAT13', 'CLRG4'], + ['CSTAT17', 'CSTAT18'], + ['CSTAT18', 'CSTAT19'], + ['CSTAT18', 'CSTAT20'], + ['CSTAT20', 'CSTAT21'], + ['CSTAT21', 'CSTAT22'], + ['CSTAT22', 'CMED9'], + ['CMED9', 'CSTAT23'], + ['CSTAT23', 'CSTAT24'], + ['CSTAT24', 'CLRG2'], + ['CLRG2', 'CSTAT25'], + ['CSTAT25', 'CMED8'], + ['CMED8', 'CSTAT26'], + ['CSTAT26', 'CLRG1'], + ['CLRG1', 'CSTAT27'], + ['CSTAT27', 'CSTAT28'], + ['CMED7', 'CSTAT28'], + ['CMED7', 'CSTAT29'], + ['CSTAT29', 'CSTAT30'], + ['CSTAT30', 'CSTAT31'], + ['CSTAT31', 'CSTAT32'], + ['CSTAT32', 'CSTAT33'], + ['CSTAT31', 'CSTAT34'], + ['CSTAT34', 'CSTAT35'], + ['CSTAT34', 'CSTAT36'], + ['CSTAT36', 'CSTAT37'], + ['CSTAT20', 'CSTAT36'], + ['CMED6', 'CSTAT33'], + ['CMED25', 'CSTAT18'], + ['CMED25', 'CMED24'], + ['CMED24', 'CLRG3'], + ['CSTAT6', 'CSTAT7'], + ['CSTAT6', 'CMED18'], + ['CMED2', 'CSDMG1'], + ['CSDMG1', 'CSDMG2'], + ['CSDMG2', 'CSDMG3'], + ['CMED18', 'CSDMG3'], + ['CMED2', 'CHEAL1'], + ['CHEAL1', 'CHEAL2'], + ['CHEAL2', 'CHEAL3'], + ['CHEAL3', 'CMED18'], + ['CMED18', 'CSDMG4'], + ['CSDMG4', 'CSDMG5'], + ['CSDMG5', 'CSDMG6'], + ['CSDMG5', 'CSTAT5'], + ['CSTAT5', 'CSTAT4'], + ['CSTAT4', 'CMED3'], + ['CMED3', 'CSTAT1'], + ['CSTAT1', 'CSTAT2'], + ['CSTAT1', 'CSTAT3'], + ['CSTAT2', 'CMED4'], + ['CMED4', 'CSDMG10'], + ['CSDMG10', 'CMED5'], + ['CMED5', 'CSDMG11'], + ['CSDMG11', 'CMED6'], + ['CMED4', 'CPHYS2'], + ['CPHYS2', 'CMED5'], + ['CMED5', 'CPHYS3'], + ['CPHYS3', 'CMED6'], + ['CSTAT3', 'CMED10'], + ['CMED10', 'CPHYS1'], + ['CPHYS1', 'CMED11'], + ['CMED10', 'CHEAL14'], + ['CHEAL14', 'CMED11'], + ['CMED11', 'CHEAL15'], + ['CHEAL15', 'CMED13'], + ['CMED13', 'CSDMG6'], + ['CPHYS4', 'CMED11'], + ['CPHYS4', 'CMED13'], + ['CPHYS4', 'CPHYS5'], + ['CPHYS5', 'CPHYS6'], + ['CPHYS6', 'CMED12'], + ['CPHYS6', 'CSTAT34'], + ['CMED12', 'CPHYS7'], + ['CPHYS7', 'CSTAT33'], + ['CMED13', 'CSDMG7'], + ['CSDMG7', 'CSDMG9'], + ['CSDMG7', 'CMED15'], + ['CSDMG9', 'CSTAT37'], + ['CSDMG9', 'CSTAT35'], + ['CMED18', 'CHEAL4'], + ['CHEAL4', 'CHEAL5'], + ['CHEAL5', 'CHEAL6'], + ['CHEAL6', 'CHEAL7'], + ['CHEAL7', 'CHEAL8'], + ['CHEAL7', 'CHEAL9'], + ['CHEAL8', 'CMED20'], + ['CHEAL9', 'CMED16'], + ['CHEAL5', 'CMED19'], + ['CMED16', 'CHEAL11'], + ['CHEAL11', 'CHEAL12'], + ['CHEAL12', 'CHEAL13'], + ['CHEAL13', 'CMED17'], + ['CHEAL13', 'CSTAT19'], + ['CMED15', 'CHEAL10'], + ['CHEAL10', 'CMED16'], + ['CMED15', 'CSDMG8'], + ['CSDMG8', 'CMED16'], + ['CMED14', 'CMED15'], + ['CMED8', 'CNOTE'], +]; + +module.exports = passiveEdges; diff --git a/client/src/components/passive.data.node.js b/client/src/components/passive.data.node.js new file mode 100755 index 00000000..6d22d02a --- /dev/null +++ b/client/src/components/passive.data.node.js @@ -0,0 +1,104 @@ +const passiveNodes = [ + { x: 860, y: 1011, id: 'CMED1', alloc: false }, + { x: 905, y: 970, id: 'CSTAT7', alloc: false }, + { x: 940, y: 917.5, id: 'CSTAT8', alloc: false }, + { x: 950, y: 1172.5, id: 'CMED2', alloc: false }, + { x: 955, y: 1120, id: 'CSDMG1', alloc: false }, + { x: 965, y: 1082.5, id: 'CSDMG2', alloc: false }, + { x: 970, y: 872.5, id: 'CSTAT9', alloc: false }, + { x: 975, y: 1012.5, id: 'CSTAT6', alloc: false }, + { x: 995, y: 1062.5, id: 'CSDMG3', alloc: false }, + { x: 1000, y: 1150, id: 'CHEAL1', alloc: false }, + { x: 1005, y: 812.5, id: 'CMED20', alloc: false }, + { x: 1024.5, y: 1122.5, id: 'CHEAL2', alloc: false }, + { x: 1036.5, y: 896.5, id: 'CMED19', alloc: false }, + { x: 1036.5, y: 1042.5, id: 'CMED18', alloc: false }, + { x: 1036.5, y: 1082.5, id: 'CHEAL3', alloc: false }, + { x: 1041.5, y: 772.5, id: 'CSTAT10', alloc: false }, + { x: 1055, y: 1327.5, id: 'CMED3', alloc: false }, + { x: 1066.5, y: 939.5, id: 'CHEAL5', alloc: false }, + { x: 1067.5, y: 995, id: 'CHEAL4', alloc: false }, + { x: 1070, y: 1250, id: 'CSTAT4', alloc: false }, + { x: 1072.5, y: 840.5, id: 'CHEAL8', alloc: false }, + { x: 1087.5, y: 700, id: 'CSTAT11', alloc: false }, + { x: 1097.5, y: 1052.5, id: 'CSDMG4', alloc: false }, + { x: 1102.5, y: 1140, id: 'CSTAT5', alloc: false }, + { x: 1102.5, y: 917.5, id: 'CHEAL6', alloc: false }, + { x: 1115, y: 1332.5, id: 'CSTAT1', alloc: false }, + { x: 1115, y: 875, id: 'CHEAL7', alloc: false }, + { x: 1130, y: 640, id: 'CSTAT12', alloc: false }, + { x: 1145, y: 1287.5, id: 'CSTAT3', alloc: false }, + { x: 1145, y: 1057.5, id: 'CSDMG5', alloc: false }, + { x: 1175, y: 1332.5, id: 'CSTAT2', alloc: false }, + { x: 1180, y: 1247.5, id: 'CMED10', alloc: false }, + { x: 1180, y: 950, id: 'CMED14', alloc: false }, + { x: 1195, y: 875, id: 'CHEAL9', alloc: false }, + { x: 1196.5, y: 635, id: 'CMED21', alloc: false }, + { x: 1205, y: 1062.5, id: 'CSDMG6', alloc: false }, + { x: 1212.5, y: 1200, id: 'CHEAL14', alloc: false }, + { x: 1231.5, y: 590, id: 'CSTAT14', alloc: false }, + { x: 1235, y: 772.5, id: 'CHEAL12', alloc: false }, + { x: 1240, y: 1225, id: 'CPHYS1', alloc: false }, + { x: 1240, y: 1322.5, id: 'CMED4', alloc: false }, + { x: 1258.5, y: 1107.5, id: 'CHEAL15', alloc: false }, + { x: 1260, y: 917.5, id: 'CHEAL10', alloc: false }, + { x: 1263, y: 520, id: 'CLRG4', alloc: false }, + { x: 1273.5, y: 1057.5, id: 'CMED13', alloc: false }, + { x: 1275, y: 1167.5, id: 'CMED11', alloc: false }, + { x: 1275, y: 947.5, id: 'CMED15', alloc: false }, + { x: 1277.5, y: 872.5, id: 'CMED16', alloc: false }, + { x: 1278.5, y: 812.5, id: 'CHEAL11', alloc: false }, + { x: 1280, y: 732.5, id: 'CHEAL13', alloc: false }, + { x: 1281.5, y: 1002.5, id: 'CSDMG7', alloc: false }, + { x: 1284, y: 640, id: 'CSTAT15', alloc: false }, + { x: 1298.5, y: 1107.5, id: 'CPHYS4', alloc: false }, + { x: 1302.5, y: 917.5, id: 'CSDMG8', alloc: false }, + { x: 1305, y: 1307.5, id: 'CPHYS2', alloc: false }, + { x: 1306, y: 1347.5, id: 'CSDMG10', alloc: false }, + { x: 1315, y: 762.5, id: 'CMED17', alloc: false }, + { x: 1326.5, y: 590, id: 'CSTAT16', alloc: false }, + { x: 1346.5, y: 635, id: 'CMED22', alloc: false }, + { x: 1348.5, y: 535, id: 'CSTAT13', alloc: false }, + { x: 1355, y: 1322.5, id: 'CMED5', alloc: false }, + { x: 1360, y: 1002.5, id: 'CSDMG9', alloc: false }, + { x: 1399.5, y: 1107.5, id: 'CPHYS5', alloc: false }, + { x: 1400, y: 807.5, id: 'CMED24', alloc: false }, + { x: 1409.5, y: 1312.5, id: 'CPHYS3', alloc: false }, + { x: 1410, y: 1347.5, id: 'CSDMG11', alloc: false }, + { x: 1410, y: 532.5, id: 'CMED23', alloc: false }, + { x: 1420, y: 732.5, id: 'CSTAT19', alloc: false }, + { x: 1430, y: 1205, id: 'CPHYS7', alloc: false }, + { x: 1447.5, y: 765, id: 'CMED25', alloc: false }, + { x: 1452.5, y: 1322.5, id: 'CMED6', alloc: false }, + { x: 1455, y: 1267.5, id: 'CSTAT33', alloc: false }, + { x: 1455, y: 1147.5, id: 'CMED12', alloc: false }, + { x: 1455, y: 1042.5, id: 'CSTAT35', alloc: false }, + { x: 1457.5, y: 975, id: 'CSTAT37', alloc: false }, + { x: 1462.5, y: 825, id: 'CLRG3', alloc: false }, + { x: 1485, y: 640, id: 'CSTAT17', alloc: false }, + { x: 1500, y: 1110, id: 'CPHYS6', alloc: false }, + { x: 1505, y: 1242.5, id: 'CSTAT32', alloc: false }, + { x: 1555, y: 1242.5, id: 'CSTAT31', alloc: false }, + { x: 1555, y: 1067.5, id: 'CSTAT34', alloc: false }, + { x: 1555, y: 962.5, id: 'CSTAT36', alloc: false }, + { x: 1555, y: 847.5, id: 'CSTAT20', alloc: false }, + { x: 1555, y: 732.5, id: 'CSTAT18', alloc: false }, + { x: 1597.5, y: 827.5, id: 'CSTAT21', alloc: false }, + { x: 1607.5, y: 1277.5, id: 'CSTAT30', alloc: false }, + { x: 1612.5, y: 1137.5, id: 'CLRG1', alloc: false }, + { x: 1612.5, y: 955, id: 'CLRG2', alloc: false }, + { x: 1657.5, y: 822.5, id: 'CSTAT22', alloc: false }, + { x: 1657.5, y: 1312.5, id: 'CSTAT29', alloc: false }, + { x: 1685, y: 1187.5, id: 'CSTAT27', alloc: false }, + { x: 1685, y: 1022.5, id: 'CSTAT25', alloc: false }, + { x: 1690, y: 1117.5, id: 'CSTAT26', alloc: false }, + { x: 1705, y: 960, id: 'CSTAT24', alloc: false }, + { x: 1712.5, y: 850, id: 'CMED9', alloc: false }, + { x: 1717.5, y: 1267.5, id: 'CMED7', alloc: false }, + { x: 1725, y: 1222.5, id: 'CSTAT28', alloc: false }, + { x: 1727.5, y: 1062.5, id: 'CMED8', alloc: false }, + { x: 1737.5, y: 917.5, id: 'CSTAT23', alloc: false }, + { x: 1830, y: 1032.5, id: 'CNOTE', alloc: false }, +]; + +module.exports = passiveNodes; diff --git a/client/src/components/passive.node.js b/client/src/components/passive.node.js index 65323ec0..2d716cc2 100755 --- a/client/src/components/passive.node.js +++ b/client/src/components/passive.node.js @@ -9,8 +9,20 @@ class PassiveNode extends Phaser.GameObjects.Sprite { this.alloc = alloc; this.id = id; this.setPosition(x, y); - this.setScale(0.25); - + const nodeNoDigits = this.id.replace(/[0-9]/g, ''); + switch (nodeNoDigits) { + case 'CNOTE': + this.setScale(0.25); + break; + case 'CLRG': + this.setScale(0.15); + break; + case 'CMED': + this.setScale(0.1); + break; + default: + this.setScale(0.05); + } if (this.alloc) { this.setTint(0xff0000); } diff --git a/client/src/components/phaser.passives.js b/client/src/components/passive.phaser.js similarity index 77% rename from client/src/components/phaser.passives.js rename to client/src/components/passive.phaser.js index 53c689bb..bed28422 100755 --- a/client/src/components/phaser.passives.js +++ b/client/src/components/passive.phaser.js @@ -1,6 +1,7 @@ const Phaser = require('phaser'); const PassiveNode = require('./passive.node'); - +const passiveDataNode = require('./passive.data.node'); +const passiveDataEdge = require('./passive.data.edge'); class PhaserPassives extends Phaser.Scene { preload() { @@ -8,24 +9,12 @@ class PhaserPassives extends Phaser.Scene { } create() { - this.passiveNodes = [ - { x: 400, y: 300, id: 'A', alloc: false }, - { x: 100, y: 100, id: 'B', alloc: false }, - { x: 300, y: 200, id: 'C', alloc: false }, - { x: 300, y: 800, id: 'D', alloc: false }, - { x: 600, y: 500, id: 'E', alloc: false }, - { x: 700, y: 400, id: 'F', alloc: false }]; - - this.passiveEdges = [ - ['A', 'B'], - ['F', 'A'], - ['D', 'A'], - ]; - this.graphics = this.add.graphics(); - this.addCamera(); + this.passiveNodes = passiveDataNode; + this.passiveEdges = passiveDataEdge; this.addPassiveNodes(); this.drawPassiveEdges(); + this.addCamera(); } addPassiveNodes() { @@ -54,10 +43,11 @@ class PhaserPassives extends Phaser.Scene { this.passiveEdges.forEach((e) => { const drawEdge = this.passiveNodes.filter(n => (e[0] === n.id || e[1] === n.id)); if (drawEdge[0].alloc && drawEdge[1].alloc) { - this.graphics.lineStyle(50, 0xfff00f, 0.2); + this.graphics.lineStyle(10, 0xfff00f, 0.2); } else { - this.graphics.lineStyle(10, 0x00ffff, 0.2); + this.graphics.lineStyle(2, 0xffffff, 0.2); } + // console.log(drawEdge); this.graphics.lineBetween(drawEdge[0].x, drawEdge[0].y, drawEdge[1].x, drawEdge[1].y); }); } diff --git a/client/src/components/phaser.container.jsx b/client/src/components/phaser.container.jsx index 1bee8b39..75460513 100755 --- a/client/src/components/phaser.container.jsx +++ b/client/src/components/phaser.container.jsx @@ -5,7 +5,6 @@ const PhaserCombat = require('./phaser.combat'); const addState = connect( function receiveState(state) { - console.log('grep'); const { game, activeSkill, activeIncoming, account, } = state; @@ -41,7 +40,6 @@ class PhaserInstance extends preact.Component { componentDidMount() { // now mounted, can freely modify the DOM: - console.log('grep'); this.PhaserCombat = new PhaserCombat(); const config = { type: Phaser.DOM.FILL, @@ -60,7 +58,6 @@ class PhaserInstance extends preact.Component { } render() { - console.log('grep'); return (
From eda4800cd3f65b9e8663b55d33fea92687179fb7 Mon Sep 17 00:00:00 2001 From: Mashy Date: Thu, 15 Nov 2018 18:19:15 +1000 Subject: [PATCH 11/12] Mouse control of passive tree, Q & E for zoom --- client/src/components/passive.container.jsx | 3 ++ client/src/components/passive.phaser.js | 33 ++++++++++++++------- 2 files changed, 26 insertions(+), 10 deletions(-) diff --git a/client/src/components/passive.container.jsx b/client/src/components/passive.container.jsx index 7f1d3702..56ae42f7 100755 --- a/client/src/components/passive.container.jsx +++ b/client/src/components/passive.container.jsx @@ -55,6 +55,9 @@ class PhaserInstance extends preact.Component { scene: this.PhaserPassives, }; const game = new Phaser.Game(config); + game.canvas.addEventListener('mousedown', () => this.PhaserPassives.camPan(true)); + game.canvas.addEventListener('mouseup', () => this.PhaserPassives.camPan(false)); + } render() { diff --git a/client/src/components/passive.phaser.js b/client/src/components/passive.phaser.js index bed28422..adcc1c16 100755 --- a/client/src/components/passive.phaser.js +++ b/client/src/components/passive.phaser.js @@ -9,12 +9,14 @@ class PhaserPassives extends Phaser.Scene { } create() { + this.cameras.main.setBounds(0, 0, 3000, 3000); + this.physics.world.setBounds(0, 0, 3000, 3000); this.graphics = this.add.graphics(); this.passiveNodes = passiveDataNode; this.passiveEdges = passiveDataEdge; this.addPassiveNodes(); this.drawPassiveEdges(); - this.addCamera(); + this.addCanmeraControl(); } addPassiveNodes() { @@ -31,9 +33,14 @@ class PhaserPassives extends Phaser.Scene { if (!gameObjects[0].alloc) gameObjects[0].clearTint(); } }); - this.input.on('pointerdown', (event, gameObjects) => { - if (gameObjects[0] instanceof PassiveNode) { - gameObjects[0].allocate(); + this.input.on('pointerup', (pointer, gameObjects) => { + if (Math.abs(pointer.upX - pointer.downX) < 5 + && Math.abs(pointer.upY - pointer.downY) < 5) { + // Check cursor hasn't significantly moved during point allocation + // If panning and mouse release is on node it won't allocate + if (gameObjects[0] instanceof PassiveNode) { + gameObjects[0].allocate(); + } } }); } @@ -52,14 +59,16 @@ class PhaserPassives extends Phaser.Scene { }); } - addCamera() { - this.cursors = this.input.keyboard.createCursorKeys(); + addCanmeraControl() { + this.input.on('pointermove', (pointer) => { + if (this.pan) { + const points = pointer.getInterpolatedPosition(2); + this.cameras.main.scrollX -= (points[1].x - points[0].x) * 1.5; + this.cameras.main.scrollY -= (points[1].y - points[0].y) * 1.5; + } + }, this); this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({ camera: this.cameras.main, - left: this.cursors.left, - right: this.cursors.right, - up: this.cursors.up, - down: this.cursors.down, zoomIn: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q), zoomOut: this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.E), acceleration: 0.005, @@ -68,6 +77,10 @@ class PhaserPassives extends Phaser.Scene { }); } + camPan(bool) { + this.pan = bool; + } + update(delta) { this.controls.update(delta); } From 01e6fdef69c1a0c9063544391dccf7026998c52d Mon Sep 17 00:00:00 2001 From: Mashy Date: Fri, 16 Nov 2018 14:33:41 +1000 Subject: [PATCH 12/12] Added node passive text on hover, functions to allow node allocation from state --- client/src/components/passive.container.jsx | 16 +- client/src/components/passive.data.node.js | 200 ++++++++++---------- client/src/components/passive.node.js | 29 ++- client/src/components/passive.phaser.js | 61 ++++-- 4 files changed, 169 insertions(+), 137 deletions(-) diff --git a/client/src/components/passive.container.jsx b/client/src/components/passive.container.jsx index 56ae42f7..f0fd037a 100755 --- a/client/src/components/passive.container.jsx +++ b/client/src/components/passive.container.jsx @@ -21,21 +21,7 @@ class PhaserInstance extends preact.Component { } componentWillReceiveProps(nextProps) { - const playerTeam = nextProps.game.teams.find(t => t.id === nextProps.account.id); - const otherTeams = nextProps.game.teams.filter(t => t.id !== nextProps.account.id); - - if (playerTeam && otherTeams[0] && this.PhaserCombat.loaded) { - this.PhaserCombat.setPlayerOneHp(`${playerTeam.cryps[0].hp.value.toString()} / ${playerTeam.cryps[0].stamina.value.toString()} HP`); - this.PhaserCombat.setPlayerTwoHp(`${otherTeams[0].cryps[0].hp.value.toString()} / ${otherTeams[0].cryps[0].stamina.value.toString()} HP`); - - if (playerTeam.cryps[0].hp.value === 0) { - // this.PhaserCombat.skills('blast', 400, -150); - this.PhaserCombat.skills('chargeBall', 'green', 400, -250); - } else if (otherTeams[0].cryps[0].hp.value === 0) { - // this.PhaserCombat.skills('blast', 180, 150); - this.PhaserCombat.skills('chargeBall', 'green', 180, 250); - } - } + // code here will update passive allocation from state } componentDidMount() { diff --git a/client/src/components/passive.data.node.js b/client/src/components/passive.data.node.js index 6d22d02a..f1da3ef7 100755 --- a/client/src/components/passive.data.node.js +++ b/client/src/components/passive.data.node.js @@ -1,104 +1,104 @@ const passiveNodes = [ - { x: 860, y: 1011, id: 'CMED1', alloc: false }, - { x: 905, y: 970, id: 'CSTAT7', alloc: false }, - { x: 940, y: 917.5, id: 'CSTAT8', alloc: false }, - { x: 950, y: 1172.5, id: 'CMED2', alloc: false }, - { x: 955, y: 1120, id: 'CSDMG1', alloc: false }, - { x: 965, y: 1082.5, id: 'CSDMG2', alloc: false }, - { x: 970, y: 872.5, id: 'CSTAT9', alloc: false }, - { x: 975, y: 1012.5, id: 'CSTAT6', alloc: false }, - { x: 995, y: 1062.5, id: 'CSDMG3', alloc: false }, - { x: 1000, y: 1150, id: 'CHEAL1', alloc: false }, - { x: 1005, y: 812.5, id: 'CMED20', alloc: false }, - { x: 1024.5, y: 1122.5, id: 'CHEAL2', alloc: false }, - { x: 1036.5, y: 896.5, id: 'CMED19', alloc: false }, - { x: 1036.5, y: 1042.5, id: 'CMED18', alloc: false }, - { x: 1036.5, y: 1082.5, id: 'CHEAL3', alloc: false }, - { x: 1041.5, y: 772.5, id: 'CSTAT10', alloc: false }, - { x: 1055, y: 1327.5, id: 'CMED3', alloc: false }, - { x: 1066.5, y: 939.5, id: 'CHEAL5', alloc: false }, - { x: 1067.5, y: 995, id: 'CHEAL4', alloc: false }, - { x: 1070, y: 1250, id: 'CSTAT4', alloc: false }, - { x: 1072.5, y: 840.5, id: 'CHEAL8', alloc: false }, - { x: 1087.5, y: 700, id: 'CSTAT11', alloc: false }, - { x: 1097.5, y: 1052.5, id: 'CSDMG4', alloc: false }, - { x: 1102.5, y: 1140, id: 'CSTAT5', alloc: false }, - { x: 1102.5, y: 917.5, id: 'CHEAL6', alloc: false }, - { x: 1115, y: 1332.5, id: 'CSTAT1', alloc: false }, - { x: 1115, y: 875, id: 'CHEAL7', alloc: false }, - { x: 1130, y: 640, id: 'CSTAT12', alloc: false }, - { x: 1145, y: 1287.5, id: 'CSTAT3', alloc: false }, - { x: 1145, y: 1057.5, id: 'CSDMG5', alloc: false }, - { x: 1175, y: 1332.5, id: 'CSTAT2', alloc: false }, - { x: 1180, y: 1247.5, id: 'CMED10', alloc: false }, - { x: 1180, y: 950, id: 'CMED14', alloc: false }, - { x: 1195, y: 875, id: 'CHEAL9', alloc: false }, - { x: 1196.5, y: 635, id: 'CMED21', alloc: false }, - { x: 1205, y: 1062.5, id: 'CSDMG6', alloc: false }, - { x: 1212.5, y: 1200, id: 'CHEAL14', alloc: false }, - { x: 1231.5, y: 590, id: 'CSTAT14', alloc: false }, - { x: 1235, y: 772.5, id: 'CHEAL12', alloc: false }, - { x: 1240, y: 1225, id: 'CPHYS1', alloc: false }, - { x: 1240, y: 1322.5, id: 'CMED4', alloc: false }, - { x: 1258.5, y: 1107.5, id: 'CHEAL15', alloc: false }, - { x: 1260, y: 917.5, id: 'CHEAL10', alloc: false }, - { x: 1263, y: 520, id: 'CLRG4', alloc: false }, - { x: 1273.5, y: 1057.5, id: 'CMED13', alloc: false }, - { x: 1275, y: 1167.5, id: 'CMED11', alloc: false }, - { x: 1275, y: 947.5, id: 'CMED15', alloc: false }, - { x: 1277.5, y: 872.5, id: 'CMED16', alloc: false }, - { x: 1278.5, y: 812.5, id: 'CHEAL11', alloc: false }, - { x: 1280, y: 732.5, id: 'CHEAL13', alloc: false }, - { x: 1281.5, y: 1002.5, id: 'CSDMG7', alloc: false }, - { x: 1284, y: 640, id: 'CSTAT15', alloc: false }, - { x: 1298.5, y: 1107.5, id: 'CPHYS4', alloc: false }, - { x: 1302.5, y: 917.5, id: 'CSDMG8', alloc: false }, - { x: 1305, y: 1307.5, id: 'CPHYS2', alloc: false }, - { x: 1306, y: 1347.5, id: 'CSDMG10', alloc: false }, - { x: 1315, y: 762.5, id: 'CMED17', alloc: false }, - { x: 1326.5, y: 590, id: 'CSTAT16', alloc: false }, - { x: 1346.5, y: 635, id: 'CMED22', alloc: false }, - { x: 1348.5, y: 535, id: 'CSTAT13', alloc: false }, - { x: 1355, y: 1322.5, id: 'CMED5', alloc: false }, - { x: 1360, y: 1002.5, id: 'CSDMG9', alloc: false }, - { x: 1399.5, y: 1107.5, id: 'CPHYS5', alloc: false }, - { x: 1400, y: 807.5, id: 'CMED24', alloc: false }, - { x: 1409.5, y: 1312.5, id: 'CPHYS3', alloc: false }, - { x: 1410, y: 1347.5, id: 'CSDMG11', alloc: false }, - { x: 1410, y: 532.5, id: 'CMED23', alloc: false }, - { x: 1420, y: 732.5, id: 'CSTAT19', alloc: false }, - { x: 1430, y: 1205, id: 'CPHYS7', alloc: false }, - { x: 1447.5, y: 765, id: 'CMED25', alloc: false }, - { x: 1452.5, y: 1322.5, id: 'CMED6', alloc: false }, - { x: 1455, y: 1267.5, id: 'CSTAT33', alloc: false }, - { x: 1455, y: 1147.5, id: 'CMED12', alloc: false }, - { x: 1455, y: 1042.5, id: 'CSTAT35', alloc: false }, - { x: 1457.5, y: 975, id: 'CSTAT37', alloc: false }, - { x: 1462.5, y: 825, id: 'CLRG3', alloc: false }, - { x: 1485, y: 640, id: 'CSTAT17', alloc: false }, - { x: 1500, y: 1110, id: 'CPHYS6', alloc: false }, - { x: 1505, y: 1242.5, id: 'CSTAT32', alloc: false }, - { x: 1555, y: 1242.5, id: 'CSTAT31', alloc: false }, - { x: 1555, y: 1067.5, id: 'CSTAT34', alloc: false }, - { x: 1555, y: 962.5, id: 'CSTAT36', alloc: false }, - { x: 1555, y: 847.5, id: 'CSTAT20', alloc: false }, - { x: 1555, y: 732.5, id: 'CSTAT18', alloc: false }, - { x: 1597.5, y: 827.5, id: 'CSTAT21', alloc: false }, - { x: 1607.5, y: 1277.5, id: 'CSTAT30', alloc: false }, - { x: 1612.5, y: 1137.5, id: 'CLRG1', alloc: false }, - { x: 1612.5, y: 955, id: 'CLRG2', alloc: false }, - { x: 1657.5, y: 822.5, id: 'CSTAT22', alloc: false }, - { x: 1657.5, y: 1312.5, id: 'CSTAT29', alloc: false }, - { x: 1685, y: 1187.5, id: 'CSTAT27', alloc: false }, - { x: 1685, y: 1022.5, id: 'CSTAT25', alloc: false }, - { x: 1690, y: 1117.5, id: 'CSTAT26', alloc: false }, - { x: 1705, y: 960, id: 'CSTAT24', alloc: false }, - { x: 1712.5, y: 850, id: 'CMED9', alloc: false }, - { x: 1717.5, y: 1267.5, id: 'CMED7', alloc: false }, - { x: 1725, y: 1222.5, id: 'CSTAT28', alloc: false }, - { x: 1727.5, y: 1062.5, id: 'CMED8', alloc: false }, - { x: 1737.5, y: 917.5, id: 'CSTAT23', alloc: false }, - { x: 1830, y: 1032.5, id: 'CNOTE', alloc: false }, + { x: 860, y: 1011, id: 'CMED1', alloc: false, text: '5% Increased Speed for Chaos Slow skills, 5% Increased Slow Effect'}, + { x: 905, y: 970, id: 'CSTAT7', alloc: false, text: '+2 Chaos Stat'}, + { x: 940, y: 917.5, id: 'CSTAT8', alloc: false, text: '+2 Chaos Stat'}, + { x: 950, y: 1172.5, id: 'CMED2', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Speed for Healing Skills'}, + { x: 955, y: 1120, id: 'CSDMG1', alloc: false, text: '+5% Increased Spell Damage'}, + { x: 965, y: 1082.5, id: 'CSDMG2', alloc: false, text: '+5% Increased Spell Damage'}, + { x: 970, y: 872.5, id: 'CSTAT9', alloc: false, text: '+2 Chaos Stat'}, + { x: 975, y: 1012.5, id: 'CSTAT6', alloc: false, text: '+2 Chaos Stat'}, + { x: 995, y: 1062.5, id: 'CSDMG3', alloc: false, text: '+5% Increased Spell Damage'}, + { x: 1000, y: 1150, id: 'CHEAL1', alloc: false, text: '+5% Increased Healing'}, + { x: 1005, y: 812.5, id: 'CMED20', alloc: false, text: '5% Increased Speed for Healing skills, 5% Increased Stamina'}, + { x: 1024.5, y: 1122.5, id: 'CHEAL2', alloc: false, text: '+5% Increased Healing'}, + { x: 1036.5, y: 896.5, id: 'CMED19', alloc: false, text: '5% Increased Speed for Healing skills, 5% Increased Stamina'}, + { x: 1036.5, y: 1042.5, id: 'CMED18', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Speed for Healing Skills'}, + { x: 1036.5, y: 1082.5, id: 'CHEAL3', alloc: false, text: '+5% Increased Healing'}, + { x: 1041.5, y: 772.5, id: 'CSTAT10', alloc: false, text: '+2 Chaos Stat'}, + { x: 1055, y: 1327.5, id: 'CMED3', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Speed for Banish Skills'}, + { x: 1066.5, y: 939.5, id: 'CHEAL5', alloc: false, text: '+5% Increased Healing'}, + { x: 1067.5, y: 995, id: 'CHEAL4', alloc: false, text: '+5% Increased Healing'}, + { x: 1070, y: 1250, id: 'CSTAT4', alloc: false, text: '+2 Chaos Stat'}, + { x: 1072.5, y: 840.5, id: 'CHEAL8', alloc: false, text: '+5% Increased Healing'}, + { x: 1087.5, y: 700, id: 'CSTAT11', alloc: false, text: '+2 Chaos Stat'}, + { x: 1097.5, y: 1052.5, id: 'CSDMG4', alloc: false, text: '+5% Increased Spell Damage'}, + { x: 1102.5, y: 1140, id: 'CSTAT5', alloc: false, text: '+2 Chaos Stat'}, + { x: 1102.5, y: 917.5, id: 'CHEAL6', alloc: false, text: '+5% Increased Healing'}, + { x: 1115, y: 1332.5, id: 'CSTAT1', alloc: false, text: '+2 Chaos Stat'}, + { x: 1115, y: 875, id: 'CHEAL7', alloc: false, text: '+5% Increased Healing'}, + { x: 1130, y: 640, id: 'CSTAT12', alloc: false, text: '+2 Chaos Stat'}, + { x: 1145, y: 1287.5, id: 'CSTAT3', alloc: false, text: '+2 Chaos Stat'}, + { x: 1145, y: 1057.5, id: 'CSDMG5', alloc: false, text: '+5% Increased Spell Damage'}, + { x: 1175, y: 1332.5, id: 'CSTAT2', alloc: false, text: '+2 Chaos Stat'}, + { x: 1180, y: 1247.5, id: 'CMED10', alloc: false, text: '5% Increased Speed for Banish Spells, 5% Increased Stamina'}, + { x: 1180, y: 950, id: 'CMED14', alloc: false, text: '5% Increased Speed for Chaos Slow skills, 5% Increased Speed for Banish Skills'}, + { x: 1195, y: 875, id: 'CHEAL9', alloc: false, text: '+5% Increased Healing'}, + { x: 1196.5, y: 635, id: 'CMED21', alloc: false, text: '5% Increased Effect of Slow, 5% Increased Stamina'}, + { x: 1205, y: 1062.5, id: 'CSDMG6', alloc: false, text: '+5% Increased Spell Damage'}, + { x: 1212.5, y: 1200, id: 'CHEAL14', alloc: false, text: '+5% Increased Healing'}, + { x: 1231.5, y: 590, id: 'CSTAT14', alloc: false, text: '+2 Chaos Stat'}, + { x: 1235, y: 772.5, id: 'CHEAL12', alloc: false, text: '+5% Increased Healing'}, + { x: 1240, y: 1225, id: 'CPHYS1', alloc: false, text: '+2% Reduced Physical Damage Taken'}, + { x: 1240, y: 1322.5, id: 'CMED4', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Stamina'}, + { x: 1258.5, y: 1107.5, id: 'CHEAL15', alloc: false, text: '+5% Increased Healing'}, + { x: 1260, y: 917.5, id: 'CHEAL10', alloc: false, text: '+5% Increased Healing'}, + { x: 1263, y: 520, id: 'CLRG4', alloc: false, text: 'Damaging spells have a 20% chance to inflict slow'}, + { x: 1273.5, y: 1057.5, id: 'CMED13', alloc: false, text: '5% Increased Speed for Banish Spells, 5% Increased Speed for Damaging Spells'}, + { x: 1275, y: 1167.5, id: 'CMED11', alloc: false, text: '5% Increased Speed for Banish Spells, 5% Increased Stamina'}, + { x: 1275, y: 947.5, id: 'CMED15', alloc: false, text: '5% Increased Speed for Chaos Slow skills, 5% Increased Speed for Damaging Spells'}, + { x: 1277.5, y: 872.5, id: 'CMED16', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Speed for Healing Skills'}, + { x: 1278.5, y: 812.5, id: 'CHEAL11', alloc: false, text: '+5% Increased Healing'}, + { x: 1280, y: 732.5, id: 'CHEAL13', alloc: false, text: '+5% Increased Healing'}, + { x: 1281.5, y: 1002.5, id: 'CSDMG7', alloc: false, text: '+5% Increased Spell Damage'}, + { x: 1284, y: 640, id: 'CSTAT15', alloc: false, text: '+2 Chaos Stat'}, + { x: 1298.5, y: 1107.5, id: 'CPHYS4', alloc: false, text: '+2% Reduced Physical Damage Taken'}, + { x: 1302.5, y: 917.5, id: 'CSDMG8', alloc: false, text: '+5% Increased Spell Damage'}, + { x: 1305, y: 1307.5, id: 'CPHYS2', alloc: false, text: '+2% Reduced Physical Damage Taken'}, + { x: 1306, y: 1347.5, id: 'CSDMG10', alloc: false, text: '+5% Increased Spell Damage'}, + { x: 1315, y: 762.5, id: 'CMED17', alloc: false, text: '5% Increased Speed for Healing skills, 5% Increased Stamina'}, + { x: 1326.5, y: 590, id: 'CSTAT16', alloc: false, text: '+2 Chaos Stat'}, + { x: 1346.5, y: 635, id: 'CMED22', alloc: false, text: '5% Increased Effect of Slow, 5% Increased Stamina'}, + { x: 1348.5, y: 535, id: 'CSTAT13', alloc: false, text: '+2 Chaos Stat'}, + { x: 1355, y: 1322.5, id: 'CMED5', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Stamina'}, + { x: 1360, y: 1002.5, id: 'CSDMG9', alloc: false, text: '+5% Increased Spell Damage'}, + { x: 1399.5, y: 1107.5, id: 'CPHYS5', alloc: false, text: '+2% Reduced Physical Damage Taken'}, + { x: 1400, y: 807.5, id: 'CMED24', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Speed for Healing Skills'}, + { x: 1409.5, y: 1312.5, id: 'CPHYS3', alloc: false, text: '+2% Reduced Physical Damage Taken'}, + { x: 1410, y: 1347.5, id: 'CSDMG11', alloc: false, text: '+5% Increased Spell Damage'}, + { x: 1410, y: 532.5, id: 'CMED23', alloc: false, text: '5% Increased Speed for Banish Spells, 5% Increased Effect of Slow'}, + { x: 1420, y: 732.5, id: 'CSTAT19', alloc: false, text: '+2 Chaos Stat'}, + { x: 1430, y: 1205, id: 'CPHYS7', alloc: false, text: '+2% Reduced Physical Damage Taken'}, + { x: 1447.5, y: 765, id: 'CMED25', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Speed for Healing Skills'}, + { x: 1452.5, y: 1322.5, id: 'CMED6', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Stamina'}, + { x: 1455, y: 1267.5, id: 'CSTAT33', alloc: false, text: '+2 Chaos Stat'}, + { x: 1455, y: 1147.5, id: 'CMED12', alloc: false, text: '5% Increased Speed for Banish Spells, 5% Increased Stamina'}, + { x: 1455, y: 1042.5, id: 'CSTAT35', alloc: false, text: '+2 Chaos Stat'}, + { x: 1457.5, y: 975, id: 'CSTAT37', alloc: false, text: '+2 Chaos Stat'}, + { x: 1462.5, y: 825, id: 'CLRG3', alloc: false, text: '20% critical strike chance for spells'}, + { x: 1485, y: 640, id: 'CSTAT17', alloc: false, text: '+2 Chaos Stat'}, + { x: 1500, y: 1110, id: 'CPHYS6', alloc: false, text: '+2% Reduced Physical Damage Taken'}, + { x: 1505, y: 1242.5, id: 'CSTAT32', alloc: false, text: '+2 Chaos Stat'}, + { x: 1555, y: 1242.5, id: 'CSTAT31', alloc: false, text: '+2 Chaos Stat'}, + { x: 1555, y: 1067.5, id: 'CSTAT34', alloc: false, text: '+2 Chaos Stat'}, + { x: 1555, y: 962.5, id: 'CSTAT36', alloc: false, text: '+2 Chaos Stat'}, + { x: 1555, y: 847.5, id: 'CSTAT20', alloc: false, text: '+2 Chaos Stat'}, + { x: 1555, y: 732.5, id: 'CSTAT18', alloc: false, text: '+2 Chaos Stat'}, + { x: 1597.5, y: 827.5, id: 'CSTAT21', alloc: false, text: '+2 Chaos Stat'}, + { x: 1607.5, y: 1277.5, id: 'CSTAT30', alloc: false, text: '+2 Chaos Stat'}, + { x: 1612.5, y: 1137.5, id: 'CLRG1', alloc: false, text: 'When you take physical damage there is a 20% chance to heal for 150% of physical damage taken'}, + { x: 1612.5, y: 955, id: 'CLRG2', alloc: false, text: 'Your healing spells have a 20% chance to increase ally speed by 100%'}, + { x: 1657.5, y: 822.5, id: 'CSTAT22', alloc: false, text: '+2 Chaos Stat'}, + { x: 1657.5, y: 1312.5, id: 'CSTAT29', alloc: false, text: '+2 Chaos Stat'}, + { x: 1685, y: 1187.5, id: 'CSTAT27', alloc: false, text: '+2 Chaos Stat'}, + { x: 1685, y: 1022.5, id: 'CSTAT25', alloc: false, text: '+2 Chaos Stat'}, + { x: 1690, y: 1117.5, id: 'CSTAT26', alloc: false, text: '+2 Chaos Stat'}, + { x: 1705, y: 960, id: 'CSTAT24', alloc: false, text: '+2 Chaos Stat'}, + { x: 1712.5, y: 850, id: 'CMED9', alloc: false, text: '5% Increased Speed for Healing skills, 5% Increased Stamina'}, + { x: 1717.5, y: 1267.5, id: 'CMED7', alloc: false, text: '5% Increased Speed for Damaging Spells, 5% Increased Stamina'}, + { x: 1725, y: 1222.5, id: 'CSTAT28', alloc: false, text: '+2 Chaos Stat'}, + { x: 1727.5, y: 1062.5, id: 'CMED8', alloc: false, text: '5% Increased Speed for Chaos Slow skills, 5% Increased Speed for Banish Skills'}, + { x: 1737.5, y: 917.5, id: 'CSTAT23', alloc: false, text: '+2 Chaos Stat'}, + { x: 1830, y: 1032.5, id: 'CNOTE', alloc: false, text: 'Increases duration of banish skills by 1 turn. Your chaos skills gain 20% increased speed for each successful banish. '}, ]; module.exports = passiveNodes; diff --git a/client/src/components/passive.node.js b/client/src/components/passive.node.js index 2d716cc2..b44f0b63 100755 --- a/client/src/components/passive.node.js +++ b/client/src/components/passive.node.js @@ -1,14 +1,15 @@ const Phaser = require('phaser'); class PassiveNode extends Phaser.GameObjects.Sprite { - constructor(scene, x, y, id, alloc) { + constructor(scene, x, y, id, alloc, text) { super(scene, x, y); this.setTexture('eye'); - this.scene = scene; this.alloc = alloc; + this.text = text; this.id = id; this.setPosition(x, y); + const nodeNoDigits = this.id.replace(/[0-9]/g, ''); switch (nodeNoDigits) { case 'CNOTE': @@ -28,17 +29,25 @@ class PassiveNode extends Phaser.GameObjects.Sprite { } } - allocate() { - if (this.alloc) { - this.clearTint(); - this.alloc = false; + allocate(alloc) { + if (alloc !== undefined) { + this.alloc = alloc; + } else { + this.alloc = !this.alloc; + } + this.updateNode(); + } + + updateNode() { + if (!this.alloc) { + this.clearTint(); } else { - this.alloc = true; this.setTint(0xff0000); } - for (let i = 0; i < this.scene.passiveNodes.length; i += 1) { - if (this.scene.passiveNodes[i].id === this.id) { - this.scene.passiveNodes[i].alloc = this.alloc; + + for (let i = 0; i < this.scene.passiveNodeData.length; i += 1) { + if (this.scene.passiveNodeData[i].id === this.id) { + this.scene.passiveNodeData[i].alloc = this.alloc; break; } } diff --git a/client/src/components/passive.phaser.js b/client/src/components/passive.phaser.js index adcc1c16..0ba2fb38 100755 --- a/client/src/components/passive.phaser.js +++ b/client/src/components/passive.phaser.js @@ -3,32 +3,54 @@ const PassiveNode = require('./passive.node'); const passiveDataNode = require('./passive.data.node'); const passiveDataEdge = require('./passive.data.edge'); +// Passive tree generator - proof of concept visuals need work +// Mouse click hold to move, Q + E to zoom in and out +// Press 'A' to reset allocated passive nodes + class PhaserPassives extends Phaser.Scene { 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.cameras.main.setBounds(0, 0, 3000, 3000); - this.physics.world.setBounds(0, 0, 3000, 3000); + this.background = this.add.image(0, 0, 'background'); + this.background.setScale(5); + this.background.setInteractive(); this.graphics = this.add.graphics(); - this.passiveNodes = passiveDataNode; - this.passiveEdges = passiveDataEdge; + 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.drawPassiveEdges(); this.addCanmeraControl(); } addPassiveNodes() { - this.passiveNodes.forEach((n) => { - this.add.existing(new PassiveNode(this, n.x, n.y, n.id, n.alloc)).setInteractive(); + this.passiveNodes = []; + this.passiveNodeData.forEach((n) => { + this.passiveNodes[n.id] = this.add.existing( + new PassiveNode(this, n.x, n.y, n.id, n.alloc, n.text) + ).setInteractive(); }); - this.input.on('pointerover', (event, gameObjects) => { + + this.input.on('pointerover', (pointer, gameObjects) => { if (gameObjects[0] instanceof PassiveNode) { if (!gameObjects[0].alloc) gameObjects[0].setTint(0xff00ff); + this.nodeText.x = pointer.x + this.cameras.main.scrollX; + this.nodeText.y = pointer.y + this.cameras.main.scrollY; + this.nodeText.text = gameObjects[0].text; + } else { + this.nodeText.text = ''; } }); - this.input.on('pointerout', (event, gameObjects) => { + this.input.on('pointerout', (pointer, gameObjects) => { if (gameObjects[0] instanceof PassiveNode) { if (!gameObjects[0].alloc) gameObjects[0].clearTint(); } @@ -43,12 +65,18 @@ class PhaserPassives extends Phaser.Scene { } } }); + + this.input.keyboard.on('keydown_A', () => { + this.updatePassives(); // Will update nodes from state + }, 0, this); } drawPassiveEdges() { this.graphics.clear(); - this.passiveEdges.forEach((e) => { - const drawEdge = this.passiveNodes.filter(n => (e[0] === n.id || e[1] === n.id)); + this.passiveEdgeData.forEach((e) => { + const drawEdge = this.passiveNodeData.filter(n => ( + e[0] === n.id || e[1] === n.id + )); if (drawEdge[0].alloc && drawEdge[1].alloc) { this.graphics.lineStyle(10, 0xfff00f, 0.2); } else { @@ -63,8 +91,8 @@ class PhaserPassives extends Phaser.Scene { this.input.on('pointermove', (pointer) => { if (this.pan) { const points = pointer.getInterpolatedPosition(2); - this.cameras.main.scrollX -= (points[1].x - points[0].x) * 1.5; - this.cameras.main.scrollY -= (points[1].y - points[0].y) * 1.5; + this.cameras.main.scrollX -= (points[1].x - points[0].x) * 2; + this.cameras.main.scrollY -= (points[1].y - points[0].y) * 2; } }, this); this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({ @@ -77,6 +105,15 @@ class PhaserPassives extends Phaser.Scene { }); } + updatePassives() { + this.passiveNodeData.forEach((n) => { + this.passiveNodes[n.id].alloc = false; + this.passiveNodes[n.id].updateNode(); + }); + // This function will be modified to just update from state + // State will update n.alloc instead of false + } + camPan(bool) { this.pan = bool; }