Merge remote-tracking branch 'origin/1351-consolidate-item-rendering'

src/client/ui/shared/renderItem.js

@@ -0,0 +1,79 @@
+const tplItem = `
+	<div class="item">
+		<div class="icon"></div>
+		<div class="quantity"></div>
+	</div>
+`;
+
+define([
+	
+], function (
+	
+) {
+	return (container, item) => {
+		let itemEl = null;
+
+		if (!item) {
+			itemEl = $(tplItem).appendTo(container);
+
+			return itemEl;
+		}
+
+		itemEl = $(tplItem).appendTo(container);
+
+		let size = 64;
+		let offset = 0;
+
+		if (item.type === 'skin') {
+			offset = 4;
+			size = 8;
+		}
+
+		const imgX = (-item.sprite[0] * size) + offset;
+		const imgY = (-item.sprite[1] * size) + offset;
+
+		let spritesheet = item.spritesheet || '../../../images/items.png';
+		if (!item.spritesheet) {
+			if (item.material)
+				spritesheet = '../../../images/materials.png';
+			else if (item.quest)
+				spritesheet = '../../../images/questItems.png';
+			else if (item.type === 'consumable')
+				spritesheet = '../../../images/consumables.png';
+			else if (item.type === 'skin')
+				spritesheet = '../../../images/characters.png';
+		}
+
+		itemEl
+			.find('.icon')
+			.css('background', `url(${spritesheet}) ${imgX}px ${imgY}px`);
+
+		if (item.quantity > 1 || item.eq || item.active || item.has('quickSlot')) {
+			let elQuantity = itemEl.find('.quantity');
+			let txtQuantity = item.quantity;
+			if (!txtQuantity)
+				txtQuantity = item.has('quickSlot') ? 'QS' : 'EQ';
+
+			elQuantity.html(txtQuantity);
+
+			//If the item doesn't have a quantity and we reach this point
+			//it must mean that it's active, EQd or QSd
+			if (!item.quantity)
+				itemEl.addClass('eq');
+		} else if (item.isNew) {
+			itemEl.addClass('new');
+			itemEl.find('.quantity').html('NEW');
+		}
+
+		if (item.slot) {
+			const equipErrors = window.player.inventory.equipItemErrors(item);
+			if (equipErrors.length)
+				itemEl.addClass('no-equip');
+		}
+
+		if (item.has('quality'))
+			itemEl.addClass(`quality-${item.quality}`);
+
+		return itemEl;
+	};
+});

src/client/ui/templates/inventory/inventory.js

