Merge branch '1628-quickslot-cooldown' into 'master'

polish[#1628]: Add cooldown overlay to quickslot

Closes #1628

See merge request Isleward/isleward!503

src/client/ui/templates/hud/hud.js

@@ -30,6 +30,8 @@ define([
 				.on('mousemove', this.showQuickItemTooltip.bind(this, true))
 				.on('mouseleave', this.showQuickItemTooltip.bind(this, false))
 				.on('click', this.useQuickItem.bind(this));
+
+			setInterval(this.update.bind(this), 100);
 		},
 
 		build: function () {
@@ -88,6 +90,33 @@ define([
 				events.emit('onHideItemTooltip', item);
 		},
 
+		update: function () {
+			if (!this.items)
+				return;
+
+			const quickItem = this.items.find(f => f.has('quickSlot'));
+			if (!quickItem)
+				return;
+
+			if (!quickItem.cd) {
+				this.find('.quickItem').find('.cooldown').css({
+					width: '0%'
+				});
+				return;
+			}
+
+			let elapsed = quickItem.cdMax - quickItem.cd;
+			let width = 1 - (elapsed / quickItem.cdMax);
+			if (width <= 0)
+				width = 0;
+
+			width = Math.ceil((width * 100) / 4) * 4;
+
+			this.find('.quickItem').find('.cooldown').css({
+				width: width + '%'
+			});
+		},
+
 		events: {
 			onGetStats: function (stats) {
 				this.stats = stats;

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

@@ -140,6 +140,15 @@
 				drop-shadow(-2px 0px 0px @blackD);
 			}
 
+			.cooldown {
+				position: absolute;
+				left: 0px;
+				top: 0px;
+				width: 0px;
+				height: 100%;
+				background-color: fade(@red, 75%);
+			}
+
 			&:hover {
 				.icon {
 					filter: brightness(160%);

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

@@ -24,6 +24,7 @@
 			<div class="quickItem">
 				<div class="icon"></div>
 				<div class="info">R</div>
+				<div class="cooldown"></div>
 			</div>
 		</div>
 	</div>