blob: f6f529689447de0dad2a3a39117ce1bd5a9a37f7 (
plain)
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
|
import React, { useEffect, useState } from "react";
import logo from "./kaistevenson.svg";
import "./App.css";
import { Grid } from "./Grid";
import { getWords } from "./serverHelper";
export type GameState = {
words: { word: string; selected: boolean }[];
};
const initializeGameState = async (): Promise<GameState> => ({
words: (await getWords()).map((word) => ({ word, selected: false })),
});
const Game = () => {
//state
const [gameState, setGameState] = useState<GameState | undefined>(undefined);
//initialize
useEffect(() => {
if (!gameState) {
initializeGameState()
.then((state) => setGameState(state))
.catch(console.error);
}
});
//handlers
const selectWordHandler = (idx: number) => {
const candidateState = { ...gameState! };
if (candidateState.words.filter((word) => word.selected).length === 4) {
if (!candidateState.words[idx].selected) {
//if we've already selected 4 words and we would select another,
//do nothing
return;
}
}
//FIXME don't mutate state
candidateState.words[idx].selected = !candidateState.words[idx].selected;
setGameState(candidateState);
console.log(`selected ${idx}`);
};
//display logic
return gameState ? (
<Grid selectWordHandler={selectWordHandler} words={gameState.words!} />
) : (
<h1>Loading...</h1>
);
};
export const App = () => (
<div className="App">
<div className="App-bg">
<div className="Logo-container">
<img src={logo} className="App-logo" alt="logo" />
</div>
<div className="App-main">
<Game />
</div>
</div>
</div>
);
|
