diff --git a/client/src/scenes/combat.cryps.js b/client/src/scenes/combat.cryps.js old mode 100644 new mode 100755 index 91bdbc10..1e1eb6e7 --- a/client/src/scenes/combat.cryps.js +++ b/client/src/scenes/combat.cryps.js @@ -91,7 +91,7 @@ function renderCryp(scene, group, cryp, game, team, iter) { group.add(crypName); } -function renderSkills(scene, group, game, cryp, iter, team) { +function renderSkills(scene, group, cryp, game, team, iter) { if (game.phase === 'Skill') { cryp.skills.forEach((skill, i) => { group.add(scene.add.existing(new CrypSkill(scene, i, iter, team, skill, cryp))); @@ -103,19 +103,19 @@ function renderSkills(scene, group, game, cryp, iter, team) { } class DrawCrypTeams extends Phaser.GameObjects.Group { - constructor(scene, game, resolve) { + constructor(scene, game) { super(scene); const account = scene.registry.get('account'); - const renderTeam = (cryp, iter, team) => { + const renderTeam = (cryp, team, iter) => { renderCryp(scene, this, cryp, game, team, iter); - renderSkills(scene, this, game, cryp, iter, team); + renderSkills(scene, this, cryp, game, team, iter); }; - if (resolve) { - renderTeam(game.teams.find(t => t.id === account.id).cryps[0], 1, 0); - renderTeam(game.teams.filter(t => t.id !== account.id)[0].cryps[0], 1, 1); + if (scene.registry.get('resolve')) { + renderCryp(scene, this, game.teams.find(t => t.id === account.id).cryps[0], game, 0, 1); + renderCryp(scene, this, game.teams.filter(t => t.id !== account.id)[0].cryps[0], game, 1, 1); } else { - game.teams.find(t => t.id === account.id).cryps.forEach((cryp, i) => renderTeam(cryp, i, 0)); - game.teams.filter(t => t.id !== account.id)[0].cryps.forEach((cryp, i) => renderTeam(cryp, i, 1)); + game.teams.find(t => t.id === account.id).cryps.forEach((cryp, i) => renderTeam(cryp, 0, i)); + game.teams.filter(t => t.id !== account.id)[0].cryps.forEach((cryp, i) => renderTeam(cryp, 1, i)); } } } diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js old mode 100644 new mode 100755 index f30afe69..7b41a860 --- a/client/src/scenes/combat.js +++ b/client/src/scenes/combat.js @@ -3,9 +3,11 @@ const fs = require('fs'); const { POSITIONS: { COMBAT }, TEXT } = require('./constants'); const { DrawCrypTeams, CrypImage, CrypSkill } = require('./combat.cryps'); +const combatRender = require('./combat.render'); +const CombatSkills = require('./combat.skills'); class Combat extends Phaser.Scene { - constructor(props) { + constructor() { super({ key: 'Combat' }); } @@ -13,19 +15,12 @@ class Combat extends Phaser.Scene { /* 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() { @@ -46,8 +41,9 @@ class Combat extends Phaser.Scene { const logX = COMBAT.LOG.x(); const logY = COMBAT.LOG.y(); const logWidth = COMBAT.LOG.width(); + this.skills = new CombatSkills(this); this.logIndex = 0; - this.resolve = false; + this.registry.set('resolve', false); this.log = this.add.text(logX, logY, '', TEXT.NORMAL); this.log.setWordWrapWidth(logWidth); return true; @@ -56,49 +52,34 @@ class Combat extends Phaser.Scene { updateData(parent, key, data) { if (key === 'game') { if (!this.registry.get('activeSkill')) { - this.checkLog(data); + this.renderLog(data); } } return true; } - checkLog(game) { + renderLog(game) { if (!game) return false; - if (this.resolve) return true; // Animating combat - while (this.logIndex !== game.log.length) { - if (game.log[this.logIndex] === '') { - this.logIndex += 1; - this.resolve = true; - this.renderCombat(game); - break; - } - this.logIndex += 1; - } // shallow copy because reverse mutates + if (!this.registry.get('resolve')) { + this.iterateLog(game); + } this.log.setText(Array.from(game.log).slice(0, this.logIndex).reverse()); this.renderCryps(game); return true; } - renderCombat(game) { - let delay = 0; - if (game.log[this.logIndex].match(/(\w|\s)*\w(?=")|\w+/g)[1] === 'bamboo basher') { - delay = this.skills('wall', 'green', COMBAT.width() * 0.175, 250); - } else { - delay = this.skills('wall', 'green', COMBAT.width() * 0.55, -250); - } - this.logIndex += 1; - this.log.setText(Array.from(game.log).slice(0, this.logIndex).reverse()); - if (game.log[this.logIndex] === '' || this.logIndex === game.log.length) { - this.time.delayedCall(delay, () => { - this.resolve = false; - this.renderCryps(game); - }); - } else { - this.time.delayedCall(delay, () => { - this.renderCombat(game); - this.renderCryps(game); - }); + iterateLog(game) { + if (this.registry.get('resolve')) { + this.logIndex += 1; + return true; + } while (game.log.length !== this.logIndex) { + if (game.log[this.logIndex] === '') { + this.registry.set('resolve', true); + this.logIndex += 1; + combatRender(this, game); + break; + } this.logIndex += 1; } return true; } @@ -107,10 +88,9 @@ class Combat extends Phaser.Scene { if (this.crypTeamRender) { this.crypTeamRender.destroy(true); } - this.crypTeamRender = new DrawCrypTeams(this, game, this.resolve); + this.crypTeamRender = new DrawCrypTeams(this, game); return true; } } -Combat.prototype.skills = require('./combat.skills.js'); module.exports = Combat; diff --git a/client/src/scenes/combat.render.js b/client/src/scenes/combat.render.js new file mode 100755 index 00000000..c03cef4c --- /dev/null +++ b/client/src/scenes/combat.render.js @@ -0,0 +1,31 @@ +const randomSkill = () => { + const skills = ['wall', 'spit', 'gravBlast', 'gravBomb', 'chargeBall']; + return skills[Math.floor(Math.random() * 5)]; +}; + +function combatRender(scene, game) { + let delay = 0; + const skill = randomSkill(); + // Need to update this with proper cryp / team / skill checking + const target = game.log[scene.logIndex].match(/(\w|\s)*\w(?=")|\w+/g)[1] === 'bamboo basher'; + delay = scene.skills[skill](target); + + scene.iterateLog(game); + scene.log.setText(Array.from(game.log).slice(0, scene.logIndex).reverse()); + if (game.log[scene.logIndex] === '' || scene.logIndex === game.log.length) { + scene.time.delayedCall(delay, () => { + scene.skills.cleanup(); + scene.registry.set('resolve', false); + scene.renderCryps(game); + }); + } else { + scene.time.delayedCall(delay, () => { + scene.skills.cleanup(); + combatRender(scene, game); + scene.renderCryps(game); + }); + } + return true; +} + +module.exports = combatRender; diff --git a/client/src/scenes/combat.skills.js b/client/src/scenes/combat.skills.js old mode 100644 new mode 100755 index 3a439bdb..a216780c --- a/client/src/scenes/combat.skills.js +++ b/client/src/scenes/combat.skills.js @@ -1,139 +1,151 @@ -// Skill function called by phaser combat const Phaser = require('phaser'); const { POSITIONS: { COMBAT } } = require('./constants'); -function skills(skill, img, location, spd) { - const particles = this.add.particles(img); +const randomColour = () => { + const colours = ['green', 'blue', 'red', 'white', 'yellow']; + return colours[Math.floor(Math.random() * 5)]; +}; - 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); - return 3000; +const animationParams = (target) => { + const spawnLocation = target ? COMBAT.width() * 0.175 : COMBAT.width() * 0.55; + const speed = target ? 250 : -250; + const img = randomColour(); + const angleMin = target ? 320 : 180; + const angleMax = target ? 360 : 220; + return { spawnLocation, speed, img, angleMin, angleMax }; +}; - case 'wall': - this.emitter = particles.createEmitter({ - x: location, - y: { min: COMBAT.height() * 0.45, max: COMBAT.height() * 0.7 }, - 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); - return 3000; +class CombatSkills extends Phaser.GameObjects.Group { + constructor(scene) { + super(scene); + this.scene = scene; + } - 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.combat = false;}, [], this); - return 3000; - 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); - return 2500; - 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); - return 3000; - case 'chargeBall': + wall(target) { + const { spawnLocation, speed, img } = animationParams(target); + const particles = this.scene.add.particles(img); + const emitter = particles.createEmitter({ + x: spawnLocation, + y: { min: COMBAT.height() * 0.45, max: COMBAT.height() * 0.7 }, + lifespan: 2000, + speedX: { min: speed, max: speed * 2 }, + scale: { start: 0.4, end: 0 }, + quantity: 4, + blendMode: 'ADD', + }); + this.add(particles); + this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this.scene); + return 3000; + } - 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.combat = false;}, [], this); - return 4000; - default: - return false; + spit(target) { + const { spawnLocation, speed, img, angleMin, angleMax } = animationParams(target); + const particles = this.scene.add.particles(img); + const emitter = particles.createEmitter({ + x: spawnLocation, + y: COMBAT.height() * 0.5, + lifespan: 2000, + angle: { min: angleMin, max: angleMax }, + speed: speed * 2, + scale: { start: 0.4, end: 1 }, + gravityY: 250, + quantity: 4, + blendMode: 'ADD', + }); + this.add(particles); + this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this); + return 3000; + } + + gravBomb(target) { + const { spawnLocation, img } = animationParams(!target); + const particles = this.scene.add.particles(img); + const location = target ? COMBAT.width() * 0.6 : COMBAT.width() * 0.1; + const well = particles.createGravityWell({ + x: location, + y: COMBAT.height() * 0.25, + power: 4, + gravity: 500, + }); + this.emitter = particles.createEmitter({ + x: spawnLocation, + y: COMBAT.height() * 0.25, + lifespan: 1500, + speed: 1000, + scale: { start: 0.7, end: 1 }, + blendMode: 'ADD', + }); + this.add(particles); + this.scene.time.delayedCall(1000, () => { this.emitter.stop(); well.active = false; }, [], this.scene); + return 2500; + } + + gravBlast(target) { + const img = randomColour(); + const spawnLocation = target ? COMBAT.width() * 0.2 : COMBAT.width() * 0.45; + const targetLocation = target ? COMBAT.width() * 0.6 : COMBAT.width() * 0.1; + const particles = this.scene.add.particles(img); + const bounds = target + ? { x: COMBAT.width() * 0.15, y: COMBAT.height() * 0.35, w: COMBAT.width() * 0.55, h: COMBAT.height() * 0.2 } + : { x: 0, y: COMBAT.height() * 0.35, w: COMBAT.width() * 0.55, h: COMBAT.height() * 0.2 }; + const well = particles.createGravityWell({ + x: spawnLocation, + y: COMBAT.height() * 0.5, + power: 4, + gravity: 500, + }); + const emitter = particles.createEmitter({ + x: spawnLocation, + y: COMBAT.height() * 0.5, + lifespan: 2000, + speed: 1000, + scale: { start: 0.7, end: 1 }, + blendMode: 'ADD', + bounds, + }); + this.add(particles); + this.scene.time.delayedCall(1000, () => { emitter.stop(); well.x = targetLocation; }, [], this.scene); + this.scene.time.delayedCall(3000, () => { well.active = false; }, [], this.scene); + return 3000; + } + + chargeBall(target) { + const { img, spawnLocation } = animationParams(target); + const targetLocation = target ? 0.7 * COMBAT.width() : 0; + const particles = this.scene.add.particles(img); + const emitter = particles.createEmitter({ + x: 0, + y: 0, + lifespan: 1000, + moveToX: spawnLocation, + moveToY: COMBAT.height() * 0.2, + scale: 0.75, + quantity: 4, + _frequency: 20, + blendMode: 'ADD', + emitZone: { source: new Phaser.Geom.Rectangle(0, 0, COMBAT.width(), COMBAT.height()) }, + }); + const emitter2 = particles.createEmitter({ + radial: false, + x: { min: spawnLocation, max: targetLocation, steps: 256 }, + y: { min: COMBAT.height() * 0.2, max: COMBAT.height() * 0.6, steps: 256 }, + lifespan: 1000, + quantity: 4, + gravityY: 0, + scale: { start: 1.5, end: 0, ease: 'Power3' }, + blendMode: 'ADD', + active: false, + }); + this.add(particles); + this.scene.time.delayedCall(1000, () => { emitter.stop(); }, [], this.scene); + this.scene.time.delayedCall(2000, () => { emitter2.active = true; }, [], this.scene); + this.scene.time.delayedCall(3000, () => { emitter2.stop(); }, [], this.scene); + return 4000; + } + + cleanup() { + this.children.entries.forEach(obj => obj.destroy()); } } - -module.exports = skills; +module.exports = CombatSkills;