make guesses display
This commit is contained in:
parent
9ecb56dd7e
commit
a33d1c08de
7 changed files with 142 additions and 4 deletions
|
@ -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}
|
||||
|
|
25
src/components/grid/Cell.tsx
Normal file
25
src/components/grid/Cell.tsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
};
|
18
src/components/grid/CompletedRow.tsx
Normal file
18
src/components/grid/CompletedRow.tsx
Normal 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>
|
||||
);
|
||||
};
|
21
src/components/grid/CurrentRow.tsx
Normal file
21
src/components/grid/CurrentRow.tsx
Normal 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>
|
||||
);
|
||||
};
|
13
src/components/grid/EmptyRow.tsx
Normal file
13
src/components/grid/EmptyRow.tsx
Normal 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>
|
||||
);
|
||||
};
|
25
src/components/grid/Grid.tsx
Normal file
25
src/components/grid/Grid.tsx
Normal 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} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
};
|
|
@ -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;
|
||||
};
|
||||
|
|
Loading…
Add table
Reference in a new issue