finish

Author: rwieruch

src/App.css

@@ -4,10 +4,6 @@
   align-items: center;
 }
 
-.grid {
-
-}
-
 .grid-row {
   display: flex;
   flex-direction: row;
@@ -23,6 +19,10 @@
   height: 15px;
 }
 
+.grid-cell:last-child {
+  border-right: 1px solid #000000;
+}
+
 .grid-cell-border {
   background-color: #000000;
 }
@@ -32,13 +32,9 @@
 }
 
 .grid-cell-snack {
-  background-color: #008000;
+  background-color: blue;
 }
 
 .grid-cell-hit {
   background-color: red;
 }
-
-.grid-cell:last-child {
-  border-right: 1px solid #000000;
-}

src/App.js

@@ -192,26 +192,30 @@ class App extends Component {
 }
 
 const Grid = ({ isGameOver, snake, snack }) =>
-  <div className="grid">
-    {GRID.map(y => <Row
-      y={y}
-      key={y}
-      snake={snake}
-      snack={snack}
-      isGameOver={isGameOver}
-    />)}
+  <div>
+    {GRID.map(y =>
+      <Row
+        y={y}
+        key={y}
+        snake={snake}
+        snack={snack}
+        isGameOver={isGameOver}
+      />
+    )}
   </div>
 
 const Row = ({ isGameOver, snake, snack, y }) =>
   <div className="grid-row">
-    {GRID.map(x => <Cell
-      x={x}
-      y={y}
-      key={x}
-      snake={snake}
-      snack={snack}
-      isGameOver={isGameOver}
-    />)}
+    {GRID.map(x =>
+      <Cell
+        x={x}
+        y={y}
+        key={x}
+        snake={snake}
+        snack={snack}
+        isGameOver={isGameOver}
+      />
+    )}
   </div>
 
 const Cell = ({ isGameOver, snake, snack, x, y }) =>