Skip to content

Commit 2e2b768

Browse files
coder13coder13
committed
most basic lobby functionality
1 parent 8cecd86 commit 2e2b768

File tree

7 files changed

+53
-93
lines changed

7 files changed

+53
-93
lines changed

‎client/src/components/Lobby/UserList.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
33
import { makeStyles } from '@material-ui/core/styles';
44
import Paper from '@material-ui/core/Paper';
55
import Toolbar from '@material-ui/core/Toolbar';
6-
import Divider from '@material-ui/core/Divider';
6+
// import Divider from '@material-ui/core/Divider';
77
import List from '@material-ui/core/List';
88
import ListItem from '@material-ui/core/ListItem';
99
import ListItemText from '@material-ui/core/ListItemText';
@@ -22,21 +22,21 @@ function LobbyUserList({ users }) {
2222

2323
return (
2424
<Paper square className={classes.root}>
25+
<Paper square>
26+
<Toolbar variant="dense">
27+
{`${users.length} users online`}
28+
</Toolbar>
29+
</Paper>
2530
<List style={{
2631
overflow: 'auto',
2732
}}
2833
>
2934
{users.map((user) => (
30-
<ListItem key={user.id}>
35+
<ListItem button key={user.id}>
3136
<ListItemText primary={user.displayName} />
3237
</ListItem>
3338
))}
3439
</List>
35-
<Divider />
36-
<Toolbar variant="dense">
37-
{`${users.length} users online`}
38-
</Toolbar>
39-
<Divider />
4040
</Paper>
4141
);
4242
}

‎client/src/components/Lobby/index.js

Lines changed: 8 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -83,91 +83,8 @@ const useStyles = makeStyles((theme) => ({
8383
},
8484
}));
8585

86-
const USERS = [{
87-
id: 8184,
88-
displayName: 'Caleb Hoover',
89-
}, {
90-
id: 8185,
91-
displayName: 'Caleb Hoover',
92-
}, {
93-
id: 8186,
94-
displayName: 'Caleb Hoover',
95-
}, {
96-
id: 8187,
97-
displayName: 'Caleb Hoover',
98-
}, {
99-
id: 8188,
100-
displayName: 'Caleb Hoover',
101-
}, {
102-
id: 8189,
103-
displayName: 'Caleb Hoover',
104-
}, {
105-
id: 8190,
106-
displayName: 'Caleb Hoover',
107-
}, {
108-
id: 8191,
109-
displayName: 'Caleb Hoover',
110-
}, {
111-
id: 8192,
112-
displayName: 'Caleb Hoover',
113-
}, {
114-
id: 8193,
115-
displayName: 'Caleb Hoover',
116-
}, {
117-
id: 8194,
118-
displayName: 'Caleb Hoover',
119-
}, {
120-
id: 8195,
121-
displayName: 'Caleb Hoover',
122-
}, {
123-
id: 8196,
124-
displayName: 'Caleb Hoover',
125-
}, {
126-
id: 8197,
127-
displayName: 'Caleb Hoover',
128-
}, {
129-
id: 8198,
130-
displayName: 'Caleb Hoover',
131-
}, {
132-
id: 8199,
133-
displayName: 'Caleb Hoover',
134-
}, {
135-
id: 8200,
136-
displayName: 'Caleb Hoover',
137-
}, {
138-
id: 8201,
139-
displayName: 'Caleb Hoover',
140-
}, {
141-
id: 8202,
142-
displayName: 'Caleb Hoover',
143-
}, {
144-
id: 8203,
145-
displayName: 'Caleb Hoover',
146-
}, {
147-
id: 8204,
148-
displayName: 'Caleb Hoover',
149-
}, {
150-
id: 8205,
151-
displayName: 'Caleb Hoover',
152-
}, {
153-
id: 8206,
154-
displayName: 'Caleb Hoover',
155-
}, {
156-
id: 8207,
157-
displayName: 'Caleb Hoover',
158-
}, {
159-
id: 8208,
160-
displayName: 'Caleb Hoover',
161-
}, {
162-
id: 8209,
163-
displayName: 'Caleb Hoover',
164-
}, {
165-
id: 8210,
166-
displayName: 'Caleb Hoover',
167-
}];
168-
16986
function Lobby({
170-
rooms, user,
87+
rooms, user, users,
17188
}) {
17289
const classes = useStyles();
17390
const dispatch = useDispatch();
@@ -259,7 +176,7 @@ function Lobby({
259176
</div>
260177
</Grid>
261178
<Grid item xs={3} className={classes.userList}>
262-
<UserList users={USERS} />
179+
<UserList users={users} />
263180
</Grid>
264181
</Grid>
265182
<RoomConfigureDialog
@@ -280,6 +197,10 @@ Lobby.propTypes = {
280197
canJoinRoom: PropTypes.bool,
281198
showWCAID: PropTypes.bool,
282199
}),
200+
users: PropTypes.arrayOf(PropTypes.shape({
201+
id: PropTypes.number,
202+
displayName: PropTypes.string,
203+
})),
283204
};
284205

285206
Lobby.defaultProps = {
@@ -289,12 +210,14 @@ Lobby.defaultProps = {
289210
canJoinRoom: false,
290211
showWCAID: false,
291212
},
213+
users: [],
292214
};
293215

294216
const mapStateToProps = (state) => ({
295217
rooms: state.roomList.rooms,
296218
user: state.user,
297219
userCount: state.server.userCount,
220+
users: state.roomList.users,
298221
});
299222

300223
export default connect(mapStateToProps)(Lobby);

‎client/src/lib/protocol.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ module.exports = {
3636
UPDATE_STATUS: 'update_status',
3737
UPDATE_COMPETING: 'update_competing',
3838
UPDATE_USER_COUNT: 'user_count',
39+
UPDATE_USERS_IN_LOBBY: 'update_users_in_lobby',
3940
KICK_USER: 'kick_user',
4041
BAN_USER: 'ban_user',
4142
UNBAN_USER: 'unban_user',

‎client/src/store/middlewares/rooms.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ import {
4646
roomUpdated as globalRoomUpdated,
4747
roomDeleted,
4848
roomsUpdated,
49+
updateUsers,
4950
} from '../rooms/actions';
5051
import { createMessage } from '../messages/actions';
5152
import { SEND_CHAT, receiveChat } from '../chat/actions';
@@ -188,6 +189,9 @@ const roomsNamespaceMiddleware = (store) => {
188189
[Protocol.NEXT_SOLVE_AT]: (dateTime) => {
189190
store.dispatch(nextSolveAt(dateTime));
190191
},
192+
[Protocol.UPDATE_USERS_IN_LOBBY]: ({ users }) => {
193+
store.dispatch(updateUsers(users));
194+
},
191195
},
192196
});
193197

