ref with utils, move isfocused up

frontend/src/ts/hooks/useRefWithUtils.ts

@@ -0,0 +1,17 @@
+import { Accessor } from "solid-js";
+import { ElementWithUtils } from "../utils/dom";
+
+export function useRefWithUtils<T extends HTMLElement>(): [
+  ref: (el: T) => void,
+  element: Accessor<ElementWithUtils<T> | undefined>,
+] {
+  let elementWithUtils: ElementWithUtils<T> | undefined;
+
+  const ref = (el: T): void => {
+    elementWithUtils = new ElementWithUtils(el);
+  };
+
+  const element = (): ElementWithUtils<T> | undefined => elementWithUtils;
+
+  return [ref, element];
+}

frontend/src/ts/test/live-counter.tsx

@@ -1,7 +1,6 @@
 import { Accessor, JSXElement } from "solid-js";
-import { ElementWithUtils } from "../utils/dom";
-import { isFocused } from "./focus";
 import { useVisibilityAnimation } from "../hooks/useVisibilityAnimation";
+import { useRefWithUtils } from "../hooks/useRefWithUtils";
 
 export function LiveCounter(props: {
   value: Accessor<string>;
@@ -11,16 +10,16 @@ export function LiveCounter(props: {
   }>;
   class?: string;
 }): JSXElement {
-  let ref: ElementWithUtils<HTMLDivElement> | undefined;
+  const [ref, element] = useRefWithUtils<HTMLDivElement>();
 
   useVisibilityAnimation({
-    element: () => ref,
-    visible: () => props.visible().value && isFocused(),
+    element,
+    visible: () => props.visible().value,
     animate: () => props.visible().withAnimation,
   });
 
   return (
-    <div ref={(el) => (ref = new ElementWithUtils(el))} class={props.class}>
+    <div ref={ref} class={props.class}>
       {props.value()}
     </div>
   );

frontend/src/ts/test/live-states.tsx

@@ -7,6 +7,7 @@ import {
   getLiveBurstStyle,
   getLiveSpeedStyle,
 } from "../signals/config";
+import { isFocused } from "./focus";
 
 const [getWpm, setLiveStatWpm] = createSignal("0");
 const [getAcc, setLiveStatAcc] = createSignal("100%");
@@ -17,6 +18,13 @@ const [statsVisible, setStatsVisible] = createSignal({
   withAnimation: true,
 });
 
+const getStatsVisible = () => {
+  return {
+    value: statsVisible().value && isFocused(),
+    withAnimation: statsVisible().withAnimation,
+  };
+};
+
 export { setLiveStatWpm, setLiveStatAcc, setLiveStatBurst, setStatsVisible };
 
 export function mountLiveCounters(): void {
@@ -27,17 +35,17 @@ export function mountLiveCounters(): void {
         <LiveCounter
           class="liveSpeed"
           value={() => (getLiveSpeedStyle() === "text" ? getWpm() : "")}
-          visible={statsVisible}
+          visible={getStatsVisible}
         />
         <LiveCounter
           class="liveAcc"
           value={() => (getLiveAccStyle() === "text" ? getAcc() : "")}
-          visible={statsVisible}
+          visible={getStatsVisible}
         />
         <LiveCounter
           class="liveBurst"
           value={() => (getLiveBurstStyle() === "text" ? getBurst() : "")}
-          visible={statsVisible}
+          visible={getStatsVisible}
         />
       </>
     ),
@@ -51,17 +59,17 @@ export function mountLiveCounters(): void {
         <LiveCounter
           class="speed"
           value={() => (getLiveSpeedStyle() === "mini" ? getWpm() : "")}
-          visible={statsVisible}
+          visible={getStatsVisible}
         />
         <LiveCounter
           class="acc"
           value={() => (getLiveAccStyle() === "mini" ? getAcc() : "")}
-          visible={statsVisible}
+          visible={getStatsVisible}
         />
         <LiveCounter
           class="burst"
           value={() => (getLiveBurstStyle() === "mini" ? getBurst() : "")}
-          visible={statsVisible}
+          visible={getStatsVisible}
         />
       </>
     ),