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

refactor scenes into classes

Browse Source
This commit is contained in:
Mashy 2018-11-20 14:49:28 +10:00
parent 9327b4381c
commit d1f2676e0f
6 changed files with 50 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
client/src/scenes/cryp.list.js Normal file → Executable file
View File

@ -1,6 +1,7 @@
const Phaser = require('phaser');
const crypRow = require('./cryp.row');
const CrypRow = require('./cryp.row');
const CrypPage = require('./cryp.page');
class CrypList extends Phaser.Scene {
constructor() {
@ -10,40 +11,31 @@ class CrypList extends Phaser.Scene {
create() {
this.registry.events.on('changedata', this.updateData, this);
this.input.on('gameobjectup', this.clickHandler, this);
this.CrypPage = null;
console.log('creating');
return true;
}
updateData(parent, key, data) {
if (key === 'cryps') {
this.renderCryps(data);
this.clearCryps();
this.CrypRow = new CrypRow(this, data);
}
window.redraw = this.clearCryps.bind(this);
return true;
}
redraw() {
for (let i = this.children.list.length - 1; i >= 0; i--) {
this.children.list[i].destroy();
}
}
renderCryps(cryps) {
if (!cryps) return true;
console.log(JSON.stringify(this.children.list));
console.log(this.children.length);
this.redraw();
cryps.forEach((cryp, i) => {
crypRow(this, cryp, i);
});
window.redraw = this.redraw.bind(this);
return true;
clearCryps() {
if (this.CrypRow) this.CrypRow.destroy(true);
}
clickHandler(pointer, crypBox) {
console.log(crypBox);
this.registry.set('activeCryp', Object.create(crypBox.cryp));
if (this.CrypPage) {
this.CrypPage.destroy(true);
}
this.CrypPage = new CrypPage(this, crypBox.cryp);
return true;
// this.registry.get('ws').sendGamePve(crypBox.cryp.id);
}
}

48
client/src/scenes/cryp.page.js Normal file → Executable file
View File

@ -11,43 +11,17 @@ const TEXT_MARGIN = 24;
const xPos = i => 0;
const yPos = i => (i * ROW_HEIGHT + ROW_MARGIN) + TOP_MARGIN;
function crypSkill(scene, skill, i) {
scene.add.text(500, 500 + (TEXT_MARGIN * (i + 1)), skill.skill, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
return true;
}
class CrypPage extends Phaser.Scene {
constructor() {
super({ key: 'CrypPage', active: true });
}
create() {
this.registry.events.on('changedata', this.updateData, this);
return true;
}
updateData(parent, key, data) {
if (key === 'activeCryp') {
this.renderCryp(data);
}
return true;
}
redraw() {
for (let i = this.children.list.length - 1; i >= 0; i--) {
this.children.list[i].destroy();
}
}
renderCryp(cryp) {
if (!cryp) return true;
this.redraw();
this.add.text(500, 500, cryp.name, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
cryp.skills.forEach((skill, i) => crypSkill(this, skill, i));
return true;
class CrypPage extends Phaser.GameObjects.Group {
constructor(scene, cryp) {
super(scene);
this.add(scene.add.text(500, 500, cryp.name, {
fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold',
}));
cryp.skills.forEach((skill, i) => this.add(
scene.add.text(500, 500 + (TEXT_MARGIN * (i + 1)), skill.skill, {
fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold',
})
));
}
}

31
client/src/scenes/cryp.row.js Normal file → Executable file
View File

@ -11,20 +11,23 @@ const TEXT_MARGIN = 24;
const xPos = i => 0;
const yPos = i => (i * ROW_HEIGHT + ROW_MARGIN) + TOP_MARGIN;
function crypRow(list, cryp, i) {
console.log(i);
const X_ORIGIN = xPos(i);
const Y_ORIGIN = yPos(i);
class CrypRow extends Phaser.GameObjects.Group {
constructor(list, cryps) {
super(list);
cryps.forEach((cryp, i) => {
const X_ORIGIN = xPos(i);
const Y_ORIGIN = yPos(i);
const row = list.add.rectangle(X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT, ROW_FILL * Math.random())
.setInteractive()
.setOrigin(0);
const row = list.add.rectangle(X_ORIGIN, Y_ORIGIN, ROW_WIDTH, ROW_HEIGHT, ROW_FILL * Math.random())
.setInteractive()
.setOrigin(0);
row.cryp = cryp;
list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 0), cryp.name, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 1), cryp.stamina.base, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' });
return true;
row.cryp = cryp;
this.add(row);
this.add(list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 0), cryp.name, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' }));
this.add(list.add.text(X_ORIGIN, Y_ORIGIN + (TEXT_MARGIN * 1), cryp.stamina.base, { fontFamily: 'Arial', fontSize: 24, color: '#ffffff', fontStyle: 'bold' }));
});
return true;
}
}
module.exports = crypRow;
module.exports = CrypRow;

6
client/src/scenes/cryps.js Normal file → Executable file
View File

@ -23,7 +23,7 @@ function renderCryps(store) {
scene: [
Menu,
CrypList,
CrypPage,
// Passives,
],
};
@ -32,8 +32,10 @@ function renderCryps(store) {
store.subscribe(() => {
const state = store.getState();
game.registry.set('cryps', state.cryps);
game.registry.set('ws', state.ws);
});
window.addEventListener('mouseup', () => game.registry.set('pan', false));
window.addEventListener('mousedown', () => game.registry.set('pan', true));
window.addEventListener('resize', () => game.resize(window.innerWidth, window.innerHeight), false);
return game;

0
client/src/scenes/menu.js Normal file → Executable file
View File

9
client/src/scenes/passives.js
View File

@ -9,7 +9,7 @@ const passiveDataEdge = require('./passive.data.edge');
class PhaserPassives extends Phaser.Scene {
constructor() {
super('passives');
super({ key: 'Passives', active: true });
}
preload() {
@ -73,7 +73,7 @@ class PhaserPassives extends Phaser.Scene {
});
this.input.on('pointermove', (pointer) => {
const zoomFactor = 2 / this.cameras.main.zoom;
if (this.pan) {
if (this.registry.get('pan')) {
const points = pointer.getInterpolatedPosition(2);
this.cameras.main.scrollX -= zoomFactor * (points[1].x - points[0].x);
this.cameras.main.scrollY -= zoomFactor * (points[1].y - points[0].y);
@ -82,8 +82,8 @@ class PhaserPassives extends Phaser.Scene {
this.input.keyboard.on('keydown_A', () => {
this.updatePassives(); // Will update nodes from state
}, 0, this);
this.input.keyboard.on('keydown_S', () => {
this.scene.switch('combat');
this.input.keyboard.on('keydown_G', () => {
this.scene.sleep('Passives');
}, 0, this);
}
@ -98,7 +98,6 @@ class PhaserPassives extends Phaser.Scene {
} else {
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);
});
}