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