diff --git a/client/src/events.js b/client/src/events.js old mode 100755 new mode 100644 diff --git a/client/src/scenes/combat.cryps.js b/client/src/scenes/combat.cryps.js old mode 100755 new mode 100644 index 16af77ce..7a6c4ecc --- a/client/src/scenes/combat.cryps.js +++ b/client/src/scenes/combat.cryps.js @@ -1,15 +1,21 @@ const Phaser = require('phaser'); -const { TEXT } = require('./constants'); +const { TEXT, POSITIONS: { COMBAT } } = require('./constants'); -const TEXT_MARGIN = 24; -const CRYP_MARGIN = 250; -const TEAM_MARGIN = 450; +const calcMargin = () => { + const CRYP_MARGIN = COMBAT.height() / 3.4; + const TEXT_MARGIN = COMBAT.height() / 35; + const TEAM_MARGIN = COMBAT.width() / 2; + const X_PADDING = COMBAT.width() / 10; + const Y_PADDING = COMBAT.width() / 7; + return { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING }; +}; class CrypAvatar extends Phaser.GameObjects.Image { constructor(scene, j, team, cryp, avatar) { // Avatar will be a property of cryp - super(scene, 100 + TEAM_MARGIN * team, 150 + CRYP_MARGIN * j, avatar); + const { CRYP_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING } = calcMargin(); + super(scene, X_PADDING + TEAM_MARGIN * team, Y_PADDING * 1.25 + CRYP_MARGIN * j, avatar); this.setScale(0.5); this.setInteractive(); this.cryp = cryp; @@ -19,7 +25,8 @@ class CrypAvatar extends Phaser.GameObjects.Image { class CrypSkill extends Phaser.GameObjects.Text { constructor(scene, i, j, team, skill) { // Avatar will be a property of cryp - super(scene, 200 + TEAM_MARGIN * team, 50 + TEXT_MARGIN * (i + 2) + CRYP_MARGIN * j, skill.skill, TEXT.NORMAL); + const { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING } = calcMargin(); + super(scene, X_PADDING * 2 + TEAM_MARGIN * team, Y_PADDING / 2 + TEXT_MARGIN * (i + 2) + CRYP_MARGIN * j, skill.skill, TEXT.NORMAL); this.setInteractive(); this.skill = skill; } @@ -28,6 +35,7 @@ class CrypSkill extends Phaser.GameObjects.Text { class DrawCrypTeams extends Phaser.GameObjects.Group { constructor(scene, game) { super(scene); + const { CRYP_MARGIN, TEXT_MARGIN, TEAM_MARGIN, X_PADDING, Y_PADDING } = calcMargin(); // this.id = cryp.id; this.scene = scene; this.ws = scene.registry.get('ws'); @@ -38,8 +46,8 @@ class DrawCrypTeams extends Phaser.GameObjects.Group { this.add(scene.add.existing(new CrypAvatar(scene, j, team, cryp, avatar))); // Cryp HP and Name const crypHp = `${cryp.hp.base.toString()} / ${cryp.stamina.base.toString()} HP`; - this.add(scene.add.text(50 + TEAM_MARGIN * team, 50 + CRYP_MARGIN * j, crypHp, TEXT.NORMAL)); - this.add(scene.add.text(50 + TEAM_MARGIN * team, 50 + TEXT_MARGIN + CRYP_MARGIN * j, cryp.name, TEXT.HEADER)); + this.add(scene.add.text(X_PADDING / 2 + TEAM_MARGIN * team, Y_PADDING / 2 + CRYP_MARGIN * j, crypHp, TEXT.NORMAL)); + this.add(scene.add.text(X_PADDING / 2 + TEAM_MARGIN * team, Y_PADDING / 2 + TEXT_MARGIN + CRYP_MARGIN * j, cryp.name, TEXT.HEADER)); // Cryp Skills const knownSkill = (skill, i) => { this.add(scene.add.existing(new CrypSkill(scene, i, j, team, skill))); diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js old mode 100755 new mode 100644 index 7504f324..3ae93cf2 --- a/client/src/scenes/combat.js +++ b/client/src/scenes/combat.js @@ -42,6 +42,14 @@ class Combat extends Phaser.Scene { } }); + this.input.keyboard.on('keydown_G', () => { + this.skills('chargeBall', 'green', 400, -250); + }, 0, this); + + this.input.keyboard.on('keydown_H', () => { + this.skills('spit', 'blue', 180, 250); + }, 0, this); + const logX = POSITIONS.COMBAT.LOG.x(); const logY = POSITIONS.COMBAT.LOG.y(); const logWidth = POSITIONS.COMBAT.LOG.width(); diff --git a/client/src/scenes/combat.old.js b/client/src/scenes/combat.old.js deleted file mode 100644 index 76e3fa5a..00000000 --- a/client/src/scenes/combat.old.js +++ /dev/null @@ -1,90 +0,0 @@ -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; diff --git a/client/src/scenes/combat.skills.js b/client/src/scenes/combat.skills.js index 16b6b1c5..71950469 100644 --- a/client/src/scenes/combat.skills.js +++ b/client/src/scenes/combat.skills.js @@ -54,7 +54,7 @@ function skills(skill, img, location, spd) { quantity: 4, blendMode: 'ADD', }); - this.time.delayedCall(1000, () => { this.emitter.stop(); }, [], this); + this.time.delayedCall(1000, () => { this.emitter.stop(); this.combat = false;}, [], this); break; case 'gravBomb': this.well = particles.createGravityWell({ @@ -130,7 +130,7 @@ function skills(skill, img, location, spd) { }); 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); + this.time.delayedCall(3000, () => { this.emitter2.stop(); this.combat = false; }, [], this); break; default: break; diff --git a/client/src/scenes/cryp.list.js b/client/src/scenes/cryp.list.js index 8b6baa44..2b1870d2 100644 --- a/client/src/scenes/cryp.list.js +++ b/client/src/scenes/cryp.list.js @@ -34,7 +34,9 @@ class CrypList extends Phaser.Scene { const cryp = cryps.find(c => c.id === this.CrypPage.id); this.displaySkills(cryp); } - + if (this.gameList) { + this.gameList.destroy(true); + } this.gameList = new GameList(this, cryps); } diff --git a/client/src/scenes/cryps.js b/client/src/scenes/cryps.js old mode 100755 new mode 100644 diff --git a/client/src/scenes/game.list.js b/client/src/scenes/game.list.js old mode 100755 new mode 100644 index d0d4905d..6cf86c8c --- a/client/src/scenes/game.list.js +++ b/client/src/scenes/game.list.js @@ -22,7 +22,7 @@ class GameList extends Phaser.GameObjects.Group { const WIDTH = GAME_LIST.width(); const HEIGHT = GAME_LIST.height(); - console.log(GAME_LIST.y(0)) + console.log(GAME_LIST.y(0)); const pvp = list.add .rectangle(X, GAME_LIST.y(0), WIDTH, HEIGHT, 0x440000)