Add start pane and rising speed logic

Author: Mauro Codella

src/components/App/index.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 
 import Score from '../Score';
 import Board from '../Board';
+import StartPane from '../StartPane';
 
 import {
   createInitialBoardState,
@@ -22,13 +23,14 @@ export default class App extends Component {
     super(props);
 
     this.state = {
+      started: false,
       score: 0,
+      speed: 200,
       direction: "right",
       board: createInitialBoardState(MATRIX_SIZE)
     };
 
-    setInterval(this.tickHandler.bind(this), 150);
-
+    this.tickHandler = this.tickHandler.bind(this);
     this.keyDownHandler = this.keyDownHandler.bind(this);
   }
 
@@ -39,18 +41,32 @@ export default class App extends Component {
       matrixSize: MATRIX_SIZE
     });
 
-    const nextScore = nextBoardState.food !== this.state.board.food ?
-      this.state.score + 1 :
-      this.state.score;
+    let nextScore = this.state.score;
+    let nextSpeed = this.state.speed;
+    if (nextBoardState.food !== this.state.board.food) {
+      nextScore++;
+      nextSpeed = Math.max(nextSpeed - 2, 50);
+    }
 
-    this.setState({ board: nextBoardState, score: nextScore });
+    this.setState({ board: nextBoardState, score: nextScore, speed: nextSpeed }, () => {
+      clearInterval(this.state.tickerId);
+      const tickerId = setInterval(this.tickHandler, this.state.speed);
+      this.setState({tickerId});
+    });
   }
 
   keyDownHandler(event) {
-    const direction = KEY_TO_DIRECTION[event.key];
-
-    if (direction !== undefined) {
-      this.setState({ direction: direction });
+    if (! this.state.started) {
+      this.setState({ started: true }, () => {
+        const tickerId = setInterval(this.tickHandler, this.state.speed);
+        this.setState({ tickerId });
+      });
+    } else {
+      const direction = KEY_TO_DIRECTION[event.key];
+
+      if (direction !== undefined) {
+        this.setState({ direction: direction });
+      }
     }
   }
 
@@ -63,13 +79,14 @@ export default class App extends Component {
   }
 
   render() {
+    const pane = this.state.started ?
+      <Board snake={this.state.board.snake} food={this.state.board.food} /> :
+      <StartPane />;
+
     return (
       <div>
         <Score score={this.state.score} />
-        <Board
-          snake={this.state.board.snake}
-          food={this.state.board.food}
-        />
+        {pane}
       </div>
     );
   }

src/components/GameOverPane/game.ttf

@@ -0,0 +1,17 @@
+@font-face {
+  font-family: game;
+  src: url('./game.ttf');
+}
+
+.GameOverPane {
+  font-family: game;
+  color: #d50000;
+  text-align: center;
+  vertical-align: middle;
+  line-height: 400px;
+
+  width: 400px;
+  height: 400px;
+
+  background-color: #212121;
+}

src/components/GameOverPane/index.css

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import './index.css';
+
+export default function StartPane() {
+  return (
+    <div className="StartPane">
+      Press any key to start
+    </div>
+  );
+};

src/components/GameOverPane/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Board from './';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+
+  const snake = [];
+  const food = {row: 8, col: 8};
+  ReactDOM.render(<Board snake={snake} food={food} />, div);
+});

src/components/GameOverPane/test.js

@@ -6,5 +6,6 @@
 .Score {
   font-family: game;
   flex: 1;
+  color: #F57F17;
   margin-bottom: 10px;
 }

src/components/Score/index.css

@@ -0,0 +1,17 @@
+@font-face {
+  font-family: game;
+  src: url('./game.ttf');
+}
+
+.StartPane {
+  font-family: game;
+  color: white;
+  text-align: center;
+  vertical-align: middle;
+  line-height: 400px;
+
+  width: 400px;
+  height: 400px;
+
+  background-color: #212121;
+}

src/components/StartPane/game.ttf

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import './index.css';
+
+export default function StartPane() {
+  return (
+    <div className="StartPane">
+      Press any key to start
+    </div>
+  );
+};

src/components/StartPane/index.css

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Board from './';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+
+  const snake = [];
+  const food = {row: 8, col: 8};
+  ReactDOM.render(<Board snake={snake} food={food} />, div);
+});

src/components/StartPane/index.js

@@ -7,7 +7,7 @@
 }
 
 .Tile--snake {
-  background-color: #00e676;
+  background-color: #2E7D32;
 }
 
 .Tile--food {