[pull] master from monkeytypegame:master

frontend/src/html/pages/test.html

@@ -60,7 +60,7 @@
       <div id="words" class="full-width"></div>
     </div>
 
-    <div id="compositionDisplay"></div>
+    <mount data-component="compositiondisplay"></mount>
     <mount data-component="keymap"></mount>
     <mount data-component="monkey"></mount>
 

frontend/src/styles/test.scss

@@ -1299,23 +1299,6 @@
   padding: 1em 2em;
 }
 
-#compositionDisplay {
-  font-size: 0.5em;
-  display: flex;
-  margin: 1rem auto 0px;
-  padding: 1rem 2rem;
-  height: 1.25em;
-  box-sizing: content-box;
-  user-select: none;
-  cursor: default;
-  color: var(--sub-color);
-
-  &.blurred {
-    opacity: 0.25;
-    filter: blur(4px);
-  }
-}
-
 .pageTest {
   height: 100%;
   display: grid;

frontend/src/ts/components/mount.tsx

@@ -23,6 +23,7 @@ import { ProfilePage } from "./pages/profile/ProfilePage";
 import { ProfileSearchPage } from "./pages/profile/ProfileSearchPage";
 import { SettingsPage } from "./pages/settings/SettingsPage";
 import { CapsWarning } from "./pages/test/CapsWarning";
+import { CompositionDisplay } from "./pages/test/CompositionDisplay";
 import { Keymap } from "./pages/test/Keymap";
 import { TestModesNotice } from "./pages/test/modes-notice/TestModesNotice";
 import { Monkey } from "./pages/test/Monkey";
@@ -49,6 +50,7 @@ const components: Record<string, () => JSXElement> = {
   commandlinehotkey: () => <CommandlineHotkey />,
   testmodesnotice: () => <TestModesNotice />,
   capswarning: () => <CapsWarning />,
+  compositiondisplay: () => <CompositionDisplay />,
   friendspage: () => <FriendsPage />,
   notfoundpage: () => <NotFoundPage />,
   accountsettingspage: () => <AccountSettingsPage />,

frontend/src/ts/components/pages/test/CompositionDisplay.tsx

@@ -0,0 +1,24 @@
+import { Show } from "solid-js";
+
+import { getConfig } from "../../../config/store";
+import { getCompositionText, isOutOfFocus } from "../../../states/test";
+import { cn } from "../../../utils/cn";
+
+export function CompositionDisplay() {
+  return (
+    <Show when={getConfig.compositionDisplay === "below"}>
+      <div
+        class={cn("mt-4 w-full text-center text-sub select-none", {
+          "opacity-25 blur-xs": isOutOfFocus(),
+        })}
+        style={{
+          "font-size": `${getConfig.fontSize}rem`,
+          // instant unblur, 0.25s fade to blur — matches the imperative #words path
+          transition: isOutOfFocus() ? "0.25s" : "none",
+        }}
+      >
+        {getCompositionText()}
+      </div>
+    </Show>
+  );
+}

frontend/src/ts/input/listeners/composition.ts

@@ -3,10 +3,9 @@ import * as CompositionState from "../../legacy-states/composition";
 import * as TestState from "../../test/test-state";
 import * as TestLogic from "../../test/test-logic";
 import { setLastInsertCompositionTextData } from "../state";
-import * as CompositionDisplay from "../../elements/composition-display";
 import { onInsertText } from "../handlers/insert-text";
 import { logTestEvent } from "../../test/events/data";
-import { isTestActive } from "../../states/test";
+import { isTestActive, setCompositionText } from "../../states/test";
 
 const inputEl = getInputElement();
 
@@ -40,7 +39,7 @@ inputEl.addEventListener("compositionupdate", (event) => {
 
   if (TestState.testRestarting || TestState.resultCalculating) return;
   CompositionState.setData(event.data);
-  CompositionDisplay.update(event.data);
+  setCompositionText(event.data);
 
   const now = performance.now();
 
@@ -57,7 +56,7 @@ inputEl.addEventListener("compositionend", async (event) => {
   if (TestState.testRestarting || TestState.resultCalculating) return;
   CompositionState.setComposing(false);
   CompositionState.setData("");
-  CompositionDisplay.update("");
+  setCompositionText("");
   setLastInsertCompositionTextData("");
 
   const now = performance.now();

frontend/src/ts/states/test.ts

@@ -24,6 +24,11 @@ export const [getLoadedChallenge, setLoadedChallenge] =
   createSignal<Challenge | null>(null);
 export const [getResultVisible, setResultVisible] = createSignal(false);
 export const [getFocus, setFocus] = createSignal(false);
+// #words is still vanilla so it's blurred imperatively (see test/out-of-focus);
+// the Solid-owned composition display reads this signal instead.
+export const [isOutOfFocus, setOutOfFocus] = createSignal(false);
+// live IME composition text, pushed from the compositionupdate/end events.
+export const [getCompositionText, setCompositionText] = createSignal("");
 export const [isTestInvalid, setIsTestInvalid] = createSignal(false);
 export const [isLongTest, setIsLongTest] = createSignal(false);
 export const [getLastResult, setLastResult] = createSignal<Omit<

frontend/src/ts/test/out-of-focus.ts

@@ -1,6 +1,7 @@
 import * as Misc from "../utils/misc";
 import { Config } from "../config/store";
 import { qs, qsa } from "../utils/dom";
+import { setOutOfFocus } from "../states/test";
 
 const outOfFocusTimeouts: (number | NodeJS.Timeout)[] = [];
 
@@ -10,9 +11,8 @@ const messages = {
 };
 
 export function hide(): void {
-  qsa("#words, #compositionDisplay")
-    ?.setStyle({ transition: "none" })
-    ?.removeClass("blurred");
+  qsa("#words")?.setStyle({ transition: "none" })?.removeClass("blurred");
+  setOutOfFocus(false);
   qs(".outOfFocusWarning")?.hide();
   Misc.clearTimeouts(outOfFocusTimeouts);
 }
@@ -21,9 +21,8 @@ export function show(mode: "default" | "window" = "default"): void {
   if (!Config.showOutOfFocusWarning) return;
   outOfFocusTimeouts.push(
     setTimeout(() => {
-      qsa("#words, #compositionDisplay")
-        ?.setStyle({ transition: "0.25s" })
-        ?.addClass("blurred");
+      qsa("#words")?.setStyle({ transition: "0.25s" })?.addClass("blurred");
+      setOutOfFocus(true);
       qs(".outOfFocusWarning .text")?.setText(messages[mode]);
       qs(".outOfFocusWarning")?.show();
     }, 1000),

frontend/src/ts/test/test-ui.ts

@@ -46,7 +46,6 @@ import {
 } from "../input/input-element";
 import * as MonkeyPower from "../elements/monkey-power";
 import * as SlowTimer from "../legacy-states/slow-timer";
-import * as CompositionDisplay from "../elements/composition-display";
 import * as AdController from "../controllers/ad-controller";
 import * as Joining from "./break-joining";
 import * as LayoutfluidFunboxTimer from "../test/funbox/layoutfluid-funbox-timer";
@@ -65,6 +64,7 @@ import {
   getCurrentQuote,
   isTestActive,
   resetCurrentLiveStats,
+  setCompositionText,
   wordsHaveNewline,
 } from "../states/test";
 import {
@@ -450,9 +450,9 @@ function updateWordWrapperClasses(): void {
     wordsEl.removeClass("colorfulMode");
   }
 
-  qsa(
-    "#caret, #paceCaret, #liveStatsMini, #typingTest, #wordsInput, #compositionDisplay",
-  ).setStyle({ fontSize: `${Config.fontSize}rem` });
+  qsa("#caret, #paceCaret, #liveStatsMini, #typingTest, #wordsInput").setStyle({
+    fontSize: `${Config.fontSize}rem`,
+  });
 
   if (TestState.isLanguageRightToLeft) {
     wordsEl.addClass("rightToLeftTest");
@@ -1905,10 +1905,7 @@ export function onTestRestart(source: "testPage" | "resultPage"): void {
   }
   AdController.destroyResult();
   if (Config.compositionDisplay === "below") {
-    CompositionDisplay.update(" ");
-    CompositionDisplay.show();
-  } else {
-    CompositionDisplay.hide();
+    setCompositionText(" ");
   }
   void SoundController.clearAllSounds();
   cancelPendingAnimationFramesStartingWith("test-ui");
@@ -2028,13 +2025,8 @@ configEvent.subscribe(({ key, newValue }) => {
   if (key === "showOutOfFocusWarning" && !newValue) {
     OutOfFocus.hide();
   }
-  if (key === "compositionDisplay") {
-    if (newValue === "below") {
-      CompositionDisplay.update(" ");
-      CompositionDisplay.show();
-    } else {
-      CompositionDisplay.hide();
-    }
+  if (key === "compositionDisplay" && newValue === "below") {
+    setCompositionText(" ");
   }
   if (
     ["fontSize", "fontFamily", "blindMode", "hideExtraLetters"].includes(