fixes #1343

src/client/css/colors.less

@@ -1,59 +1,49 @@
 @white: rgb(242, 245, 245);
 @black: #2d2136;
-
 @brown: rgb(107, 79, 76);
-
 @darkGray: rgb(55, 48, 65);
 @gray: rgb(60, 63, 76);
 @lightGray: rgb(146, 147, 152);
-
 @yellow: #ffeb38;
-@purple: #a24eff;
-@orange: #ff6942;
-
 @red: #d43346;
 @blue: #3fa7dd;
 @green: #80f643;
 @greenA: #80f643;
 @greenB: #4ac441;
 @greenC: #386646;
-
 @blackA: #505360;
 @blackB: #3c3f4c;
 @blackC: #373041;
 @blackD: #312136;
-
 @brownC: #b15a30;
 @brownD: #763b3b;
-
 @redA: #ff4252;
 @redB: #d43346;
 @redC: #a82841;
 @redD: #802343;
-
+@orangeA: #ff6942;
 @orangeB: #db5538;
 @orangeC: #b34b3a;
 @orangeD: #953f36;
-
 @yellowB: #faac45;
 @yellowC: #d07840;
-
 @blueA: #48edff;
 @blueB: #3fa7dd;
 @blueC: #3a71ba;
 @blueD: #42548d;
-
 @tealB: #51fc9a;
 @tealC: #44cb95;
-
 @purpleA: #a24eff;
 @purpleB: #7a3ad3;
 @purpleC: #533399;
 @purpleD: #393268;
-
 @pinkA: #fc66f7;
 @pinkB: #de43ae;
-
 @grayB: #c0c3cf;
 @grayC: #929398;
 @grayD: #69696e;
+@qualityCommon: @white;
+@qualityMagic: @greenB;
+@qualityRare: @blueB;
+@qualityEpic: @purpleA;
+@qualityLegendary: @orangeA;

src/client/css/main.less

