Replay lobby

README.md

@@ -1,14 +1,16 @@
 
 
 ## Table of contents
-* [Intro](#CodeWords)
-* [Screenshots](#Screenshots)
-* [Getting Started](#Getting-Started)
-* [How to Use](#How-to-Use)
-* [Project Emphasis](#Project-Emphasis)
-* [UI Design](#UI-Design)
-* [Future Plans](#Future-Plans)
-* [License](#License)
+- [CodeWords ![Build Status](https://travis-ci.com/code-words/codewords-ui)](#codewords-build-statushttpstravis-cicomcode-wordscodewords-ui)
+  - [Screenshots](#screenshots)
+  - [Getting Started](#getting-started)
+  - [How to Use](#how-to-use)
+  - [UI Design](#ui-design)
+  - [Future Plans](#future-plans)
+  - [Project Emphasis](#project-emphasis)
+    - [Front-End](#front-end)
+    - [Back-end](#back-end)
+  - [Licensing](#licensing)
 
 
 # CodeWords [![Build Status](https://travis-ci.com/code-words/codewords-ui.svg?branch=master)](https://travis-ci.com/code-words/codewords-ui)

src/components/App/index.js

@@ -37,12 +37,12 @@ export class App extends Component {
     };
   }
 
-  handleUserInit = result => {
+  handleUserInit = (result, inviteCode) => {
     const { id, name, token } = result;
     localStorage.setItem("Token", token);
     const user = { id, name, token }
-    if (result.invite_code) this.setState({ invite_code: result.invite_code });
-    this.setState({ user }, () => this.createCable(token));
+    // if (result.invite_code) this.setState({ invite_code: result.invite_code });
+    this.setState({ user, invite_code: inviteCode || result.invite_code }, () => this.createCable(token));
   };
 
   updateHintLogs = data => {
@@ -140,6 +140,31 @@ export class App extends Component {
     }
   }
 
+  closeReplay = () => {
+    this.setState({
+      user: {},
+      invite_code: '',
+      playerRoster: [],
+      hintLogs: [],
+      cardData: [],
+      cable: {},
+      isLobbyFull: false,
+      currentPlayerId: null,
+      remainingAttempts: null,
+      winner: "",
+      currentHint: {
+        hintWord: "",
+        relatedCards: null
+      },
+      showDialog: false,
+      confMsg: ""
+    });
+  }
+
+  finishGame = (code) => {
+    this.setState({invite_code: code});
+  }
+
 	dataSwitch = result => {
     const { type, data } = result;
 		switch (type) {
@@ -156,9 +181,8 @@ export class App extends Component {
         this.setGuess(data);
         break;
       case 'game-over':
-        console.log(data)
         this.setGuess(data);
-        // add resetting of invite code from response and resetting of some state properties
+        this.finishGame(data.nextGame);
         setTimeout(() => this.setState({ winner: data.winningTeam}), 2500);
         break;
       case 'illegal-action':
@@ -194,10 +218,16 @@ export class App extends Component {
   };
 
   render() {
-    const { showDialog, cardData, confMsg } = this.state;
+    const { showDialog, cardData, confMsg, user, invite_code } = this.state;
 
-    const replay = !this.state.winner ? null
-      : < ReplayScreen winner={this.state.winner} closeReplay={() => this.setState({winner: ''})}/>
+    const replay = !this.state.winner ? null : (
+      <ReplayScreen
+        winner={this.state.winner}
+        userData={{ name: user.name, inviteCode: invite_code }}
+        handleUserInit={this.handleUserInit}
+        closeReplay={this.closeReplay}
+      />
+    );
 
     const dialog = showDialog ? <ConfDialog
       message={confMsg}

src/components/JoinGame/index.js

@@ -23,7 +23,9 @@ class JoinGame extends Component {
     };
     fetch(`${API_ROOT}/v1/games/${inviteCode}/players`, option)
       .then(response => response.json())
-      .then(result => { this.props.handleUserInit(result) });
+      .then(result => { 
+        this.props.handleUserInit(result, inviteCode) 
+      });
 
     this.setState({ redirect: true });
   }
@@ -36,6 +38,7 @@ class JoinGame extends Component {
   render() {
     if (this.state.redirect) { return <Redirect to='/lobby' /> };
 
+
     return (
       <div className="backdrop">
         <section className="StartScreen">

src/components/Main/Board/Card/index.test.js

@@ -18,7 +18,7 @@ describe('Card', () => {
 		expect(wrapper).toMatchSnapshot();
 	});
   it('sendGuess should be called on click of the card', () => {
-    wrapper = shallow(<Card card={{ type: 'bystander' }} sendGuess={mockFn} isActive={true} card={{ type: false }} />);
+    wrapper = shallow(<Card sendGuess={mockFn} isActive={true} card={{ type: false }} />);
 		jest.spyOn(wrapper.instance(), 'handleClick');
     let mockEvent = { target: { value: '', name: 'title' }, currentTarget: {value: 3} };
 

src/components/ReplayScreen/index.js

@@ -1,23 +1,64 @@
-import React from 'react';
+import React, {Component} from 'react';
+import { API_ROOT, HEADERS } from '../../variables';
 import { Link } from 'react-router-dom';
 
-const ReplayScreen = props => {
-  return (
-    <div className="overlay">
-      <div className="dialog replay-dialog">
-        <h2 className="replay-heading">{props.winner.toUpperCase()} team wins!</h2>
-        <img className="winner-img" src={require(`../../images/${props.winner}.jpg`)} />
-        <div className="replay-btns">
-          <Link to="/" className="nav-item btn-default start-over-btn" onClick={props.closeReplay}>
-            Start Over
-          </Link>
-          <Link to="/" className="nav-item btn-default replay-btn" onClick={props.closeReplay}>
-            Play Again!
-          </Link>
+class ReplayScreen extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+    };
+  }
+
+  handlePlayAgain = () => {
+    let { name, inviteCode } = this.props.userData;
+    this.props.closeReplay();
+
+    let option = {
+      headers: HEADERS,
+      method: "POST",
+      body: JSON.stringify({ name })
+    };
+    fetch(`${API_ROOT}/v1/games/${inviteCode}/players`, option)
+      .then(response => response.json())
+      .then(result => {
+        this.props.handleUserInit(result, inviteCode);
+      });
+  };
+
+  render() {
+    return (
+      <div className="overlay">
+        <div className="dialog replay-dialog">
+          <h2 className="replay-heading">
+            {this.props.winner.toUpperCase()} team wins!
+          </h2>
+          <img
+            className="winner-img"
+            src={require(`../../images/${this.props.winner}.jpg`)}
+            alt={`${this.props.winner}`}
+          />
+          <div className="replay-btns">
+            <Link
+              to="/"
+              id="StartScreen"
+              className="nav-item btn-default start-over-btn"
+              onClick={this.props.closeReplay}
+            >
+              Start Over
+            </Link>
+            <Link
+              to="/lobby"
+              id="Lobby"
+              className="nav-item btn-default replay-btn"
+              onClick={this.handlePlayAgain}
+            >
+              Play Again!
+            </Link>
           </div>
+        </div>
       </div>
-    </div>
-  );
+    );
+  }
 };
 
 export default ReplayScreen;