‎client/src/store/rooms/actions.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export const ROOMS_UPDATED = 'rooms/updated';
88
export const ROOM_CREATED = 'rooms/created';
99
export const ROOM_DELETED = 'rooms/deleted';
1010
export const ROOM_UPDATED = 'rooms/room_updated';
11+
export const UPDATE_USERS = 'rooms/UPDATE_USERS';
1112

1213
export const connectionChanged = (isConnected) => ({
1314
type: ROOMS_CONNECTION_CHANGED,
@@ -59,3 +60,8 @@ export const createRoom = (options) => ({
5960
type: CREATE_ROOM,
6061
options,
6162
});
63+
64+
export const updateUsers = (users) => ({
65+
type: UPDATE_USERS,
66+
users,
67+
});

‎client/src/store/rooms/reducer.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,12 @@ import {
66
ROOM_CREATED,
77
ROOM_DELETED,
88
ROOM_UPDATED,
9+
UPDATE_USERS,
910
} from './actions';
1011

1112
const INITIAL_STATE = {
1213
rooms: [],
14+
users: [],
1315
connected: false,
1416
connectionStatus: 'connecting',
1517
};
@@ -50,6 +52,10 @@ const reducers = {
5052
...state,
5153
rooms: state.rooms.map((i) => (i._id === action.room._id ? action.room : i)),
5254
}),
55+
[UPDATE_USERS]: (state, action) => ({
56+
...state,
57+
users: action.users,
58+
}),
5359
};
5460

5561
// Socket reducer

‎server/socket/namespaces/rooms.js

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const Protocol = require('../../../client/src/lib/protocol');
44
const ChatMessage = require('../lib/ChatMessage');
55
const { parseCommand } = require('../lib/commands');
66
const logger = require('../../logger');
7-
const { Room } = require('../../models');
7+
const { Room, User } = require('../../models');
88
const { encodeUserRoom } = require('../utils');
99
const roomMap = require('../lib/roomMap');
1010

@@ -124,6 +124,22 @@ module.exports = (io, middlewares) => {
124124
ns().on('connection', (socket) => {
125125
logger.debug(`socket ${socket.id} connected to rooms; logged in as ${socket.user ? socket.user.name : 'Anonymous'}`);
126126

127+
async function updateClientWithUsers() {
128+
const sockets = [...await ns().adapter.allRooms([])]
129+
.filter((room) => room.indexOf('user/') > -1)
130+
.map((user) => +user.split('/')[1]);
131+
132+
const users = (await User.find({
133+
id: {
134+
$in: sockets,
135+
},
136+
})).map((user) => user.toJSON()).filter((user) => !!user.displayName);
137+
138+
ns().emit(Protocol.UPDATE_USERS_IN_LOBBY, {
139+
users,
140+
});
141+
}
142+
127143
socket.use(async (foo, next) => {
128144
if (socket.roomId) {
129145
socket.room = await fetchRoom(socket.roomId);
@@ -136,6 +152,8 @@ module.exports = (io, middlewares) => {
136152
socket.emit(Protocol.UPDATE_ROOMS, rooms);
137153
});
138154

155+
updateClientWithUsers();
156+
139157
function broadcast(...args) {
140158
socket.broadcast.to(socket.room.accessCode).emit(...args);
141159
}
@@ -652,6 +670,8 @@ module.exports = (io, middlewares) => {
652670
if (socket.user && socket.room) {
653671
await leaveRoom();
654672
}
673+
674+
updateClientWithUsers();
655675
} catch (err) {
656676
logger.error(err);
657677
}

0 commit comments

Comments
 (0)