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

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

@ -74,10 +74,24 @@ class CombinerHitBox extends Phaser.GameObjects.Rectangle {
constructor(scene, x, y, i) { constructor(scene, x, y, i) {
super(scene, x, y, ITEM_WIDTH, ITEM_HEIGHT, 0x000000); super(scene, x, y, ITEM_WIDTH, ITEM_HEIGHT, 0x000000);
this.setOrigin(0); this.setOrigin(0);
this.x = x;
this.y = y;
this.slot = i; this.slot = i;
this.item = false;
this.itemSelect = () => this.setFillStyle(0x222222); this.itemSelect = () => this.setFillStyle(0x222222);
this.itemDeselect = () => this.setFillStyle(0x000000); 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 itemCheckHitbox = (scene, pointer) => {
@ -113,6 +127,7 @@ class ItemList extends Phaser.Scene {
create(vbox) { create(vbox) {
this.registry.events.on('changedata', this.updateData, this); this.registry.events.on('changedata', this.updateData, this);
this.registry.events.on('setdata', this.updateData, this); this.registry.events.on('setdata', this.updateData, this);
this.combinerItems = [-1, -1, -1];
if (!vbox.free) return false; if (!vbox.free) return false;
this.addStatic(vbox); this.addStatic(vbox);
this.addItems(vbox); this.addItems(vbox);
@ -121,6 +136,7 @@ class ItemList extends Phaser.Scene {
} }
addStatic(vbox) { addStatic(vbox) {
const ws = this.registry.get('ws');
const graphics = this.add.graphics(); const graphics = this.add.graphics();
graphics.lineStyle(5, 0x808080, 1.0); graphics.lineStyle(5, 0x808080, 1.0);
drawCombiner(graphics); drawCombiner(graphics);
@ -137,19 +153,30 @@ class ItemList extends Phaser.Scene {
this.add.text(reroll.getCenter().x, reroll.getCenter().y, 'Reroll', TEXT.HEADER) this.add.text(reroll.getCenter().x, reroll.getCenter().y, 'Reroll', TEXT.HEADER)
.setOrigin(0.5, 0.5); .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) { addItems(vbox) {
for (let i = 0; i < (COMB_COLUMNS * COMB_ROWS); i += 1) { const ws = this.registry.get('ws');
const ITEM_X = ITEM_WIDTH * 1.1 * (i % COMB_COLUMNS) + INV_X + ITEM_WIDTH * 6.75; for (let i = 0; i < 3; i += 1) {
const ITEM_Y = ITEM_HEIGHT * 1.1 * Math.floor(i / COMB_COLUMNS) + INV_Y; 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)); this.add.existing(new CombinerHitBox(this, ITEM_X, ITEM_Y, i));
} }
vbox.bound.forEach((action, i) => { vbox.bound.forEach((action, i) => {
const ITEM_X = ITEM_WIDTH * 1.1 * (i % INV_COLUMNS) + INV_X + ITEM_WIDTH * 0.5; 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 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.input.setDraggable(itemBox);
this.add.existing(itemBox); this.add.existing(itemBox);
}); });
@ -157,41 +184,51 @@ class ItemList extends Phaser.Scene {
vbox.free.forEach((action, i) => { vbox.free.forEach((action, i) => {
const ITEM_X = ITEM_WIDTH * 1.1 * (i % BOX_COLUMNS) + BOX_X + ITEM_WIDTH * 0.5; 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 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 itemBox
.setInteractive() .setInteractive()
.on('pointerdown', () => { .on('pointerdown', () => {
this.registry.get('ws').sendVboxAccept(vbox.game, i); ws.sendVboxAccept(vbox.game, i);
}); });
this.add.existing(itemBox); this.add.existing(itemBox);
}); });
} }
addClickHandlers(itemList) { addClickHandlers(vbox) {
const ws = this.registry.get('ws'); const ws = this.registry.get('ws');
this.input.on('dragstart', (pointer, box) => { this.input.on('dragstart', (pointer, item) => {
if (!(box instanceof Item)) return false; if (!(item instanceof Item)) return false;
box.clickHandler(); item.clickHandler();
return true; return true;
}); });
this.input.on('drag', (pointer, box, dragX, dragY) => { this.input.on('drag', (pointer, item, dragX, dragY) => {
if (!(box instanceof Item)) return false; if (!(item instanceof Item)) return false;
box.setPosition(dragX, dragY); item.setPosition(dragX, dragY);
const hitBox = itemCheckHitbox(this, pointer); const hitBox = itemCheckHitbox(this, pointer);
if (hitBox) hitBox.itemSelect(); if (hitBox) hitBox.itemSelect();
return true; return true;
}); });
this.input.on('dragend', (pointer, box) => { this.input.on('dragend', (pointer, item) => {
if (!(box instanceof Item)) return false; if (!(item instanceof Item)) return false;
box.deselect(); item.deselect();
const hitBox = itemCheckHitbox(this, pointer); const hitBox = itemCheckHitbox(this, pointer);
box.setPosition(box.origX, box.origY); if (hitBox) {
if (!hitBox) return false; hitBox.itemDeselect();
if (hitBox instanceof CombinerHitBox) console.log(`Moved item into slot ${hitBox.slot}`); if (hitBox instanceof CombinerHitBox) {
else ws.sendItemUse(itemList.find(li => li.action === box.action).id, hitBox.cryp.id); console.log(`Moved ${item.item} into slot ${hitBox.slot}`);
hitBox.itemDeselect(); 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; return true;
}); });
} }

5
client/src/socket.js
View File

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