Adding game IDs and New/Join Game navigation.

src/components/new-game/NewGame.jsx

@@ -22,6 +22,10 @@ import { connect } from 'react-redux'
 import { GroupBox, Row, Col, Button } from '../widgets.jsx'
 
 import { startOrJoinGame } from '../start/actions.js'
+import { start } from '../app/actions.js'
+
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faArrowCircleLeft } from '@fortawesome/free-solid-svg-icons'
 
 class NewGame extends React.Component {
     constructor(props) {
@@ -29,6 +33,7 @@ class NewGame extends React.Component {
         this.state = {
             playerName: '',
             checkedColor: props.colors[0],
+            gameId: typeof props.gameId === 'undefined' ? -1 : props.gameId,
             gameName: props.gameName || ''
         };
     }
@@ -48,10 +53,21 @@ class NewGame extends React.Component {
         this.props.startOrJoinGame(Object.assign({ type: this.props.type }, this.state));
     }
 
+    handleBack = e => {
+        this.props.start();
+    }
+
     render() {
         let playerNameInput;
         return (
-            <GroupBox title={this.props.title}>
+            <GroupBox title={!this.props.hideBack ? (
+                <Fragment>
+                  <a href="#" onClick={this.handleBack}>
+                    <FontAwesomeIcon icon={faArrowCircleLeft} />
+                  </a>
+                  {this.props.title}
+                </Fragment>
+            ) : this.props.title}>
               <form onSubmit={this.handleSubmit}>
                 <Row>
                   <Col width='12'>
@@ -100,5 +116,5 @@ class NewGame extends React.Component {
 
 export default connect(
     null,
-    { startOrJoinGame }
+    { startOrJoinGame, start }
 )(NewGame)