Issue 25: Game Integration

.gitignore

@@ -22,3 +22,5 @@ yarn-error.log*
 
 #TODO add .env to your gitignore
 server/.env
+
+.vscode

client/package.json

@@ -6,6 +6,7 @@
     "@material-ui/core": "^4.1.3",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.56",
+    "howler": "^2.2.0",
     "fetch-intercept": "^2.3.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

client/src/App.js

@@ -5,7 +5,9 @@ import "./App.css";
 
 import { theme } from "./themes/theme";
 import { AuthContext } from "./context/AuthContext";
+import { GameplayContextProvider } from "./context/GameplayContext";
 import { RTCContextProvider } from "./context/RTCContext";
+import { GameContextProvider } from "./context/GameContext";
 
 import LoginOrSignUp from "./pages/LoginOrSignUp";
 import CreateOrJoinGame from "./pages/CreateOrJoinGame";
@@ -64,26 +66,31 @@ function App() {
             {auth ? <Redirect to={redirectPath} /> : <LoginOrSignUp />}
           </Route>
 
-          <ProtectedRoute
-            exact
-            path="/create-game"
-            component={CreateOrJoinGame}
-            auth={auth}
-          />
-          <ProtectedRoute
-            exact
-            path="/lobby/:gameId"
-            component={PreGameLobby}
-            auth={auth}
-          />
-          <RTCContextProvider>
+          <GameContextProvider>
             <ProtectedRoute
               exact
-              path="/session/:gameId"
-              component={GameSession}
+              path="/create-game"
+              component={CreateOrJoinGame}
               auth={auth}
             />
-          </RTCContextProvider>
+            <GameplayContextProvider>
+              <ProtectedRoute
+                exact
+                path="/lobby/:gameId"
+                component={PreGameLobby}
+                auth={auth}
+              />
+              <RTCContextProvider>
+                <ProtectedRoute
+                  exact
+                  path="/session/:gameId"
+                  component={GameSession}
+                  auth={auth}
+                />
+              </RTCContextProvider>
+            </GameplayContextProvider>
+          </GameContextProvider>
+
           <Route component={PageNotFound} />
         </Switch>
       </BrowserRouter>

client/src/components/FormInput.js

@@ -16,6 +16,8 @@ function FormInput({
   hasAdornment,
   adornmentText,
   onClick,
+  isDisabled,
+  handleOnKeyUp,
   ...props
 }) {
   const classes = useStyles();
@@ -32,10 +34,12 @@ function FormInput({
           type={label}
           onChange={handleChange}
           fullWidth
+          disabled={isDisabled}
+          onKeyUp={handleOnKeyUp}
           endAdornment={
             hasAdornment && (
               <InputAdornment position="end">
-                <GenericButton handleClick={onClick} isAdornment>
+                <GenericButton handleClick={onClick} isSubmit isAdornment>
                   {adornmentText}
                 </GenericButton>
               </InputAdornment>

client/src/components/GenericButton.js

@@ -1,18 +1,26 @@
 import React from "react";
 import { Button, makeStyles } from "@material-ui/core";
 
-function GenericButton({ children, handleClick, isAdornment }) {
+function GenericButton({
+  children,
+  handleClick,
+  isSubmit,
+  isDisabled,
+  isAdornment,
+}) {
   const classes = useStyles();
   return (
     <Button
       style={{
-        padding: isAdornment ? "0.5em 1em" : "1em 3em",
+        padding: isAdornment ? "0.5em 1em" : "0.75em 2.75em",
         letterSpacing: isAdornment ? "1px" : "2.5px",
         borderRadius: isAdornment ? "2px" : "8px",
       }}
       className={classes.button}
       variant="contained"
       onClick={handleClick}
+      type={isSubmit ? "submit" : "button"}
+      disabled={isDisabled}
     >
       {children}
     </Button>

client/src/components/Notification.js

@@ -1,35 +1,34 @@
 //popping notification
 
-import React from 'react'
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert'
-import { makeStyles } from '@material-ui/core/styles';
+import React from "react";
+import Snackbar from "@material-ui/core/Snackbar";
+import MuiAlert from "@material-ui/lab/Alert";
+import { makeStyles } from "@material-ui/core/styles";
 
 function Alert(props) {
-    return <MuiAlert elevation={6} variant="filled" {...props} />;
+  return <MuiAlert elevation={6} variant="filled" {...props} />;
 }
 
-function Notification({open, msg, handleClose}) {
-    const classes = useStyles();
-    return (
-        <div className={classes.root}>
-            <Snackbar open={open} autoHideDuration={4000} onClose={handleClose}>
-                <Alert onClose={handleClose} severity="success">
-                    {msg}
-                </Alert>
-            </Snackbar>
-        </div>
-    )
+function Notification({ open, msg, handleClose, severity = "success" }) {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      <Snackbar open={open} autoHideDuration={4000} onClose={handleClose}>
+        <Alert onClose={handleClose} severity={severity}>
+          {msg}
+        </Alert>
+      </Snackbar>
+    </div>
+  );
 }
 
 const useStyles = makeStyles((theme) => ({
-    root: {
-        width: '100%',
-        '& > * + *': {
-            marginTop: theme.spacing(2),
-        },
+  root: {
+    width: "100%",
+    "& > * + *": {
+      marginTop: theme.spacing(2),
     },
+  },
 }));
 
 export default Notification;
-

client/src/components/Settings.js

@@ -1,15 +1,17 @@
 import React, { useState, useContext } from "react";
 import SettingsIcon from "@material-ui/icons/Settings";
-import VideocamIcon from '@material-ui/icons/Videocam';
-import Mic from '@material-ui/icons/Mic';
+import VideocamIcon from "@material-ui/icons/Videocam";
+import Mic from "@material-ui/icons/Mic";
 import { makeStyles, IconButton, Menu, MenuItem } from "@material-ui/core";
-import Switch from '@material-ui/core/Switch';
-import {RTCContext} from '../context/RTCContext';
+import Switch from "@material-ui/core/Switch";
+import { RTCContext } from "../context/RTCContext";
 
 function Settings() {
   const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState(null);
-  const {playerAudioOn, playerVideoOn, switchVideo, switchAudio} = useContext(RTCContext);
+  const { playerAudioOn, playerVideoOn, switchVideo, switchAudio } = useContext(
+    RTCContext
+  );
 
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -20,7 +22,7 @@ function Settings() {
   };
 
   return (
-    <div>
+    <>
       <IconButton onClick={handleClick}>
         <SettingsIcon className={classes.icon} />
       </IconButton>
@@ -30,31 +32,30 @@ function Settings() {
         keepMounted
         open={Boolean(anchorEl)}
         onClose={handleClose}
+        disableScrollLock
       >
-        <MenuItem
-          disableTouchRipple={true}>
+        <MenuItem disableTouchRipple={true}>
           <VideocamIcon />
           <Switch
             checked={playerVideoOn}
             onChange={switchVideo}
             size="small"
             name="checkedA"
-            inputProps={{ 'aria-label': 'secondary checkbox' }}
+            inputProps={{ "aria-label": "secondary checkbox" }}
           />
         </MenuItem>
-        <MenuItem
-          disableTouchRipple={true}>
+        <MenuItem disableTouchRipple={true}>
           <Mic />
           <Switch
             checked={playerAudioOn}
             onChange={switchAudio}
             size="small"
             name="checkedB"
-            inputProps={{ 'aria-label': 'secondary checkbox' }}
+            inputProps={{ "aria-label": "secondary checkbox" }}
           />
         </MenuItem>
       </Menu>
-    </div>
+    </>
   );
 }
 
@@ -66,5 +67,4 @@ const useStyles = makeStyles((theme) => ({
   },
 }));
 
-
 export default Settings;