Redesign controls

src/Board.tsx

@@ -7,6 +7,10 @@ const DEFAULT_WIDTH = 20;
 const DEFAULT_HEIGHT = 10;
 const DEFAULT_SPEED = 500;
 
+const INITIAL_GRID = Array(DEFAULT_HEIGHT).fill(
+  Array(DEFAULT_WIDTH).fill(false),
+);
+
 interface State {
   grid: boolean[][];
   running: boolean;
@@ -21,7 +25,7 @@ class Board extends React.Component<{}, State> {
   constructor(props: {}) {
     super(props);
     this.state = {
-      grid: Array(DEFAULT_HEIGHT).fill(Array(DEFAULT_WIDTH).fill(false)),
+      grid: [...INITIAL_GRID],
       running: false,
       speed: DEFAULT_SPEED,
       width: DEFAULT_WIDTH,
@@ -41,6 +45,10 @@ class Board extends React.Component<{}, State> {
     if (this.timer) clearInterval(this.timer);
   };
 
+  reset = () => {
+    this.setState({ grid: [...INITIAL_GRID] });
+  };
+
   toggleCell = (x: number, y: number) => {
     const newGrid = [...this.state.grid];
     const newRow = [...newGrid[y]];
@@ -104,6 +112,7 @@ class Board extends React.Component<{}, State> {
           height={height}
           updateDimensions={this.updateDimensions}
           updateSpeed={this.updateSpeed}
+          reset={this.reset}
         />
         {grid.map((row, y) => (
           <div className="row" key={y}>

src/Controls.tsx

@@ -5,6 +5,7 @@ interface Props {
   speed: number;
   width: number;
   height: number;
+  reset: () => void;
   toggle: () => void;
   updateSpeed: (speed: number) => void;
   updateDimensions: (dimensions: { width?: number; height?: number }) => void;
@@ -18,6 +19,7 @@ const Controls = (props: Props) => {
     updateSpeed,
     width,
     height,
+    reset,
     updateDimensions,
   } = props;
 
@@ -33,10 +35,11 @@ const Controls = (props: Props) => {
 
   return (
     <div className="controls">
-      <div className="controls__row --width">
+      <div className="controls__section dimensions">
         <label>
           Width{' '}
           <input
+            className="number-field"
             type="number"
             value={width}
             onChange={(e) =>
@@ -47,6 +50,7 @@ const Controls = (props: Props) => {
         <label>
           Height{' '}
           <input
+            className="number-field"
             type="number"
             value={height}
             onChange={(e) =>
@@ -55,14 +59,24 @@ const Controls = (props: Props) => {
           />
         </label>
       </div>
-      <div className="controls__row">
-        <button onClick={toggle}>{running ? 'Pause' : 'Play'}</button>
-        <div className="speed">
-          <button onClick={goSlower}>Slower</button>
-          <button disabled={speed <= 100} onClick={goFaster}>
-            Faster
+      <div className="controls__section speed">
+        <button className="button" onClick={goSlower}>
+          Slower
+        </button>
+        <button className="button" disabled={speed <= 100} onClick={goFaster}>
+          Faster
+        </button>
+      </div>
+      <div className="controls__section play-reset">
+        <div className="reset">
+          <button className="button" onClick={reset}>
+            Reset
+          </button>
+        </div>
+        <div className="play">
+          <button className="button" onClick={toggle}>
+            {running ? 'Pause' : 'Play'}
           </button>
-          <span>{speed}ms</span>
         </div>
       </div>
     </div>

src/index.css

@@ -55,63 +55,84 @@ code {
 }
 
 .controls {
+  background: black;
+  color: white;
   display: flex;
-  flex-direction: column;
+  left: 0;
+  padding: 1em;
+  position: absolute;
+  top: 0;
   width: 100%;
 }
 
-.controls button {
-  background: transparent;
-  border: 1px solid black;
-  border-right: none;
+.button {
+  background: black;
+  border: 1px solid white;
+  color: white;
   cursor: pointer;
-  flex: 1;
   font-size: 18px;
-  padding: 0.25em 0;
-}
-
-.controls button:last-child,
-.controls .speed button:last-of-type {
-  border-right: 1px solid black;
+  margin-right: 1em;
+  padding: 0.25em 0.5em;
 }
 
-.controls button:not([disabled]):hover {
-  background: black;
-  color: white;
+.button:not([disabled]):hover {
+  background: white;
+  color: black;
 }
 
-.controls .controls__row {
+.controls__section {
+  align-items: center;
   display: flex;
-  margin: 1em 0;
+  margin: 0.5em 0;
 }
 
-.controls .speed {
+.speed {
   align-items: center;
   display: flex;
   flex: 1;
-  justify-content: center;
+  justify-content: flex-end;
 }
 
-.controls .speed button,
-.controls .speed span {
-  flex: 1;
+.button[disabled] {
+  cursor: not-allowed;
+  opacity: 0.6;
 }
 
-.controls .speed span {
-  font-weight: bold;
-  text-align: center;
+.controls .play {
+  text-align: right;
 }
 
-.controls .speed button[disabled] {
-  cursor: not-allowed;
-  opacity: 0.6;
+.play .button {
+  background: #347b20;
 }
 
-.--width label {
-  flex: 1;
+.play .button:hover {
+  background: #4c9c36;
+  color: white;
 }
 
-.--width input {
-  border: 1px solid black;
+.reset .button {
+  background: #7b2020;
+}
+
+.reset .button:hover {
+  background: #9c3636;
+  color: white;
+}
+
+.number-field {
   font-size: 16px;
+  display: inline-block;
+  margin-left: 0.25em;
+  text-align: center;
+  width: 50px;
+}
+
+.dimensions label {
+  margin-right: 1em;
+}
+
+.play-reset {
+  flex: 1;
+  justify-content: flex-end;
 }