Skip to content

Commit e9c7e90

Browse files
Dereje1Dereje1
committed
refactor/ remove header, update opponent info
1 parent 6c78827 commit e9c7e90

File tree

15 files changed

+157
-353
lines changed

15 files changed

+157
-353
lines changed

‎client/src/components/controls/controls.js‎

Lines changed: 44 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,41 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import './styles/controls.scss';
44
/* font awesome */
5-
import { library } from '@fortawesome/fontawesome-svg-core';
65
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
76
import {
8-
faPowerOff, faPause, faPlay, faUsers, faUser,
7+
faUsers, faUser,
98
} from '@fortawesome/free-solid-svg-icons';
9+
import RestartAltIcon from '@mui/icons-material/RestartAlt';
10+
import IconButton from '@mui/material/IconButton';
11+
import PlayCircleFilledWhiteIcon from "@mui/icons-material/PlayCircleFilledWhite";
12+
import PauseIcon from "@mui/icons-material/Pause";
1013

11-
/* adds font awesome icons */
12-
library.add(faPowerOff, faPause, faPlay);
14+
15+
const PlayControls = ({ pauseButtonState, onhandlePause, onReset, disabled }) => (
16+
<>
17+
<IconButton
18+
aria-label="reset"
19+
size="large"
20+
onClick={() => onReset(false)}
21+
disabled={disabled}
22+
>
23+
<RestartAltIcon sx={{ fontSize: 52, color: disabled ? 'grey' : 'rgb(59, 9, 153)' }} />
24+
</IconButton>
25+
{
26+
pauseButtonState
27+
? (
28+
<IconButton aria-label="play" size="large" onClick={onhandlePause()} disabled={disabled}>
29+
<PlayCircleFilledWhiteIcon sx={{ fontSize: 52, color: disabled ? 'grey' : 'green' }} />
30+
</IconButton>
31+
)
32+
: (
33+
<IconButton aria-label="play" size="large" onClick={onhandlePause()} disabled={disabled}>
34+
<PauseIcon sx={{ fontSize: 52, color: disabled ? 'grey' : 'red' }} />
35+
</IconButton>
36+
)
37+
}
38+
</>
39+
)
1340

