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 (