make guesses display

This commit is contained in:
Hannah Park 2022-01-09 21:02:41 -05:00
parent 9ecb56dd7e
commit a33d1c08de
7 changed files with 142 additions and 4 deletions

View file

@ -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}

View file

@ -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>
</>
);
};

View file

@ -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>
);
};

View file

@ -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>
);
};

View file

@ -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>
);
};

View file

@ -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} />
))}
</>
);
};

View file

@ -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;
};