refactor: use dom utils in caret code (@Miodec) (monkeytypegame#7218)

Also adds a few more utils

Author: Miodec

frontend/src/ts/test/caret.ts

@@ -4,6 +4,7 @@ import * as TestState from "../test/test-state";
 import { subscribe } from "../observables/config-event";
 import { Caret } from "../utils/caret";
 import * as CompositionState from "../states/composition";
+import { qsr } from "../utils/dom";
 
 export function stopAnimation(): void {
   caret.stopBlinking();
@@ -40,10 +41,7 @@ export function updatePosition(noAnim = false): void {
   });
 }
 
-export const caret = new Caret(
-  document.getElementById("caret") as HTMLElement,
-  Config.caretStyle,
-);
+export const caret = new Caret(qsr("#caret"), Config.caretStyle);
 
 subscribe((eventKey) => {
   if (eventKey === "caretStyle") {

frontend/src/ts/test/pace-caret.ts

@@ -6,6 +6,7 @@ import * as TestState from "./test-state";
 import * as ConfigEvent from "../observables/config-event";
 import { getActiveFunboxes } from "./funbox/list";
 import { Caret } from "../utils/caret";
+import { qsr } from "../utils/dom";
 
 type Settings = {
   wpm: number;
@@ -22,10 +23,7 @@ let startTimestamp = 0;
 
 export let settings: Settings | null = null;
 
-export const caret = new Caret(
-  document.getElementById("paceCaret") as HTMLElement,
-  Config.paceCaretStyle,
-);
+export const caret = new Caret(qsr("#paceCaret"), Config.paceCaretStyle);
 
 let lastTestWpm = 0;