christofsteel/honigle
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add status to guessed letter keys

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/App.tsx
View file

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

11
src/components/keyboard/Key.tsx
View file

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

125
src/components/keyboard/Keyboard.tsx
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";
type Props = {
onChar: (value: string) => void;
onDelete: () => void;
onEnter: () => void;
guesses: string[];
};
export const Keyboard = (props: Props) => {
const onClick = (value: CharValue) => {
export const Keyboard = ({ onChar, onDelete, onEnter, guesses }: Props) => {
const charStatuses = getStatuses(guesses);
console.log(charStatuses);
const onClick = (value: KeyValue) => {
if (value === "ENTER") {
return props.onEnter();
return onEnter();
}
if (value === "DELETE") {
return props.onDelete();
return onDelete();
}
return props.onChar(value);
return onChar(value);
};
return (
<div>
<div className="flex justify-center mb-1">
<Key value="Q" onClick={onClick}>
Q
</Key>
<Key value="W" onClick={onClick}>
W
</Key>
<Key value="E" onClick={onClick}>
E
</Key>
<Key status="correct" value="R" onClick={onClick}>
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>
<Key value="Q" onClick={onClick} status={charStatuses["Q"]} />
<Key value="W" onClick={onClick} status={charStatuses["W"]} />
<Key value="E" onClick={onClick} status={charStatuses["E"]} />
<Key value="R" onClick={onClick} status={charStatuses["R"]} />
<Key value="T" onClick={onClick} status={charStatuses["T"]} />
<Key value="Y" onClick={onClick} status={charStatuses["Y"]} />
<Key value="U" onClick={onClick} status={charStatuses["U"]} />
<Key value="I" onClick={onClick} status={charStatuses["I"]} />
<Key value="O" onClick={onClick} status={charStatuses["O"]} />
<Key value="P" onClick={onClick} status={charStatuses["P"]} />
</div>
<div className="flex justify-center mb-1">
<Key value="A" onClick={onClick}>
A
</Key>
<Key value="S" onClick={onClick}>
S
</Key>
<Key value="D" onClick={onClick}>
D
</Key>
<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>
<Key value="A" onClick={onClick} status={charStatuses["A"]} />
<Key value="S" onClick={onClick} status={charStatuses["S"]} />
<Key value="D" onClick={onClick} status={charStatuses["D"]} />
<Key value="F" onClick={onClick} status={charStatuses["F"]} />
<Key value="G" onClick={onClick} status={charStatuses["G"]} />
<Key value="H" onClick={onClick} status={charStatuses["H"]} />
<Key value="J" onClick={onClick} status={charStatuses["J"]} />
<Key value="K" onClick={onClick} status={charStatuses["K"]} />
<Key value="L" onClick={onClick} status={charStatuses["L"]} />
</div>
<div className="flex justify-center">
<Key width={65.4} value="ENTER" onClick={onClick}>
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
Enter
</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}>
DELETE
Delete
</Key>
</div>
</div>

32
src/lib/keyboard.ts
View file

@ -1,31 +1,3 @@
export type CharStatus = "absent" | "present" | "correct";
import { CharValue } from "./statuses";
export type CharValue =
| "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";
export type KeyValue = CharValue | "ENTER" | "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;
};

4
src/lib/words.ts
View file

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