@@ -124,7 +124,7 @@ body {
 		.btnClose {
 			position: absolute;
 			background-color: @blackA;
-			color: @orange;
+			color: @orangeA;
 			cursor: pointer;
 			height: 31px;
 			width: 31px;
@@ -161,23 +161,23 @@ body {
 }
 
 .q0 {
-	color: @white;
+	color: @qualityCommon;
 }
 
 .q1 {
-	color: @greenB;
+	color: @qualityMagic;
 }
 
 .q2 {
-	color: @blueB;
+	color: @qualityRare;
 }
 
 .q3 {
-	color: @purpleA;
+	color: @qualityEpic;
 }
 
 .q4 {
-	color: @orange;
+	color: @qualityLegendary;
 }
 
 .color-red {

src/client/js/config.js

@@ -7,11 +7,13 @@ define([
 		showNames: true,
 		showQuests: 'on',
 		showEvents: true,
-		playAudio: true
+		playAudio: true,
+		qualityIndicators: 'off'
 	};
 
 	const valueChains = {
-		showQuests: ['on', 'minimal', 'off']
+		showQuests: ['on', 'minimal', 'off'],
+		qualityIndicators: ['corner', 'border', 'background', 'off']
 	};
 
 	const getNextValue = key => {

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

@@ -2,7 +2,6 @@
 
 .uiDeath {
 	display: none;
-
 	width: 400px;
 	background-color: @gray;
 	border: 4px solid @lightGray;
@@ -14,8 +13,9 @@
 
 		.inner {
 			display: inline-block;
-			color: @orange;
+			color: @orangeA;
 		}
+
 	}
 
 	.penalty {
@@ -25,17 +25,18 @@
 
 	.btn {
 		color: @white;
-	    width: 100%;
-	    height: 32px;
-	    background-color: @blue;
-	    margin: 16px 0px;
-	    padding-top: 8px;
-	    cursor: pointer;
-
-	    &:hover {
+		width: 100%;
+		height: 32px;
+		background-color: @blue;
+		margin: 16px 0px;
+		padding-top: 8px;
+		cursor: pointer;
+
+		&:hover {
 			background-color: lighten(@blue, 15%);
 			color: @black;
-	    }
+		}
+
 	}
 
 	&.permadeath {
@@ -47,12 +48,16 @@
 			.btn-logout {
 				display: block;
 			}
+
 		}
+
 	}
 
 	.buttons {
 		.btn-logout {
 			display: none;
 		}
+
 	}
+
 }

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

@@ -4,14 +4,16 @@ define([
 	'html!ui/templates/inventory/template',
 	'css!ui/templates/inventory/styles',
 	'html!ui/templates/inventory/templateItem',
-	'js/input'
+	'js/input',
+	'js/config'
 ], function (
 	events,
 	client,
 	template,
 	styles,
 	tplItem,
-	input
+	input,
+	config
 ) {
 	return {
 		tpl: template,
@@ -33,6 +35,8 @@ define([
 			this.onEvent('onGetItems', this.onGetItems.bind(this));
 			this.onEvent('onDestroyItems', this.onDestroyItems.bind(this));
 			this.onEvent('onShowInventory', this.toggle.bind(this));
+			this.onEvent('onToggleQualityIndicators', this.onToggleQualityIndicators.bind(this));
+			this.onToggleQualityIndicators(config.qualityIndicators);
 
 			this.onEvent('onKeyDown', this.onKeyDown.bind(this));
 			this.onEvent('onKeyUp', this.onKeyUp.bind(this));
@@ -78,6 +82,7 @@ define([
 						.on('mouseup', this.onMouseDown.bind(this, null, null, false))
 						.on('mousemove', this.onHover.bind(this, itemEl, item))
 						.on('mouseleave', this.hideTooltip.bind(this, itemEl, item))
+						.addClass('empty')
 						.children()
 						.remove();
 
@@ -135,9 +140,19 @@ define([
 					itemEl.addClass('new');
 					itemEl.find('.quantity').html('NEW');
 				}
+
+				if (item.has('quality'))
+					itemEl.addClass(`quality-${item.quality}`);
 			}
 		},
 
+		onToggleQualityIndicators: function (state) {
+			this.el.removeClass('quality-off quality-corner quality-border');
+
+			const className = `quality-${state.toLowerCase()}`;
+			this.el.addClass(className);
+		},
+
 		onClick: function (item) {
 			let msg = {
 				item: item,

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

@@ -1,6 +1,7 @@
 @import "../../../css/colors.less";
 
-.uiInventory, .uiStash {
+.uiInventory,
+.uiStash {
 	display: none;
 	z-index: 2;
 	width: 818px;
@@ -18,8 +19,9 @@
 			padding-top: 8px;
 			margin: auto;
 		}
+
 	}
-	
+
 	position: relative;
 
 	.grid {
@@ -52,20 +54,18 @@
 				background-color: transparent;
 
 				.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);
-
-					-moz-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);
+					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);
+					-moz-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);
 				}
+
 			}
 
 			.quantity {
@@ -73,18 +73,14 @@
 				bottom: 3px;
 				position: absolute;
 				color: @white;
-				filter:
-					drop-shadow(0px -2px 0px @blackD) 
-					drop-shadow(0px 2px 0px @blackD)
-					drop-shadow(2px 0px 0px @blackD) 
-					drop-shadow(-2px 0px 0px @blackD);
-
-				-moz-filter: 
-					drop-shadow(0px -2px 0px @blackD) 
-					drop-shadow(0px 2px 0px @blackD)
-					drop-shadow(2px 0px 0px @blackD) 
-					drop-shadow(-2px 0px 0px @blackD);
-
+				filter: drop-shadow(0px -2px 0px @blackD) 
+				drop-shadow(0px 2px 0px @blackD)
+				drop-shadow(2px 0px 0px @blackD) 
+				drop-shadow(-2px 0px 0px @blackD);
+				-moz-filter: drop-shadow(0px -2px 0px @blackD) 
+				drop-shadow(0px 2px 0px @blackD)
+				drop-shadow(2px 0px 0px @blackD) 
+				drop-shadow(-2px 0px 0px @blackD);
 			}
 
 			.icon {
@@ -99,30 +95,153 @@
 				.quantity {
 					color: @yellow;
 				}
+
 			}
 
 			&.new {
 				.quantity {
 					color: @green;
 				}
+
 			}
 
 			&:hover {
 				.icon {
 					filter: brightness(160%);
-
 					-moz-filter: brightness(160%);
 				}
+
 			}
+
 		}
+
+	}
+
+	&.quality-corner .grid .item:not(.empty) {
+		&:after {
+			content: '';
+			position: absolute;
+			right: 5px;
+			bottom: 5px;
+			width: 10px;
+			height: 10px;
+			opacity: 0.5;
+		}
+
+		&.quality-0:after {
+			background-color: @qualityCommon;
+		}
+
+		&.quality-1:after {
+			background-color: @qualityMagic;
+		}
+
+		&.quality-2:after {
+			background-color: @qualityRare;
+		}
+
+		&.quality-3:after {
+			background-color: @qualityEpic;
+		}
+
+		&.quality-4:after {
+			background-color: @qualityLegendary;
+		}
+
+	}
+
+	&.quality-border .grid .item:not(.empty) {
+		&:after {
+			content: '';
+			position: absolute;
+			top: 0px;
+			left: 0px;
+			width: 100%;
+			height: 100%;
+			box-sizing: border-box;
+			border-width: 2px;
+			border-style: solid;
+			opacity: 0.5;
+		}
+
+		&.quality-0:after {
+			border-color: @qualityCommon;
+		}
+
+		&.quality-1:after {
+			border-color: @qualityMagic;
+		}
+
+		&.quality-2:after {
+			border-color: @qualityRare;
+		}
+
+		&.quality-3:after {
+			border-color: @qualityEpic;
+		}
+
+		&.quality-4:after {
+			border-color: @qualityLegendary;
+		}
+
+	}
+
+	&.quality-background .grid .item:not(.empty) {
+		&:before {
+			content: '';
+			position: absolute;
+			top: 0px;
+			left: 0px;
+			width: 100%;
+			height: 100%;
+			opacity: 0.25;
+		}
+
+		.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-0:before {
+			background-color: @qualityCommon;
+		}
+
+		&.quality-1:before {
+			background-color: @qualityMagic;
+		}
+
+		&.quality-2:before {
+			background-color: @qualityRare;
+		}
+
+		&.quality-3:before {
+			background-color: @qualityEpic;
+		}
+
+		&.quality-4:before {
+			background-color: @qualityLegendary;
+		}
+
 	}
 
 	.menu-bar {
 		background-color: @blackB;
-	    width: 100%;
-	    height: 41px;
-	    padding: 5px 0px;
-	    clear: both;
+		width: 100%;
+		height: 41px;
+		padding: 5px 0px;
+		clear: both;
 
 		.btn {
 			background-color: @blueC;
@@ -136,7 +255,9 @@
 			&.btnSortInv {
 				float: left;
 			}
+
 		}
+
 	}
 
 	.split-box {
@@ -168,6 +289,7 @@
 					padding-top: 8px;
 					margin: auto;
 				}
+
 			}
 
 			.bottom {
@@ -185,7 +307,9 @@
 					border: none;
 				}
 
-				input, .textbox, input:-webkit-autofill {
+				input,
+				.textbox,
+				input:-webkit-autofill {
 					color: @white;
 					-webkit-text-fill-color: @white;
 					background-color: @blackC;
@@ -210,14 +334,20 @@
 						&:hover {
 							background-color: @blackA;
 						}
+
 					}
 
 					&.btnSplit {
 						margin-top: 45px;
 						clear: both;
 					}
+
 				}
+
 			}
-		}		
+
+		}
+
 	}
