add socket event, minor tweaks

modules/home/components/Home.tsx

@@ -54,24 +54,24 @@ const Home = () => {
 
     return (
         <div className="flex flex-col items-center min-h-screen bg-gradient-to-r from-indigo-200 via-purple-200 to-pink-200 text-navy-800">
-            <h1 className="mt-24 text-6xl font-extrabold leading-tight drop-shadow-lg">
+            <h1 className="mt-9 text-6xl font-extrabold leading-tight drop-shadow-lg">
                 SketchParty
             </h1>
             <h3 className="text-2xl mt-4">Sketching and Fun for Everyone!</h3>
 
-        <div className='mt-10 flex flex-col gap-2'>
-            <label className='self-start font-bold leading-tight'>Enter Your Name</label>
-            <input
-            className='rounded-xl border p-5 py-1'
-            id='room-id'
-            placeholder='Username'
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-            >
-            </input>
-        </div>
-        //recent changes
-            <form className="  flex flex-col items-center gap-3" onSubmit={handleJoinRoom}>
+            <div className='mt-8 flex flex-col gap-3 items-center'>
+    <label className='text-center leading-tight text-lg font-bold'>Enter Your Name</label>
+    <input
+        className='rounded-full border-none p-4 py-2 text-navy-800 text-center shadow-md focus:outline-none focus:ring-2 focus:ring-teal-400'
+        id='room-id'
+        placeholder='Username'
+        value={username}
+        onChange={(e) => setUsername(e.target.value)}
+    />
+</div>
+
+
+            <form className=" mt-3 flex flex-col items-center gap-3" onSubmit={handleJoinRoom}>
                 <label htmlFor="room-id" className="w-full text-center self-start text-lg font-bold leading-tight">
                     Enter Room ID
                 </label>
@@ -90,14 +90,14 @@ const Home = () => {
                 </button>
             </form>
 
-        <div className='my-8 flex w-96 items-center gap-2'>
+        <div className='my-5 flex w-96 items-center gap-2'>
         <div className='h-px w-full bg-zinc-200'  />
-        <p className='text-zinc-400'>Or</p>
+        <p className='text-zinc-400'>OR</p>
         <div className='h-px w-full bg-zinc-200'  />
         </div>
 
 
-            <div className="mt-8 flex flex-col items-center gap-4">
+            <div className="mt-1 mb-4 flex flex-col items-center gap-2">
                 <h5 className="self-start text-lg font-bold leading-tight">
                     Create a New Room
                 </h5>

modules/room/components/NameInput.tsx

@@ -46,7 +46,7 @@ const NameInput = () => {
         <form className="flex flex-col items-center" onSubmit={handleJoinRoom}>
             <h1 className="mt-24 text-extra font-extrabold leading-tight">SketchParty</h1>
             <h3 className="text-2xl">Sketching and Fun for everyone</h3>
-        <div className="mt-10 mb-3 flex flex-col gap-2">
+        <div className="mt-8 mb-6 flex flex-col gap-2">
             <label className="self-start font-bold leading-tight">Enter Your Name</label>
             <input className="rounded-xl border p-5 py-1" id="room-id" placeholder="Username" value={name} onChange={(e)=> setName(e.target.value)}></input>
         </div>

server/index.ts

@@ -25,22 +25,22 @@ nextApp.prepare().then(async () => {
         const room = rooms.get(roomId);
 
         if (!room?.users.has(socketId)) {
-            room?.users.set(socketId, [move]);
+            room?.usersMoves.set(socketId, [move]);
         }
-        room?.users.get(socketId)?.push(move);
+        room?.usersMoves.get(socketId)?.push(move);
     };
 
     const undoMove = (roomId: string, socketId: string) => {
         const room = rooms.get(roomId);
-        room?.users.get(socketId)?.pop();
+        room?.usersMoves.get(socketId)?.pop();
     };
 
     const leaveRoom = (roomId: string, socketId: string) => {
         const room= rooms.get(roomId);
 
         if(!room) return;
 
-        const userMoves= room?.users.get(socketId)!;
+        const userMoves= room?.usersMoves.get(socketId)!;
         room?.drawed.push(...userMoves);
         room?.users.delete(socketId);
 
@@ -56,42 +56,58 @@ nextApp.prepare().then(async () => {
         }
         console.log("connection");
 
-        socket.on("create_room", () => {
+        socket.on("create_room", (username) => {
             let roomId: string;
             do{
                 roomId = Math.random().toString(36).substring(2,6);
             } while (rooms.has(roomId));
 
             socket.join(roomId);
-            rooms.set(roomId, {users: new Map(), drawed: []});
-            rooms.get(roomId)?.users.set(socket.id, []);
-
+            rooms.set(roomId, {
+                users: new Map([[socket.id, username]]), 
+                drawed: [], 
+                usersMoves: new Map([[socket.id, []]]),
+            });
+
             io.to(socket.id).emit("created", roomId);
 
         });
 
-        socket.on("join_room", (roomId: string) => {
-            if(rooms.has(roomId)){
+        socket.on("join_room", (roomId, username) => {
+            const room=rooms.get(roomId);
+            if(room){
                 socket.join(roomId);
 
+                room.users.set(socket.id, username);
+                room.usersMoves.set(socket.id, []);
+
                 io.to(socket.id).emit("joined", roomId);
             } else io.to(socket.id).emit("joined", "", true);
         });
 
+        socket.on("check_room", (roomId)=> {
+            if(rooms.has(roomId)) socket.emit("room_exists", true);
+            else socket.emit("room_exists", false);
+        })
+
         socket.on("joined_room",() => {
           console.log("joined room");  
 
           const roomId = getRoomId();
             //add the socket to the room's map
 
             const room= rooms.get(roomId);
-            if(room) {
-                room.users.set(socket.id, []); 
 
-            io.to(socket.id).emit("room", room, JSON.stringify([...room.users]));
-
-            socket.broadcast.to(roomId).emit("new_user", socket.id);
-            };
+            if(!room) return;
+
+            io.to(socket.id).emit(
+            "room",
+            room,
+            JSON.stringify([...room.usersMoves]),
+            JSON.stringify([...room.users])
+            );
+
+            socket.broadcast.to(roomId).emit("new_user", socket.id, room.users.get(socket.id) || "Anonymous");
 
         });