Extensions

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,111 @@
+// ** 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: absolute;
+  z-index: 3;
+  left: 10vw;
+  top: 10vh;
+  height: 70vh;
+  width: 75vw;
+  padding: 30px;
+  box-shadow: 8px 8px 12px $overlay-filter, 2px 2px 10px rgba(250, 250,250, .5);
+  border: $intel-assassin-accent .5px inset;
+  border-radius: 20px;
+
+  .divider {
+    content: "";
+    height: 2px;
+    width: 100%;
+    border: 1px inset gray;
+  }
+
+  .dev-pic {
+    margin: auto;
+    border-radius: 50%;
+    // border: $intel-assassin-accent 1px 1px ridge;
+    width: 12vh;
+  }
+
+  .dev-img {
+    width: 10vh;
+    border-radius: 50%;
+    border: silver ridge 2px;
+  }
+
+  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 {
+    overflow: scroll;
+    min-height: 25vh;
+    max-height: 25vh;
+  }
+
+  h4 {
+    color: black;
+  }
+
+  .social {
+    display: flex;
+    font-size: 3vh;
+    justify-content: space-evenly;
+    align-items: flex-end;
+    position: relative;
+    left: 20%;
+    width: 60%;
+
+    a {
+      text-decoration: none;
+      color: $intel-assassin;
+      &:hover {
+        color: $player-active;
+        cursor: pointer;
+        text-shadow: 1px 1px 2px black;
+      }
+    }
+  }
+}
+

src/components/AboutDevs/index.js

@@ -0,0 +1,116 @@
+/* eslint-disable jsx-a11y/anchor-has-content */
+import React from 'react';
+
+const AboutDevs = (props) => {
+  const devs = [
+    {
+      name: "Jon Peterson",
+      gH_Link: "https://github.com/joequincy",
+      l_Link: "https://www.linkedin.com/in/joequincy/",
+      p_Link: "https://alumni.turing.io/alumni/jon-peterson",
+      role: "BE",
+      img:
+        "https://media.licdn.com/dms/image/C4E03AQEhILN-5s-jEw/profile-displayphoto-shrink_800_800/0?e=1571270400&v=beta&t=WBZ4ztxssw3W-PwaLADES30A7HvX-4anP6oPfkRLpYs",
+      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_Link: "https://github.com/SiimonStark",
+      l_Link: "https://www.linkedin.com/in/justinpyktel/",
+      p_Link: "https://alumni.turing.io/alumni/justin-pyktel",
+      role: "FE",
+      img:
+        "https://media.licdn.com/dms/image/C4E03AQGFJ9zu6O-7Zw/profile-displayphoto-shrink_200_200/0?e=1571270400&v=beta&t=KmObYjlcIRPiKy0wB2itsWgIJAwBNVyHPKoXlobY_0o",
+      summary:
+        "Transitioning into the tech field I intend to keep my audience at the forefront of design choices. Creating a more enjoyable and fun experience is certainly a win win!"
+    },
+    {
+      name: "Lynne Rang",
+      gH_Link: "https://github.com/lynnerang",
+      l_Link: "https://www.linkedin.com/in/lynne-rang/",
+      p_Link: "https://alumni.turing.io/alumni/lynne-rang",
+      role: "FE",
+      img:
+        "https://media.licdn.com/dms/image/C4E03AQFu8BraqA9MJA/profile-displayphoto-shrink_800_800/0?e=1571270400&v=beta&t=u4QsbYsdbK4CYp0MaKpv0I6Ky9jKs3h0b_lF_3VC8vY",
+      summary:
+        "My skills as a developer come together with a holistic understanding of what it takes to make a great product"
+    },
+    {
+      name: "Rachael Drennan",
+      gH_Link: "https://github.com/rdren0",
+      l_Link: "https://www.linkedin.com/in/rachael-drennan/",
+      p_Link: "https://alumni.turing.io/alumni/rachael-drennan",
+      role: "FE/BE",
+      img:
+        "https://media.licdn.com/dms/image/C4E03AQFmgk9OS5Z88Q/profile-displayphoto-shrink_800_800/0?e=1571270400&v=beta&t=A8lyTbvCZ7IxW1ctg19Oqw0EfVq06xUh1kMK14vybSI",
+      summary:
+        "As an artist and problem solver, I was drawn to software engineering because it allows me to be both creative and analytical in my approach to a project."
+    }
+  ];
+
+  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 (
+        <div className="dev" key={dev.name}>
+          <div className="dev-pic">
+            <img
+              className="dev-img"
+              src={dev.img}
+              alt={`Pic of Dev: ${dev.name}`}
+            />
+          </div>
+          <h4>{dev.name}</h4>
+          <h5>Role: {dev.role}</h5>
+          <div className="divider" />
+          <p>{dev.summary}</p>
+          <div className="social">
+            <a
+              className="fab fa-linkedin"
+              href={dev.l_Link}
+              target="blank"
+            />
+            <a
+              className="fab fa-github-square"
+              href={dev.gH_Link}
+              target="blank"
+            />
+            <a
+              className="fas fa-address-card"
+              href={dev.p_Link}
+              target="blank"
+            />
+          </div>
+        </div>
+      );
+    })
+  }
+
+  return (
+    <div className="backdrop">
+      <div className="AboutDevs">
+        <i
+          id="back"
+          className="fas fa-arrow-alt-circle-left"
+          onClick={() => props.history.goBack()}
+        />
+        <h2>Top Secret Case Files:</h2>
+        <section className="devs">{renderDevs()}</section>
+      </div>
+    </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

@@ -4,6 +4,12 @@
   justify-content: space-between;
   align-items: center;
   margin: 0 20px;
+  position: relative;
+  z-index: 99;
+
+  .header-left {
+    cursor: pointer;
+  }
 
   .header-title {
     color: white;
@@ -15,6 +21,8 @@
     color: white;
     align-items: center;
 
+
+
     .new-game-btn {
       margin-left: 30px;
       padding: 5px 15px;
@@ -36,3 +44,9 @@
     }
   }
 }
+
+.label {
+  position: absolute;
+  left: 2%;
+  background: $button-default;
+}