From 3596a03a1b86c503c81d617d129aca4ce1dd0ada Mon Sep 17 00:00:00 2001 From: Big Bad Waffle Date: Wed, 20 Dec 2017 15:24:21 +0200 Subject: [PATCH] fixes #297 --- src/client/js/components/inventory.js | 3 +- .../ui/templates/inventory/inventory.js | 78 ++++++++++++++++--- src/client/ui/templates/inventory/styles.less | 61 ++++++++++++++- .../ui/templates/inventory/template.html | 13 +++- src/server/components/inventory.js | 36 ++++++++- src/server/security/router.js | 2 +- 6 files changed, 177 insertions(+), 16 deletions(-) diff --git a/src/client/js/components/inventory.js b/src/client/js/components/inventory.js index 6c10e70c..e286f47f 100644 --- a/src/client/js/components/inventory.js +++ b/src/client/js/components/inventory.js @@ -47,7 +47,8 @@ define([ if (!rerender) { rerender = ( (findItem.pos != nItem.pos) || - (findItem.eq != nItem.eq) + (findItem.eq != nItem.eq) || + (findItem.quantity != nItem.quantity) ); } diff --git a/src/client/ui/templates/inventory/inventory.js b/src/client/ui/templates/inventory/inventory.js index 437ad197..51a6b2a8 100644 --- a/src/client/ui/templates/inventory/inventory.js +++ b/src/client/ui/templates/inventory/inventory.js @@ -65,6 +65,10 @@ define([ this.find('.grid') .on('mousemove', this.onMouseMove.bind(this)) .on('mouseleave', this.onMouseDown.bind(this, null, null, false)); + + this.find('.split-box .amount').on('mousewheel', this.onChangeStackAmount.bind(this)); + this.find('.split-box').on('click', this.splitStackEnd.bind(this, true)); + this.find('.split-box .button').on('click', this.splitStackEnd.bind(this)); }, build: function () { @@ -181,6 +185,8 @@ define([ events.emit('onHideItemTooltip', this.hoverItem); this.hoverItem = null; } else if (this.dragItem) { + var method = 'moveItem'; + if ((this.hoverCell) && (this.hoverCell[0] != this.dragItem[0])) { var placeholder = $('
') .insertAfter(this.dragItem); @@ -200,14 +206,22 @@ define([ var hoverCellItem = this.hoverCell.data('item'); if (hoverCellItem) { - msgs.push({ - id: hoverCellItem.id, - pos: this.hoverCell.index() - }); - - this.items.find(function (i) { - return (i.id == hoverCellItem.id) - }, this).pos = this.hoverCell.index(); + if (hoverCellItem.name != this.dragItem.data('item').name) { + msgs.push({ + id: hoverCellItem.id, + pos: this.hoverCell.index() + }); + + this.items.find(function (i) { + return (i.id == hoverCellItem.id) + }, this).pos = this.hoverCell.index(); + } else { + method = 'combineStacks'; + msgs = { + fromId: this.dragItem.data('item').id, + toId: hoverCellItem.id, + }; + } } client.request({ @@ -215,7 +229,7 @@ define([ method: 'performAction', data: { cpn: 'inventory', - method: 'moveItem', + method: method, data: msgs } }); @@ -286,6 +300,10 @@ define([ text: 'mail', callback: this.openMailUi.bind(this, item) }, + split: { + text: 'split stack', + callback: this.splitStackStart.bind(this, item) + }, divider: '----------' }; @@ -332,6 +350,9 @@ define([ config.push(menuItems.destroy); } + if (item.quantity > 1) + config.push(menuItems.split); + if ((!item.noDrop) && (!item.quest)) config.push(menuItems.mail); @@ -342,6 +363,45 @@ define([ return false; }, + splitStackStart: function (item) { + var box = this.find('.split-box').show(); + box.data('item', item); + + box.find('.amount').html(1); + }, + + splitStackEnd: function (cancel, e) { + var box = this.find('.split-box'); + + if ((!e) || (e.target != box.find('.button')[0])) + return; + + box.hide(); + + client.request({ + cpn: 'player', + method: 'performAction', + data: { + cpn: 'inventory', + method: 'splitStack', + data: { + itemId: box.data('item').id, + stackSize: ~~this.find('.split-box .amount').html() + } + } + }); + }, + + onChangeStackAmount: function (e) { + var item = this.find('.split-box').data('item'); + var delta = (e.originalEvent.deltaY > 0) ? -1 : 1; + if (this.shiftDown) + delta *= 10; + var amount = this.find('.split-box .amount'); + + amount.html(Math.max(1, Math.min(item.quantity, ~~amount.html() + delta))); + }, + hideTooltip: function () { if (this.dragEl) { this.hoverCell = null; diff --git a/src/client/ui/templates/inventory/styles.less b/src/client/ui/templates/inventory/styles.less index ee21e07d..67062629 100644 --- a/src/client/ui/templates/inventory/styles.less +++ b/src/client/ui/templates/inventory/styles.less @@ -116,6 +116,65 @@ } } + .split-box { + display: none; + background-color: fade(@blackD, 85%); + text-align: center; + position: absolute; + left: 0%; + top: 0%; + width: 100%; + height: 100%; + + .inner { + border: 5px solid @blackB; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 200px; + height: 143px; + + > .heading { + color: @blueA; + width: 100%; + height: 36px; + background-color: @blackB; + + .heading-text { + padding-top: 8px; + margin: auto; + } + } + + .bottom { + height: calc(100% - 36px); + background-color: @blackC; + padding: 10px; + + .amount { + color: @white; + text-align: center; + width: 100%; + height: 36px; + padding-top: 8px; + } + + .button { + width: 100%; + height: 36px; + margin-top: 5px; + background-color: @blueC; + color: @white; + + &:hover { + background-color: @blueB; + } + } + } + } + } + .tooltip { display: none; position: absolute; @@ -164,4 +223,4 @@ display: none; } } -} \ No newline at end of file +} diff --git a/src/client/ui/templates/inventory/template.html b/src/client/ui/templates/inventory/template.html index 72d302dd..9d793851 100644 --- a/src/client/ui/templates/inventory/template.html +++ b/src/client/ui/templates/inventory/template.html @@ -7,4 +7,15 @@
- \ No newline at end of file +
+
+
+
stack size
+
+
+
+
split
+
+
+
+ diff --git a/src/server/components/inventory.js b/src/server/components/inventory.js index e86beb2f..b3018575 100644 --- a/src/server/components/inventory.js +++ b/src/server/components/inventory.js @@ -73,7 +73,7 @@ define([ var item = items[i]; var pos = item.pos; - var newItem = this.getItem(item, true); + var newItem = this.getItem(item, true, true); newItem.pos = pos; } @@ -214,6 +214,36 @@ define([ this.obj.syncer.setArray(true, 'inventory', 'getItems', item); }, + splitStack: function (msg) { + var item = this.findItem(msg.itemId); + if (!item) + return; + else if ((!item.quantity) || (item.quantity < msg.stackSize) || (msg.stackSize < 1)) + return; + + var newItem = extend(true, {}, item); + item.quantity -= msg.stackSize; + newItem.quantity = msg.stackSize; + + this.getItem(newItem, true, true); + + this.obj.syncer.setArray(true, 'inventory', 'getItems', item); + }, + + combineStacks: function (msg) { + var fromItem = this.findItem(msg.fromId); + var toItem = this.findItem(msg.toId); + + if ((!fromItem) || (!toItem)) + return; + else if ((!fromItem.quantity) || (!toItem.quantity)) + return; + + toItem.quantity += fromItem.quantity; + this.obj.syncer.setArray(true, 'inventory', 'getItems', toItem); + this.destroyItem(fromItem.id); + }, + useItem: function (itemId) { var item = this.findItem(itemId); if (!item) @@ -554,7 +584,7 @@ define([ return true; }, - getItem: function (item, hideMessage) { + getItem: function (item, hideMessage, noStack) { events.emit('onBeforeGetItem', item, this.obj); //We need to know if a mob dropped it for quest purposes @@ -571,7 +601,7 @@ define([ var quantity = item.quantity; var exists = false; - if (((item.material) || (item.quest) || (item.quantity)) && (!item.noStack) && (!item.uses)) { + if (((item.material) || (item.quest) || (item.quantity)) && (!item.noStack) && (!item.uses) && (!noStack)) { var existItem = this.items.find(i => (i.name == item.name)); if (existItem) { exists = true; diff --git a/src/server/security/router.js b/src/server/security/router.js index 57a2a23e..5e14754a 100644 --- a/src/server/security/router.js +++ b/src/server/security/router.js @@ -22,7 +22,7 @@ define([ dialogue: ['talk'], gatherer: ['gather'], quests: ['complete'], - inventory: ['activateMtx', 'useItem', 'moveItem', 'enchantItem', 'getEnchantMaterials', 'learnAbility', 'unlearnAbility', 'dropItem', 'destroyItem', 'salvageItem', 'stashItem', 'mailItem'], + inventory: ['combineStacks', 'splitStack', 'activateMtx', 'useItem', 'moveItem', 'enchantItem', 'getEnchantMaterials', 'learnAbility', 'unlearnAbility', 'dropItem', 'destroyItem', 'salvageItem', 'stashItem', 'mailItem'], equipment: ['equip', 'unequip'], stash: ['withdraw'], trade: ['buySell'],