Highlight letters during the guess

Author: miorel

src/App.module.css

@@ -10,11 +10,32 @@
   justify-content: flex-start;
 }
 
+.guessContainer {
+  min-width: 25vw;
+  position: relative;
+}
+
 .guess {
-  min-width: 50%;
-  max-width: 100%;
-  text-align: center;
+  position: absolute;
+  left: 0;
+  top: 0;
+  color: transparent;
+  background: transparent;
+  caret-color: black;
+}
+
+.guess,
+.guessUnderlay {
   text-transform: uppercase;
+  height: 100%;
+  width: 100%;
+  text-align: center;
+}
+
+.guessUnderlay {
+  padding: 1vmin 2vmin;
+  white-space: pre-wrap;
+  line-height: 150%;
 }
 
 .guessLabel {

src/App.tsx

@@ -6,19 +6,26 @@ import useAppState, { type Round } from "./hooks/useAppState";
 import useLoadData from "./hooks/useLoadData";
 import countIf from "./util/countIf";
 import pluralize from "./util/pluralize";
+import Word from "./Word";
 
 function Container({
   children,
-  finishedRounds = [],
   currentRound,
+  finishedRounds = [],
+  guess,
 }: {
   children: ReactNode;
   currentRound?: Round;
   finishedRounds?: readonly Round[];
+  guess?: string;
 }) {
   return (
     <div className={`${styles.container} centered-container flex-col`}>
-      <Rounds finishedRounds={finishedRounds} currentRound={currentRound} />
+      <Rounds
+        finishedRounds={finishedRounds}
+        currentRound={currentRound}
+        guess={guess}
+      />
       {children}
     </div>
   );
@@ -75,18 +82,35 @@ export default function App() {
         <Container
           finishedRounds={state.finishedRounds}
           currentRound={state.currentRound}
+          guess={state.guess}
         >
           <label className={`${styles.guessLabel} centered-container flex-col`}>
-            <input
-              ref={guessInputRef}
-              type="text"
-              autoFocus
-              className={`${styles.guess} word`}
-              value={state.guess}
-              onChange={(ev) =>
-                dispatch({ type: "update-guess", newGuess: ev.target.value })
-              }
-            />
+            <div className={styles.guessContainer}>
+              <div
+                className={`${styles.guessUnderlay} word centered-container flex-col`}
+              >
+                <Word
+                  word={
+                    state.guess.toUpperCase() ||
+                    // Make sure the container is never empty, so that it takes some vertical space.
+                    " "
+                  }
+                  highlightInReference
+                  highlightOutOfReference
+                  referenceWord={state.currentRound.wordScrambled}
+                />
+              </div>
+              <input
+                ref={guessInputRef}
+                type="text"
+                autoFocus
+                className={`${styles.guess} word`}
+                value={state.guess}
+                onChange={(ev) =>
+                  dispatch({ type: "update-guess", newGuess: ev.target.value })
+                }
+              />
+            </div>
             <div>Unscramble the word!</div>
           </label>
           <div className={`${styles.buttonRow} centered-container flex-row`}>

src/Rounds.module.css

@@ -15,6 +15,6 @@
 
 .container,
 .innerContainer {
-  gap: 1.5vw;
+  gap: 1vw;
   overflow: hidden;
 }

src/Rounds.tsx

@@ -7,9 +7,10 @@ import Word from "./Word";
 type Props = {
   finishedRounds: readonly Round[];
   currentRound?: Round;
+  guess?: string;
 };
 
-export default function Rounds({ currentRound, finishedRounds }: Props) {
+export default function Rounds({ currentRound, finishedRounds, guess }: Props) {
   return (
     <div className={`${styles.container} centered-container flex-col`}>
       <div className={`${styles.innerContainer} centered-container flex-col`}>
@@ -27,7 +28,13 @@ export default function Rounds({ currentRound, finishedRounds }: Props) {
           />
         ))}
       </div>
-      {currentRound && <Word word={currentRound.wordScrambled} />}
+      {currentRound && (
+        <Word
+          word={currentRound.wordScrambled}
+          highlightInReference
+          referenceWord={guess?.toUpperCase()}
+        />
+      )}
     </div>
   );
 }

src/Word.tsx

@@ -1,13 +1,57 @@
 import React from "react";
 
 import styles from "./Word.module.css";
+import getFrequencyMap from "./util/getFrequencyMap";
 
 type Props = {
   word: string;
   color?: "positive" | "negative" | "neutral";
+
+  referenceWord?: string;
+  highlightInReference?: boolean;
+  highlightOutOfReference?: boolean;
 };
 
-export default function Word({ word, color = "neutral" }: Props) {
+export default function Word({
+  word,
+  color = "neutral",
+  referenceWord,
+  highlightInReference,
+  highlightOutOfReference,
+}: Props) {
+  const wordContent = (() => {
+    if (
+      referenceWord == null ||
+      (!highlightInReference && !highlightOutOfReference)
+    ) {
+      return word;
+    }
+
+    const freq = getFrequencyMap(referenceWord);
+
+    return (
+      <>
+        {[...word].map((c, i) => {
+          let color: undefined | string = undefined;
+          if ((freq[c] ?? 0) > 0) {
+            --freq[c];
+            if (highlightInReference) {
+              color = "royalblue";
+            }
+          } else if (highlightOutOfReference) {
+            color = "crimson";
+          }
+
+          return (
+            <span key={i} style={{ color }}>
+              {c}
+            </span>
+          );
+        })}
+      </>
+    );
+  })();
+
   return (
     <div
       className={[
@@ -18,7 +62,7 @@ export default function Word({ word, color = "neutral" }: Props) {
         .filter(Boolean)
         .join(" ")}
     >
-      {word}
+      {wordContent}
     </div>
   );
 }

src/index.css

@@ -10,7 +10,6 @@ button {
   -moz-osx-font-smoothing: grayscale;
 
   font-size: calc(max(12px, 1.5vw));
-  line-height: 150%;
 }
 
 html,
@@ -21,10 +20,6 @@ body,
   width: 100vw;
 }
 
-button {
-  padding: 5px 20px;
-}
-
 .word,
 code {
   font-family:
@@ -60,6 +55,7 @@ input {
   padding: 1vmin 2vmin;
 
   overflow: hidden;
+  line-height: 150%;
 }
 
 button {
@@ -71,3 +67,7 @@ button:hover,
 button:focus {
   background: color-mix(in oklch, cornflowerblue 45%, transparent);
 }
+
+* {
+  box-sizing: border-box;
+}

src/util/getFrequencyMap.ts

@@ -0,0 +1,8 @@
+export default function getFrequencyMap(s: string): Record<string, number> {
+  const res: Record<string, number> = {};
+  for (const c of s) {
+    res[c] = (res[c] ?? 0) + 1;
+  }
+
+  return res;
+}