ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

game log

Browse Source
This commit is contained in:
ntr 2018-11-21 17:13:04 +11:00
parent 41c7c790f2
commit 1854ef86ad
5 changed files with 156 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/src/events.js
View File

@ -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) => {

102
client/src/scenes/combat.js
View File

@ -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;

90
client/src/scenes/combat.old.js Normal file
View File

@ -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;

35
client/src/scenes/constants.js
View File

@ -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,

2
client/src/scenes/cryps.js
View File

@ -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,
],
};