fixes #297

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)
 							);
 						}
 

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 = $('<div></div>')
 						.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;

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;
 		}
 	}
-}
+}

src/client/ui/templates/inventory/template.html

@@ -7,4 +7,15 @@
 	</div>
 	<div class="grid"></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>

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;

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'],