diff --git a/src/App.tsx b/src/App.tsx
index 4d52b26..c850403 100644
--- a/src/App.tsx
+++ b/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 (
+
{
+ 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 (
+ <>
+ {value}
+ >
+ );
+};
diff --git a/src/components/grid/CompletedRow.tsx b/src/components/grid/CompletedRow.tsx
new file mode 100644
index 0000000..f75443b
--- /dev/null
+++ b/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 (
+
+ {guess.split("").map((letter, i) => (
+ |
+ ))}
+
+ );
+};
diff --git a/src/components/grid/CurrentRow.tsx b/src/components/grid/CurrentRow.tsx
new file mode 100644
index 0000000..cb48527
--- /dev/null
+++ b/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 (
+
+ {splitGuess.map((letter, i) => (
+ |
+ ))}
+ {emptyCells.map((_, i) => (
+ |
+ ))}
+
+ );
+};
diff --git a/src/components/grid/EmptyRow.tsx b/src/components/grid/EmptyRow.tsx
new file mode 100644
index 0000000..1d12a4b
--- /dev/null
+++ b/src/components/grid/EmptyRow.tsx
@@ -0,0 +1,13 @@
+import { Cell } from "./Cell";
+
+export const EmptyRow = () => {
+ const emptyCells = Array.from(Array(5));
+
+ return (
+
+ {emptyCells.map((_, i) => (
+ |
+ ))}
+
+ );
+};
diff --git a/src/components/grid/Grid.tsx b/src/components/grid/Grid.tsx
new file mode 100644
index 0000000..15f9fc4
--- /dev/null
+++ b/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) => (
+
+ ))}
+ {guesses.length < 6 && }
+ {empties.map((_, i) => (
+
+ ))}
+ >
+ );
+};
diff --git a/src/lib/statuses.ts b/src/lib/statuses.ts
index 2571dcc..3665ff7 100644
--- a/src/lib/statuses.ts
+++ b/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;
+};