feat: style participants list

server/src/handleClientMessage.ts

@@ -6,6 +6,7 @@ import type {
   ServerMessageEditedMessage,
   ServerRegistrationConfirmed,
   ServerUserJoinedMessage,
+  ServerUserListMessage,
   User,
 } from "../../shared";
 import type { Room, WebSocketData } from "./types";
@@ -45,6 +46,19 @@ export default function handleClientMessage(
         socket.send(JSON.stringify(joinMessage));
       }
 
+      // send updated participants list
+      const userArray = Array.from(room.userConnections.values());
+      const userListMessage: ServerUserListMessage = {
+        type: "USER_LIST",
+        payload: {
+          users: userArray,
+        },
+      };
+
+      for (const [socket] of room.userConnections) {
+        socket.send(JSON.stringify(userListMessage));
+      }
+
       break;
 
     case "CHAT_MESSAGE":

server/src/index.ts

@@ -1,4 +1,8 @@
-import type { ClientMessage, ServerUserLeftMessage } from "../../shared.ts";
+import type {
+  ClientMessage,
+  ServerUserLeftMessage,
+  ServerUserListMessage,
+} from "../../shared.ts";
 import handleClientMessage from "./handleClientMessage.ts";
 import type { Room, WebSocketData } from "./types.ts";
 
@@ -78,6 +82,21 @@ const server = Bun.serve<WebSocketData>({
         }
       }
 
+      room.userConnections.delete(ws);
+
+      // send updated user list
+      const userArray = Array.from(room.userConnections.values());
+      const userListMessage: ServerUserListMessage = {
+        type: "USER_LIST",
+        payload: {
+          users: userArray,
+        },
+      };
+
+      for (const [socket] of room.userConnections) {
+        socket.send(JSON.stringify(userListMessage));
+      }
+
       if (room.userConnections.size === 0) {
         rooms.delete(roomId);
         console.log("Cleaned up room", roomId);