+
 }

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

@@ -78,7 +78,7 @@
 			margin-top: 36px;
 			float: left;
 			text-align: center;
-			color: @orange;
+			color: @orangeA;
 			filter: brightness(100%)
 			drop-shadow(0px -4px 0px @blackD) 
 			drop-shadow(0px 4px 0px @blackD)

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

@@ -126,11 +126,11 @@
 			}
 
 			&.q3 {
-				color: @purple;
+				color: @purpleA;
 			}
 
 			&.q4 {
-				color: @orange;
+				color: @orangeA;
 			}
 
 			&.color-green {
@@ -266,7 +266,7 @@
 				text-align: center;
 
 				&.special {
-					color: @orange;
+					color: @orangeA;
 				}
 
 				&.hidden {

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

@@ -34,16 +34,30 @@ define([
 			this.find('.item.nameplates .name').on('click', events.emit.bind(events, 'onUiKeyDown', { key: 'v' }));
 			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.audio .name').on('click', this.toggleAudio.bind(this));
 
 			this.onEvent('onResize', this.onResize.bind(this));
 			this.onEvent('onUiKeyDown', this.onKeyDown.bind(this));
 			this.onEvent('onToggleAudio', this.onToggleAudio.bind(this));
 			this.onEvent('onToggleNameplates', this.onToggleNameplates.bind(this));
+			this.onEvent('onToggleQualityIndicators', this.onToggleQualityIndicators.bind(this));
 			this.onEvent('onToggleEventsVisibility', this.onToggleEventsVisibility.bind(this));
 			this.onEvent('onToggleQuestsVisibility', this.onToggleQuestsVisibility.bind(this));
 		},
 
+		toggleQualityIndicators: function () {
+			config.toggle('qualityIndicators');
+
+			events.emit('onToggleQualityIndicators', config.qualityIndicators);
+		},
+
+		onToggleQualityIndicators: function (state) {
+			const newValue = state[0].toUpperCase() + state.substr(1);
+
+			this.find('.item.quality .value').html(newValue);
+		},
+
 		toggleScreen: function () {
 			const state = renderer.toggleScreen();
 			const newValue = (state === 'Windowed') ? 'Off' : 'On';
@@ -105,6 +119,7 @@ define([
 			this.onToggleAudio(config.playAudio);
 			this.onToggleEventsVisibility(config.showEvents);
 			this.onToggleQuestsVisibility(config.showQuests);
+			this.onToggleQualityIndicators(config.qualityIndicators);
 		},
 
 		toggle: function () {

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

@@ -20,6 +20,10 @@
 				<div class="name">Events</div>
 				<div class="value">On</div>
 			</div>
+			<div class="item quality">
+				<div class="name">Quality Indicators</div>
+				<div class="value">Off</div>
+			</div>
 			<div class="item audio">
 				<div class="name">Audio</div>
 				<div class="value">On</div>

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

@@ -16,6 +16,7 @@
 			padding-top: 8px;
 			margin: auto;
 		}
+
 	}
 
 	.bottom {
@@ -51,12 +52,14 @@
 				text-align: center;
 			}
 
-			&.item-picker, &.actionButton {
+			&.item-picker,
+			&.actionButton {
 				cursor: pointer;
 
 				&:hover {
 					background-color: @blackC;
 				}
+
 			}
 
 			&.item-picker {
@@ -67,15 +70,18 @@
 					height: 64px;
 					background: url('../../../images/uiIcons.png') -256px -64px;
 				}
+
 			}
 
 			&.actionButton {
 				padding: 8px;
+
 				.icon {
 					width: 64px;
 					height: 64px;
 					background: url('../../../images/uiIcons.png') -192px -64px;
 				}
+
 			}
 
 			.item {
@@ -91,21 +97,19 @@
 					bottom: 3px;
 					position: absolute;
 					color: @white;
-					filter:
-						drop-shadow(0px -2px 0px @blackD) 
-						drop-shadow(0px 2px 0px @blackD)
-						drop-shadow(2px 0px 0px @blackD) 
-						drop-shadow(-2px 0px 0px @blackD);
-
-					-moz-filter:
-						drop-shadow(0px -2px 0px @blackD) 
-						drop-shadow(0px 2px 0px @blackD)
-						drop-shadow(2px 0px 0px @blackD) 
-						drop-shadow(-2px 0px 0px @blackD);
+					filter: drop-shadow(0px -2px 0px @blackD) 
+					drop-shadow(0px 2px 0px @blackD)
+					drop-shadow(2px 0px 0px @blackD) 
+					drop-shadow(-2px 0px 0px @blackD);
+					-moz-filter: drop-shadow(0px -2px 0px @blackD) 
+					drop-shadow(0px 2px 0px @blackD)
+					drop-shadow(2px 0px 0px @blackD) 
+					drop-shadow(-2px 0px 0px @blackD);
 
 					&.red {
 						color: @red;
 					}
+
 				}
 
 				.icon {
@@ -114,21 +118,20 @@
 					position: absolute;
 					left: 8px;
 					top: 8px;
-					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);
-
-					-moz-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);
+					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);
+					-moz-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);
 				}
