extended cosmetics of lobby

Author: coder13

client/src/components/Lobby/UserList.js

@@ -7,6 +7,8 @@ import Toolbar from '@material-ui/core/Toolbar';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import Avatar from '@material-ui/core/Avatar';
 
 const useStyles = makeStyles(() => ({
   root: {
@@ -33,7 +35,10 @@ function LobbyUserList({ users }) {
       >
         {users.map((user) => (
           <ListItem button key={user.id}>
-            <ListItemText primary={user.displayName} />
+            <ListItemAvatar>
+              <Avatar alt={user.displayName} src={user.avatar && user.avatar.thumb_url} />
+            </ListItemAvatar>
+            <ListItemText primary={user.displayName} secondary={user.inARoom && 'Occupied'} />
           </ListItem>
         ))}
       </List>
@@ -45,6 +50,7 @@ LobbyUserList.propTypes = {
   users: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.number,
     displayName: PropTypes.string,
+    inARoom: PropTypes.boolean,
   })),
 };
 

client/src/components/Lobby/index.js

@@ -94,6 +94,13 @@ function Lobby({
   const privateRooms = rooms.filter((room) => !!room.private && room.type === 'normal');
   const showAlert = !!user.id && !user.canJoinRoom;
 
+  const waitingUsers = users.map((u) => ({
+    id: u.id,
+    displayName: u.displayName,
+    inARoom: !!rooms.find((room) => room.users && room.users.find((i) => i.id === u.id)),
+    avatar: u.avatar,
+  }));
+
   const onCreateRoom = (options) => {
     dispatch(createRoom(options));
   };
@@ -176,7 +183,7 @@ function Lobby({
           </div>
         </Grid>
         <Grid item xs={3} className={classes.userList}>
-          <UserList users={users} />
+          <UserList users={waitingUsers} />
         </Grid>
       </Grid>
       <RoomConfigureDialog

client/src/components/RoomListItem.js

@@ -43,7 +43,7 @@ function RoomListItem({
   const [menuOpen, setMenuOpen] = React.useState(false);
   const anchorRef = React.useRef(null);
   const userText = room.usersLength === 0 ? ' empty'
-    : ` ${room.usersLength} user${room.usersLength > 1 ? 's' : ''}${room.users ? `: ${room.users.join(', ')}` : ''}`;
+    : ` ${room.usersLength} user${room.usersLength > 1 ? 's' : ''}${room.users ? `: ${room.users.map((u) => u.displayName).join(', ')}` : ''}`;
   const [disabled, reason] = canUserJoinRoom(user, room);
   const [duration, setDuration] = React.useState(null);
   const [unixDuration, setUnixDuration] = React.useState(null);

server/socket/namespaces/rooms.js

@@ -14,7 +14,12 @@ const privateRoomKeys = [...publicRoomKeys, 'users', 'competing', 'waitingFor',
 // Data for people not in room
 const roomMask = (room) => ({
   ..._.partial(_.pick, _, publicRoomKeys)(room),
-  users: room.private ? undefined : room.usersInRoom.map((user) => user.displayName),
+  users: room.private
+    ? undefined
+    : room.usersInRoom.map((user) => ({
+      id: user.id,
+      displayName: user.displayName,
+    })),
   registeredUsers: room.users.filter((user) => room.registered.get(user.id.toString())).length,
 });
 
@@ -121,24 +126,24 @@ module.exports = (io, middlewares) => {
       });
     });
 
-  ns().on('connection', (socket) => {
-    logger.debug(`socket ${socket.id} connected to rooms; logged in as ${socket.user ? socket.user.name : 'Anonymous'}`);
+  async function updateClientsWithUsers() {
+    const sockets = [...await ns().adapter.allRooms([])]
+      .filter((room) => room.indexOf('user/') > -1)
+      .map((user) => +user.split('/')[1]);
 
-    async function updateClientWithUsers() {
-      const sockets = [...await ns().adapter.allRooms([])]
-        .filter((room) => room.indexOf('user/') > -1)
-        .map((user) => +user.split('/')[1]);
+    const users = (await User.find({
+      id: {
+        $in: sockets,
+      },
+    })).map((user) => user.toJSON()).filter((user) => !!user.displayName);
 
-      const users = (await User.find({
-        id: {
-          $in: sockets,
-        },
-      })).map((user) => user.toJSON()).filter((user) => !!user.displayName);
+    ns().emit(Protocol.UPDATE_USERS_IN_LOBBY, {
+      users,
+    });
+  }
 
-      ns().emit(Protocol.UPDATE_USERS_IN_LOBBY, {
-        users,
-      });
-    }
+  ns().on('connection', async (socket) => {
+    logger.debug(`socket ${socket.id} connected to rooms; logged in as ${socket.user ? socket.user.name : 'Anonymous'}`);
 
     socket.use(async (foo, next) => {
       if (socket.roomId) {
@@ -152,7 +157,7 @@ module.exports = (io, middlewares) => {
         socket.emit(Protocol.UPDATE_ROOMS, rooms);
       });
 
-    updateClientWithUsers();
+    updateClientsWithUsers();
 
     function broadcast(...args) {
       socket.broadcast.to(socket.room.accessCode).emit(...args);
@@ -671,7 +676,7 @@ module.exports = (io, middlewares) => {
           await leaveRoom();
         }
 
-        updateClientWithUsers();
+        updateClientsWithUsers();
       } catch (err) {
         logger.error(err);
       }