part 02

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;
 }

src/App.js

@@ -13,53 +13,83 @@ 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),
     }
   );
 
 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;