From eeffafef5d7306b98338ce859ab302b03197b4b5 Mon Sep 17 00:00:00 2001
From: Vildravn <vildravn@gmail.com>
Date: Sat, 31 Oct 2020 14:58:29 +0100
Subject: [PATCH 1/2] polish[#1628]: Add cooldown overlay to quickslot

---
 src/client/ui/templates/hud/hud.js        | 30 +++++++++++++++++++++++
 src/client/ui/templates/hud/styles.less   |  9 +++++++
 src/client/ui/templates/hud/template.html |  1 +
 3 files changed, 40 insertions(+)

diff --git a/src/client/ui/templates/hud/hud.js b/src/client/ui/templates/hud/hud.js
index 160a0193..304c4b7e 100644
--- a/src/client/ui/templates/hud/hud.js
+++ b/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,34 @@ 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;
diff --git a/src/client/ui/templates/hud/styles.less b/src/client/ui/templates/hud/styles.less
index ec22b22f..dc16e0a3 100644
--- a/src/client/ui/templates/hud/styles.less
+++ b/src/client/ui/templates/hud/styles.less
@@ -141,6 +141,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%);
diff --git a/src/client/ui/templates/hud/template.html b/src/client/ui/templates/hud/template.html
index 14120f30..adb70b94 100644
--- a/src/client/ui/templates/hud/template.html
+++ b/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>

From cc612a4e3ea027fea14d1aa4eeaf05caabad7468 Mon Sep 17 00:00:00 2001
From: Vildravn <vildravn@gmail.com>
Date: Sat, 31 Oct 2020 15:02:23 +0100
Subject: [PATCH 2/2] polish[#1628]: Lint fix

---
 src/client/ui/templates/hud/hud.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/client/ui/templates/hud/hud.js b/src/client/ui/templates/hud/hud.js
index 304c4b7e..d0c29283 100644
--- a/src/client/ui/templates/hud/hud.js
+++ b/src/client/ui/templates/hud/hud.js
@@ -107,9 +107,8 @@ define([
 
 			let elapsed = quickItem.cdMax - quickItem.cd;
 			let width = 1 - (elapsed / quickItem.cdMax);
-			if (width <= 0) {
+			if (width <= 0)
 				width = 0;
-			}
 
 			width = Math.ceil((width * 100) / 4) * 4;