creating korean keymap (#3456) neezacoto

frontend/src/ts/controllers/input-controller.ts

@@ -53,12 +53,46 @@ function updateUI(): void {
   if (!isNaN(acc)) LiveAcc.update(acc);
 
   if (Config.keymapMode === "next" && Config.mode !== "zen") {
-    Keymap.highlightKey(
-      TestWords.words
-        .getCurrent()
-        .charAt(TestInput.input.current.length)
-        .toString()
-    );
+    if (!Config.language.startsWith("korean")) {
+      Keymap.highlightKey(
+        TestWords.words
+          .getCurrent()
+          .charAt(TestInput.input.current.length)
+          .toString()
+      );
+    } else {
+      //word [가다]
+      //Get the current korean word and group it [[ㄱ,ㅏ],[ㄷ,ㅏ]].
+      const koCurrWord: string[][] = Hangul.disassemble(
+        TestWords.words.getCurrent(),
+        true
+      );
+      const koCurrInput: string[][] = Hangul.disassemble(
+        TestInput.input.current,
+        true
+      );
+      const inputGroupLength: number = koCurrInput.length - 1;
+      if (koCurrInput[inputGroupLength]) {
+        const inputCharLength: number = koCurrInput[inputGroupLength].length;
+        //at the end of the word, it will throw a (reading '0') this will be the space
+        try {
+          //if it overflows and returns undefined (e.g input [ㄱ,ㅏ,ㄷ]),
+          //take the difference between the overflow and the word
+          const koChar: string =
+            koCurrWord[inputGroupLength][inputCharLength] ??
+            koCurrWord[koCurrInput.length][
+              inputCharLength - koCurrWord[inputGroupLength].length
+            ];
+
+          Keymap.highlightKey(koChar);
+        } catch (e) {
+          Keymap.highlightKey("");
+        }
+      } else {
+        //for new words
+        Keymap.highlightKey(koCurrWord[0][0]);
+      }
+    }
   }
 }
 
@@ -496,7 +530,11 @@ function handleChar(
       ? resultingWord
       : Hangul.disassemble(resultingWord).join("");
   } else {
-    if (charIndex >= TestInput.corrected.current.length) {
+    const currCorrectedTestInputLength: number = !isCharKorean
+      ? TestInput.corrected.current.length
+      : Hangul.disassemble(TestInput.corrected.current).length;
+
+    if (charIndex >= currCorrectedTestInputLength) {
       TestInput.corrected.current += !isCharKorean
         ? char
         : Hangul.disassemble(char).concat();
@@ -525,11 +563,11 @@ function handleChar(
     char
   );
 
+  const testInputLength: number = !isCharKorean
+    ? TestInput.input.current.length
+    : Hangul.disassemble(TestInput.input.current).length;
   //update the active word top, but only once
-  if (
-    TestInput.input.current.length === 1 &&
-    TestWords.words.currentIndex === 0
-  ) {
+  if (testInputLength === 1 && TestWords.words.currentIndex === 0) {
     TestUI.setActiveWordTop(
       (<HTMLElement>document.querySelector("#words .active"))?.offsetTop
     );
@@ -659,7 +697,7 @@ function handleTab(event: JQuery.KeyDownEvent, popupVisible: boolean): void {
     // dont do anything special
     if (modalVisible) return;
 
-    // dont do anything on login so we can tab/esc betweeen inputs
+    // dont do anything on login so we can tab/esc between inputs
     if (ActivePage.get() === "login") return;
 
     event.preventDefault();

frontend/src/ts/elements/commandline.ts

@@ -223,6 +223,7 @@ function trigger(command: string): void {
   let shouldFocusTestUI = true;
   const list = CommandlineLists.current[CommandlineLists.current.length - 1];
   let sticky = false;
+
   $.each(list.list, (_index, obj) => {
     if (obj.id == command) {
       if (obj.shouldFocusTestUI !== undefined) {

frontend/src/ts/elements/keymap.ts

@@ -3,6 +3,7 @@ import * as ThemeColors from "./theme-colors";
 import * as SlowTimer from "../states/slow-timer";
 import * as ConfigEvent from "../observables/config-event";
 import * as Misc from "../utils/misc";
+import * as Hangul from "hangul-js";
 
 export function highlightKey(currentKey: string): void {
   if (Config.mode === "zen") return;
@@ -13,6 +14,9 @@ export function highlightKey(currentKey: string): void {
     }
 
     let highlightKey;
+    if (Config.language.startsWith("korean")) {
+      currentKey = Hangul.disassemble(currentKey)[0];
+    }
     if (currentKey == " ") {
       highlightKey = "#keymap .keySpace, #keymap .keySplitSpace";
     } else if (currentKey == '"') {
@@ -33,7 +37,7 @@ export function highlightKey(currentKey: string): void {
 
 export async function flashKey(key: string, correct: boolean): Promise<void> {
   if (key == undefined) return;
-
+  //console.log("key", key);
   if (key == " ") {
     key = "#keymap .keySpace, #keymap .keySplitSpace";
   } else if (key == '"') {

frontend/static/html/pages/test.html

@@ -155,15 +155,17 @@
       <div id="caret" class="default"></div>
       <div id="words"></div>
     </div>
+
+    <div id="koInputVisualContainer" style="display: none">
+      <div id="koInputVisual" aria-label="Korean Input Visual" class=""></div>
+    </div>
+
     <div id="keymap" class="hidden"></div>
     <div id="largeLiveWpmAndAcc" class="timerMain">
       <div id="liveWpm" class="hidden">123</div>
       <div id="liveAcc" class="hidden">100%%</div>
       <div id="liveBurst" class="hidden">1</div>
     </div>
-    <div id="koInputVisualContainer" style="display: none">
-      <div id="koInputVisual" aria-label="Korean Input Visual" class=""></div>
-    </div>
 
     <div
       id="restartTestButton"

frontend/static/layouts/_list.json

@@ -1153,5 +1153,16 @@
       "row4": [",,", "mM", "..", "jJ", ";", "gG", "lL", "pP", "vV", "  "],
       "row5": [" "]
     }
+  },
+  "korean": {
+    "keymapShowTopRow": false,
+    "type": "ansi",
+    "keys": {
+      "row1": ["`~", "1!", "2@", "3#", "4$", "5%", "6^", "7&", "8*", "9(", "0)", "-_", "=+"],
+      "row2": ["ㅂㅃ", "ㅈㅉ", "ㄷㄸ", "ㄱㄲ", "ㅅㅆ", "ㅛㅛ", "ㅕㅕ", "ㅑㅑ", "ㅐㅒ", "ㅔㅖ", "[{", "]}", "\\|"],
+      "row3": ["ㅁㅁ", "ㄴㄴ", "ㅇㅇ", "ㄹㄹ", "ㅎㅎ", "ㅗㅗ", "ㅓㅓ", "ㅏㅏ", "ㅣㅣ", ";:", "'\""],
+      "row4": ["ㅋㅋ", "ㅌㅌ", "ㅊㅊ", "ㅍㅍ", "ㅠㅠ", "ㅜㅜ", "ㅡㅡ", ",<", ".>", "/?"],
+      "row5": [" "]
+    }
   }
 }