From 1179dce2aba99499ce37b7e00e327b2669dd92a8 Mon Sep 17 00:00:00 2001 From: Mashy Date: Mon, 18 Feb 2019 19:54:35 +1000 Subject: [PATCH] Client side combos Pog --- client/src/scenes/elements/item.js | 15 ++++-- client/src/scenes/item.list.js | 79 ++++++++++++++++++++++-------- client/src/socket.js | 5 ++ 3 files changed, 74 insertions(+), 25 deletions(-) diff --git a/client/src/scenes/elements/item.js b/client/src/scenes/elements/item.js index 092a5508..c7936d0e 100644 --- a/client/src/scenes/elements/item.js +++ b/client/src/scenes/elements/item.js @@ -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 diff --git a/client/src/scenes/item.list.js b/client/src/scenes/item.list.js index 5eb6d556..2aac1e55 100644 --- a/client/src/scenes/item.list.js +++ b/client/src/scenes/item.list.js @@ -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); - hitBox.itemDeselect(); + 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; }); } diff --git a/client/src/socket.js b/client/src/socket.js index 535048d1..26774ef7 100644 --- a/client/src/socket.js +++ b/client/src/socket.js @@ -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, }; }