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

Placeholder scene for holding specs

Browse Source
This commit is contained in:
Mashy 2019-01-16 16:43:43 +10:00
parent 2a82404a48
commit 31f48c0663
3 changed files with 154 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,6 +7,7 @@ const Zones = require('./zones');
const Background = require('./background');
const GameList = require('./game.list');
const StatSheet = require('./statsheet');
const SpecSheet = require('./specsheet');
function renderCryps() {
@ -34,7 +35,7 @@ function renderCryps() {
function newMainScene(key, scene, data) {
let addScene = true;
const ACTIVE_MAIN_SCENES = ['GameList', 'Zones', 'StatSheet'];
const ACTIVE_MAIN_SCENES = ['GameList', 'Zones', 'StatSheet', 'SpecSheet'];
ACTIVE_MAIN_SCENES.forEach((sKey) => {
if (game.scene.keys[sKey]) {
if (key === sKey) {
@ -74,6 +75,11 @@ function renderCryps() {
newMainScene('StatSheet', StatSheet, data);
}
if (key === 'crypSpec') {
newMainScene('SpecSheet', SpecSheet, data);
}
return true;
}

144
client/src/scenes/specsheet.js Normal file
View File

@ -0,0 +1,144 @@
const Phaser = require('phaser');
const { POSITIONS: { MENU_MAIN }, TEXT } = require('./constants');
const X = MENU_MAIN.x();
const Y = MENU_MAIN.y();
const WIDTH = MENU_MAIN.width();
const HEIGHT = MENU_MAIN.height();
const TEXT_MARGIN = 24;
const menuX = WIDTH / 10;
const menuY = HEIGHT * 0.8;
const menuWidth = WIDTH / 10;
const menuHeight = HEIGHT * 0.3;
const X_LEARN = WIDTH * 2 / 4;
const Y_SKILLS = HEIGHT * 0.5;
function addButton(scene, x, y, cback, name) {
const button = scene.add
.rectangle(x, y, menuWidth, menuHeight, 0x222222)
.setInteractive()
.setOrigin(0)
.on('pointerdown', cback);
scene.add.text(button.getCenter().x, button.getCenter().y, name, TEXT.HEADER)
.setOrigin(0.5, 0.5);
}
class StatSheet extends Phaser.Scene {
constructor() {
super({ key: 'SpecSheet' });
}
create(cryp) {
this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);
this.registry.events.on('changedata', this.updateData, this);
this.cryp = cryp;
this.forget = false;
this.add.text(WIDTH / 10, 0, cryp.name, TEXT.HEADER);
this.addStats(cryp);
this.addKnownSkills(cryp);
this.addLearnableSkills(cryp);
addButton(this, menuX, menuY, () => this.registry.set('crypStats', cryp), 'Stats');
}
updateData(parent, key, data) {
if (key === 'cryps') {
const cryp = data.find(c => c.id === this.cryp.id);
this.cryp = cryp;
this.addKnownSkills(cryp);
this.addStats(cryp);
}
}
addStats(cryp) {
if (this.stats) this.stats.destroy(true);
this.stats = this.add.group();
const crypStat = (stat, i) => {
const STAT_X = WIDTH / 10;
const STAT_Y = (i + 1) * TEXT_MARGIN;
this.stats.add(this.add
.text(STAT_X, STAT_Y, `${stat.stat}: ${stat.base}`, TEXT.NORMAL));
};
const CRYP_STATS = [
// cryp.stamina,
// cryp.spell_dmg,
// cryp.speed,
];
CRYP_STATS.forEach(crypStat);
}
addKnownSkills(cryp) {
if (this.knownSkills) this.knownSkills.destroy(true);
this.knownSkills = this.add.group();
this.add.text(menuX, Y_SKILLS, 'Skills', TEXT.HEADER);
const knownSkill = (skill, i) => {
const SKILL_X = menuX;
const SKILL_Y = (i * TEXT_MARGIN) + Y_SKILLS + TEXT_MARGIN;
const color = this.forget ? '#ff0000' : '#ffffff';
const style = { fontFamily: 'monospace', fontSize: 16, color };
this.knownSkills.add(this.add.text(menuX, SKILL_Y, skill.skill, style)
.setInteractive()
.on('pointerdown', () => {
this.registry.get('ws').sendCrypForget(cryp.id, skill.skill);
}));
};
// cryp.skills.forEach(knownSkill);
}
addLearnableSkills(cryp) {
if (this.learnSkills) this.learnSkills.destroy(true);
this.learnSkills = this.add.group();
const learnable = (skill, i) => {
const SKILL_X = i <= 10 ? X_LEARN : X_LEARN + WIDTH / 5;
const SKILL_Y = i <= 10 ? (i + 1) * TEXT_MARGIN : (i - 10) * TEXT_MARGIN;
this.learnSkills.add(this.add.text(SKILL_X, SKILL_Y, skill.name, TEXT.NORMAL)
.setInteractive()
.on('pointerdown', () => {
this.registry.get('ws').sendCrypLearn(cryp.id, skill.name);
})
.on('pointerover', (pointer) => {
if (!this.forget) {
this.displaySkillText(SKILL_X, SKILL_Y, skill.description, pointer);
}
})
.on('pointerout', () => {
if (this.skillText) this.skillText.destroy();
}));
};
this.learnSkills.add(this.add.text(X_LEARN, 0, 'Learnable', TEXT.HEADER));
// SKILLS.LEARNABLE.forEach(learnable);
}
displaySkillText(x, y, description, pointer) {
if (this.skillText) this.skillText.destroy();
this.skillText = this.add.text(x, y, description, {
fontSize: '16px',
fontFamily: 'Arial',
color: '#ffffff',
backgroundColor: '#222222',
}).setPadding(32);
this.skillText.setAlpha(0.8);
this.skillText.setOrigin(pointer.x >= WIDTH * 0.65 ? 1 : 0,
pointer.y >= HEIGHT * 0.25 ? 1 : 0);
this.skillText.setWordWrapWidth(450);
}
cleanUp() {
this.registry.events.off('changedata', this.updateData, this);
this.scene.remove();
}
}
module.exports = StatSheet;

5
client/src/scenes/statsheet.js
View File

@ -10,7 +10,7 @@ const TEXT_MARGIN = 24;
const menuX = WIDTH / 10;
const menuY = HEIGHT * 0.8;
const menuWidth = WIDTH / 10;
const menuHeight = HEIGHT * 0.3;
const menuHeight = HEIGHT * 0.2;
const X_LEARN = WIDTH * 2 / 4;
const Y_SKILLS = HEIGHT * 0.5;
@ -23,7 +23,7 @@ function addButton(scene, x, y, cback, name) {
.setOrigin(0)
.on('pointerdown', cback);
scene.add.text(button.getCenter().x, button.getCenter().y, name, TEXT.HEADER)
.setOrigin(0.5, 1);
.setOrigin(0.5, 0.5);
}
class StatSheet extends Phaser.Scene {
@ -41,6 +41,7 @@ class StatSheet extends Phaser.Scene {
this.addStats(cryp);
this.addKnownSkills(cryp);
this.addLearnableSkills(cryp);
addButton(this, menuX, menuY, () => this.registry.set('crypSpec', cryp), 'Spec');
}
updateData(parent, key, data) {