106 lines
3.6 KiB
JavaScript
106 lines
3.6 KiB
JavaScript
const Phaser = require('phaser');
|
|
|
|
const { TEXT, SKILLS, POSITIONS: { STATS } } = require('./constants');
|
|
const addButton = require('./statsheet.button');
|
|
|
|
const TEXT_MARGIN = STATS.textMargin();
|
|
const X_ORIG_KNOWN = STATS.knownX();
|
|
const X_ORIG_LEARN = STATS.learnableX();
|
|
const Y_ORIG = STATS.y();
|
|
|
|
const menuOrigX = STATS.width() * 0.6;
|
|
const menuOrigY = STATS.height() * 0.3;
|
|
const menuHeight = STATS.height() * 0.1;
|
|
const menuPad = STATS.height() * 0.01;
|
|
const menuWidth = STATS.width() * 0.25;
|
|
|
|
|
|
class Skills extends Phaser.Scene {
|
|
constructor() {
|
|
super({ key: 'Skills' });
|
|
}
|
|
|
|
create(cryp) {
|
|
this.cryp = cryp;
|
|
this.forget = false;
|
|
// Destroy the old registry event if it exists
|
|
this.registry.events.on('changedata', this.updateData, this);
|
|
this.add.text(X_ORIG_KNOWN, Y_ORIG, 'Skills', TEXT.HEADER);
|
|
this.addKnownSkills(cryp);
|
|
this.addControls();
|
|
}
|
|
|
|
addControls() {
|
|
const infoCback = () => {
|
|
this.forget = false;
|
|
this.addKnownSkills(this.cryp);
|
|
if (this.learnSkills) this.learnSkills.destroy(true);
|
|
};
|
|
const forgetCback = () => {
|
|
this.forget = true;
|
|
this.addKnownSkills(this.cryp);
|
|
};
|
|
const learnCback = () => {
|
|
this.forget = false;
|
|
this.addKnownSkills(this.cryp);
|
|
this.addLearnableSkills(this.cryp);
|
|
};
|
|
addButton(this, menuOrigX, menuOrigY, infoCback, 'Skill Info');
|
|
addButton(this, menuOrigX, menuOrigY + (menuHeight + menuPad), forgetCback, 'Forget Skills');
|
|
addButton(this, menuOrigX, menuOrigY + (menuHeight + menuPad) * 2, learnCback, 'Learn Skills');
|
|
}
|
|
|
|
addKnownSkills(cryp) {
|
|
if (this.knownSkills) this.knownSkills.destroy(true);
|
|
this.knownSkills = this.add.group();
|
|
const knownSkill = (skill, i) => {
|
|
const SKILL_X = X_ORIG_KNOWN;
|
|
const SKILL_Y = (i * TEXT_MARGIN) + Y_ORIG + TEXT_MARGIN;
|
|
|
|
const color = this.forget ? '#ff0000' : '#ffffff';
|
|
const style = { fontFamily: 'monospace', fontSize: 16, color };
|
|
this.knownSkills.add(this.add.text(SKILL_X, SKILL_Y, skill.skill, style)
|
|
.setInteractive()
|
|
.on('pointerdown', () => {
|
|
if (this.forget) {
|
|
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 = X_ORIG_LEARN;
|
|
const SKILL_Y = Y_ORIG + (i * STATS.learnableMargin() * 3) + TEXT_MARGIN;
|
|
|
|
this.learnSkills.add(this.add.text(SKILL_X, SKILL_Y, [skill.name, skill.description], TEXT.LEARNABLE)
|
|
.setInteractive()
|
|
.on('pointerdown', () => {
|
|
this.registry.get('ws').sendCrypLearn(cryp.id, skill.name);
|
|
}));
|
|
};
|
|
|
|
this.learnSkills.add(this.add.text(X_ORIG_LEARN, Y_ORIG, 'Learnable', TEXT.HEADER));
|
|
SKILLS.LEARNABLE.forEach(learnable);
|
|
}
|
|
|
|
updateData(parent, key, data) {
|
|
if (key === 'cryps') {
|
|
const cryp = data.find(c => c.id === this.cryp.id);
|
|
this.cryp = cryp;
|
|
this.addKnownSkills(cryp);
|
|
}
|
|
}
|
|
|
|
cleanUp() {
|
|
this.registry.events.off('changedata', this.updateData, this);
|
|
this.scene.remove();
|
|
}
|
|
}
|
|
|
|
module.exports = Skills;
|