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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
import React from "react";
import { GameState } from "./App";
import Typewriter from "typewriter-effect";
const Tile = ({
word,
selectWordHandler,
}: {
selectWordHandler: () => void;
word: GameState["words"][number];
}) => (
<button
onClick={!word.used ? selectWordHandler : undefined}
className={`Grid-square ${
word.selected ? "Selected" : word.used ? "Removed" : ""
}`}
>
<pre>
<h1 className="Fit-text">{word.word.toUpperCase()}</h1>
</pre>
</button>
);
export const Grid = ({
selectWordHandler,
submitSelectionHandler,
flipGroupHandler,
gameState,
}: {
selectWordHandler: (idx: number) => void;
flipGroupHandler: (idx: number) => void;
submitSelectionHandler: () => void;
gameState: GameState;
}) => {
const groups = gameState.groups.map(
({ words, title, reason, flipped }, idx) => (
<button onClick={() => flipGroupHandler(idx)} className="Completed-group">
{
<pre>
{flipped ? (
<Typewriter
key={"reason-tw"}
options={{
delay: 1,
wrapperClassName: "Group-reason",
cursor: "",
}}
onInit={(tw) => tw.typeString(reason).start()}
component={"p"}
></Typewriter>
) : (
<div>
{title !== "LOADING" ? (
<Typewriter
key={"header-tw"}
options={{
delay: 30,
wrapperClassName: "Group-header",
cursor: "",
}}
onInit={(tw) => tw.typeString(title).start()}
component={"h1"}
></Typewriter>
) : (
<Typewriter
key={"loading-tw"}
options={{
delay: 150,
wrapperClassName: "Group-header",
cursor: "",
}}
onInit={(tw) => tw.typeString("Loading...").start()}
component={"h1"}
></Typewriter>
)}
<Typewriter
options={{
delay: 15,
wrapperClassName: "Group-content",
cursor: "",
}}
onInit={(tw) => tw.typeString(words.join(", ")).start()}
component={"h2"}
></Typewriter>
</div>
)}
</pre>
}
</button>
)
);
const tiles = gameState.words.map((word, i) =>
!word.used ? (
<Tile
selectWordHandler={() => selectWordHandler(i)}
word={word}
key={i}
/>
) : undefined
);
return (
<div className="Grid-container">
{groups}
<div className="Grid">{tiles}</div>
{gameState.words.filter(({ selected }) => selected).length === 4 ? (
<button className="Submit-button" onClick={submitSelectionHandler}>
SUBMIT
</button>
) : undefined}
</div>
);
};
|
