108 lines
3.2 KiB
JavaScript
108 lines
3.2 KiB
JavaScript
const Phaser = require('phaser');
|
|
|
|
const { TEXT, COLOURS, POSITIONS: { CRYP_LIST, MENU } } = require('./constants');
|
|
|
|
const TEXT_MARGIN = 24;
|
|
|
|
const KEY_MAP = [
|
|
'keydown_ONE',
|
|
'keydown_TWO',
|
|
'keydown_THREE',
|
|
'keydown_FOUR',
|
|
'keydown_FIVE',
|
|
];
|
|
|
|
class MenuCrypList extends Phaser.Scene {
|
|
constructor() {
|
|
super({ key: 'MenuCrypList' });
|
|
}
|
|
|
|
create() {
|
|
this.registry.events.on('changedata', this.updateData, this);
|
|
this.registry.events.on('setdata', this.updateData, this);
|
|
this.addCrypRows(this.registry.get('cryps'));
|
|
}
|
|
|
|
updateData(parent, key, data) {
|
|
if (key === 'cryps') {
|
|
KEY_MAP.forEach(k => this.input.keyboard.removeListener(k));
|
|
this.addCrypRows(data);
|
|
}
|
|
}
|
|
|
|
addCrypRows(cryps) {
|
|
if (!cryps) return true;
|
|
if (this.crypRows) this.crypRows.destroy(true);
|
|
this.crypRows = this.add.group();
|
|
const ROW_HEIGHT = CRYP_LIST.rowHeight(cryps);
|
|
const ROW_WIDTH = CRYP_LIST.rowWidth();
|
|
|
|
cryps.forEach((cryp, i) => {
|
|
const ROW_X = CRYP_LIST.x();
|
|
const ROW_Y = (i * CRYP_LIST.rowHeight(cryps)) + MENU.height();
|
|
|
|
const ACTIVE_FILL = cryp.active
|
|
? 1
|
|
: 0;
|
|
|
|
const FILL = Object.values(COLOURS)[i];
|
|
|
|
const row = this.add.rectangle(ROW_X, ROW_Y, ROW_WIDTH, ROW_HEIGHT, FILL, ACTIVE_FILL)
|
|
.setInteractive()
|
|
.setOrigin(0)
|
|
.on('pointerdown', () => {
|
|
this.scene.get('Menu').displaySkills(cryp);
|
|
});
|
|
|
|
row.itemSelect = () => {
|
|
row.setFillStyle(COLOURS.SELECT);
|
|
};
|
|
|
|
row.itemDeselect = () => {
|
|
row.setFillStyle(FILL, ACTIVE_FILL);
|
|
};
|
|
|
|
const selectFn = () => {
|
|
this.game.events.emit('CRYP_ACTIVE', cryp);
|
|
};
|
|
|
|
if (KEY_MAP[i]) {
|
|
this.input.keyboard.on(KEY_MAP[i], selectFn, this);
|
|
}
|
|
|
|
row.cryp = cryp;
|
|
this.crypRows.add(row);
|
|
|
|
const crypStat = (stat, j) => {
|
|
const STAT_X = ROW_X;
|
|
const STAT_Y = (j * TEXT_MARGIN) + ROW_Y + TEXT_MARGIN;
|
|
|
|
this.crypRows.add(this.add.text(STAT_X, STAT_Y, `${stat.stat}: ${stat.base}`, TEXT.NORMAL));
|
|
};
|
|
|
|
const CRYP_STATS = [cryp.stamina, cryp.phys_dmg, cryp.spell_dmg];
|
|
CRYP_STATS.forEach(crypStat);
|
|
|
|
const selectBtn = this.add
|
|
.rectangle(0, ROW_Y + (ROW_HEIGHT * 0.9), ROW_WIDTH, ROW_HEIGHT / 10, FILL, 0.5)
|
|
.setInteractive()
|
|
.setOrigin(0);
|
|
|
|
selectBtn.on('pointerdown', selectFn);
|
|
|
|
this.crypRows.add(this.add.text(ROW_WIDTH - 20, ROW_Y, i + 1, TEXT.HEADER));
|
|
this.crypRows.add(this.add.text(ROW_X, ROW_Y + (TEXT_MARGIN * 0), cryp.name, TEXT.HEADER));
|
|
});
|
|
return true;
|
|
}
|
|
|
|
cleanUp() {
|
|
KEY_MAP.forEach(k => this.input.keyboard.removeListener(k));
|
|
this.registry.events.off('changedata', this.updateData, this);
|
|
this.registry.events.off('setdata', this.updateData, this);
|
|
this.scene.remove();
|
|
}
|
|
}
|
|
|
|
module.exports = MenuCrypList;
|