138 lines
4.7 KiB
JavaScript
138 lines
4.7 KiB
JavaScript
const Phaser = require('phaser');
|
|
const { remove } = require('lodash');
|
|
|
|
const { TEXT, COLOURS, POSITIONS: { CRYP_LIST } } = require('./constants');
|
|
const genAvatar = require('./avatar');
|
|
|
|
const ROW_HEIGHT = CRYP_LIST.height() * 0.2;
|
|
const ROW_WIDTH = CRYP_LIST.width();
|
|
|
|
const menuY = CRYP_LIST.height() * 1.6;
|
|
|
|
const KEY_MAP = [
|
|
'keydown-ONE',
|
|
'keydown-TWO',
|
|
'keydown-THREE',
|
|
];
|
|
|
|
const NULL_UUID = '00000000-0000-0000-0000-000000000000';
|
|
|
|
class HomeCrypList extends Phaser.Scene {
|
|
constructor() {
|
|
super({ key: 'HomeCryps' });
|
|
}
|
|
|
|
|
|
updateData(parent, key, data) {
|
|
if (key === 'crypList') {
|
|
KEY_MAP.forEach(k => this.input.keyboard.removeListener(k));
|
|
this.scene.restart();
|
|
}
|
|
}
|
|
|
|
create() {
|
|
// this.cameras.main.setViewport(CRYP_LIST.x(), CRYP_LIST.y(), CRYP_LIST.width(), CRYP_LIST.height());
|
|
this.registry.events.on('changedata', this.updateData, this);
|
|
this.registry.events.on('setdata', this.updateData, this);
|
|
const cryps = this.registry.get('crypList');
|
|
|
|
|
|
if (!cryps) return true;
|
|
const ws = this.registry.get('ws');
|
|
this.activeCryps = [];
|
|
// We only display 3 cryps others can be viewed in cryp list (soon TM)
|
|
for (let i = 0; i < cryps.length; i += 1) {
|
|
const cryp = cryps[i];
|
|
const BOX_WIDTH = Math.floor(ROW_WIDTH / 5);
|
|
const ROW_X = BOX_WIDTH * 2 * (i % 3);
|
|
const ROW_Y = CRYP_LIST.y() + (Math.floor(i / 3)) * ROW_HEIGHT * 1.5;
|
|
const ACTIVE_FILL = 0.2;
|
|
|
|
const FILL = Object.values(COLOURS)[i];
|
|
// Selection of cryps
|
|
|
|
// Cryp avatar and interaction box
|
|
const crypInteract = this.add
|
|
.rectangle(ROW_X, ROW_Y + ROW_HEIGHT * 0.2, BOX_WIDTH * 2, ROW_HEIGHT, FILL)
|
|
.setInteractive()
|
|
.setOrigin(0);
|
|
crypInteract.setAlpha(0.2);
|
|
crypInteract.on('pointerdown', () => {
|
|
if (this.activeCryps.includes(crypInteract)) {
|
|
remove(this.activeCryps, n => n === crypInteract);
|
|
crypInteract.setAlpha(0.2);
|
|
} else {
|
|
this.activeCryps.push(crypInteract);
|
|
crypInteract.setAlpha(1);
|
|
}
|
|
});
|
|
|
|
crypInteract.itemSelect = () => {
|
|
crypInteract.setFillStyle(COLOURS.SELECT);
|
|
};
|
|
crypInteract.itemDeselect = () => {
|
|
crypInteract.setFillStyle(FILL, ACTIVE_FILL);
|
|
};
|
|
|
|
crypInteract.cryp = cryp;
|
|
this.add.image(
|
|
crypInteract.getCenter().x,
|
|
crypInteract.getCenter().y,
|
|
'aztec',
|
|
genAvatar(cryp.name)
|
|
);
|
|
this.add.text(ROW_X + BOX_WIDTH, ROW_Y, cryp.name, TEXT.HEADER)
|
|
.setOrigin(0.5, 0.5);
|
|
}
|
|
|
|
// Add Spawn Cryp Option
|
|
const spawn = this.add
|
|
.rectangle(ROW_WIDTH * 0.05, menuY, ROW_WIDTH * 0.2, ROW_HEIGHT * 0.5, 0x888888)
|
|
.setInteractive()
|
|
.setOrigin(0)
|
|
.on('pointerdown', () => {
|
|
this.game.events.emit('CRYP_SPAWN');
|
|
});
|
|
this.add
|
|
.text(spawn.getCenter().x, spawn.getCenter().y, '+', TEXT.HEADER)
|
|
.setOrigin(0.5, 0.5);
|
|
|
|
const joinNormal = this.add
|
|
.rectangle(ROW_WIDTH * 0.3, menuY, ROW_WIDTH * 0.4, ROW_HEIGHT * 0.5, 0x888888)
|
|
.setInteractive()
|
|
.setOrigin(0)
|
|
.on('pointerdown', () => {
|
|
const playerCryps = [];
|
|
this.activeCryps.forEach(obj => playerCryps.push(obj.cryp.id));
|
|
ws.sendPlayerCrypsSet(NULL_UUID, playerCryps);
|
|
});
|
|
this.add
|
|
.text(joinNormal.getCenter().x, joinNormal.getCenter().y, 'Join Normal', TEXT.HEADER)
|
|
.setOrigin(0.5, 0.5);
|
|
|
|
const joinInstance = this.add
|
|
.rectangle(ROW_WIDTH * 0.8, menuY, ROW_WIDTH * 0.4, ROW_HEIGHT * 0.5, 0x888888)
|
|
.setInteractive()
|
|
.setOrigin(0)
|
|
.on('pointerdown', () => {
|
|
const playerCryps = [];
|
|
this.activeCryps.forEach(obj => playerCryps.push(obj.cryp.id));
|
|
ws.sendInstanceJoin(playerCryps);
|
|
});
|
|
this.add
|
|
.text(joinInstance.getCenter().x, joinInstance.getCenter().y, 'Join Instance', TEXT.HEADER)
|
|
.setOrigin(0.5, 0.5);
|
|
|
|
return this;
|
|
}
|
|
|
|
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 = HomeCrypList;
|