|
@@ -3,9 +3,10 @@ import Cell from './Cell';
|
3
|
3
|
import Controls from './Controls';
|
4
|
4
|
import { generateNewGrid, updateGridDimensions } from './lib';
|
5
|
5
|
|
6
|
|
-const DEFAULT_WIDTH = 20;
|
7
|
|
-const DEFAULT_HEIGHT = 10;
|
8
|
|
-const DEFAULT_SPEED = 500;
|
|
6
|
+const DEFAULT_WIDTH = 30;
|
|
7
|
+const DEFAULT_HEIGHT = 20;
|
|
8
|
+const DEFAULT_SPEED = 100;
|
|
9
|
+const DEFAULT_CELL_SIZE = 30;
|
9
|
10
|
|
10
|
11
|
const INITIAL_GRID = Array(DEFAULT_HEIGHT).fill(
|
11
|
12
|
Array(DEFAULT_WIDTH).fill(false),
|
|
@@ -14,6 +15,7 @@ const INITIAL_GRID = Array(DEFAULT_HEIGHT).fill(
|
14
|
15
|
interface State {
|
15
|
16
|
grid: boolean[][];
|
16
|
17
|
running: boolean;
|
|
18
|
+ cellSize: number;
|
17
|
19
|
speed: number;
|
18
|
20
|
width: number;
|
19
|
21
|
height: number;
|
|
@@ -27,6 +29,7 @@ class Board extends React.Component<{}, State> {
|
27
|
29
|
this.state = {
|
28
|
30
|
grid: [...INITIAL_GRID],
|
29
|
31
|
running: false,
|
|
32
|
+ cellSize: DEFAULT_CELL_SIZE,
|
30
|
33
|
speed: DEFAULT_SPEED,
|
31
|
34
|
width: DEFAULT_WIDTH,
|
32
|
35
|
height: DEFAULT_HEIGHT,
|
|
@@ -47,6 +50,10 @@ class Board extends React.Component<{}, State> {
|
47
|
50
|
|
48
|
51
|
reset = () => {
|
49
|
52
|
this.setState({ grid: [...INITIAL_GRID] });
|
|
53
|
+ this.stop();
|
|
54
|
+ this.setState({ running: false });
|
|
55
|
+ this.setState({ cellSize: DEFAULT_CELL_SIZE });
|
|
56
|
+ this.setState({ width: DEFAULT_WIDTH, height: DEFAULT_HEIGHT });
|
50
|
57
|
};
|
51
|
58
|
|
52
|
59
|
toggleCell = (x: number, y: number) => {
|
|
@@ -71,6 +78,10 @@ class Board extends React.Component<{}, State> {
|
71
|
78
|
}
|
72
|
79
|
};
|
73
|
80
|
|
|
81
|
+ updateCellSize = (f: (size: number) => number) => {
|
|
82
|
+ this.setState({ cellSize: f(this.state.cellSize) });
|
|
83
|
+ };
|
|
84
|
+
|
74
|
85
|
updateDimensions = (dimensions: { width?: number; height?: number }) => {
|
75
|
86
|
if (dimensions.width) {
|
76
|
87
|
this.setState({ width: dimensions.width });
|
|
@@ -90,16 +101,17 @@ class Board extends React.Component<{}, State> {
|
90
|
101
|
};
|
91
|
102
|
|
92
|
103
|
render() {
|
93
|
|
- const { grid, running, speed, width, height } = this.state;
|
|
104
|
+ const { grid, running, speed, width, height, cellSize } = this.state;
|
94
|
105
|
|
95
|
106
|
return (
|
96
|
107
|
<div className="container">
|
97
|
108
|
<Controls
|
98
|
109
|
running={running}
|
99
|
110
|
speed={speed}
|
100
|
|
- toggle={this.toggleRunning}
|
101
|
111
|
width={width}
|
102
|
112
|
height={height}
|
|
113
|
+ toggle={this.toggleRunning}
|
|
114
|
+ updateCellSize={this.updateCellSize}
|
103
|
115
|
updateDimensions={this.updateDimensions}
|
104
|
116
|
updateSpeed={this.updateSpeed}
|
105
|
117
|
reset={this.reset}
|
|
@@ -107,12 +119,13 @@ class Board extends React.Component<{}, State> {
|
107
|
119
|
<div className="board-container">
|
108
|
120
|
<div className="board">
|
109
|
121
|
{grid.map((row, y) => (
|
110
|
|
- <div className="row" key={y}>
|
|
122
|
+ <div className="row" key={y} style={{ height: cellSize }}>
|
111
|
123
|
{row.map((cell, x) => (
|
112
|
124
|
<Cell
|
113
|
125
|
disabled={running}
|
114
|
126
|
x={x}
|
115
|
127
|
y={y}
|
|
128
|
+ cellSize={cellSize}
|
116
|
129
|
alive={cell}
|
117
|
130
|
toggle={this.toggleCell}
|
118
|
131
|
key={x}
|