make guesses display

src/App.tsx

@@ -1,6 +1,8 @@
 import { useState, useEffect } from "react";
+import { Grid } from "./components/grid/Grid";
 import { Keyboard } from "./components/keyboard/Keyboard";
 import { WinModal } from "./components/win-modal/WinModal";
+import { getGuessStatuses } from "./lib/statuses";
 import { solution, isWordInWordList, isWinningWord } from "./lib/words";
 
 function App() {
@@ -39,12 +41,9 @@ function App() {
     }
   };
 
-  console.log(currentGuess);
-  console.log(guesses);
-  console.log(solution);
-
   return (
     <div>
+      <Grid guesses={guesses} currentGuess={currentGuess} />
       <Keyboard
         onChar={onChar}
         onDelete={onDelete}

src/components/grid/Cell.tsx

@@ -0,0 +1,25 @@
+import { CharStatus } from "../../lib/statuses";
+import classnames from "classnames";
+
+type Props = {
+  value?: string;
+  status?: CharStatus;
+};
+
+export const Cell = ({ value, status }: Props) => {
+  const classes = classnames(
+    "w-14 h-14 border-solid border-2 border-slate-200 flex items-center justify-center mx-0.5 text-lg font-bold rounded",
+    {
+      "bg-white": !status,
+      "bg-slate-400 text-white": status === "absent",
+      "bg-green-500 text-white": status === "correct",
+      "bg-yellow-500 text-white": status === "present",
+    }
+  );
+
+  return (
+    <>
+      <div className={classes}>{value}</div>
+    </>
+  );
+};

src/components/grid/CompletedRow.tsx

@@ -0,0 +1,18 @@
+import { getGuessStatuses } from "../../lib/statuses";
+import { Cell } from "./Cell";
+
+type Props = {
+  guess: string;
+};
+
+export const CompletedRow = ({ guess }: Props) => {
+  const statuses = getGuessStatuses(guess);
+
+  return (
+    <div className="flex justify-center mb-1">
+      {guess.split("").map((letter, i) => (
+        <Cell key={i} value={letter} status={statuses[i]} />
+      ))}
+    </div>
+  );
+};

src/components/grid/CurrentRow.tsx

@@ -0,0 +1,21 @@
+import { Cell } from "./Cell";
+
+type Props = {
+  guess: string;
+};
+
+export const CurrentRow = ({ guess }: Props) => {
+  const splitGuess = guess.split("");
+  const emptyCells = Array.from(Array(5 - splitGuess.length));
+
+  return (
+    <div className="flex justify-center mb-1">
+      {splitGuess.map((letter, i) => (
+        <Cell key={i} value={letter} />
+      ))}
+      {emptyCells.map((_, i) => (
+        <Cell key={i} />
+      ))}
+    </div>
+  );
+};

src/components/grid/EmptyRow.tsx

@@ -0,0 +1,13 @@
+import { Cell } from "./Cell";
+
+export const EmptyRow = () => {
+  const emptyCells = Array.from(Array(5));
+
+  return (
+    <div className="flex justify-center mb-1">
+      {emptyCells.map((_, i) => (
+        <Cell key={i} />
+      ))}
+    </div>
+  );
+};

src/components/grid/Grid.tsx

@@ -0,0 +1,25 @@
+import { CompletedRow } from "./CompletedRow";
+import { CurrentRow } from "./CurrentRow";
+import { EmptyRow } from "./EmptyRow";
+
+type Props = {
+  guesses: string[];
+  currentGuess: string;
+};
+
+export const Grid = ({ guesses, currentGuess }: Props) => {
+  const empties =
+    guesses.length < 5 ? Array.from(Array(5 - guesses.length)) : [];
+
+  return (
+    <>
+      {guesses.map((guess, i) => (
+        <CompletedRow key={i} guess={guess} />
+      ))}
+      {guesses.length < 6 && <CurrentRow guess={currentGuess} />}
+      {empties.map((_, i) => (
+        <EmptyRow key={i} />
+      ))}
+    </>
+  );
+};

src/lib/statuses.ts

@@ -56,3 +56,40 @@ export const getStatuses = (
 
   return charObj;
 };
+
+export const getGuessStatuses = (guess: string): CharStatus[] => {
+  const splitSolution = solution.split("");
+  const solutionCharsTaken = splitSolution.map((x) => false);
+
+  const statuses: CharStatus[] = [];
+
+  guess.split("").forEach((letter, i) => {
+    // handle the correct case
+    if (letter === splitSolution[i]) {
+      statuses.push("correct");
+      solutionCharsTaken[i] = true;
+      return;
+    }
+
+    // handles the absent case
+    if (!splitSolution.includes(letter)) {
+      statuses.push("absent");
+      return;
+    }
+
+    // now we are left with "present"s
+    const indexOfPresentChar = splitSolution.findIndex(
+      (x, index) => x === letter && !solutionCharsTaken[index]
+    );
+    if (indexOfPresentChar > -1) {
+      statuses.push("present");
+      solutionCharsTaken[indexOfPresentChar] = true;
+      return;
+    } else {
+      statuses.push("absent");
+      return;
+    }
+  });
+
+  return statuses;
+};