From 8c631115026a38a2c458475bfe070ded5e5ab84c Mon Sep 17 00:00:00 2001
From: Robin Wieruch <wrobin@gmx.net>
Date: Sat, 2 Sep 2017 16:46:51 +0200
Subject: [PATCH] part 02

---
 src/App.css |  8 ++++++++
 src/App.js  | 44 +++++++++++++++++++++++++++++++++++++-------
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/src/App.css b/src/App.css
index e02a5aa..e5a8aae 100644
--- a/src/App.css
+++ b/src/App.css
@@ -26,4 +26,12 @@
 
 .grid-cell-border {
   background-color: #000000;
+}
+
+.grid-cell-snake {
+  background-color: #000000;
+}
+
+.grid-cell-snack {
+  background-color: blue;
 }
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index cfa3f1f..63ed3fe 100644
--- a/src/App.js
+++ b/src/App.js
@@ -13,11 +13,16 @@ for (let i = 0; i <= GRID_SIZE; i++) {
 const isBorder = (x, y) =>
   x === 0 || y === 0 || x === GRID_SIZE || y === GRID_SIZE;
 
-const getCellCs = (x, y) =>
+const isPosition = (x, y, diffX, diffY) =>
+  x === diffX && y === diffY;
+
+const getCellCs = (snake, snack, x, y) =>
   cs(
     'grid-cell',
     {
       'grid-cell-border': isBorder(x, y),
+      'grid-cell-snake': isPosition(x, y, snake.coordinate.x, snake.coordinate.y),
+      'grid-cell-snack': isPosition(x, y, snack.coordinate.x, snack.coordinate.y),
     }
   );
 
@@ -25,41 +30,66 @@ class App extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {};
+    this.state = {
+      snake: {
+        coordinate: {
+          x: 20,
+          y: 10,
+        },
+      },
+      snack: {
+        coordinate: {
+          x: 25,
+          y: 10,
+        },
+      }
+    };
   }
 
   render() {
+    const {
+      snake,
+      snack,
+    } = this.state;
+
     return (
       <div className="app">
         <h1>Snake!</h1>
-        <Grid />
+        <Grid
+          snake={snake}
+          snack={snack}
+        />
       </div>
     );
   }
 }
 
-const Grid = () =>
+const Grid = ({ snake, snack }) =>
   <div>
     {GRID.map(y =>
       <Row
         y={y}
         key={y}
+        snake={snake}
+        snack={snack}
       />
     )}
   </div>
 
-const Row = ({ y }) =>
+const Row = ({ snake, snack, y }) =>
   <div className="grid-row">
     {GRID.map(x =>
       <Cell
         x={x}
         y={y}
         key={x}
+        snake={snake}
+        snack={snack}
       />
     )}
   </div>
 
-const Cell = ({ x, y }) =>
-  <div className={getCellCs(x, y)} />
+const Cell = ({ snake, snack, x, y }) =>
+  <div className={getCellCs(snake, snack, x, y)} />
 
 export default App;
\ No newline at end of file