diff --git a/README.md b/README.md index a8bb60a..fdfac6b 100644 --- a/README.md +++ b/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) diff --git a/src/components/App/index.js b/src/components/App/index.js index cc100a1..f13e1e6 100644 --- a/src/components/App/index.js +++ b/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 : ( + + ); const dialog = showDialog ? 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 }; + return (
diff --git a/src/components/Main/Board/Card/index.test.js b/src/components/Main/Board/Card/index.test.js index d294142..96e153c 100644 --- a/src/components/Main/Board/Card/index.test.js +++ b/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(); + wrapper = shallow(); jest.spyOn(wrapper.instance(), 'handleClick'); let mockEvent = { target: { value: '', name: 'title' }, currentTarget: {value: 3} }; diff --git a/src/components/ReplayScreen/index.js b/src/components/ReplayScreen/index.js index 5288856..dbcf370 100644 --- a/src/components/ReplayScreen/index.js +++ b/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 ( -
-
-

{props.winner.toUpperCase()} team wins!

- -
- - Start Over - - - Play Again! - +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 ( +
+
+

+ {this.props.winner.toUpperCase()} team wins! +

+ {`${this.props.winner}`} +
+ + Start Over + + + Play Again! +
+
-
- ); + ); + } }; export default ReplayScreen; \ No newline at end of file