@@ -5,7 +5,8 @@ define([
 	'css!ui/templates/inventory/styles',
 	'html!ui/templates/inventory/templateItem',
 	'js/input',
-	'js/config'
+	'js/config',
+	'ui/shared/renderItem'
 ], function (
 	events,
 	client,
@@ -13,7 +14,8 @@ define([
 	styles,
 	tplItem,
 	input,
-	config
+	config,
+	renderItem
 ) {
 	return {
 		tpl: template,
@@ -78,8 +80,7 @@ define([
 				let item = items.find(f => (f.pos !== null && f.pos === i));
 
 				if (!item) {
-					itemEl = $(tplItem)
-						.appendTo(container);
+					itemEl = renderItem(container, null);
 
 					itemEl
 						.on('mouseup', this.onMouseDown.bind(this, null, null, false))
@@ -93,21 +94,7 @@ define([
 				} else 
 					rendered.push(item);
 
-				let imgX = -item.sprite[0] * 64;
-				let imgY = -item.sprite[1] * 64;
-
-				itemEl = $(tplItem)
-					.appendTo(container);
-
-				let spritesheet = item.spritesheet || '../../../images/items.png';
-				if (!item.spritesheet) {
-					if (item.material)
-						spritesheet = '../../../images/materials.png';
-					else if (item.quest)
-						spritesheet = '../../../images/questItems.png';
-					else if (item.type === 'consumable')
-						spritesheet = '../../../images/consumables.png';
-				}
+				itemEl = renderItem(container, item);
 
 				let clickHandler = this.onMouseDown.bind(this, itemEl, item, true);
 				let moveHandler = this.onHover.bind(this, itemEl, item);
@@ -124,49 +111,24 @@ define([
 					.on('mousemove', moveHandler)
 					.on('mouseleave', this.hideTooltip.bind(this, itemEl, item))
 					.find('.icon')
-					.css('background', 'url(' + spritesheet + ') ' + imgX + 'px ' + imgY + 'px')
 					.on('contextmenu', this.showContext.bind(this, item));
-
-				if (item.quantity > 1 || item.eq || item.active || item.has('quickSlot')) {
-					let elQuantity = itemEl.find('.quantity');
-					let txtQuantity = item.quantity;
-					if (!txtQuantity)
-						txtQuantity = item.has('quickSlot') ? 'QS' : 'EQ';
-
-					elQuantity.html(txtQuantity);
-
-					//If the item doesn't have a quantity and we reach this point
-					//it must mean that it's active, EQd or QSd
-					if (!item.quantity)
-						itemEl.addClass('eq');
-				} else if (item.isNew) {
-					itemEl.addClass('new');
-					itemEl.find('.quantity').html('NEW');
-				}
-
-				if (item.slot) {
-					const equipErrors = window.player.inventory.equipItemErrors(item);
-					if (equipErrors.length)
-						itemEl.addClass('no-equip');
-				}
-
-				if (item.has('quality'))
-					itemEl.addClass(`quality-${item.quality}`);
 			}
 		},
 
 		onToggleQualityIndicators: function (state) {
-			this.el.removeClass('quality-off quality-bottom quality-border quality-background');
-
 			const className = `quality-${state.toLowerCase()}`;
-			this.el.addClass(className);
+
+			$('.ui-container')
+				.removeClass('quality-off quality-bottom quality-border quality-background')
+				.addClass(className);
 		},
 
 		onToggleUnusableIndicators: function (state) {
-			this.el.removeClass('unusable-off unusable-border unusable-top unusable-background');
-
 			const className = `unusable-${state.toLowerCase()}`;
-			this.el.addClass(className);
+
+			$('.ui-container')
+				.removeClass('unusable-off unusable-border unusable-top unusable-background')
+				.addClass(className);
 		},
 
 		onClick: function (item) {

src/client/ui/templates/inventory/styles.less

@@ -117,134 +117,6 @@
 
 	}
 
-	&.quality-border .grid .item:not(.empty),
-	&.quality-bottom .grid .item:not(.empty) {
-		&:before {
-			content: '';
-			position: absolute;
-			top: 0px;
-			left: 0px;
-			width: 100%;
-			height: 100%;
-			box-sizing: border-box;
-			border-width: 5px;
-			border-style: solid;
-		}
-
-		&.quality-0:before {
-			border: none;
-		}
-
-		&.quality-1:before {
-			border-color: @greenC;
-		}
-
-		&.quality-2:before {
-			border-color: @blueD;
-		}
-
-		&.quality-3:before {
-			border-color: @purpleC;
-		}
-
-		&.quality-4:before {
-			border-color: @orangeD;
-		}
-
-	}
-
-	&.quality-bottom .grid .item:not(.empty) {
-		&:before {
-			border-width: 0px 0px 5px 0px;
-		}
-
-	}
-
-	&.quality-background .grid .item:not(.empty),&.unusable-background .grid .item.no-equip {
-		&:before {
-			content: '';
-			position: absolute;
-			top: 0px;
-			left: 0px;
-			width: 100%;
-			height: 100%;
-		}
-
-		.icon {
-			filter: brightness(100%)
-			drop-shadow(0px -4px 0px @blackD) 
-			drop-shadow(0px 4px 0px @blackD)
-			drop-shadow(4px 0px 0px @blackD) 
-			drop-shadow(-4px 0px 0px @blackD);
-
-			&:hover {
-				filter: brightness(160%)
-				drop-shadow(0px -4px 0px @blackD) 
-				drop-shadow(0px 4px 0px @blackD)
-				drop-shadow(4px 0px 0px @blackD) 
-				drop-shadow(-4px 0px 0px @blackD);
-			}
-
-		}
-
-		&.quality-1:before {
-			background-color: @greenC;
-		}
-
-		&.quality-2:before {
-			background-color: @blueD;
-		}
-
-		&.quality-3:before {
-			background-color: @purpleC;
-		}
-
-		&.quality-4:before {
-			background-color: @orangeD;
-		}
-
-		&.no-equip:before {
-			background-color: @redD;
-		}
-
-	}
-
-	&.unusable-border .grid .item.no-equip,
-	&.unusable-top .grid .item.no-equip {
-		&:after {
-			content: '';
-			position: absolute;
-			top: 0px;
-			left: 0px;
-			width: 100%;
-			height: 100%;
-			box-sizing: border-box;
-			border-width: 5px;
-			border-style: solid;
-			border-color: @redD;
-			pointer-events: none;
-		}
-
-	}
-
-	&.unusable-top .grid .item.no-equip {
-		&:after {
-			border-width: 5px 0px 0px 0px;
-		}
-
-	}
-
-	&.quality-border.unusable-border .grid .item.no-equip:not(.quality-0),
-	&.quality-border.unusable-top .grid .item.no-equip:not(.quality-0) {
-		&:after {
-			top: 5px;
-			left: 5px;
-			width: calc(100% - 10px);
-			height: calc(100% - 10px);
-		}
-
-	}
-
 	.menu-bar {
 		background-color: @blackB;
 		width: 100%;
@@ -360,3 +232,131 @@
 	}
 
 }
+
+.ui-container.quality-border .grid .item:not(.empty),
+.ui-container.quality-bottom .grid .item:not(.empty) {
+	&:before {
+		content: '';
+		position: absolute;
+		top: 0px;
+		left: 0px;
+		width: 100%;
+		height: 100%;
+		box-sizing: border-box;
+		border-width: 5px;
+		border-style: solid;
+	}
+
+	&.quality-0:before {
+		border: none;
+	}
+
+	&.quality-1:before {
+		border-color: @greenC;
+	}
+
+	&.quality-2:before {
+		border-color: @blueD;
+	}
+
+	&.quality-3:before {
+		border-color: @purpleC;
+	}
+
+	&.quality-4:before {
+		border-color: @orangeD;
+	}
+
+}
+
+.ui-container.quality-bottom .grid .item:not(.empty) {
+	&:before {
+		border-width: 0px 0px 5px 0px;
+	}
+
+}
+
+.ui-container.quality-background .grid .item:not(.empty),&.unusable-background .grid .item.no-equip {
+	&:before {
+		content: '';
+		position: absolute;
+		top: 0px;
+		left: 0px;
+		width: 100%;
+		height: 100%;
+	}
+
+	.icon {
+		filter: brightness(100%)
+		drop-shadow(0px -4px 0px @blackD) 
+		drop-shadow(0px 4px 0px @blackD)
+		drop-shadow(4px 0px 0px @blackD) 
+		drop-shadow(-4px 0px 0px @blackD);
+
+		&:hover {
+			filter: brightness(160%)
+			drop-shadow(0px -4px 0px @blackD) 
+			drop-shadow(0px 4px 0px @blackD)
+			drop-shadow(4px 0px 0px @blackD) 
+			drop-shadow(-4px 0px 0px @blackD);
+		}
+
+	}
+
+	&.quality-1:before {
+		background-color: @greenC;
+	}
+
+	&.quality-2:before {
+		background-color: @blueD;
+	}
+
+	&.quality-3:before {
+		background-color: @purpleC;
+	}
+
+	&.quality-4:before {
+		background-color: @orangeD;
+	}
+
+	&.no-equip:before {
+		background-color: @redD;
+	}
+
+}
+
+.ui-container.unusable-border .grid .item.no-equip,
+.ui-container.unusable-top .grid .item.no-equip {
+	&:after {
+		content: '';
+		position: absolute;
+		top: 0px;
+		left: 0px;
+		width: 100%;
+		height: 100%;
+		box-sizing: border-box;
+		border-width: 5px;
+		border-style: solid;
+		border-color: @redD;
+		pointer-events: none;
+	}
+
+}
+
+.ui-container.unusable-top .grid .item.no-equip {
+	&:after {
+		border-width: 5px 0px 0px 0px;
+	}
+
+}
+
+.ui-container.quality-border.unusable-border .grid .item.no-equip:not(.quality-0),
+.ui-container.quality-border.unusable-top .grid .item.no-equip:not(.quality-0) {
+	&:after {
+		top: 5px;
+		left: 5px;
+		width: calc(100% - 10px);
+		height: calc(100% - 10px);
+	}
+
+}

src/client/ui/templates/stash/stash.js

@@ -4,14 +4,16 @@ define([
 	'html!ui/templates/stash/template',
 	'css!ui/templates/stash/styles',
 	'html!ui/templates/inventory/templateItem',
-	'js/input'
+	'js/input',
+	'ui/shared/renderItem'
 ], function (
 	events,
 	client,
 	template,
 	styles,
 	tplItem,
-	input
+	input,
+	renderItem
 ) {
 	return {
 		tpl: template,
@@ -42,25 +44,11 @@ define([
 			for (let i = 0; i < iLen; i++) {
 				let item = items[i];
 
-				let itemEl = $(tplItem)
-					.appendTo(container);
+				let itemEl = renderItem(container, item);
 
 				if (!item)
 					continue;
 
-				let imgX = -item.sprite[0] * 64;
-				let imgY = -item.sprite[1] * 64;
-
-				let spritesheet = item.spritesheet || '../../../images/items.png';
-				if (!item.spritesheet) {
-					if (item.material)
-						spritesheet = '../../../images/materials.png';
-					else if (item.quest)
-						spritesheet = '../../../images/questItems.png';
-					else if (item.type === 'consumable')
-						spritesheet = '../../../images/consumables.png';
-				}
-
 				let moveHandler = this.onHover.bind(this, itemEl, item);
 				let downHandler = () => {};
 				if (isMobile) {
@@ -74,16 +62,7 @@ define([
 					.on('mousemove', moveHandler)
 					.on('mouseleave', this.hideTooltip.bind(this, itemEl, item))
 					.find('.icon')
-					.css('background', 'url(' + spritesheet + ') ' + imgX + 'px ' + imgY + 'px')
 					.on('contextmenu', this.showContext.bind(this, item));
-
-				if (item.quantity)
-					itemEl.find('.quantity').html(item.quantity);
-
-				if (item.eq)
-					itemEl.addClass('eq');
-				if (item.isNew)
-					itemEl.addClass('new');
 			}
 		},
 

src/client/ui/templates/trade/trade.js

@@ -3,13 +3,15 @@ define([
 	'js/system/client',
 	'html!ui/templates/trade/template',
 	'css!ui/templates/trade/styles',
-	'html!ui/templates/inventory/templateItem'
+	'html!ui/templates/inventory/templateItem',
+	'ui/shared/renderItem'
 ], function (
 	events,
 	client,
 	template,
 	styles,
-	tplItem
+	tplItem,
+	renderItem
 ) {
 	return {
 		tpl: template,
@@ -68,35 +70,11 @@ define([
 
 				item = $.extend(true, {}, item);
 
-				let size = 64;
-				let offset = 0;
-
-				let itemEl = $(tplItem)
-					.appendTo(container);
-
-				let spritesheet = item.spritesheet || '../../../images/items.png';
-				if (!item.spritesheet) {
-					if (item.material)
-						spritesheet = '../../../images/materials.png';
-					else if (item.quest)
-						spritesheet = '../../../images/questItems.png';
-					else if (item.type === 'consumable')
-						spritesheet = '../../../images/consumables.png';
-					else if (item.type === 'skin')
-						spritesheet = '../../../images/characters.png';
-				}
-				if (item.type === 'skin') {
-					offset = 4;
-					size = 8;
-				}
-
-				let imgX = (-item.sprite[0] * size) + offset;
-				let imgY = (-item.sprite[1] * size) + offset;
+				let itemEl = renderItem(container, item);
 
 				itemEl
 					.data('item', item)
 					.find('.icon')
-					.css('background', 'url(' + spritesheet + ') ' + imgX + 'px ' + imgY + 'px')
 					.addClass(item.type);
 
 				if (isMobile)
@@ -108,11 +86,6 @@ define([
 						.on('mouseleave', uiInventory.hideTooltip.bind(uiInventory, itemEl, item));
 				}
 
-				if (item.quantity)
-					itemEl.find('.quantity').html(item.quantity);
-				else if (item.eq)
-					itemEl.find('.quantity').html('EQ');
-
 				if (action === 'buy') {
 					let noAfford = false;
 					if (item.worth.currency) {
@@ -132,13 +105,6 @@ define([
 					item.worthText = item.worth.amount + 'x ' + item.worth.currency;
 				else
 					item.worthText = ~~(itemList.markup * item.worth);
-
-				if (item.eq)
-					itemEl.addClass('eq');
-				else if (item.isNew) {
-					itemEl.addClass('new');
-					itemEl.find('.quantity').html('NEW');
-				}
 			}
 
 			this.center();