+
 			}
+
 		}
 
 		&:first-child {
@@ -142,36 +145,42 @@
 
 				.col-btn {
 					height: calc((100% - 10px) / 2);
-				    width: 100%;
-				    color: #f2f5f5;
-				    text-align: center;
-				    padding-top: 10px;
-				    background-color: @blackB;
-				    margin-bottom: 10px;
-				    cursor: pointer;
-
-				    &.selected {
-				    	color: @orange;
-				    }
-
-				    &:hover {
-				    	background-color: @blackA;
-				    }
-
-				    &.col-half {
-				    	width: calc((100% - 10px) / 2);
-				    	float: left;
-
-				    	&:nth-child(2n + 1) {
+					width: 100%;
+					color: #f2f5f5;
+					text-align: center;
+					padding-top: 10px;
+					background-color: @blackB;
+					margin-bottom: 10px;
+					cursor: pointer;
+
+					&.selected {
+						color: @orangeA;
+					}
+
+					&:hover {
+						background-color: @blackA;
+					}
+
+					&.col-half {
+						width: calc((100% - 10px) / 2);
+						float: left;
+
+						&:nth-child(2n + 1) {
 							margin-right: 10px;
-				    	}
-				    }
+						}
 
-				    &:not(.col-half) {
+					}
+
+					&:not(.col-half) {
 						clear: both;
-				    }
+					}
+
 				}
+
 			}
+
 		}
+
 	}
+
 }

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

@@ -75,7 +75,7 @@
 				height: calc(100% - 100px - 35px);
 
 				.title {
-					color: @orange;
+					color: @orangeA;
 					padding-bottom: 10px;
 				}