grid, snake, snack initial

Author: rwieruch

src/App.css

@@ -1,24 +1,30 @@
-.App {
-  text-align: center;
+.grid {
+
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+.grid-row {
+  display: flex;
+  flex-direction: row;
 }
 
-.App-header {
-  background-color: #222;
-  height: 150px;
-  padding: 20px;
-  color: white;
+.grid-cell {
+  display: flex;
+  flex-direction: column;
+
+  border-top: 1px solid #000000;
+  border-left: 1px solid #000000;
+  width: 10px;
+  height: 10px;
 }
 
-.App-intro {
-  font-size: large;
+.grid-cell-snake {
+  background-color: #000000;
 }
 
-@keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.grid-cell-snack {
+  background-color: #008000;
 }
+
+.grid-cell:last-child {
+  border-right: 1px solid #000000;
+}

src/App.js

@@ -1,21 +1,88 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
+import { connect } from 'react-redux';
+import cs from 'classnames';
+
 import './App.css';
 
+var GRID_ARRAY = [];
+
+for (var i = 0; i <= 50; i++) {
+  GRID_ARRAY.push(i);
+}
+
 class App extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      snake: {
+        position: {
+          x: 10,
+          y: 25,
+        },
+      },
+      snack: {
+        position: {
+          x: 40,
+          y: 25,
+        },
+      },
+    }
+  }
+
   render() {
+    const { snake, snack } = this.state;
+
     return (
-      <div className="App">
-        <div className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h2>Welcome to React</h2>
-        </div>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+      <div>
+        <Grid
+          snake={snake}
+          snack={snack}
+        />
       </div>
     );
   }
 }
 
+const Grid = ({ snake, snack }) =>
+  <div className="grid">
+    {GRID_ARRAY.map(y => <Row
+      y={y}
+      key={y}
+      snake={snake}
+      snack={snack}
+    />)}
+  </div>
+
+const Row = ({ snake, snack, y }) =>
+  <div className="grid-row">
+    {GRID_ARRAY.map(x => <Cell
+      x={x}
+      y={y}
+      key={x}
+      snake={snake}
+      snack={snack}
+    />)}
+  </div>
+
+const isPosition = (x, y, diffX, diffY) =>
+  x === diffX && y === diffY;
+
+const Cell = ({
+  snake,
+  snack,
+  x,
+  y,
+}) => {
+  const cellCs = cs(
+    "grid-cell",
+    {
+      "grid-cell-snake": isPosition(x, y, snake.position.x, snake.position.y),
+      "grid-cell-snack": isPosition(x, y, snack.position.x, snack.position.y),
+    }
+  );
+
+  return <div className={cellCs} />;
+}
+
 export default App;