From a33d1c08dee5316a08fc8f6399e8e25fb40643a2 Mon Sep 17 00:00:00 2001 From: Hannah Park Date: Sun, 9 Jan 2022 21:02:41 -0500 Subject: [PATCH] make guesses display --- src/App.tsx | 7 +++--- src/components/grid/Cell.tsx | 25 +++++++++++++++++++ src/components/grid/CompletedRow.tsx | 18 ++++++++++++++ src/components/grid/CurrentRow.tsx | 21 ++++++++++++++++ src/components/grid/EmptyRow.tsx | 13 ++++++++++ src/components/grid/Grid.tsx | 25 +++++++++++++++++++ src/lib/statuses.ts | 37 ++++++++++++++++++++++++++++ 7 files changed, 142 insertions(+), 4 deletions(-) create mode 100644 src/components/grid/Cell.tsx create mode 100644 src/components/grid/CompletedRow.tsx create mode 100644 src/components/grid/CurrentRow.tsx create mode 100644 src/components/grid/EmptyRow.tsx create mode 100644 src/components/grid/Grid.tsx 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; +};