Fixed #1345 and fixed some linting errors

src/client/js/config.js

@@ -8,12 +8,14 @@ define([
 		showQuests: 'on',
 		showEvents: true,
 		playAudio: true,
-		qualityIndicators: 'off'
+		qualityIndicators: 'off',
+		unusableIndicators: 'off'
 	};
 
 	const valueChains = {
 		showQuests: ['on', 'minimal', 'off'],
-		qualityIndicators: ['border', 'bottom', 'background', 'off']
+		qualityIndicators: ['border', 'bottom', 'background', 'off'],
+		unusableIndicators: ['off', 'border', 'top', 'background']
 	};
 
 	const getNextValue = key => {

src/client/ui/factory.js

@@ -101,7 +101,7 @@ define([
 
 		onUiKeyDown: function (keyEvent) {
 			if (keyEvent.key === 'esc') {
-				const closed = [];
+				const closedUis = [];
 
 				this.uis.forEach(u => {
 					if (!u.modal || !u.shown)
@@ -110,13 +110,13 @@ define([
 					keyEvent.consumed = true;
 					u.hide();
 
-					closed.push(u);
+					closedUis.push(u);
 				});
 				
 				$('.uiOverlay').hide();
 				events.emit('onHideContextMenu');
 
-				closed.forEach(c => {
+				closedUis.forEach(c => {
 					if (c.afterHide)
 						c.afterHide();
 				});

src/client/ui/templates/events/events.js

@@ -124,7 +124,7 @@ define([
 
 			if (this.shown) 
 				this.show();
-			 else 
+			else 
 				this.hide();
 		}
 	};

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

@@ -38,6 +38,9 @@ define([
 			this.onEvent('onToggleQualityIndicators', this.onToggleQualityIndicators.bind(this));
 			this.onToggleQualityIndicators(config.qualityIndicators);
 
+			this.onEvent('onToggleUnusableIndicators', this.onToggleUnusableIndicators.bind(this));
+			this.onToggleUnusableIndicators(config.unusableIndicators);
+
 			this.onEvent('onKeyDown', this.onKeyDown.bind(this));
 			this.onEvent('onKeyUp', this.onKeyUp.bind(this));
 
@@ -141,6 +144,12 @@ define([
 					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}`);
 			}
@@ -153,6 +162,13 @@ define([
 			this.el.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);
+		},
+
 		onClick: function (item) {
 			let msg = {
 				item: item,
@@ -339,56 +355,56 @@ define([
 			if (item.active)
 				menuItems.activate.text = 'deactivate';
 
-			let config = [];
+			let ctxConfig = [];
 
 			if (item.ability)
-				config.push(menuItems.learn);
+				ctxConfig.push(menuItems.learn);
 			else if (item.type === 'mtx')
-				config.push(menuItems.activate);
+				ctxConfig.push(menuItems.activate);
 			else if (item.type === 'toy' || item.type === 'consumable' || item.useText || item.type === 'recipe') {
 				if (item.useText)
 					menuItems.use.text = item.useText;
-				config.push(menuItems.use);
+				ctxConfig.push(menuItems.use);
 				if (!item.has('quickSlot'))
-					config.push(menuItems.quickSlot);
+					ctxConfig.push(menuItems.quickSlot);
 			} else if (item.slot) {
-				config.push(menuItems.equip);
+				ctxConfig.push(menuItems.equip);
 				if (!item.eq)
-					config.push(menuItems.divider);
+					ctxConfig.push(menuItems.divider);
 
 				if (!item.eq) {
-					config.push(menuItems.augment);
-					config.push(menuItems.divider);
+					ctxConfig.push(menuItems.augment);
+					ctxConfig.push(menuItems.divider);
 				}
 			}
 
 			if ((!item.eq) && (!item.active)) {
 				if (!item.quest) {
 					if ((window.player.stash.active) && (!item.noStash))
-						config.push(menuItems.stash);
+						ctxConfig.push(menuItems.stash);
 
 					if (!item.noDrop)
-						config.push(menuItems.drop);
+						ctxConfig.push(menuItems.drop);
 
 					if ((!item.material) && (!item.noSalvage))
-						config.push(menuItems.salvage);
+						ctxConfig.push(menuItems.salvage);
 				}
 
 				if (!item.noDestroy)
-					config.push(menuItems.destroy);
+					ctxConfig.push(menuItems.destroy);
 			}
 
 			if (item.quantity > 1 && !item.quest)
-				config.push(menuItems.split);
+				ctxConfig.push(menuItems.split);
 
 			if ((!item.noDrop) && (!item.quest))
-				config.push(menuItems.mail);
+				ctxConfig.push(menuItems.mail);
 
 			if (isMobile)
 				this.hideTooltip(null, this.hoverItem);
 
-			if (config.length > 0)
-				events.emit('onContextMenu', config, e);
+			if (ctxConfig.length > 0)
+				events.emit('onContextMenu', ctxConfig, e);
 
 			e.preventDefault();
 			return false;

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

@@ -160,7 +160,7 @@
 
 	}
 
-	&.quality-background .grid .item:not(.empty) {
+	&.quality-background .grid .item:not(.empty),&.unusable-background .grid .item.no-equip {
 		&:before {
 			content: '';
 			position: absolute;
@@ -203,6 +203,46 @@
 			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 {

src/client/ui/templates/options/options.js

@@ -35,6 +35,7 @@ define([
 			this.find('.item.quests .name').on('click', this.toggleQuests.bind(this));
 			this.find('.item.events .name').on('click', this.toggleEvents.bind(this));
 			this.find('.item.quality .name').on('click', this.toggleQualityIndicators.bind(this));
+			this.find('.item.unusable .name').on('click', this.toggleUnusableIndicators.bind(this));
 			this.find('.item.audio .name').on('click', this.toggleAudio.bind(this));
 
 			this.onEvent('onResize', this.onResize.bind(this));
@@ -42,13 +43,36 @@ define([
 			this.onEvent('onToggleAudio', this.onToggleAudio.bind(this));
 			this.onEvent('onToggleNameplates', this.onToggleNameplates.bind(this));
 			this.onEvent('onToggleQualityIndicators', this.onToggleQualityIndicators.bind(this));
+			this.onEvent('onToggleUnusableIndicators', this.onToggleUnusableIndicators.bind(this));
 			this.onEvent('onToggleEventsVisibility', this.onToggleEventsVisibility.bind(this));
 			this.onEvent('onToggleQuestsVisibility', this.onToggleQuestsVisibility.bind(this));
 		},
 
+		toggleUnusableIndicators: function () {
+			config.toggle('unusableIndicators');
+
+			if (config.unusableIndicators === 'background' && config.qualityIndicators === 'background') {
+				config.toggle('qualityIndicators');
+				events.emit('onToggleQualityIndicators', config.qualityIndicators);
+			}
+
+			events.emit('onToggleUnusableIndicators', config.unusableIndicators);
+		},
+
+		onToggleUnusableIndicators: function (state) {
+			const newValue = state[0].toUpperCase() + state.substr(1);
+
+			this.find('.item.unusable .value').html(newValue);
+		},
+
 		toggleQualityIndicators: function () {
 			config.toggle('qualityIndicators');
 
+			if (config.qualityIndicators === 'background' && config.unusableIndicators === 'background') {
+				config.toggle('unusableIndicators');
+				events.emit('onToggleUnusableIndicators', config.unusableIndicators);
+			}
+
 			events.emit('onToggleQualityIndicators', config.qualityIndicators);
 		},
 
@@ -120,6 +144,7 @@ define([
 			this.onToggleEventsVisibility(config.showEvents);
 			this.onToggleQuestsVisibility(config.showQuests);
 			this.onToggleQualityIndicators(config.qualityIndicators);
+			this.onToggleUnusableIndicators(config.unusableIndicators);
 		},
 
 		toggle: function () {

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

@@ -24,6 +24,10 @@
 				<div class="name">Quality Indicators</div>
 				<div class="value">Off</div>
 			</div>
+			<div class="item unusable">
+				<div class="name">Unusable Indicators</div>
+				<div class="value">Off</div>
+			</div>
 			<div class="item audio">
 				<div class="name">Audio</div>
 				<div class="value">On</div>