About devs

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/AboutDevs/_AboutDevs.scss

@@ -0,0 +1,72 @@
+// ** TEMP
+.dev-pic {
+  content: "";
+  background: $intel-assassin-accent;
+  height: 75px;
+  width: 75px;
+  margin: 5px auto;
+  border-radius: 50%;
+}
+
+.AboutDevs {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  background: $intel-assassin;
+  position: relative;
+  left: 10vw;
+  top: 10vh;
+  height: 70vh;
+  width: 75vw;
+  padding: 30px;
+  box-shadow: 8px 8px 10px $overlay-filter;
+
+  .divider {
+    content: "";
+    height: 2px;
+    width: 100%;
+    border: 1px inset gray;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  h2 {
+    margin: 0 0 10px 30px;
+    text-shadow: 2px 2px 3px black;
+  }
+
+  h2, h4, h5 {
+    font-family: $header-font;
+  }
+}
+
+.devs {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 85%;
+  width: 100%;
+}
+
+.dev {
+  display: grid;
+  grid-auto-flow: dense;
+  background: $button-default;
+  border-radius: 5px;
+  box-shadow: 3px 3px 5px $overlay-filter;
+  color: black;
+  padding: 20px;
+  margin: 30px;
+  height: 80%;
+  width: 25%;
+
+  p {
+    height: 25vh;
+  }
+
+  h4 {
+    color: black;
+  }
+}

src/components/AboutDevs/index.js

@@ -0,0 +1,71 @@
+import React from 'react';
+
+const AboutDevs = () => {
+  const devs = [
+    {
+      name: "Jon Peterson",
+      gH: "https://github.com/joequincy",
+      role: "BE",
+      summary:
+        "A tinkerer by nature, I enjoy hacking away on an interesting idea and learning new tricks along the way. I’m always looking for a new idea or technology to explore!"
+    },
+    {
+      name: "Justin Pyktel",
+      gH: "https://github.com/SiimonStark",
+      role: "FE",
+      summary:
+        "TBD"
+    },
+    {
+      name: "Lynne Rang",
+      gH: "https://github.com/lynnerang",
+      role: "FE",
+      summary:
+        "TBD"
+    },
+    {
+      name: "Rachael Drennan",
+      gH: "https://github.com/rdren0",
+      role: "FE/BE",
+      summary:
+        "TBD"
+    }
+  ];
+
+  const randomizeDevs = () => {
+    // Resource:
+    // https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
+
+    for (let i = devs.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [devs[i], devs[j]] = [devs[j], devs[i]];
+    }
+  }
+
+  const renderDevs = () => {
+    randomizeDevs();
+
+    return devs.map(dev => {
+      return (
+        <a className="dev" href={dev.gH} target="blank" key={dev.name}>
+          <div className="dev-pic" />
+          <h4>{dev.name}</h4>
+          <h5>Role: {dev.role}</h5>
+          <div className="divider" />
+          <p>{dev.summary}</p>
+        </a>
+      );
+    })
+  }
+
+  return (
+    <div className="AboutDevs">
+      <h2>Top Secret Case Files:</h2>
+      <section className="devs">
+        {renderDevs()}
+      </section>
+    </div>
+  )
+}
+
+export default AboutDevs;

src/components/App/index.js

@@ -3,6 +3,7 @@ import { Route, Switch } from 'react-router-dom';
 import Header from '../Header';
 import StartScreen from '../StartScreen';
 import RuleList from '../RuleList';
+import AboutDevs from '../AboutDevs';
 import NewGame from '../NewGame';
 import JoinGame from '../JoinGame';
 import Lobby from '../Lobby';
@@ -37,12 +38,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 +141,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 +182,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 +219,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}
@@ -213,6 +244,7 @@ export class App extends Component {
 				<Switch>
 					<Route exact path="/" component={StartScreen} />
 					<Route exact path="/rules" component={RuleList} />
+					<Route path="/about" component={AboutDevs} />
 					<Route exact path="/new" render={
             /* istanbul ignore next */
             () => <NewGame handleUserInit={this.handleUserInit} />} />

src/components/Header/_Header.scss

@@ -15,6 +15,8 @@
     color: white;
     align-items: center;
 
+
+
     .new-game-btn {
       margin-left: 30px;
       padding: 5px 15px;

src/components/Header/index.js

@@ -3,14 +3,21 @@ import { NavLink } from 'react-router-dom';
 
 const Header = () => {
   return (
-
     <header className="Header">
       <div className="header-left">
         <h1 className="header-title">CodeWords</h1>
       </div>
       <nav className="header-right">
-        <NavLink to="/rules" className="nav-item rules-nav">
-          <i className="fas fa-question-circle"/>
+        <NavLink
+          to="/rules"
+          title="Rule List"
+          className="nav-item rules-nav btn-default new-game-btn"
+        >
+          Rule List 
+          {/* <i className="fas fa-question-circle" /> */}
+        </NavLink>
+        <NavLink to="/about" className="nav-item btn-default new-game-btn">
+          About Devs
         </NavLink>
         <NavLink to="/" className="nav-item btn-default new-game-btn">
           New Game

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} };