244 lines
8.7 KiB
JavaScript
244 lines
8.7 KiB
JavaScript
const Phaser = require('phaser');
|
|
const { countBy } = require('lodash');
|
|
|
|
const Item = require('./elements/item');
|
|
|
|
const {
|
|
TEXT,
|
|
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 = ITEM_LIST.itemWidth();
|
|
const ITEM_HEIGHT = ITEM_LIST.itemHeight();
|
|
|
|
const INV_X = X + ITEM_WIDTH * 0.325;
|
|
const INV_Y = Y + ITEM_HEIGHT;
|
|
const INV_ROWS = 3;
|
|
const INV_COLUMNS = 3;
|
|
|
|
const COMB_X = INV_X + ITEM_WIDTH * 6.75;
|
|
const COMB_Y = INV_Y;
|
|
const COMB_ROWS = 2;
|
|
const COMB_COLUMNS = 2;
|
|
|
|
const BOX_X = X + ITEM_WIDTH * 2;
|
|
const BOX_Y = Y + ITEM_HEIGHT * 5;
|
|
const BOX_ROWS = 3;
|
|
const BOX_COLUMNS = 6;
|
|
|
|
|
|
const drawVbox = (graphics) => {
|
|
const boxDrawX = BOX_X - ITEM_WIDTH * 0.05;
|
|
const boxDrawY = BOX_Y - ITEM_HEIGHT * 0.05;
|
|
for (let i = 0; i <= BOX_COLUMNS; i += 1) {
|
|
const x = boxDrawX + i * ITEM_WIDTH * 1.1;
|
|
graphics.lineBetween(x, boxDrawY, x, boxDrawY + ITEM_HEIGHT * 1.1 * BOX_ROWS);
|
|
}
|
|
for (let i = 0; i <= BOX_ROWS; i += 1) {
|
|
const y = boxDrawY + i * ITEM_HEIGHT * 1.1;
|
|
graphics.lineBetween(boxDrawX, y, boxDrawX + ITEM_WIDTH * 1.1 * BOX_COLUMNS, y);
|
|
}
|
|
};
|
|
|
|
const drawInventory = (graphics) => {
|
|
const invDrawX = INV_X - ITEM_WIDTH * 0.05;
|
|
const invDrawY = INV_Y - ITEM_HEIGHT * 0.05;
|
|
for (let i = 0; i <= INV_COLUMNS; i += 1) {
|
|
const x = invDrawX + i * ITEM_WIDTH * 1.1;
|
|
graphics.lineBetween(x, invDrawY, x, invDrawY + ITEM_HEIGHT * 1.1 * INV_ROWS);
|
|
}
|
|
for (let i = 0; i <= INV_ROWS; i += 1) {
|
|
const y = invDrawY + i * ITEM_HEIGHT * 1.1;
|
|
graphics.lineBetween(invDrawX, y, invDrawX + ITEM_WIDTH * 1.1 * INV_COLUMNS, y);
|
|
}
|
|
};
|
|
|
|
const drawCombiner = (graphics) => {
|
|
const combDrawX = COMB_X - ITEM_WIDTH * 0.05;
|
|
const combDrawY = COMB_Y - ITEM_HEIGHT * 0.05;
|
|
for (let i = 0; i <= COMB_COLUMNS; i += 1) {
|
|
const x = combDrawX + i * ITEM_WIDTH * 1.1;
|
|
graphics.lineBetween(x, combDrawY, x, combDrawY + ITEM_HEIGHT * 1.1 * COMB_ROWS);
|
|
}
|
|
for (let i = 0; i <= COMB_ROWS; i += 1) {
|
|
const y = combDrawY + i * ITEM_HEIGHT * 1.1;
|
|
graphics.lineBetween(combDrawX, y, combDrawX + ITEM_WIDTH * 1.1 * COMB_COLUMNS, y);
|
|
}
|
|
};
|
|
|
|
class CombinerHitBox extends Phaser.GameObjects.Rectangle {
|
|
constructor(scene, x, y, i) {
|
|
super(scene, x, y, ITEM_WIDTH, ITEM_HEIGHT, 0x000000);
|
|
this.setOrigin(0);
|
|
this.x = x;
|
|
this.y = y;
|
|
this.slot = i;
|
|
this.item = false;
|
|
this.itemSelect = () => this.setFillStyle(0x222222);
|
|
this.itemDeselect = () => this.setFillStyle(0x000000);
|
|
}
|
|
|
|
allocate(item) {
|
|
if (this.item) this.deallocate();
|
|
item.setPosition(this.x + item.width / 2, this.y + item.height / 2);
|
|
this.item = item;
|
|
}
|
|
|
|
deallocate() {
|
|
this.item.setPosition(this.item.origX, this.item.origY);
|
|
this.item = false;
|
|
}
|
|
}
|
|
|
|
const itemCheckHitbox = (scene, pointer) => {
|
|
const { list } = scene.scene.get('MenuCrypList').children;
|
|
const hitboxes = list.filter(c => c.cryp)
|
|
.concat(scene.children.list.filter(c => c instanceof CombinerHitBox));
|
|
|
|
let found;
|
|
for (let i = 0; i < hitboxes.length; i += 1) {
|
|
if (Phaser.Geom.Rectangle.ContainsPoint(hitboxes[i].getBounds(), pointer.position)) {
|
|
found = hitboxes[i];
|
|
} else {
|
|
hitboxes[i].itemDeselect();
|
|
}
|
|
}
|
|
|
|
return found;
|
|
};
|
|
|
|
class ItemList extends Phaser.Scene {
|
|
constructor() {
|
|
super({ key: 'ItemList', active: true });
|
|
}
|
|
|
|
updateData(parent, key, data) {
|
|
if (key === 'vbox') {
|
|
this.registry.events.off('changedata', this.updateData, this);
|
|
this.registry.events.off('setdata', this.updateData, this);
|
|
this.scene.restart(data);
|
|
}
|
|
}
|
|
|
|
create(vbox) {
|
|
this.registry.events.on('changedata', this.updateData, this);
|
|
this.registry.events.on('setdata', this.updateData, this);
|
|
this.combinerItems = [-1, -1, -1];
|
|
if (!vbox.free) return false;
|
|
this.addStatic(vbox);
|
|
this.addItems(vbox);
|
|
this.addClickHandlers(vbox);
|
|
return this;
|
|
}
|
|
|
|
addStatic(vbox) {
|
|
const ws = this.registry.get('ws');
|
|
const graphics = this.add.graphics();
|
|
graphics.lineStyle(5, 0x808080, 1.0);
|
|
drawCombiner(graphics);
|
|
drawInventory(graphics);
|
|
drawVbox(graphics);
|
|
this.add.text(X + WIDTH / 10, Y, 'Inventory', TEXT.HEADER);
|
|
this.add.text(X + WIDTH * 11 / 20, Y, 'Combiner', TEXT.HEADER);
|
|
this.add.text(X + WIDTH * 7 / 20, Y + HEIGHT / 2, 'Varibox', TEXT.HEADER);
|
|
|
|
const reroll = this.add.rectangle(0, Y + HEIGHT * 2 / 3, ITEM_WIDTH * 1.5, ITEM_HEIGHT * 1.5, 0x222222)
|
|
.setInteractive()
|
|
.setOrigin(0)
|
|
.on('pointerdown', () => this.registry.get('ws').sendVboxDiscard(vbox.game));
|
|
this.add.text(reroll.getCenter().x, reroll.getCenter().y, 'Reroll', TEXT.HEADER)
|
|
.setOrigin(0.5, 0.5);
|
|
|
|
const combine = this.add.rectangle(ITEM_WIDTH * 1.1 + COMB_X, ITEM_HEIGHT * 1.1 + COMB_Y, ITEM_WIDTH, ITEM_HEIGHT, 0x222222)
|
|
.setInteractive()
|
|
.setOrigin(0)
|
|
.on('pointerdown', () => {
|
|
ws.sendVboxCombine(vbox.game, this.combinerItems);
|
|
this.combinerItems = [-1, -1, -1];
|
|
this.children.list.filter(obj => obj instanceof CombinerHitBox).forEach(cBox => cBox.deallocate());
|
|
});
|
|
this.add.text(combine.getCenter().x, combine.getCenter().y, 'C', TEXT.HEADER)
|
|
.setOrigin(0.5, 0.5);
|
|
}
|
|
|
|
addItems(vbox) {
|
|
const ws = this.registry.get('ws');
|
|
for (let i = 0; i < 3; i += 1) {
|
|
const ITEM_X = ITEM_WIDTH * 1.1 * (i % COMB_COLUMNS) + COMB_X;
|
|
const ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / COMB_COLUMNS) + COMB_Y;
|
|
this.add.existing(new CombinerHitBox(this, ITEM_X, ITEM_Y, i));
|
|
}
|
|
|
|
vbox.bound.forEach((action, i) => {
|
|
const ITEM_X = ITEM_WIDTH * 1.1 * (i % INV_COLUMNS) + INV_X + ITEM_WIDTH * 0.5;
|
|
const ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / INV_COLUMNS) + INV_Y + ITEM_HEIGHT * 0.5;
|
|
const itemBox = new Item(this, action, i, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT);
|
|
this.input.setDraggable(itemBox);
|
|
this.add.existing(itemBox);
|
|
});
|
|
|
|
vbox.free.forEach((action, i) => {
|
|
const ITEM_X = ITEM_WIDTH * 1.1 * (i % BOX_COLUMNS) + BOX_X + ITEM_WIDTH * 0.5;
|
|
const ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / BOX_COLUMNS) + BOX_Y + ITEM_HEIGHT * 0.5;
|
|
const itemBox = new Item(this, action, i, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT);
|
|
itemBox
|
|
.setInteractive()
|
|
.on('pointerdown', () => {
|
|
ws.sendVboxAccept(vbox.game, i);
|
|
});
|
|
this.add.existing(itemBox);
|
|
});
|
|
}
|
|
|
|
addClickHandlers(vbox) {
|
|
const ws = this.registry.get('ws');
|
|
this.input.on('dragstart', (pointer, item) => {
|
|
if (!(item instanceof Item)) return false;
|
|
item.clickHandler();
|
|
return true;
|
|
});
|
|
|
|
this.input.on('drag', (pointer, item, dragX, dragY) => {
|
|
if (!(item instanceof Item)) return false;
|
|
item.setPosition(dragX, dragY);
|
|
const hitBox = itemCheckHitbox(this, pointer);
|
|
if (hitBox) hitBox.itemSelect();
|
|
return true;
|
|
});
|
|
|
|
this.input.on('dragend', (pointer, item) => {
|
|
if (!(item instanceof Item)) return false;
|
|
item.deselect();
|
|
const hitBox = itemCheckHitbox(this, pointer);
|
|
if (hitBox) {
|
|
hitBox.itemDeselect();
|
|
if (hitBox instanceof CombinerHitBox) {
|
|
console.log(`Moved ${item.item} into slot ${hitBox.slot}`);
|
|
hitBox.allocate(item);
|
|
this.combinerItems[hitBox.slot] = item.index;
|
|
console.log(this.combinerItems);
|
|
return true;
|
|
}
|
|
// else ws.sendItemUse(vbox.find(li => li.action === box.action).id, hitBox.cryp.id);
|
|
}
|
|
const clearIndex = this.combinerItems.indexOf(item.index);
|
|
if (clearIndex !== -1) this.combinerItems[clearIndex] = -1;
|
|
item.setPosition(item.origX, item.origY);
|
|
console.log(this.combinerItems);
|
|
return true;
|
|
});
|
|
}
|
|
|
|
cleanUp() {
|
|
this.registry.events.off('changedata', this.updateData, this);
|
|
this.registry.events.off('setdata', this.updateData, this);
|
|
this.scene.remove();
|
|
}
|
|
}
|
|
|
|
module.exports = ItemList;
|