From a5f35807afd5d9ee79966f1381ee57be96433e95 Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Thu, 23 Jul 2020 13:42:16 +0100
Subject: [PATCH] added caps lock indicator

---
 public/css/style.scss | 20 ++++++++++++++++++++
 public/index.html     |  5 ++++-
 public/js/script.js   | 21 +++++++++++++++++++++
 3 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/public/css/style.scss b/public/css/style.scss
index 50c690d26..21c54d4bf 100644
--- a/public/css/style.scss
+++ b/public/css/style.scss
@@ -1142,6 +1142,26 @@ key {
   }
 }
 
+#capsWarning {
+  background: var(--main-color);
+  color: var(--bg-color);
+  display: table;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  padding: 1rem;
+  border-radius: var(--roundness);
+  /* margin-top: 1rem; */
+  transition: .25s;
+  z-index: 999;
+  pointer-events: none;
+
+  i {
+    margin-right: .5rem;
+  }
+}
+
 
 #wordsInput {
   height: 0;
diff --git a/public/index.html b/public/index.html
index f570c2df1..30ba5913b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -535,6 +535,9 @@
   <div id="timerWrapper">
     <div id="timer"></div>
   </div>
+  <div id="capsWarning" class="hidden">
+    <i class="fas fa-lock"></i>Caps Lock
+  </div>
   <div id="centerContent" class="hidden">
     <div id="top">
       <div class="logo">
@@ -1366,4 +1369,4 @@
 <script src="js/account.js?v=43"></script>
 <script src="js/script.js?v=43"></script>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/public/js/script.js b/public/js/script.js
index f9954df72..0eb5e4087 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -2233,6 +2233,18 @@ function tagsEdit() {
   }
 }
 
+function showCapsWarning() {
+  if ($("#capsWarning").hasClass("hidden")) {
+    $("#capsWarning").removeClass("hidden");
+  }
+}
+
+function hideCapsWarning() {
+  if (!$("#capsWarning").hasClass("hidden")) {
+    $("#capsWarning").addClass("hidden");
+  }
+}
+
 $(document).on("click", "#top .logo", (e) => {
   changePage("test");
 });
@@ -2532,6 +2544,15 @@ $(document).keypress(function (event) {
 
 $(document).keydown((event) => {
   keypressStats.duration.current = performance.now();
+  if ($("#wordsInput").is(":focus")) {
+    try {
+      if (event.originalEvent.getModifierState("CapsLock")) {
+        showCapsWarning();
+      } else {
+        hideCapsWarning();
+      }
+    } catch (e) {}
+  }
 });
 
 $(document).keyup((event) => {