add status to guessed letter keys

This commit is contained in:
Hannah Park 2022-01-09 17:06:37 -05:00
parent 897b9995b3
commit 9ecb56dd7e
6 changed files with 113 additions and 124 deletions

View file

@ -45,7 +45,12 @@ function App() {
return ( return (
<div> <div>
<Keyboard onChar={onChar} onDelete={onDelete} onEnter={onEnter} /> <Keyboard
onChar={onChar}
onDelete={onDelete}
onEnter={onEnter}
guesses={guesses}
/>
<WinModal <WinModal
isOpen={isWinModalOpen} isOpen={isWinModalOpen}
handleClose={() => setIsWinModalOpen(false)} handleClose={() => setIsWinModalOpen(false)}

View file

@ -1,13 +1,14 @@
import { ReactNode } from "react"; import { ReactNode } from "react";
import classnames from "classnames"; import classnames from "classnames";
import { CharStatus, CharValue } from "../../lib/keyboard"; import { KeyValue } from "../../lib/keyboard";
import { CharStatus } from "../../lib/statuses";
type Props = { type Props = {
children: ReactNode; children?: ReactNode;
value: CharValue; value: KeyValue;
width?: number; width?: number;
status?: CharStatus; status?: CharStatus;
onClick: (value: CharValue) => void; onClick: (value: KeyValue) => void;
}; };
export const Key = ({ export const Key = ({
@ -35,7 +36,7 @@ export const Key = ({
className={classes} className={classes}
onClick={() => onClick(value)} onClick={() => onClick(value)}
> >
<span>{children}</span> {children || value}
</div> </div>
); );
}; };

View file

@ -1,113 +1,66 @@
import { CharValue } from "../../lib/keyboard"; import { KeyValue } from "../../lib/keyboard";
import { getStatuses } from "../../lib/statuses";
import { Key } from "./Key"; import { Key } from "./Key";
type Props = { type Props = {
onChar: (value: string) => void; onChar: (value: string) => void;
onDelete: () => void; onDelete: () => void;
onEnter: () => void; onEnter: () => void;
guesses: string[];
}; };
export const Keyboard = (props: Props) => { export const Keyboard = ({ onChar, onDelete, onEnter, guesses }: Props) => {
const onClick = (value: CharValue) => { const charStatuses = getStatuses(guesses);
console.log(charStatuses);
const onClick = (value: KeyValue) => {
if (value === "ENTER") { if (value === "ENTER") {
return props.onEnter(); return onEnter();
} }
if (value === "DELETE") { if (value === "DELETE") {
return props.onDelete(); return onDelete();
} }
return props.onChar(value); return onChar(value);
}; };
return ( return (
<div> <div>
<div className="flex justify-center mb-1"> <div className="flex justify-center mb-1">
<Key value="Q" onClick={onClick}> <Key value="Q" onClick={onClick} status={charStatuses["Q"]} />
Q <Key value="W" onClick={onClick} status={charStatuses["W"]} />
</Key> <Key value="E" onClick={onClick} status={charStatuses["E"]} />
<Key value="W" onClick={onClick}> <Key value="R" onClick={onClick} status={charStatuses["R"]} />
W <Key value="T" onClick={onClick} status={charStatuses["T"]} />
</Key> <Key value="Y" onClick={onClick} status={charStatuses["Y"]} />
<Key value="E" onClick={onClick}> <Key value="U" onClick={onClick} status={charStatuses["U"]} />
E <Key value="I" onClick={onClick} status={charStatuses["I"]} />
</Key> <Key value="O" onClick={onClick} status={charStatuses["O"]} />
<Key status="correct" value="R" onClick={onClick}> <Key value="P" onClick={onClick} status={charStatuses["P"]} />
R
</Key>
<Key value="T" onClick={onClick}>
T
</Key>
<Key value="Y" onClick={onClick}>
Y
</Key>
<Key status="present" value="U" onClick={onClick}>
U
</Key>
<Key value="I" onClick={onClick}>
I
</Key>
<Key value="O" onClick={onClick}>
O
</Key>
<Key value="P" onClick={onClick}>
P
</Key>
</div> </div>
<div className="flex justify-center mb-1"> <div className="flex justify-center mb-1">
<Key value="A" onClick={onClick}> <Key value="A" onClick={onClick} status={charStatuses["A"]} />
A <Key value="S" onClick={onClick} status={charStatuses["S"]} />
</Key> <Key value="D" onClick={onClick} status={charStatuses["D"]} />
<Key value="S" onClick={onClick}> <Key value="F" onClick={onClick} status={charStatuses["F"]} />
S <Key value="G" onClick={onClick} status={charStatuses["G"]} />
</Key> <Key value="H" onClick={onClick} status={charStatuses["H"]} />
<Key value="D" onClick={onClick}> <Key value="J" onClick={onClick} status={charStatuses["J"]} />
D <Key value="K" onClick={onClick} status={charStatuses["K"]} />
</Key> <Key value="L" onClick={onClick} status={charStatuses["L"]} />
<Key status="present" value="F" onClick={onClick}>
F
</Key>
<Key value="G" onClick={onClick}>
G
</Key>
<Key value="H" onClick={onClick}>
H
</Key>
<Key value="J" onClick={onClick}>
J
</Key>
<Key status="absent" value="K" onClick={onClick}>
K
</Key>
<Key value="L" onClick={onClick}>
L
</Key>
</div> </div>
<div className="flex justify-center"> <div className="flex justify-center">
<Key width={65.4} value="ENTER" onClick={onClick}> <Key width={65.4} value="ENTER" onClick={onClick}>
ENTER Enter
</Key>
<Key value="Z" onClick={onClick}>
Z
</Key>
<Key value="X" onClick={onClick}>
X
</Key>
<Key value="C" onClick={onClick}>
C
</Key>
<Key value="V" onClick={onClick}>
V
</Key>
<Key value="B" onClick={onClick}>
B
</Key>
<Key value="N" onClick={onClick}>
N
</Key>
<Key value="M" onClick={onClick}>
M
</Key> </Key>
<Key value="Z" onClick={onClick} status={charStatuses["Z"]} />
<Key value="X" onClick={onClick} status={charStatuses["X"]} />
<Key value="C" onClick={onClick} status={charStatuses["C"]} />
<Key value="V" onClick={onClick} status={charStatuses["V"]} />
<Key value="B" onClick={onClick} status={charStatuses["B"]} />
<Key value="N" onClick={onClick} status={charStatuses["N"]} />
<Key value="M" onClick={onClick} status={charStatuses["M"]} />
<Key width={65.4} value="DELETE" onClick={onClick}> <Key width={65.4} value="DELETE" onClick={onClick}>
DELETE Delete
</Key> </Key>
</div> </div>
</div> </div>

View file

@ -1,31 +1,3 @@
export type CharStatus = "absent" | "present" | "correct"; import { CharValue } from "./statuses";
export type CharValue = export type KeyValue = CharValue | "ENTER" | "DELETE";
| "Q"
| "W"
| "E"
| "R"
| "T"
| "Y"
| "U"
| "I"
| "O"
| "P"
| "A"
| "S"
| "D"
| "F"
| "G"
| "H"
| "J"
| "K"
| "L"
| "ENTER"
| "Z"
| "X"
| "C"
| "V"
| "B"
| "N"
| "M"
| "DELETE";

58
src/lib/statuses.ts Normal file
View file

@ -0,0 +1,58 @@
import { solution } from "./words";
export type CharStatus = "absent" | "present" | "correct";
export type CharValue =
| "Q"
| "W"
| "E"
| "R"
| "T"
| "Y"
| "U"
| "I"
| "O"
| "P"
| "A"
| "S"
| "D"
| "F"
| "G"
| "H"
| "J"
| "K"
| "L"
| "Z"
| "X"
| "C"
| "V"
| "B"
| "N"
| "M";
export const getStatuses = (
guesses: string[]
): { [key: string]: CharStatus } => {
const charObj: { [key: string]: CharStatus } = {};
guesses.forEach((word) => {
word.split("").forEach((letter, i) => {
if (!solution.includes(letter)) {
// make status absent
return (charObj[letter] = "absent");
}
if (letter === solution[i]) {
//make status correct
return (charObj[letter] = "correct");
}
if (charObj[letter] !== "correct") {
//make status present
return (charObj[letter] = "present");
}
});
});
return charObj;
};

View file

@ -5,7 +5,7 @@ export const isWordInWordList = (word: string) => {
}; };
export const isWinningWord = (word: string) => { export const isWinningWord = (word: string) => {
return solution === word.toLowerCase(); return solution === word;
}; };
export const getWordOfDay = () => { export const getWordOfDay = () => {
@ -15,7 +15,7 @@ export const getWordOfDay = () => {
const msInDay = 86400000; const msInDay = 86400000;
const index = Math.floor((now - epochMs) / msInDay); const index = Math.floor((now - epochMs) / msInDay);
return WORDS[index]; return WORDS[index].toUpperCase();
}; };
export const solution = getWordOfDay(); export const solution = getWordOfDay();