From 74f35d363364c1fd791c7342e1712ef3120cfded Mon Sep 17 00:00:00 2001
From: Jack <bartnikjack@gmail.com>
Date: Tue, 28 Jul 2020 18:14:56 +0100
Subject: [PATCH] fixed a bug where keymap react would highlight wrong keys

---
 public/js/script.js | 47 ++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/public/js/script.js b/public/js/script.js
index fafd58070..7a3203789 100644
--- a/public/js/script.js
+++ b/public/js/script.js
@@ -438,6 +438,7 @@ function emulateLayout(event) {
   event.charCode = newKey.charCodeAt(0);
   event.which = newKey.charCodeAt(0);
   event.key = newKey;
+  event.code = "Key" + newKey.toUpperCase();
   return event;
 }
 
@@ -912,12 +913,48 @@ function flashPressedKeymapKey(key, correct) {
       .replace(" ", "");
   }
 
-  if (key === "Space") {
-    key = "KeySpace";
+  switch (key) {
+    case "\\":
+    case "|":
+      key = "#KeyBackslash";
+      break;
+    case "}":
+    case "]":
+      key = "#KeyRightBracket";
+      break;
+    case "{":
+    case "[":
+      key = "#KeyLeftBracket";
+      break;
+    case '"':
+    case "'":
+      key = "#KeyQuote";
+      break;
+    case ":":
+    case ";":
+      key = "#KeySemicolon";
+      break;
+    case "<":
+    case ",":
+      key = "#KeyComma";
+      break;
+    case ">":
+    case ".":
+      key = "#KeyPeriod";
+      break;
+    case "?":
+    case "/":
+      key = "#KeySlash";
+      break;
+    case "" || "Space":
+      key = "#KeySpace";
+      break;
+    default:
+      key = `#Key${key.toUpperCase()}`;
   }
 
   if (correct) {
-    $(`#${key}`)
+    $(key)
       .stop(true, true)
       .css({
         color: bgColor,
@@ -934,7 +971,7 @@ function flashPressedKeymapKey(key, correct) {
         "easeOutExpo"
       );
   } else {
-    $(`#${key}`)
+    $(key)
       .stop(true, true)
       .css({
         color: bgColor,
@@ -2901,7 +2938,7 @@ $(document).keypress(function (event) {
   // console.timeEnd("offcheck2");
 
   if (config.keymapMode === "react") {
-    flashPressedKeymapKey(event.code, thisCharCorrect);
+    flashPressedKeymapKey(event.key, thisCharCorrect);
   } else if (config.keymapMode === "next") {
     updateHighlightedKeymapKey();
   }