new year, new menu
This commit is contained in:
Mashy
+126
-64
@@ -1,15 +1,31 @@
|
||||
const Phaser = require('phaser');
|
||||
const { POSITIONS: { MENU_MAIN }, TEXT, SKILLS } = require('./constants');
|
||||
|
||||
const { POSITIONS: { STATS } } = 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 LEARN_MAGIN = 12;
|
||||
|
||||
const Passives = require('./passives');
|
||||
const Stats = require('./statsheet.stats');
|
||||
const Skills = require('./statsheet.skills');
|
||||
const addButton = require('./statsheet.button');
|
||||
const menuX = WIDTH / 10;
|
||||
const menuY = HEIGHT * 0.8;
|
||||
const menuWidth = WIDTH / 10;
|
||||
const menuHeight = HEIGHT * 0.3;
|
||||
|
||||
const menuOrig = STATS.height() * 0.5;
|
||||
const menuHeight = STATS.height() * 0.1;
|
||||
const menuPad = STATS.height() * 0.01;
|
||||
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, 1);
|
||||
}
|
||||
|
||||
class StatSheet extends Phaser.Scene {
|
||||
constructor() {
|
||||
@@ -17,80 +33,126 @@ class StatSheet extends Phaser.Scene {
|
||||
}
|
||||
|
||||
create(cryp) {
|
||||
this.cryp = cryp;
|
||||
this.stats = new Stats(this, cryp);
|
||||
this.addControls(cryp);
|
||||
this.addSkills(cryp);
|
||||
this.skills = true;
|
||||
this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);
|
||||
this.registry.events.on('changedata', this.updateData, this);
|
||||
this.registry.events.on('setdata', this.updateData, this);
|
||||
this.cryp = cryp;
|
||||
this.forget = false;
|
||||
|
||||
const crypStat = (stat, i) => {
|
||||
const STAT_X = WIDTH / 10;
|
||||
const STAT_Y = (i + 1) * TEXT_MARGIN;
|
||||
this.add.text(STAT_X, STAT_Y, `${stat.stat}: ${stat.base}`, TEXT.NORMAL);
|
||||
};
|
||||
|
||||
const CRYP_STATS = [cryp.stamina, cryp.phys_dmg, cryp.spell_dmg];
|
||||
this.add.text(WIDTH / 10, 0, cryp.name, TEXT.HEADER);
|
||||
CRYP_STATS.forEach(crypStat);
|
||||
this.addKnownSkills(cryp);
|
||||
this.addControls();
|
||||
}
|
||||
|
||||
updateData(parent, key, data) {
|
||||
if (key === 'menu') {
|
||||
if (data) return this.cleanUp();
|
||||
if (key === 'cryps') {
|
||||
const cryp = data.find(c => c.id === this.cryp.id);
|
||||
this.cryp = cryp;
|
||||
this.addKnownSkills(cryp);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
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, menuX, menuY, infoCback, 'Skill\nInfo');
|
||||
addButton(this, menuX + menuWidth * 1.1, menuY, forgetCback, 'Forget\nSkills');
|
||||
addButton(this, menuX + menuWidth * 2.2, menuY, learnCback, 'Learn\nSkills');
|
||||
}
|
||||
|
||||
addControls(cryp) {
|
||||
const menuCback = () => {
|
||||
this.registry.set('menu', true);
|
||||
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', () => {
|
||||
if (this.forget) {
|
||||
this.registry.get('ws').sendCrypForget(cryp.id, skill.skill);
|
||||
}
|
||||
})
|
||||
.on('pointerover', (pointer) => {
|
||||
if (!this.forget) {
|
||||
const { description } = SKILLS.LEARNABLE.find(s => s.name === skill.skill);
|
||||
this.displaySkillText(SKILL_X, SKILL_Y, description, pointer);
|
||||
}
|
||||
})
|
||||
.on('pointerout', () => {
|
||||
if (this.skillText) this.skillText.destroy();
|
||||
}));
|
||||
};
|
||||
const passiveCback = () => {
|
||||
if (this.passives) return false;
|
||||
this.removeSkills();
|
||||
this.addPassives(cryp);
|
||||
this.passives = true;
|
||||
return true;
|
||||
};
|
||||
const skillCback = () => {
|
||||
if (this.skills) return false;
|
||||
this.removePassives();
|
||||
this.addSkills(cryp);
|
||||
this.skills = true;
|
||||
return true;
|
||||
};
|
||||
const clearCback = () => {
|
||||
this.removePassives();
|
||||
this.removeSkills();
|
||||
return true;
|
||||
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();
|
||||
}));
|
||||
};
|
||||
|
||||
addButton(this, 0, menuOrig, menuCback, 'Main Menu');
|
||||
addButton(this, 0, menuOrig + (menuHeight + menuPad), passiveCback, 'View Passives');
|
||||
addButton(this, 0, menuOrig + (menuHeight + menuPad) * 2, skillCback, 'View Skills');
|
||||
addButton(this, 0, menuOrig + (menuHeight + menuPad) * 3, clearCback, 'View Cryp');
|
||||
this.learnSkills.add(this.add.text(X_LEARN, 0, 'Learnable', TEXT.HEADER));
|
||||
SKILLS.LEARNABLE.forEach(learnable);
|
||||
}
|
||||
|
||||
addSkills(cryp) {
|
||||
this.scene.manager.add('Skills', Skills, true, cryp);
|
||||
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);
|
||||
}
|
||||
|
||||
addPassives(cryp) {
|
||||
this.scene.manager.add('Passives', Skills, true, cryp);
|
||||
}
|
||||
|
||||
removePassives() {
|
||||
if (!this.passives) return false;
|
||||
this.scene.get('Passives').cleanUp();
|
||||
this.passives = false;
|
||||
return true;
|
||||
}
|
||||
|
||||
removeSkills() {
|
||||
if (!this.skills) return false;
|
||||
this.scene.get('Skills').cleanUp();
|
||||
this.skills = false;
|
||||
return true;
|
||||
}
|
||||
|
||||
cleanUp() {
|
||||
this.registry.events.off('changedata', this.updateData, this);
|
||||
this.registry.events.off('setdata', this.updateData, this);
|
||||
this.removePassives();
|
||||
this.removeSkills();
|
||||
this.scene.remove();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user