@@ -47,7 +47,8 @@ define([ | |||||
if (!rerender) { | if (!rerender) { | ||||
rerender = ( | rerender = ( | ||||
(findItem.pos != nItem.pos) || | (findItem.pos != nItem.pos) || | ||||
(findItem.eq != nItem.eq) | |||||
(findItem.eq != nItem.eq) || | |||||
(findItem.quantity != nItem.quantity) | |||||
); | ); | ||||
} | } | ||||
@@ -65,6 +65,10 @@ define([ | |||||
this.find('.grid') | this.find('.grid') | ||||
.on('mousemove', this.onMouseMove.bind(this)) | .on('mousemove', this.onMouseMove.bind(this)) | ||||
.on('mouseleave', this.onMouseDown.bind(this, null, null, false)); | .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 () { | build: function () { | ||||
@@ -181,6 +185,8 @@ define([ | |||||
events.emit('onHideItemTooltip', this.hoverItem); | events.emit('onHideItemTooltip', this.hoverItem); | ||||
this.hoverItem = null; | this.hoverItem = null; | ||||
} else if (this.dragItem) { | } else if (this.dragItem) { | ||||
var method = 'moveItem'; | |||||
if ((this.hoverCell) && (this.hoverCell[0] != this.dragItem[0])) { | if ((this.hoverCell) && (this.hoverCell[0] != this.dragItem[0])) { | ||||
var placeholder = $('<div></div>') | var placeholder = $('<div></div>') | ||||
.insertAfter(this.dragItem); | .insertAfter(this.dragItem); | ||||
@@ -200,14 +206,22 @@ define([ | |||||
var hoverCellItem = this.hoverCell.data('item'); | var hoverCellItem = this.hoverCell.data('item'); | ||||
if (hoverCellItem) { | 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({ | client.request({ | ||||
@@ -215,7 +229,7 @@ define([ | |||||
method: 'performAction', | method: 'performAction', | ||||
data: { | data: { | ||||
cpn: 'inventory', | cpn: 'inventory', | ||||
method: 'moveItem', | |||||
method: method, | |||||
data: msgs | data: msgs | ||||
} | } | ||||
}); | }); | ||||
@@ -286,6 +300,10 @@ define([ | |||||
text: 'mail', | text: 'mail', | ||||
callback: this.openMailUi.bind(this, item) | callback: this.openMailUi.bind(this, item) | ||||
}, | }, | ||||
split: { | |||||
text: 'split stack', | |||||
callback: this.splitStackStart.bind(this, item) | |||||
}, | |||||
divider: '----------' | divider: '----------' | ||||
}; | }; | ||||
@@ -332,6 +350,9 @@ define([ | |||||
config.push(menuItems.destroy); | config.push(menuItems.destroy); | ||||
} | } | ||||
if (item.quantity > 1) | |||||
config.push(menuItems.split); | |||||
if ((!item.noDrop) && (!item.quest)) | if ((!item.noDrop) && (!item.quest)) | ||||
config.push(menuItems.mail); | config.push(menuItems.mail); | ||||
@@ -342,6 +363,45 @@ define([ | |||||
return false; | 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 () { | hideTooltip: function () { | ||||
if (this.dragEl) { | if (this.dragEl) { | ||||
this.hoverCell = null; | this.hoverCell = null; | ||||
@@ -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 { | .tooltip { | ||||
display: none; | display: none; | ||||
position: absolute; | position: absolute; | ||||
@@ -164,4 +223,4 @@ | |||||
display: none; | display: none; | ||||
} | } | ||||
} | } | ||||
} | |||||
} |
@@ -7,4 +7,15 @@ | |||||
</div> | </div> | ||||
<div class="grid"></div> | <div class="grid"></div> | ||||
<div class="tooltip"></div> | <div class="tooltip"></div> | ||||
</div> | |||||
<div class="split-box"> | |||||
<div class="inner"> | |||||
<div class="heading"> | |||||
<div class="heading-text">stack size</div> | |||||
</div> | |||||
<div class="bottom"> | |||||
<div class="amount"></div> | |||||
<div class="button">split</div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</div> |
@@ -73,7 +73,7 @@ define([ | |||||
var item = items[i]; | var item = items[i]; | ||||
var pos = item.pos; | var pos = item.pos; | ||||
var newItem = this.getItem(item, true); | |||||
var newItem = this.getItem(item, true, true); | |||||
newItem.pos = pos; | newItem.pos = pos; | ||||
} | } | ||||
@@ -214,6 +214,36 @@ define([ | |||||
this.obj.syncer.setArray(true, 'inventory', 'getItems', item); | 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) { | useItem: function (itemId) { | ||||
var item = this.findItem(itemId); | var item = this.findItem(itemId); | ||||
if (!item) | if (!item) | ||||
@@ -554,7 +584,7 @@ define([ | |||||
return true; | return true; | ||||
}, | }, | ||||
getItem: function (item, hideMessage) { | |||||
getItem: function (item, hideMessage, noStack) { | |||||
events.emit('onBeforeGetItem', item, this.obj); | events.emit('onBeforeGetItem', item, this.obj); | ||||
//We need to know if a mob dropped it for quest purposes | //We need to know if a mob dropped it for quest purposes | ||||
@@ -571,7 +601,7 @@ define([ | |||||
var quantity = item.quantity; | var quantity = item.quantity; | ||||
var exists = false; | 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)); | var existItem = this.items.find(i => (i.name == item.name)); | ||||
if (existItem) { | if (existItem) { | ||||
exists = true; | exists = true; | ||||
@@ -22,7 +22,7 @@ define([ | |||||
dialogue: ['talk'], | dialogue: ['talk'], | ||||
gatherer: ['gather'], | gatherer: ['gather'], | ||||
quests: ['complete'], | 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'], | equipment: ['equip', 'unequip'], | ||||
stash: ['withdraw'], | stash: ['withdraw'], | ||||
trade: ['buySell'], | trade: ['buySell'], | ||||