add status to guessed letter keys

src/App.tsx

@@ -45,7 +45,12 @@ function App() {
 
   return (
     <div>
-      <Keyboard onChar={onChar} onDelete={onDelete} onEnter={onEnter} />
+      <Keyboard
+        onChar={onChar}
+        onDelete={onDelete}
+        onEnter={onEnter}
+        guesses={guesses}
+      />
       <WinModal
         isOpen={isWinModalOpen}
         handleClose={() => setIsWinModalOpen(false)}

src/components/keyboard/Key.tsx

@@ -1,13 +1,14 @@
 import { ReactNode } from "react";
 import classnames from "classnames";
-import { CharStatus, CharValue } from "../../lib/keyboard";
+import { KeyValue } from "../../lib/keyboard";
+import { CharStatus } from "../../lib/statuses";
 
 type Props = {
-  children: ReactNode;
+  children?: ReactNode;
-  value: CharValue;
+  value: KeyValue;
   width?: number;
   status?: CharStatus;
-  onClick: (value: CharValue) => void;
+  onClick: (value: KeyValue) => void;
 };
 
 export const Key = ({
@@ -35,7 +36,7 @@ export const Key = ({
       className={classes}
       onClick={() => onClick(value)}
     >
-      <span>{children}</span>
+      {children || value}
     </div>
   );
 };

src/components/keyboard/Keyboard.tsx

@@ -1,113 +1,66 @@
-import { CharValue } from "../../lib/keyboard";
+import { KeyValue } from "../../lib/keyboard";
+import { getStatuses } from "../../lib/statuses";
 import { Key } from "./Key";
 
 type Props = {
   onChar: (value: string) => void;
   onDelete: () => void;
   onEnter: () => void;
+  guesses: string[];
 };
 
-export const Keyboard = (props: Props) => {
+export const Keyboard = ({ onChar, onDelete, onEnter, guesses }: Props) => {
-  const onClick = (value: CharValue) => {
+  const charStatuses = getStatuses(guesses);
+  console.log(charStatuses);
+
+  const onClick = (value: KeyValue) => {
     if (value === "ENTER") {
-      return props.onEnter();
+      return onEnter();
     }
     if (value === "DELETE") {
-      return props.onDelete();
+      return onDelete();
     }
-    return props.onChar(value);
+    return onChar(value);
   };
 
   return (
     <div>
       <div className="flex justify-center mb-1">
-        <Key value="Q" onClick={onClick}>
+        <Key value="Q" onClick={onClick} status={charStatuses["Q"]} />
-          Q
+        <Key value="W" onClick={onClick} status={charStatuses["W"]} />
-        </Key>
+        <Key value="E" onClick={onClick} status={charStatuses["E"]} />
-        <Key value="W" onClick={onClick}>
+        <Key value="R" onClick={onClick} status={charStatuses["R"]} />
-          W
+        <Key value="T" onClick={onClick} status={charStatuses["T"]} />
-        </Key>
+        <Key value="Y" onClick={onClick} status={charStatuses["Y"]} />
-        <Key value="E" onClick={onClick}>
+        <Key value="U" onClick={onClick} status={charStatuses["U"]} />
-          E
+        <Key value="I" onClick={onClick} status={charStatuses["I"]} />
-        </Key>
+        <Key value="O" onClick={onClick} status={charStatuses["O"]} />
-        <Key status="correct" value="R" onClick={onClick}>
+        <Key value="P" onClick={onClick} status={charStatuses["P"]} />
-          R
-        </Key>
-        <Key value="T" onClick={onClick}>
-          T
-        </Key>
-        <Key value="Y" onClick={onClick}>
-          Y
-        </Key>
-        <Key status="present" value="U" onClick={onClick}>
-          U
-        </Key>
-        <Key value="I" onClick={onClick}>
-          I
-        </Key>
-        <Key value="O" onClick={onClick}>
-          O
-        </Key>
-        <Key value="P" onClick={onClick}>
-          P
-        </Key>
       </div>
       <div className="flex justify-center mb-1">
-        <Key value="A" onClick={onClick}>
+        <Key value="A" onClick={onClick} status={charStatuses["A"]} />
-          A
+        <Key value="S" onClick={onClick} status={charStatuses["S"]} />
-        </Key>
+        <Key value="D" onClick={onClick} status={charStatuses["D"]} />
-        <Key value="S" onClick={onClick}>
+        <Key value="F" onClick={onClick} status={charStatuses["F"]} />
-          S
+        <Key value="G" onClick={onClick} status={charStatuses["G"]} />
-        </Key>
+        <Key value="H" onClick={onClick} status={charStatuses["H"]} />
-        <Key value="D" onClick={onClick}>
+        <Key value="J" onClick={onClick} status={charStatuses["J"]} />
-          D
+        <Key value="K" onClick={onClick} status={charStatuses["K"]} />
-        </Key>
+        <Key value="L" onClick={onClick} status={charStatuses["L"]} />
-        <Key status="present" value="F" onClick={onClick}>
-          F
-        </Key>
-        <Key value="G" onClick={onClick}>
-          G
-        </Key>
-        <Key value="H" onClick={onClick}>
-          H
-        </Key>
-        <Key value="J" onClick={onClick}>
-          J
-        </Key>
-        <Key status="absent" value="K" onClick={onClick}>
-          K
-        </Key>
-        <Key value="L" onClick={onClick}>
-          L
-        </Key>
       </div>
       <div className="flex justify-center">
         <Key width={65.4} value="ENTER" onClick={onClick}>
-          ENTER
+          Enter
-        </Key>
-        <Key value="Z" onClick={onClick}>
-          Z
-        </Key>
-        <Key value="X" onClick={onClick}>
-          X
-        </Key>
-        <Key value="C" onClick={onClick}>
-          C
-        </Key>
-        <Key value="V" onClick={onClick}>
-          V
-        </Key>
-        <Key value="B" onClick={onClick}>
-          B
-        </Key>
-        <Key value="N" onClick={onClick}>
-          N
-        </Key>
-        <Key value="M" onClick={onClick}>
-          M
         </Key>
+        <Key value="Z" onClick={onClick} status={charStatuses["Z"]} />
+        <Key value="X" onClick={onClick} status={charStatuses["X"]} />
+        <Key value="C" onClick={onClick} status={charStatuses["C"]} />
+        <Key value="V" onClick={onClick} status={charStatuses["V"]} />
+        <Key value="B" onClick={onClick} status={charStatuses["B"]} />
+        <Key value="N" onClick={onClick} status={charStatuses["N"]} />
+        <Key value="M" onClick={onClick} status={charStatuses["M"]} />
         <Key width={65.4} value="DELETE" onClick={onClick}>
-          DELETE
+          Delete
         </Key>
       </div>
     </div>

src/lib/keyboard.ts

@@ -1,31 +1,3 @@
-export type CharStatus = "absent" | "present" | "correct";
+import { CharValue } from "./statuses";
 
-export type CharValue =
+export type KeyValue = CharValue | "ENTER" | "DELETE";
-  | "Q"
-  | "W"
-  | "E"
-  | "R"
-  | "T"
-  | "Y"
-  | "U"
-  | "I"
-  | "O"
-  | "P"
-  | "A"
-  | "S"
-  | "D"
-  | "F"
-  | "G"
-  | "H"
-  | "J"
-  | "K"
-  | "L"
-  | "ENTER"
-  | "Z"
-  | "X"
-  | "C"
-  | "V"
-  | "B"
-  | "N"
-  | "M"
-  | "DELETE";

src/lib/statuses.ts

@@ -0,0 +1,58 @@
+import { solution } from "./words";
+
+export type CharStatus = "absent" | "present" | "correct";
+
+export type CharValue =
+  | "Q"
+  | "W"
+  | "E"
+  | "R"
+  | "T"
+  | "Y"
+  | "U"
+  | "I"
+  | "O"
+  | "P"
+  | "A"
+  | "S"
+  | "D"
+  | "F"
+  | "G"
+  | "H"
+  | "J"
+  | "K"
+  | "L"
+  | "Z"
+  | "X"
+  | "C"
+  | "V"
+  | "B"
+  | "N"
+  | "M";
+
+export const getStatuses = (
+  guesses: string[]
+): { [key: string]: CharStatus } => {
+  const charObj: { [key: string]: CharStatus } = {};
+
+  guesses.forEach((word) => {
+    word.split("").forEach((letter, i) => {
+      if (!solution.includes(letter)) {
+        // make status absent
+        return (charObj[letter] = "absent");
+      }
+
+      if (letter === solution[i]) {
+        //make status correct
+        return (charObj[letter] = "correct");
+      }
+
+      if (charObj[letter] !== "correct") {
+        //make status present
+        return (charObj[letter] = "present");
+      }
+    });
+  });
+
+  return charObj;
+};

src/lib/words.ts

@@ -5,7 +5,7 @@ export const isWordInWordList = (word: string) => {
 };
 
 export const isWinningWord = (word: string) => {
-  return solution === word.toLowerCase();
+  return solution === word;
 };
 
 export const getWordOfDay = () => {
@@ -15,7 +15,7 @@ export const getWordOfDay = () => {
   const msInDay = 86400000;
   const index = Math.floor((now - epochMs) / msInDay);
 
-  return WORDS[index];
+  return WORDS[index].toUpperCase();
 };
 
 export const solution = getWordOfDay();