implement room management and move handling

common/types/global.d.ts

@@ -9,7 +9,10 @@ export declare global {
         options: CtxOptions;
     }
 
+    type Room =Map<string, Move[]>;
+
     interface ServerToClientEvents {
+        joined:(room :string) => void;
        user_draw: (move: Move, userId: string) => void;
         user_undo(userId: string): void;
         mouse_moved: (x:number, y:number, socketId: string) => void;

modules/room/components/Room.tsx

@@ -2,11 +2,13 @@ import RoomContextProvider from "../context/Room.context";
 import Canvas from "./Canvas";
 import { MousePosition } from "./MousePosition";
 import MouseRenderer from "./MouseRenderer";
+import { ToolBar } from "./ToolBar";
 
 const Room = () => {
      return (
         <RoomContextProvider>
             <div className="relative h-full w-full overflow-hidden">
+            <ToolBar />
             <Canvas />
             <MousePosition />
             <MouseRenderer />

modules/room/components/ToolBar.tsx

@@ -0,0 +1,25 @@
+import { useSetOptions } from "@/common/recoil/options/options.hooks";
+
+export const ToolBar = () => {
+    const setOptions= useSetOptions ();
+    return (
+        <div className="absolute left-0 top-0 z-50 flex gap-5 bg-black text-white">
+        <button onClick={()=> setOptions((prev)=> ({...prev, lineColor: "red"}))}
+        >
+        red
+        </button>
+        <button onClick={()=> setOptions((prev)=> ({...prev, lineColor: "green"}))}
+        >
+        green
+        </button>
+        <button onClick={()=> setOptions((prev)=> ({...prev, lineColor: "blue"}))}
+        >
+        blue
+        </button>
+        <button onClick={()=> setOptions((prev)=> ({...prev, lineColor: "black"}))}
+        >
+        black
+        </button>
+        </div>
+    );
+};

modules/room/components/UserMouse.tsx

@@ -4,6 +4,8 @@ import { socket } from "@/common/lib/socket";
 import { motion } from "framer-motion";
 import { BsCursorFill } from "react-icons/bs";
 
+
+//cursor issue
 const UserMouse = ({ userId }: { userId: string }) => {
     const boardPos = useBoardPosition();
     const [x, setX] = useState(boardPos.x.get());

modules/room/hooks/Canvas.hooks.ts

@@ -107,6 +107,22 @@ export const useSocketDraw = (
 ) => {
     const setUsers = useSetRecoilState(usersAtom);
 
+    useEffect(()=> {
+        socket.on("joined", (roomJSON)=> {
+            const room: Room= new Map(JSON.parse(roomJSON));
+
+            room.forEach((userMoves, userId)=> {
+                if(ctx) userMoves.forEach((move)=> handleMove(move, ctx));
+                handleEnd();
+                setUsers((prevUsers)=> ({...prevUsers, [userId]: userMoves}));
+            });
+        });
+
+        return () => {
+            socket.off("joined");
+        }
+    },[ctx, handleEnd, setUsers]);
+
     useEffect(() => {
         let movesToDrawLater: Move | undefined;
         let userIdLater= "";

server/index.ts

@@ -19,25 +19,52 @@ app.get("/hello", async(_, res)=>{
     res.send("Hello ji!");
 });
 
+
+    const rooms= new Map<string, Room>();
+    rooms.set("global", new Map());
+
+    const addMove = (roomId: string, socketId: string, move: Move) => {
+        const room= rooms.get(roomId);
+
+        if(!room?.has(socketId)){
+            room?.set(socketId, [move]);
+        }
+        room?.get(socketId)?.push(move);
+
+    };
+
+    const undoMove= (roomId: string, socketId: string) => {
+        const room = rooms.get(roomId);
+        room?.get(socketId)?.pop();
+    };
+
 io.on("connection", (socket)=>{
     console.log("connection");
 
+    socket.join("global");
+    rooms.get("global")?.set(socket.id, []);
+
+    io.to(socket.id).emit("joined", JSON.stringify([...rooms.get("global")!]));
+
+
     const allUsers= io.sockets.adapter.rooms.get("global");
         if (allUsers) io.to("global").emit("users_in_room", [...allUsers]);
 
     socket.on("draw", (move)=>{
         console.log("drawing");
+        addMove("global", socket.id, move);
         socket.broadcast.emit("user_draw", move, socket.id);
     });
 
-    socket.on("mouse_move", (x,y) => {
-        console.log("mouse move");
-        socket.broadcast.emit("mouse_moved", x, y, socket.id);
+    //socket.on("mouse_move", (x,y) => {
+      //  console.log("mouse move");
+       // socket.broadcast.emit("mouse_moved", x, y, socket.id);
 
-    });
+    //});
 
     socket.on("undo", ()=>{
         console.log("undo");
+        undoMove("global", socket.id);
         socket.broadcast.emit("user_undo", socket.id);
     });