ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Client side combos Pog

Browse Source
This commit is contained in:
Mashy 2019-02-18 19:54:35 +10:00
parent a3759f7568
commit 1179dce2ab
3 changed files with 74 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/src/scenes/elements/item.js
View File

@ -6,22 +6,24 @@ const {
} = require('../constants');
class Item extends Phaser.GameObjects.Container {
constructor(scene, action, x, y, width, height) {
constructor(scene, item, index, x, y, width, height) {
super(scene, x, y);
this.state = 'deselect';
this.action = action;
this.scene = scene;
this.item = item;
this.index = index;
this.origX = x;
this.origY = y;
this.width = width;
this.height = height;
this.box = scene.add
.rectangle(0, 0, width, height, 0x222222);
this.text = scene.add
// .text(0, 0, `${action} x${count}`, TEXT.NORMAL)
.text(0, 0, `${action}`, TEXT.NORMAL)
.text(0, 0, `${item}`, TEXT.NORMAL)
.setOrigin(0.5, 0.5);
this.add(this.box);
@ -31,6 +33,11 @@ class Item extends Phaser.GameObjects.Container {
this.setInteractive();
}
changeOrigin(x, y) {
this.origX = x + this.width / 2;
this.origY = y + this.height / 2;
}
clickHandler() {
this.scene.activeItem = this;
// Set the main context to display the item info

77
client/src/scenes/item.list.js
View File

@ -74,10 +74,24 @@ 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) => {
@ -113,6 +127,7 @@ class ItemList extends Phaser.Scene {
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);
@ -121,6 +136,7 @@ class ItemList extends Phaser.Scene {
}
addStatic(vbox) {
const ws = this.registry.get('ws');
const graphics = this.add.graphics();
graphics.lineStyle(5, 0x808080, 1.0);
drawCombiner(graphics);
@ -137,19 +153,30 @@ class ItemList extends Phaser.Scene {
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) {
for (let i = 0; i < (COMB_COLUMNS * COMB_ROWS); i += 1) {
const ITEM_X = ITEM_WIDTH * 1.1 * (i % COMB_COLUMNS) + INV_X + ITEM_WIDTH * 6.75;
const ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / COMB_COLUMNS) + INV_Y;
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, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT);
const itemBox = new Item(this, action, i, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT);
this.input.setDraggable(itemBox);
this.add.existing(itemBox);
});
@ -157,41 +184,51 @@ class ItemList extends Phaser.Scene {
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, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT);
const itemBox = new Item(this, action, i, ITEM_X, ITEM_Y, ITEM_WIDTH, ITEM_HEIGHT);
itemBox
.setInteractive()
.on('pointerdown', () => {
this.registry.get('ws').sendVboxAccept(vbox.game, i);
ws.sendVboxAccept(vbox.game, i);
});
this.add.existing(itemBox);
});
}
addClickHandlers(itemList) {
addClickHandlers(vbox) {
const ws = this.registry.get('ws');
this.input.on('dragstart', (pointer, box) => {
if (!(box instanceof Item)) return false;
box.clickHandler();
this.input.on('dragstart', (pointer, item) => {
if (!(item instanceof Item)) return false;
item.clickHandler();
return true;
});
this.input.on('drag', (pointer, box, dragX, dragY) => {
if (!(box instanceof Item)) return false;
box.setPosition(dragX, dragY);
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, box) => {
if (!(box instanceof Item)) return false;
box.deselect();
this.input.on('dragend', (pointer, item) => {
if (!(item instanceof Item)) return false;
item.deselect();
const hitBox = itemCheckHitbox(this, pointer);
box.setPosition(box.origX, box.origY);
if (!hitBox) return false;
if (hitBox instanceof CombinerHitBox) console.log(`Moved item into slot ${hitBox.slot}`);
else ws.sendItemUse(itemList.find(li => li.action === box.action).id, hitBox.cryp.id);
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;
});
}

5
client/src/socket.js
View File

@ -93,6 +93,10 @@ function createSocket(events) {
send({ method: 'vbox_discard', params: { game_id: gameId } });
}
function sendVboxCombine(gameId, indices) {
send({ method: 'vbox_combine', params: { game_id: gameId, indices } });
}
function sendVboxAccept(gameId, i) {
send({ method: 'vbox_accept', params: { game_id: gameId, index: i } });
}
@ -290,6 +294,7 @@ function createSocket(events) {
sendVboxState,
sendVboxAccept,
sendVboxDiscard,
sendVboxCombine,
connect,
};
}