refactor/move login button from header to side window

Author: Dereje1

client/src/components/game/game.js

@@ -94,23 +94,23 @@ export class Game extends React.Component {
 
     /* spped up on level up */
     if ((game.points.level > prevGame.points.level)
-          && (game.timerInterval > 100)
-          && (!multiPlayer)
+      && (game.timerInterval > 100)
+      && (!multiPlayer)
     ) {
       Action(LEVEL_UP, 50);
     }
 
     /* draws floor or sets state to do so before the next tick */
     if (game.rubble.boundaryCells.length > 10
-       && prevGame.rubble.boundaryCells.length !== game.rubble.boundaryCells.length) {
+      && prevGame.rubble.boundaryCells.length !== game.rubble.boundaryCells.length) {
       if (!game.activeShape.cells.length || game.paused) drawFloor(game, this.canvasContextMajor);
       else this.setState({ updateFloor: true });
     }
 
     /* an Invitation from another client has been accepted */
     if (!multiPlayer && socket.temp) {
       if (prevSocket.temp && !prevSocket.temp.acceptedInvitation
-          && socket.temp.acceptedInvitation) {
+        && socket.temp.acceptedInvitation) {
         this.setState({ multiPlayer: true }, () => this.resetBoard({ reStart: false }));
       }
     }
@@ -122,7 +122,7 @@ export class Game extends React.Component {
 
   componentWillUnmount() {
     this.endTick('componentWillUnmount');
-    window.removeEventListener('resize', () => {});
+    window.removeEventListener('resize', () => { });
   }
 
   audioProps = () => {
@@ -347,8 +347,8 @@ export class Game extends React.Component {
     const minWidthMP = 800;
     if (
       (multiPlayer && window.innerWidth < minWidthMP)
-        || (!multiPlayer && window.innerWidth < minWidthSP)
-        || (window.innerHeight < minHeight)
+      || (!multiPlayer && window.innerWidth < minWidthSP)
+      || (window.innerHeight < minHeight)
     ) this.setState({ windowTooSmall: true });
     else this.setState({ windowTooSmall: null }, () => this.loadCanvas());
   };
@@ -359,34 +359,33 @@ export class Game extends React.Component {
       difficulty, multiPlayer, inGameToggle,
       buttonPause, floorsRaised, windowTooSmall,
     } = this.state;
-    return(
+    return (
       <div id="landing">
         {
           Object.keys(game).length && !windowTooSmall ?
-          <div className="democontainer">
-          <Controls
-            minorCanvas={this.canvasMinor}
-            game={game}
-            difficulty={difficulty}
-            socketId={socket.mySocketId}
-            multiPlayer={[multiPlayer, inGameToggle]}
-            pauseButtonState={buttonPause}
-            onReset={b => this.resetBoard({ reStart: b })}
-            onhandlePause={() => this.handlePause}
-            onFloorRaise={() => this.floorRaise(1)}
-            onMultiPlayer={() => this.handleMultiplayer}
-            allowMultiPlayer={Boolean(Object.keys(socket).length) && socket.usersLoggedIn > 1}
-          />
-          <canvas
-            ref={this.canvasMajor}
-            width={game.canvas.canvasMajor.width}
-            height={game.canvas.canvasMajor.height}
-            tabIndex="0"
-            onKeyDown={e => this.gamePlay(e)}
-            onKeyUp={e => this.arrowKeyLag(e)}
-          />
-          {multiPlayer
-            ? (
+            <div className="democontainer">
+              <Controls
+                minorCanvas={this.canvasMinor}
+                game={game}
+                difficulty={difficulty}
+                socketId={socket.mySocketId}
+                multiPlayer={[multiPlayer, inGameToggle]}
+                pauseButtonState={buttonPause}
+                onReset={b => this.resetBoard({ reStart: b })}
+                onhandlePause={() => this.handlePause}
+                onFloorRaise={() => this.floorRaise(1)}
+                onMultiPlayer={() => this.handleMultiplayer}
+                allowMultiPlayer={Boolean(Object.keys(socket).length) && socket.usersLoggedIn > 1}
+              />
+              <canvas
+                ref={this.canvasMajor}
+                width={game.canvas.canvasMajor.width}
+                height={game.canvas.canvasMajor.height}
+                tabIndex="0"
+                onKeyDown={e => this.gamePlay(e)}
+                onKeyUp={e => this.arrowKeyLag(e)}
+              />
+
               <Opponent
                 onReset={reStart => this.resetBoard(reStart)}
                 onFloorRaise={f => this.floorRaise(f)}
@@ -397,13 +396,11 @@ export class Game extends React.Component {
                 difficulty={difficulty}
                 floorsRaisedOnOpp={f => this.setState({ floorsRaised: floorsRaised + f })}
               />
-            )
-            : null
-          }
-          <Audio {...this.audioProps()} />
-        </div>
-        :
-        <div id="smallwindow" />
+
+              <Audio {...this.audioProps()} />
+            </div>
+            :
+            <div id="smallwindow" />
         }
       </div>
     )

client/src/components/header/header.js

@@ -120,7 +120,7 @@ export class Header extends React.Component {
                   }
                 </React.Fragment>
               )
-              : <div id="authbutton"><button id="login" type="submit" onClick={() => window.location.assign('/auth/google')} /></div>
+              : null
           }
           <div
             id="users"

client/src/components/header/styles/btn_google_signin_dark_normal_web@2x.png

@@ -5,21 +5,6 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    #authbutton{
-            margin-top: 25px;
-            width: auto;
-            height: 100%;
-        #login{
-            width: 232px;
-            height: 70%;
-            background: url('btn_google_signin_dark_normal_web@2x.png');
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
-            cursor: pointer;
-            outline: none;
-        }
-    }
-
     #users{
         position: absolute;
         right: 0;

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

@@ -11,7 +11,12 @@ import './styles/opponentdescription.scss';
 import soundFile from './styles/WPN.wav';
 
 // read from store
-const mapStateToProps = ({ game, socket: { temp } }) => ({ game, temp });
+const mapStateToProps = ({
+  game,
+  socket: { temp },
+  user
+}) =>
+  ({ game, temp, user });
 const {
   clientEmit: {
     LOOK_FOR_OPPONENTS,
@@ -163,12 +168,12 @@ export class Opponent extends React.Component {
     const { levelsRaised } = this.state;
     const {
       temp:
-          {
-            gameInProgress:
-            {
-              info: { difficulty },
-            },
-          },
+      {
+        gameInProgress:
+        {
+          info: { difficulty },
+        },
+      },
       onFloorRaise, floorsRaisedOnOpp,
     } = this.props;
     const {
@@ -233,8 +238,7 @@ export class Opponent extends React.Component {
   );
 
   render() {
-    const { difficulty, game, temp } = this.props;
-    if (!temp) return null;
+    const { difficulty, game, temp, user } = this.props;
     return (
       <div className="opponentContainer">
         <OpponentDescription
@@ -243,6 +247,7 @@ export class Opponent extends React.Component {
           setDifficulty={this.setDifficulty}
           requestInvite={sId => this.requestInvite(sId)}
           getPool={() => this.resetMultiplayer()}
+          authenticated={user && user.profile && user.profile.authenticated}
         />
         <canvas
           ref={this.canvasOpponent}

client/src/components/oponnent/opponent.js

@@ -4,10 +4,11 @@ import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   Box, ButtonGroup, Button, CircularProgress,
-} from '@material-ui/core';
+} from '@mui/material';
 import {
   faSyncAlt,
 } from '@fortawesome/free-solid-svg-icons';
+import GoogleIcon from '@mui/icons-material/Google';
 import './styles/opponentdescription.scss';
 
 /* opponent top part of component */
@@ -17,12 +18,24 @@ const OpponentDescription = ({
   setDifficulty,
   requestInvite,
   getPool,
+  authenticated
 }) => {
+  if (!temp) return null
   const {
     opponents, invitationTo, declinedInvitation,
     acceptedInvitation, gameInProgress, gameOver,
   } = temp;
   // stage 1 - no logged in opponents in multiplayer mode found
+  if (!authenticated) {
+    return (
+      <Button id="googleloginbutton"
+        variant="outlined" startIcon={<GoogleIcon style={{ fontSize: 25 }} />}
+        onClick={() => window.location.assign('/auth/google')}>
+        Continue With Google
+      </Button>
+    );
+  }
+
   if (opponents && !opponents.length) {
     return (
       <div className="opponentContainer__opponentDescription">
@@ -66,7 +79,7 @@ const OpponentDescription = ({
                 key={d}
                 role="button"
                 onClick={() => setDifficulty(d)}
-                onKeyDown={() => {}}
+                onKeyDown={() => { }}
                 tabIndex={0}
                 style={{
                   maxWidth: 35, maxHeight: 35, minWidth: 35, minHeight: 35,
@@ -176,5 +189,6 @@ OpponentDescription.propTypes = {
   requestInvite: PropTypes.func,
   difficulty: PropTypes.number,
   getPool: PropTypes.func,
+  authenticated: PropTypes.bool,
 };
 export default OpponentDescription;

client/src/components/oponnent/opponentInfo.js

@@ -1,3 +1,27 @@
+ #googleloginbutton{
+    border: 0px;
+    height: 40px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    border-radius: 2px;
+    padding: 1px;
+    font-size: 15px;
+    font-weight: bold;
+    outline: none;
+    box-shadow: none;
+    cursor: pointer;
+    background-clip: padding-box;
+    transition: opacity .2s linear;
+    width: 268px;
+    margin-top: 10px;
+    color:white;
+    background-color: #4285F4;
+    .buttontext{
+        padding-right: 45px;
+      }
+  }
+
 .opponentContainer{
     margin-left: 30px;
     margin-right:30px;

client/src/components/oponnent/styles/opponentdescription.scss

@@ -125,6 +125,16 @@ exports[`The Game component will display the game for allowed screen sizes 1`] =
       tabIndex="0"
       width={300}
     />
+    <Connect(Opponent)
+      difficulty={2}
+      floorsRaisedOnOpp={[Function]}
+      onCanvasFocus={[Function]}
+      onFloorRaise={[Function]}
+      onGameOver={[Function]}
+      onReset={[Function]}
+      onSetDifficulty={[Function]}
+      toggleMultiplayer={[Function]}
+    />
     <Audio
       clearAudio={
         Object {

client/tests/src/components/game/__snapshots__/game.test.js.snap

@@ -44,15 +44,6 @@ exports[`The header will render for unauthenticated users 1`] = `
 <div
   id="header"
 >
-  <div
-    id="authbutton"
-  >
-    <button
-      id="login"
-      onClick={[Function]}
-      type="submit"
-    />
-  </div>
   <div
     id="users"
     onClick={[Function]}

client/tests/src/components/header/__snapshots__/header.test.js.snap

@@ -1,21 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`will render the invitation modal 1`] = `
-<WithStyles(ForwardRef(Dialog))
+<ForwardRef(Dialog)
   aria-labelledby="simple-dialog-title"
   open={true}
 >
-  <WithStyles(ForwardRef(DialogTitle))
+  <ForwardRef(DialogTitle)
     id="simple-dialog-title"
   >
     stub_Invite_name invites you to a duel!
-  </WithStyles(ForwardRef(DialogTitle))>
-  <WithStyles(ForwardRef(DialogContent))>
-    <WithStyles(ForwardRef(Chip))
+  </ForwardRef(DialogTitle)>
+  <ForwardRef(DialogContent)>
+    <ForwardRef(Chip)
       avatar={
-        <WithStyles(ForwardRef(Avatar))>
+        <ForwardRef(Avatar)>
           3
-        </WithStyles(ForwardRef(Avatar))>
+        </ForwardRef(Avatar)>
       }
       color="primary"
       label="Difficulty"
@@ -26,13 +26,13 @@ exports[`will render the invitation modal 1`] = `
         }
       }
     />
-  </WithStyles(ForwardRef(DialogContent))>
-  <WithStyles(ForwardRef(DialogActions))>
-    <WithStyles(ForwardRef(ButtonGroup))
+  </ForwardRef(DialogContent)>
+  <ForwardRef(DialogActions)>
+    <ForwardRef(ButtonGroup)
       aria-label="vertical outlined primary button group"
       color="primary"
     >
-      <WithStyles(ForwardRef(Button))
+      <ForwardRef(Button)
         onClick={[Function]}
         size="large"
         style={
@@ -45,8 +45,8 @@ exports[`will render the invitation modal 1`] = `
         variant="contained"
       >
         Accept
-      </WithStyles(ForwardRef(Button))>
-      <WithStyles(ForwardRef(Button))
+      </ForwardRef(Button)>
+      <ForwardRef(Button)
         onClick={[Function]}
         size="large"
         style={
@@ -59,8 +59,8 @@ exports[`will render the invitation modal 1`] = `
         variant="contained"
       >
         Decline
-      </WithStyles(ForwardRef(Button))>
-    </WithStyles(ForwardRef(ButtonGroup))>
-  </WithStyles(ForwardRef(DialogActions))>
-</WithStyles(ForwardRef(Dialog))>
+      </ForwardRef(Button)>
+    </ForwardRef(ButtonGroup)>
+  </ForwardRef(DialogActions)>
+</ForwardRef(Dialog)>
 `;