Adding game IDs and New/Join Game navigation.

src/components/join-game/JoinGame.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'
 
 import NewGame from '../new-game/NewGame.jsx'
 
@@ -43,18 +47,30 @@ class JoinGame extends React.Component {
     }
 
     handleBack = e => {
-        this.setState({ screen: JoinGameScreens.list });
+        if (this.state.screen === JoinGameScreens.details) {
+            this.setState({ screen: JoinGameScreens.list });
+        } else {
+            this.props.start();
+        }
     }
 
     handleJoinAsExisting = e => {
         this.props.startOrJoinGame({ type: 'join-as-existing',
                                      playerName: e.target.text,
+                                     gameId: this.state.game.id,
                                      gameName: this.state.game.name });
     }
 
     render() {
         return (
-            <GroupBox title='Join Game'>
+            <GroupBox title={(
+                <Fragment>
+                  <a href="#" onClick={this.handleBack}>
+                    <FontAwesomeIcon icon={faArrowCircleLeft} />
+                  </a>
+                  Join Game
+                </Fragment>
+            )}>
               <Row>
                 <Col width='12'>
                   {this.state.screen === JoinGameScreens.list ?
@@ -65,8 +81,8 @@ class JoinGame extends React.Component {
                                     <a href='#' onClick={() => this.handleClickGame(g)}>{g.name}</a>
                                   </li>))}
                        </ul>)
-                   : (<Fragment>
-                        <p><a href="#" onClick={this.handleBack}>back to games</a></p>
+                   : (
+                       <Fragment>
                       <h3><b>Game:</b> {this.state.game.name}</h3>
                       <h4>Join as existing player:</h4>
                       <ul>
@@ -81,7 +97,9 @@ class JoinGame extends React.Component {
                                  button={'Join'}
                                  showGameName={false}
                                  gameName={this.state.game.name}
+                                 gameId={this.state.game.id}
                                  type={'join-game'}
+                                 hideBack={true}
                                  title={'Join as New Player'} />
                       </Fragment>)}
                 </Col>
@@ -93,5 +111,5 @@ class JoinGame extends React.Component {
 
 export default connect(
     state => state.start.start,
-    { startOrJoinGame }
+    { startOrJoinGame, start }
 )(JoinGame)

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)