1441
const Controls = ({
1542
onhandlePause,
@@ -34,28 +61,11 @@ const Controls = ({
3461
tabIndex="0"
3562
/>
3663
<div className="controls__resetPause">
37-
<FontAwesomeIcon
38-
className="controls__resetPause__reset"
39-
icon={faPowerOff}
40-
onClick={() => onReset(false)}
64+
<PlayControls
65+
pauseButtonState={pauseButtonState}
66+
onhandlePause={onhandlePause}
67+
onReset={onReset}
4168
/>
42-
{
43-
pauseButtonState
44-
? (
45-
<FontAwesomeIcon
46-
className="controls__resetPause__play"
47-
icon={faPlay}
48-
onClick={onhandlePause()}
49-
/>
50-
)
51-
: (
52-
<FontAwesomeIcon
53-
className="controls__resetPause__pause"
54-
icon={faPause}
55-
onClick={onhandlePause()}
56-
/>
57-
)
58-
}
5969
</div>
6070
{
6171
allowMultiPlayer
@@ -93,6 +103,14 @@ const Controls = ({
93103
height={game.canvas.canvasMinor.height}
94104
tabIndex="0"
95105
/>
106+
<div className="controls__resetPause">
107+
<PlayControls
108+
pauseButtonState={pauseButtonState}
109+
onhandlePause={onhandlePause}
110+
onReset={onReset}
111+
disabled={true}
112+
/>
113+
</div>
96114
{
97115
!multiPlayer[1] ? (
98116
<FontAwesomeIcon
@@ -103,7 +121,7 @@ const Controls = ({
103121
)
104122
: null
105123
}
106-
124+
<div style={{ height: 40 }}></div>
107125
<span>Lines Cleared</span>
108126
<span>{game.points.totalLinesCleared}</span>
109127
<span>Difficulty</span>

‎client/src/components/game/game.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -395,6 +395,7 @@ export class Game extends React.Component {
395395
toggleMultiplayer={() => this.setState({ inGameToggle: !inGameToggle })}
396396
difficulty={difficulty}
397397
floorsRaisedOnOpp={f => this.setState({ floorsRaised: floorsRaised + f })}
398+
multiPlayer={multiPlayer}
398399
/>
399400

400401
<Audio {...this.audioProps()} />

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
#landing{
2-
background:#5d95dd67;
32
height: 'auto';
43
display: flex;
54
justify-content: center;
65
align-items: center;
6+
margin-top: 40px;
77
}
88
.democontainer{
99
display:flex;

‎client/src/components/header/header.js‎

Lines changed: 4 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import { clientEmitter } from '../../sockethandler';
88
import { socket as socketConstants } from '../../constants/index';
99
import Menu from '../menu/menu';
1010
import Invitation from './invitation';
11-
import './styles/header.scss';
1211
import soundFile from './styles/invite_recieved.wav';
1312

1413
const mapStateToProps = state => state;
@@ -95,14 +94,11 @@ export class Header extends React.Component {
9594

9695
render() {
9796
const { inviteReceived, inviteAccepted } = this.state;
98-
const { user, socket } = this.props;
99-
const usersMessage = socket.usersLoggedIn
100-
? `${socket.usersLoggedIn} logged in user${socket.usersLoggedIn < 2 ? '' : 's'}`
101-
: null;
97+
const { user } = this.props;
10298
if (user.profile) {
10399
const { user: { profile: { authenticated } } } = this.props;
104100
return (
105-
<div id="header">
101+
<>
106102
{
107103
authenticated
108104
? (
@@ -122,20 +118,11 @@ export class Header extends React.Component {
122118
)
123119
: null
124120
}
125-
<div
126-
id="users"
127-
role="button"
128-
tabIndex={-1}
129-
onKeyDown={() => {}}
130-
onClick={() => clientEmitter('pool', null)}
131-
>
132-
<span>{usersMessage}</span>
133-
</div>
134121
{this.audioPlayer()}
135-
</div>
122+
</>
136123
);
137124
}
138-
return <div id="header" />;
125+
return null;
139126
}
140127

141128
}

‎client/src/components/header/invitation.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import './styles/header.scss';
43
import {
54
DialogTitle, Dialog, Button, ButtonGroup, Chip, Avatar, DialogContent, DialogActions,
65
} from '@mui/material';

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

Lines changed: 0 additions & 115 deletions
This file was deleted.

‎client/src/components/oponnent/opponent.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ import soundFile from './styles/WPN.wav';
1313
// read from store
1414
const mapStateToProps = ({
1515
game,
16-
socket: { temp },
16+
socket: { temp, usersLoggedIn },
1717
user
1818
}) =>
19-
({ game, temp, user });
19+
({ game, temp, user, usersLoggedIn });
2020
const {
2121
clientEmit: {
2222
LOOK_FOR_OPPONENTS,
@@ -238,7 +238,7 @@ export class Opponent extends React.Component {
238238
);
239239

240240
render() {
241-
const { difficulty, game, temp, user } = this.props;
241+
const { difficulty, game, temp, user, multiPlayer, usersLoggedIn } = this.props;
242242
return (
243243
<div className="opponentContainer">
244244
<OpponentDescription
@@ -248,6 +248,8 @@ export class Opponent extends React.Component {
248248
requestInvite={sId => this.requestInvite(sId)}
249249
getPool={() => this.resetMultiplayer()}
250250
authenticated={user && user.profile && user.profile.authenticated}
251+
multiPlayer={multiPlayer}
252+
usersLoggedIn={usersLoggedIn}
251253
/>
252254
<canvas
253255
ref={this.canvasOpponent}

‎client/src/components/oponnent/opponentInfo.js‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,15 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
55
import {
66
Box, ButtonGroup, Button, CircularProgress,
77
} from '@mui/material';
8+
import GoogleIcon from '@mui/icons-material/Google';
9+
import Card from '@mui/material/Card';
10+
import CardContent from '@mui/material/CardContent';
11+
import Typography from '@mui/material/Typography';
12+
import Chip from '@mui/material/Chip';
13+
import GroupIcon from '@mui/icons-material/Group';
814
import {
915
faSyncAlt,
1016
} from '@fortawesome/free-solid-svg-icons';
11-
import GoogleIcon from '@mui/icons-material/Google';
1217
import './styles/opponentdescription.scss';
1318

1419
/* opponent top part of component */
@@ -18,7 +23,9 @@ const OpponentDescription = ({
1823
setDifficulty,
1924
requestInvite,
2025
getPool,
21-
authenticated
26+
authenticated,
27+
multiPlayer,
28+
usersLoggedIn
2229
}) => {
2330
if (!temp) return null
2431
const {
@@ -35,6 +42,23 @@ const OpponentDescription = ({
3542
</Button>
3643
);
3744
}
45+
if (!multiPlayer && (!invitationTo || !acceptedInvitation || !gameInProgress || !gameOver)) {
46+
return (<Card sx={{ minWidth: 275, marginTop: 1 }}>
47+
<CardContent>
48+
<Chip
49+
icon={<GroupIcon />}
50+
label={usersLoggedIn}
51+
color={usersLoggedIn > 1 ? "success" : "error"}
52+
sx={{marginBottom: 1}}
53+
/>
54+
<Typography sx={{ fontSize: 14 }} color="text.secondary">
55+
{
56+
usersLoggedIn > 1 ? "Switch to multi player mode to find opponents" : null
57+
}
58+
</Typography>
59+
</CardContent>
60+
</Card>)
61+
}
3862

3963
if (opponents && !opponents.length) {
4064
return (
@@ -190,5 +214,6 @@ OpponentDescription.propTypes = {
190214
difficulty: PropTypes.number,
191215
getPool: PropTypes.func,
192216
authenticated: PropTypes.bool,
217+
usersLoggedIn: PropTypes.number
193218
};
194219
export default OpponentDescription;

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@
1414
background-clip: padding-box;
1515
transition: opacity .2s linear;
1616
width: 268px;
17-
margin-top: 10px;
1817
color:white;
1918
background-color: #4285F4;
2019
.buttontext{

0 commit comments

Comments
 (0)