From 1854ef86add93d0bf856f31b54953ce60835412a Mon Sep 17 00:00:00 2001 From: ntr Date: Wed, 21 Nov 2018 17:13:04 +1100 Subject: [PATCH] game log --- client/src/events.js | 1 + client/src/scenes/combat.js | 102 +++++++++----------------------- client/src/scenes/combat.old.js | 90 ++++++++++++++++++++++++++++ client/src/scenes/constants.js | 35 +++++++++++ client/src/scenes/cryps.js | 2 + 5 files changed, 156 insertions(+), 74 deletions(-) create mode 100644 client/src/scenes/combat.old.js diff --git a/client/src/events.js b/client/src/events.js index 80e62562..6774c1df 100644 --- a/client/src/events.js +++ b/client/src/events.js @@ -6,6 +6,7 @@ function registerEvents(store, registry, events) { const state = store.getState(); registry.set('cryps', state.cryps); registry.set('ws', state.ws); + registry.set('game', state.game); }); events.on('CRYP_ACTIVE', (cryp) => { diff --git a/client/src/scenes/combat.js b/client/src/scenes/combat.js index 893b3116..81db002c 100644 --- a/client/src/scenes/combat.js +++ b/client/src/scenes/combat.js @@ -1,90 +1,44 @@ const Phaser = require('phaser'); -const fs = require('fs'); -class PhaserCombat extends Phaser.Scene { - constructor() { - super('combat'); - } +const { POSITIONS, TEXT } = require('./constants'); - 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 }, +class Combat extends Phaser.Scene { + constructor(props) { + const x = POSITIONS.COMBAT.x(); + const y = POSITIONS.COMBAT.y(); + super({ + key: 'Combat', + active: true, + x, + y, }); } 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); + const logX = POSITIONS.COMBAT.LOG.x(); + const logY = POSITIONS.COMBAT.LOG.y(); + const logWidth = POSITIONS.COMBAT.LOG.width(); + this.log = this.add.text(logX, logY, 'loading', TEXT.NORMAL); + this.log.setWordWrapWidth(logWidth); + return true; } 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); - } + if (key === 'game') { + this.renderCombat(data); } + return true; + } + + renderCombat(game) { + if (!game) return false; + + console.log('combat render'); + this.log.setText(game.log.reverse()); + return true; } } -PhaserCombat.prototype.skills = require('./phaser.skills.js'); -module.exports = PhaserCombat; +module.exports = Combat; diff --git a/client/src/scenes/combat.old.js b/client/src/scenes/combat.old.js new file mode 100644 index 00000000..76e3fa5a --- /dev/null +++ b/client/src/scenes/combat.old.js @@ -0,0 +1,90 @@ +const Phaser = require('phaser'); +const fs = require('fs'); + +class PhaserCombat extends Phaser.Scene { + constructor() { + super('combat'); + } + + preload() { + /* Static Images */ + this.textures.addBase64('alk', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/alakazam-f.png')).toString('base64')}`); + this.textures.addBase64('magmar', `data:image/png;base64,${new Buffer.from(fs.readFileSync('./assets/magmar.png')).toString('base64')}`); + + this.load.image('sky', 'http://labs.phaser.io/assets/skies/nebula.jpg'); + this.load.image('proj', 'http://labs.phaser.io/assets/sprites/bullet.png'); + this.load.image('blue', 'http://labs.phaser.io/assets/particles/blue.png'); + this.load.image('green', 'http://labs.phaser.io/assets/particles/green.png'); + this.load.image('red', 'http://labs.phaser.io/assets/particles/red.png'); + this.load.image('white', 'http://labs.phaser.io/assets/particles/white.png'); + this.load.image('yellow', 'http://labs.phaser.io/assets/particles/yellow.png'); + + + /* Spritesheets */ + this.load.spritesheet({ + key: 'explosion', + url: 'http://labs.phaser.io/assets/sprites/explosion.png', + frameConfig: { frameWidth: 64, frameHeight: 64, endFrame: 23 }, + }); + } + + create() { + this.add.image(400, 300, 'sky');// Background image + this.createPlayers(); + this.createAnim(); + this.cursors = this.input.keyboard.createCursorKeys(); + this.combat = false; + this.registry.events.on('changedata', this.updateData, this); + + this.input.keyboard.on('keydown_S', () => { + this.scene.switch('passives'); // Switch to battle scene + }, 0, this); + } + + createPlayers() { + this.players = this.physics.add.staticGroup(); + const img = this.players.create(100, 300, 'alk'); + const imgTwo = this.players.create(500, 300, 'magmar'); + img.setScale(0.5); + imgTwo.setScale(0.5); + this.playerOneHp = this.add.text(20, 200, '', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' }); + this.playerTwoHp = this.add.text(450, 200, '', { fontFamily: 'Arial', fontSize: 24, color: '#00ff00' }); + } + + createAnim() { + const config = { + key: 'explodeAnimation', + frames: this.anims.generateFrameNumbers('explosion', { start: 0, end: 23, first: 23 }), + frameRate: 20, + repeat: 0, + }; + this.anims.create(config); + } + + explode(proj) { + this.proj.disableBody(true, true); + this.emitter.stop(); + const sprite = this.add.sprite(proj.x, proj.y, 'explosion').play('explodeAnimation'); + sprite.setScale(3); + } + + updateData(parent, key, data) { + if (key === 'playerCryps') { + this.playerOneHp.text = (`${data.cryps[0].hp.base.toString()} / ${data.cryps[0].stamina.base.toString()} HP`); + if (data.cryps[0].hp.base === 0) { + // this.PhaserCombat.skills('blast', 400, -150); + this.skills('wall', 'green', 400, -250); + } + } + if (key === 'enemyCryps') { + this.playerTwoHp.text = `${data.cryps[0].hp.base.toString()} / ${data.cryps[0].stamina.base.toString()} HP`; + if (data.cryps[0].hp.base === 0) { + // this.PhaserCombat.skills('blast', 180, 150); + this.skills('wall', 'green', 180, 250); + } + } + } +} +PhaserCombat.prototype.skills = require('./phaser.skills.js'); + +module.exports = PhaserCombat; diff --git a/client/src/scenes/constants.js b/client/src/scenes/constants.js index 80dd2f0d..b373ac7f 100644 --- a/client/src/scenes/constants.js +++ b/client/src/scenes/constants.js @@ -1,9 +1,44 @@ +// POSITIONING FNS +const menuWidth = () => window.innerWidth; +const menuHeight = () => window.innerHeight * 0.1; + +const combatWidth = () => window.innerWidth; +const combatHeight = () => window.innerHeight - menuHeight(); +const combatY = () => menuHeight(); +const combatX = () => 0; + +const logWidth = () => combatWidth() * 0.2; +const logHeight = () => combatHeight(); +const logY = () => menuHeight(); +const logX = () => combatWidth() - logWidth(); + module.exports = { TEXT: { NORMAL: { fontFamily: 'monospace', fontSize: 16, color: '#ffffff' }, HEADER: { fontFamily: 'monospace', fontSize: 24, color: '#ffffff', fontStyle: 'bold' }, }, + POSITIONS: { + MENU: { + width: menuWidth, + height: menuHeight, + }, + + COMBAT: { + x: combatX, + y: combatY, + width: combatWidth, + height: combatHeight, + + LOG: { + x: logX, + y: logY, + width: logWidth, + height: logHeight, + }, + }, + }, + COLOURS: { BLUE: 0x004bfe, CYAN: 0x27e7c0, diff --git a/client/src/scenes/cryps.js b/client/src/scenes/cryps.js index 0920063a..b6a67759 100644 --- a/client/src/scenes/cryps.js +++ b/client/src/scenes/cryps.js @@ -2,6 +2,7 @@ const Phaser = require('phaser'); const CrypList = require('./cryp.list'); const Menu = require('./menu'); +const Combat = require('./combat'); // const Passives = require('./passives'); function renderCryps(store, socket) { @@ -22,6 +23,7 @@ function renderCryps(store, socket) { scene: [ Menu, CrypList, + Combat, ], };