refactor(caps-lock): use isCapsLockOn (@Leonabcd123)

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

@@ -2,7 +2,7 @@ import { Config } from "../config/store";
 import { configEvent } from "../events/config";
 import { randomElementFromArray } from "../utils/arrays";
 import { leftState, rightState } from "../test/shift-tracker";
-import { capsState } from "../test/caps-warning";
+import { isCapsLockOn } from "@leonabcd123/modern-caps-lock";
 import { showErrorNotification } from "../states/notifications";
 
 import type { Howl } from "howler";
@@ -335,7 +335,8 @@ function playNote(options: {
   }
 
   const baseOctave = 3;
-  const octave = baseOctave + (leftState || rightState || capsState ? 1 : 0);
+  const octave =
+    baseOctave + (leftState || rightState || isCapsLockOn() ? 1 : 0);
   const currentFrequency = codeToNote[currentCode]?.(octave);
 
   const oscillatorNode = audioCtx.createOscillator();

frontend/src/ts/elements/keymap.ts

@@ -7,7 +7,7 @@ import * as Hangul from "hangul-js";
 import { showErrorNotification } from "../states/notifications";
 import { getActivePage } from "../states/core";
 import * as TestWords from "../test/test-words";
-import { capsState } from "../test/caps-warning";
+import { isCapsLockOn } from "@leonabcd123/modern-caps-lock";
 import * as ShiftTracker from "../test/shift-tracker";
 import * as AltTracker from "../test/alt-tracker";
 import * as KeyConverter from "../utils/key-converter";
@@ -504,6 +504,7 @@ function getLegendStates(): KeymapLegendStates | undefined {
   // so we have to check for that.
   const shiftState = ShiftTracker.leftState || ShiftTracker.rightState;
   const altState = AltTracker.leftState || AltTracker.rightState;
+  const capsState = isCapsLockOn();
 
   const osDependentLettersState = isMacLike
     ? shiftState || capsState

frontend/src/ts/test/caps-warning.ts

@@ -1,37 +1,17 @@
 import { Config } from "../config/store";
 import { qsr } from "../utils/dom";
-import { onCapsLockChange } from "@leonabcd123/modern-caps-lock";
+import { onCapsLockChange, isCapsLockOn } from "@leonabcd123/modern-caps-lock";
 
 const el = qsr("#capsWarning");
-let visible = false;
 
-export let capsState = false;
-
-function show(): void {
-  if (!visible) {
+function updateCapsWarningVisibility(): void {
+  if (Config.capsLockWarning && isCapsLockOn()) {
     el.show();
-    visible = true;
-  }
-}
-
-function hide(): void {
-  if (visible) {
+  } else {
     el.hide();
-    visible = false;
   }
 }
 
-function updateCapsWarningVisibility(): void {
-  try {
-    if (Config.capsLockWarning && capsState) {
-      show();
-    } else {
-      hide();
-    }
-  } catch {}
-}
-
-onCapsLockChange((currentCapsState: boolean) => {
-  capsState = currentCapsState;
+onCapsLockChange(() => {
   updateCapsWarningVisibility();
 });

frontend/src/ts/test/layout-emulator.ts

@@ -1,6 +1,6 @@
 import { Config } from "../config/store";
 import * as JSONData from "../utils/json-data";
-import { capsState } from "./caps-warning";
+import { isCapsLockOn } from "@leonabcd123/modern-caps-lock";
 import { showErrorNotification } from "../states/notifications";
 import * as KeyConverter from "../utils/key-converter";
 
@@ -21,7 +21,7 @@ export async function getCharFromEvent(
     const isNotPunctuation = !isPunctuationPattern.test(
       keyVariants.slice(altGrIndex, altGrIndex + 2).join(""),
     );
-    if (capsState && isNotPunctuation) {
+    if (isCapsLockOn() && isNotPunctuation) {
       isCapitalized = !event.shiftKey;
     }