148 lines
3.8 KiB
JavaScript
148 lines
3.8 KiB
JavaScript
const Phaser = require('phaser');
|
|
|
|
const {
|
|
TEXT,
|
|
COLOURS,
|
|
POSITIONS: { ITEM_LIST },
|
|
} = require('./constants');
|
|
|
|
const X = ITEM_LIST.x();
|
|
const Y = ITEM_LIST.y();
|
|
const WIDTH = ITEM_LIST.width();
|
|
const HEIGHT = ITEM_LIST.height();
|
|
const ITEM_WIDTH = WIDTH * 0.3;
|
|
const ITEM_HEIGHT = HEIGHT * 0.1;
|
|
|
|
const itemCheckHitbox = (scenePlugin, pointer) => {
|
|
const { list } = scenePlugin.get('MenuCrypList').children;
|
|
const hitboxes = list.filter(c => c.cryp);
|
|
|
|
let found;
|
|
|
|
for (let i = 0; i < hitboxes.length; i += 1) {
|
|
if (hitboxes[i].cryp && Phaser.Geom.Rectangle.ContainsPoint(hitboxes[i].getBounds(),
|
|
pointer.position)) {
|
|
found = hitboxes[i];
|
|
} else {
|
|
hitboxes[i].itemDeselect();
|
|
}
|
|
}
|
|
|
|
return found;
|
|
};
|
|
|
|
class Item extends Phaser.GameObjects.Container {
|
|
constructor(scene, item, x, y) {
|
|
super(scene, x, y);
|
|
|
|
this.state = 'deselect';
|
|
this.item = item;
|
|
this.scene = scene;
|
|
|
|
this.origX = x;
|
|
this.origY = y;
|
|
|
|
this.box = scene.add
|
|
.rectangle(0, 0, ITEM_WIDTH, ITEM_HEIGHT, 0x222222);
|
|
|
|
this.text = scene.add
|
|
.text(0, 0, item.action, TEXT.HEADER)
|
|
.setOrigin(0.5, 0.5);
|
|
|
|
this.add(this.box);
|
|
this.add(this.text);
|
|
|
|
this.setSize(ITEM_WIDTH, ITEM_HEIGHT);
|
|
this.setInteractive();
|
|
}
|
|
|
|
clickHandler() {
|
|
this.scene.activeItem = this;
|
|
this.select();
|
|
}
|
|
|
|
select() {
|
|
this.scene.children.list.forEach((item) => {
|
|
if (item.state === 'select') item.deselect();
|
|
});
|
|
this.box.setFillStyle(COLOURS.SELECT);
|
|
this.state = 'select';
|
|
}
|
|
|
|
activate() {
|
|
this.scene.children.list.forEach((item) => {
|
|
if (item.state === 'select') item.deselect();
|
|
});
|
|
this.box.setFillStyle(0xff0000);
|
|
this.state = 'activate';
|
|
}
|
|
|
|
deselect() {
|
|
this.box.setFillStyle(0x222222);
|
|
this.state = 'deselect';
|
|
}
|
|
}
|
|
|
|
class ItemList extends Phaser.Scene {
|
|
constructor() {
|
|
super({ key: 'ItemList', active: true });
|
|
}
|
|
|
|
updateData(parent, key) {
|
|
if (key === 'itemList') {
|
|
this.scene.restart();
|
|
}
|
|
}
|
|
|
|
create() {
|
|
const itemList = this.registry.get('itemList');
|
|
const ws = this.registry.get('ws');
|
|
|
|
this.cameras.main.setViewport(X, Y, WIDTH, HEIGHT);
|
|
|
|
this.registry.events.on('changedata', this.updateData, this);
|
|
this.registry.events.on('setdata', this.updateData, this);
|
|
|
|
if (!itemList) return false;
|
|
|
|
this.add.text(WIDTH / 4, HEIGHT / 4, 'Inventory', TEXT.HEADER);
|
|
itemList.forEach((item, i) => {
|
|
const ITEM_X = ITEM_WIDTH;
|
|
const ITEM_Y = ITEM_HEIGHT * 1.2 * i + HEIGHT / 2.5;
|
|
|
|
const itemBox = new Item(this, item, ITEM_X, ITEM_Y);
|
|
this.input.setDraggable(itemBox);
|
|
this.add.existing(itemBox);
|
|
});
|
|
|
|
this.input.on('dragstart', (pointer, box) => {
|
|
box.clickHandler();
|
|
});
|
|
|
|
this.input.on('drag', (pointer, box, dragX, dragY) => {
|
|
const hitBox = itemCheckHitbox(this.scene, pointer);
|
|
if (hitBox) hitBox.itemSelect();
|
|
box.setPosition(dragX, dragY);
|
|
});
|
|
|
|
this.input.on('dragend', (pointer, box) => {
|
|
box.deselect();
|
|
const hitBox = itemCheckHitbox(this.scene, pointer);
|
|
if (hitBox) {
|
|
ws.sendItemUse(box.item.id, hitBox.cryp.id);
|
|
}
|
|
box.setPosition(box.origX, box.origY);
|
|
});
|
|
|
|
return this;
|
|
}
|
|
|
|
cleanUp() {
|
|
this.registry.events.off('changedata', this.updateData, this);
|
|
this.registry.events.off('setdata', this.updateData, this);
|
|
this.scene.remove();
|
|
}
|
|
}
|
|
|
|
module.exports = ItemList;
|