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

Added spec display

Browse Source
This commit is contained in:
Mashy 2019-01-16 23:51:12 +10:00
parent 661678ce60
commit d833b10ded
1 changed files with 30 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
client/src/scenes/specsheet.js
View File

@ -12,9 +12,7 @@ const menuY = HEIGHT * 0.8;
const menuWidth = WIDTH / 10;
const menuHeight = HEIGHT * 0.2;
const X_LEARN = WIDTH * 2 / 4;
const Y_SKILLS = HEIGHT * 0.5;
const X_MARGIN= WIDTH * 1 / 4;
function addButton(scene, x, y, cback, name) {
const button = scene.add
@ -32,106 +30,69 @@ class StatSheet extends Phaser.Scene {
}
create(cryp) {
console.log(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);
this.addCommonSpecs(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();
addCommonSpecs(cryp) {
if (this.specs) this.specs.destroy(true);
this.specs = this.add.group();
const listSpecs = (list, specInfo, i) => {
const SPEC_X = X_MARGIN * list;
const SPEC_Y = (i + 1) * TEXT_MARGIN;
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)
this.specs.add(this.add.text(SPEC_X, SPEC_Y, specInfo.spec, TEXT.NORMAL)
.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('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);
this.displayText(SPEC_X, SPEC_Y, `Affects ${specInfo.affects} - level ${specInfo.level}`, pointer);
}
})
.on('pointerout', () => {
if (this.skillText) this.skillText.destroy();
if (this.hoverText) this.hoverText.destroy();
}));
};
this.learnSkills.add(this.add.text(X_LEARN, 0, 'Learnable', TEXT.HEADER));
// SKILLS.LEARNABLE.forEach(learnable);
this.specs.add(this.add.text(X_MARGIN, 0, 'Common Specs', TEXT.HEADER));
cryp.specs.common.forEach((specInfo, i) => listSpecs(1, specInfo, i));
this.specs.add(this.add.text(X_MARGIN * 2, 0, 'Uncommon Specs', TEXT.HEADER));
cryp.specs.uncommon.forEach((specInfo, i) => listSpecs(2, specInfo, i));
this.specs.add(this.add.text(X_MARGIN * 3, 0, 'Rare Specs', TEXT.HEADER));
cryp.specs.rare.forEach((specInfo, i) => listSpecs(3, specInfo, i));
}
displaySkillText(x, y, description, pointer) {
if (this.skillText) this.skillText.destroy();
this.skillText = this.add.text(x, y, description, {
displayText(x, y, description, pointer) {
if (this.hoverText) this.hoverText.destroy();
this.hoverText = 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,
this.hoverText.setAlpha(0.8);
this.hoverText.setOrigin(pointer.x >= WIDTH * 0.65 ? 0 : 1,
pointer.y >= HEIGHT * 0.25 ? 1 : 0);
this.skillText.setWordWrapWidth(450);
this.hoverText.setWordWrapWidth(450);
}