/
Guesses.tsx
67 lines (63 loc) · 1.59 KB
/
Guesses.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/* eslint-disable jsx-a11y/anchor-is-valid */
import { Guess } from "../model/Guess";
import { GuessCharKind } from "../model/GuessCharKind";
import "./Guesses.css";
interface GuessesProps {
guesses: Guess[];
deleteGuess: (index: number) => void;
changeGuessCharKind: (index: number, charIndex: number) => void;
}
function charKindColor(kind: GuessCharKind): string {
switch (kind) {
case GuessCharKind.Unknown:
return "white";
case GuessCharKind.Wrong:
return "gray";
case GuessCharKind.WrongPlace:
return "yellow";
case GuessCharKind.Correct:
return "green";
}
}
function charKindStyle(kind: GuessCharKind): string {
switch (kind) {
case GuessCharKind.Unknown:
return "";
case GuessCharKind.Wrong:
return "letter-absent";
case GuessCharKind.WrongPlace:
return "letter-elsewhere";
case GuessCharKind.Correct:
return "letter-correct";
}
}
export function Guesses({
guesses,
changeGuessCharKind,
}: GuessesProps) {
return (
<>
{guesses.map((guess, i) => (
<div key={i} className="Row Row-locked-in">
{guess.map((guessChar, j) => (
<div
className={`Row-letter ${charKindStyle(guessChar.kind)}`}
key={j}
style={{
backgroundColor: charKindColor(guessChar.kind),
}}
onClick={() => changeGuessCharKind(i, j)}
>
{guessChar.char}
</div>
))}
<div
style={{
}}
>
</div>
</div>
))}
</>
);
}