|
@@ -12,6 +12,16 @@ const INITIAL_GRID = Array(DEFAULT_HEIGHT).fill(
|
12
|
12
|
Array(DEFAULT_WIDTH).fill(false),
|
13
|
13
|
);
|
14
|
14
|
|
|
15
|
+const INITIAL_STATE: State = {
|
|
16
|
+ grid: [...INITIAL_GRID],
|
|
17
|
+ running: false,
|
|
18
|
+ generations: 0,
|
|
19
|
+ cellSize: DEFAULT_CELL_SIZE,
|
|
20
|
+ speed: DEFAULT_SPEED,
|
|
21
|
+ width: DEFAULT_WIDTH,
|
|
22
|
+ height: DEFAULT_HEIGHT,
|
|
23
|
+};
|
|
24
|
+
|
15
|
25
|
interface State {
|
16
|
26
|
grid: boolean[][];
|
17
|
27
|
running: boolean;
|
|
@@ -19,6 +29,7 @@ interface State {
|
19
|
29
|
speed: number;
|
20
|
30
|
width: number;
|
21
|
31
|
height: number;
|
|
32
|
+ generations: number;
|
22
|
33
|
}
|
23
|
34
|
|
24
|
35
|
class Board extends React.Component<{}, State> {
|
|
@@ -26,21 +37,14 @@ class Board extends React.Component<{}, State> {
|
26
|
37
|
|
27
|
38
|
constructor(props: {}) {
|
28
|
39
|
super(props);
|
29
|
|
- this.state = {
|
30
|
|
- grid: [...INITIAL_GRID],
|
31
|
|
- running: false,
|
32
|
|
- cellSize: DEFAULT_CELL_SIZE,
|
33
|
|
- speed: DEFAULT_SPEED,
|
34
|
|
- width: DEFAULT_WIDTH,
|
35
|
|
- height: DEFAULT_HEIGHT,
|
36
|
|
- };
|
|
40
|
+ this.state = INITIAL_STATE;
|
37
|
41
|
this.timer = null;
|
38
|
42
|
}
|
39
|
43
|
|
40
|
44
|
start = () => {
|
41
|
45
|
this.timer = setInterval(() => {
|
42
|
46
|
const grid = generateNewGrid(this.state.grid);
|
43
|
|
- this.setState({ grid });
|
|
47
|
+ this.setState({ grid, generations: this.state.generations + 1 });
|
44
|
48
|
}, this.state.speed);
|
45
|
49
|
};
|
46
|
50
|
|
|
@@ -50,11 +54,8 @@ class Board extends React.Component<{}, State> {
|
50
|
54
|
|
51
|
55
|
reset = () => {
|
52
|
56
|
if (window.confirm('Are you sure?')) {
|
53
|
|
- this.setState({ grid: [...INITIAL_GRID] });
|
54
|
57
|
this.stop();
|
55
|
|
- this.setState({ running: false });
|
56
|
|
- this.setState({ cellSize: DEFAULT_CELL_SIZE });
|
57
|
|
- this.setState({ width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT });
|
|
58
|
+ this.setState(INITIAL_STATE);
|
58
|
59
|
}
|
59
|
60
|
};
|
60
|
61
|
|
|
@@ -133,7 +134,15 @@ class Board extends React.Component<{}, State> {
|
133
|
134
|
};
|
134
|
135
|
|
135
|
136
|
render() {
|
136
|
|
- const { grid, running, speed, width, height, cellSize } = this.state;
|
|
137
|
+ const {
|
|
138
|
+ cellSize,
|
|
139
|
+ generations,
|
|
140
|
+ grid,
|
|
141
|
+ height,
|
|
142
|
+ running,
|
|
143
|
+ speed,
|
|
144
|
+ width,
|
|
145
|
+ } = this.state;
|
137
|
146
|
|
138
|
147
|
return (
|
139
|
148
|
<div className="container">
|
|
@@ -169,6 +178,11 @@ class Board extends React.Component<{}, State> {
|
169
|
178
|
))}
|
170
|
179
|
</div>
|
171
|
180
|
</div>
|
|
181
|
+ <div className="counter">
|
|
182
|
+ <span>
|
|
183
|
+ {generations} generation{generations === 1 ? '' : 's'}
|
|
184
|
+ </span>
|
|
185
|
+ </div>
|
172
|
186
|
</div>
|
173
|
187
|
);
|
174
|
188
|
}
|