refactor/ remove header, update opponent info

Author: Dereje1

client/src/components/controls/controls.js

@@ -2,14 +2,41 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import './styles/controls.scss';
 /* font awesome */
-import { library } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
-  faPowerOff, faPause, faPlay, faUsers, faUser,
+  faUsers, faUser,
 } from '@fortawesome/free-solid-svg-icons';
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
+import IconButton from '@mui/material/IconButton';
+import PlayCircleFilledWhiteIcon from "@mui/icons-material/PlayCircleFilledWhite";
+import PauseIcon from "@mui/icons-material/Pause";
 
-/* adds font awesome icons */
-library.add(faPowerOff, faPause, faPlay);
+
+const PlayControls = ({ pauseButtonState, onhandlePause, onReset, disabled }) => (
+  <>
+    <IconButton
+      aria-label="reset"
+      size="large"
+      onClick={() => onReset(false)}
+      disabled={disabled}
+    >
+      <RestartAltIcon sx={{ fontSize: 52, color: disabled ? 'grey' : 'rgb(59, 9, 153)' }} />
+    </IconButton>
+    {
+      pauseButtonState
+        ? (
+          <IconButton aria-label="play" size="large" onClick={onhandlePause} disabled={disabled}>
+            <PlayCircleFilledWhiteIcon sx={{ fontSize: 52, color: disabled ? 'grey' : 'green' }} />
+          </IconButton>
+        )
+        : (
+          <IconButton aria-label="play" size="large" onClick={onhandlePause} disabled={disabled}>
+            <PauseIcon sx={{ fontSize: 52, color: disabled ? 'grey' : 'red' }} />
+          </IconButton>
+        )
+    }
+  </>
+)
 
 const Controls = ({
   onhandlePause,
@@ -34,44 +61,27 @@ const Controls = ({
           tabIndex="0"
         />
         <div className="controls__resetPause">
-          <FontAwesomeIcon
-            className="controls__resetPause__reset"
-            icon={faPowerOff}
-            onClick={() => onReset(false)}
+          <PlayControls
+            pauseButtonState={pauseButtonState}
+            onhandlePause={onhandlePause}
+            onReset={onReset}
           />
-          {
-            pauseButtonState
-              ? (
-                <FontAwesomeIcon
-                  className="controls__resetPause__play"
-                  icon={faPlay}
-                  onClick={onhandlePause()}
-                />
-              )
-              : (
-                <FontAwesomeIcon
-                  className="controls__resetPause__pause"
-                  icon={faPause}
-                  onClick={onhandlePause()}
-                />
-              )
-          }
         </div>
         {
           allowMultiPlayer
             ? (
               <FontAwesomeIcon
                 className="controls__multiplayer"
                 icon={faUsers}
-                onClick={onMultiPlayer()}
+                onClick={onMultiPlayer}
               />
             )
             : null
         }
         <button
           className="controls__raise"
           type="submit"
-          onClick={() => onFloorRaise()}
+          onClick={onFloorRaise}
         >
           Raise Floor
         </button>
@@ -93,17 +103,25 @@ const Controls = ({
         height={game.canvas.canvasMinor.height}
         tabIndex="0"
       />
+      <div className="controls__resetPause">
+        <PlayControls
+          pauseButtonState={pauseButtonState}
+          onhandlePause={onhandlePause}
+          onReset={onReset}
+          disabled={true}
+        />
+      </div>
       {
         !multiPlayer[1] ? (
           <FontAwesomeIcon
             className="controls__multiplayer"
             icon={faUser}
-            onClick={onMultiPlayer()}
+            onClick={onMultiPlayer}
           />
         )
           : null
       }
-
+      <div style={{ height: 40 }}></div>
       <span>Lines Cleared</span>
       <span>{game.points.totalLinesCleared}</span>
       <span>Difficulty</span>

client/src/components/game/game.js

@@ -372,9 +372,9 @@ export class Game extends React.Component {
                 multiPlayer={[multiPlayer, inGameToggle]}
                 pauseButtonState={buttonPause}
                 onReset={b => this.resetBoard({ reStart: b })}
-                onhandlePause={() => this.handlePause}
+                onhandlePause={() => this.handlePause()}
                 onFloorRaise={() => this.floorRaise(1)}
-                onMultiPlayer={() => this.handleMultiplayer}
+                onMultiPlayer={() => this.handleMultiplayer()}
                 allowMultiPlayer={Boolean(Object.keys(socket).length) && socket.usersLoggedIn > 1}
               />
               <canvas
@@ -395,6 +395,7 @@ export class Game extends React.Component {
                 toggleMultiplayer={() => this.setState({ inGameToggle: !inGameToggle })}
                 difficulty={difficulty}
                 floorsRaisedOnOpp={f => this.setState({ floorsRaised: floorsRaised + f })}
+                multiPlayer={multiPlayer}
               />
 
               <Audio {...this.audioProps()} />

client/src/components/game/styles/game.scss

@@ -1,9 +1,9 @@
 #landing{
-    background:#5d95dd67;
     height: 'auto';
     display: flex;
     justify-content: center;
     align-items: center;
+    margin-top: 40px;
 }
 .democontainer{
     display:flex;

client/src/components/header/header.js

@@ -8,7 +8,6 @@ import { clientEmitter } from '../../sockethandler';
 import { socket as socketConstants } from '../../constants/index';
 import Menu from '../menu/menu';
 import Invitation from './invitation';
-import './styles/header.scss';
 import soundFile from './styles/invite_recieved.wav';
 
 const mapStateToProps = state => state;
@@ -95,14 +94,11 @@ export class Header extends React.Component {
 
   render() {
     const { inviteReceived, inviteAccepted } = this.state;
-    const { user, socket } = this.props;
-    const usersMessage = socket.usersLoggedIn
-      ? `${socket.usersLoggedIn}  logged in user${socket.usersLoggedIn < 2 ? '' : 's'}`
-      : null;
+    const { user } = this.props;
     if (user.profile) {
       const { user: { profile: { authenticated } } } = this.props;
       return (
-        <div id="header">
+        <>
           {
             authenticated
               ? (
@@ -122,20 +118,11 @@ export class Header extends React.Component {
               )
               : null
           }
-          <div
-            id="users"
-            role="button"
-            tabIndex={-1}
-            onKeyDown={() => {}}
-            onClick={() => clientEmitter('pool', null)}
-          >
-            <span>{usersMessage}</span>
-          </div>
           {this.audioPlayer()}
-        </div>
+        </>
       );
     }
-    return <div id="header" />;
+    return null;
   }
 
 }

client/src/components/header/invitation.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import './styles/header.scss';
 import {
   DialogTitle, Dialog, Button, ButtonGroup, Chip, Avatar, DialogContent, DialogActions,
 } from '@mui/material';

client/src/components/header/styles/header.scss

@@ -13,10 +13,10 @@ import soundFile from './styles/WPN.wav';
 // read from store
 const mapStateToProps = ({
   game,
-  socket: { temp },
+  socket: { temp, usersLoggedIn },
   user
 }) =>
-  ({ game, temp, user });
+  ({ game, temp, user, usersLoggedIn });
 const {
   clientEmit: {
     LOOK_FOR_OPPONENTS,
@@ -238,7 +238,7 @@ export class Opponent extends React.Component {
   );
 
   render() {
-    const { difficulty, game, temp, user } = this.props;
+    const { difficulty, game, temp, user, multiPlayer, usersLoggedIn } = this.props;
     return (
       <div className="opponentContainer">
         <OpponentDescription
@@ -248,6 +248,8 @@ export class Opponent extends React.Component {
           requestInvite={sId => this.requestInvite(sId)}
           getPool={() => this.resetMultiplayer()}
           authenticated={user && user.profile && user.profile.authenticated}
+          multiPlayer={multiPlayer}
+          usersLoggedIn={usersLoggedIn}
         />
         <canvas
           ref={this.canvasOpponent}