104 lines
3.5 KiB
JavaScript
104 lines
3.5 KiB
JavaScript
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.2;
|
|
|
|
const X_MARGIN = WIDTH * 1 / 4;
|
|
|
|
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.addSpecs(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.addSpecs(cryp);
|
|
if (this.hoverText) this.hoverText.destroy();
|
|
}
|
|
}
|
|
|
|
addSpecs(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;
|
|
|
|
this.specs.add(this.add.text(SPEC_X, SPEC_Y, specInfo.spec, TEXT.NORMAL)
|
|
.setInteractive()
|
|
.on('pointerdown', () => {
|
|
this.registry.get('ws').sendSpecForget(cryp.id, specInfo);
|
|
})
|
|
.on('pointerover', (pointer) => {
|
|
if (!this.forget) {
|
|
this.displayText(SPEC_X, SPEC_Y, `Affects ${specInfo.affects} - level ${specInfo.level}`, pointer);
|
|
}
|
|
})
|
|
.on('pointerout', () => {
|
|
if (this.hoverText) this.hoverText.destroy();
|
|
}));
|
|
};
|
|
|
|
this.specs.add(this.add.text(X_MARGIN, 0, 'Common', TEXT.HEADER));
|
|
cryp.specs.common.forEach((specInfo, i) => listSpecs(1, specInfo, i));
|
|
|
|
this.specs.add(this.add.text(X_MARGIN * 2, 0, 'Uncommon', TEXT.HEADER));
|
|
cryp.specs.uncommon.forEach((specInfo, i) => listSpecs(2, specInfo, i));
|
|
|
|
this.specs.add(this.add.text(X_MARGIN * 3, 0, 'Rare', TEXT.HEADER));
|
|
cryp.specs.rare.forEach((specInfo, i) => listSpecs(3, specInfo, i));
|
|
}
|
|
|
|
displayText(x, y, description, pointer) {
|
|
if (this.hoverText) this.hoverText.destroy();
|
|
this.hoverText = this.add.text(x, y, description, {
|
|
fontSize: '16px',
|
|
fontFamily: 'Jura',
|
|
color: '#ffffff',
|
|
backgroundColor: '#222222',
|
|
}).setPadding(32);
|
|
this.hoverText.setAlpha(0.8);
|
|
this.hoverText.setOrigin(pointer.x >= WIDTH * 0.65 ? 0 : 1,
|
|
pointer.y >= HEIGHT * 0.25 ? 1 : 0);
|
|
this.hoverText.setWordWrapWidth(450);
|
|
}
|
|
|
|
|
|
cleanUp() {
|
|
this.registry.events.off('changedata', this.updateData, this);
|
|
this.scene.remove();
|
|
}
|
|
}
|
|
|
|
module.exports = StatSheet;
|