final chat,undo and eraser functionality added

modules/room/components/Room.tsx

@@ -8,6 +8,7 @@ import { ToolBar } from "./toolbar/ToolBar";
 import NameInput from "./NameInput";
 import UsersList from "./UsersList";
 import { useRef } from "react";
+import Chat from "./chat/Chat";
 
 
 
@@ -25,6 +26,7 @@ const Room = () => {
             <Canvas undoRef={undoRef}/>
             <MousePosition />
             <MouseRenderer />
+            <Chat />
             </div>
         </RoomContextProvider>
      );

modules/room/components/toolbar/ToolBar.tsx

@@ -1,22 +1,25 @@
+import { RefObject } from "react";
 import ColorPicker from "./ColorPicker";
 import Eraser from "./Eraser";
 import LineWidthPicker from "./LineWidthPicker";
 import { BsFillChatFill, BsFillImageFill, BsThreeDots } from "react-icons/bs";
 import { HiOutlineDownload } from "react-icons/hi";
+import { FaUndo } from "react-icons/fa";
 
-export const ToolBar = () => { 
+export const ToolBar = ({undoRef}: {undoRef: RefObject<HTMLButtonElement>}) => { 
     return (
-        <div className="absolute left-10 top-[50%] z-50 flex flex-col items-center rounded-lg gap-5 p-5 bg-black text-white"
+        <div className="absolute left-10 top-[50%] z-50 flex flex-col items-center rounded-lg gap-5 p-5 bg-zinc-900 text-white"
         style={{
             transform: "translateY(-50%)"
         }}
         >
+         <button className="text-xl" ref={undoRef}>
+            <FaUndo />
+         </button>
+         <div className="h-px w-full bg-white" />
             <ColorPicker />
             <LineWidthPicker />
             <Eraser />
-         <button className="text-xl">
-            <BsFillChatFill />
-         </button>
          <button className="text-xl">
             <BsFillImageFill />
          </button>

modules/room/helpers/Canvas.helpers.ts

@@ -1,66 +1,46 @@
-import { CANVAS_SIZE } from "@/common/constants/canvasSize";
 
 export const handleMove = (
     move: Move,
     ctx: CanvasRenderingContext2D,
   )=>{
     const {options, path} = move;
-    const tempCtx = ctx;
+
+      ctx.lineWidth= options.lineWidth;
+      ctx.strokeStyle= options.lineColor;
 
-    if(tempCtx){
-      tempCtx.lineWidth= options.lineWidth;
-      tempCtx.strokeStyle= options.lineColor;
+      if(move.eraser) ctx.globalCompositeOperation = "destination-out";
 
-      tempCtx.beginPath();
+      ctx.beginPath();
       path.forEach(([x,y])=>{
-        tempCtx.lineTo(x,y);
+        ctx.lineTo(x,y);
       });
-      tempCtx.stroke();
-      tempCtx.closePath();
-    }
-  };
-
-  //checks on the canvas
-  export const drawBackground = (ctx: CanvasRenderingContext2D) => {
-    ctx.lineWidth = 1;
-    ctx.strokeStyle = "#ccc";
-
-    for(let i=0;i<CANVAS_SIZE.height;i+=25){
-      ctx.beginPath();
-      ctx.moveTo(0,i);
-      ctx.lineTo(CANVAS_SIZE.width,i);
-      ctx.stroke(); 
-    }
-    for(let i=0;i<CANVAS_SIZE.width;i+=25){
-      ctx.beginPath();
-      ctx.moveTo(i,0);
-      ctx.lineTo(i, CANVAS_SIZE.height);
-      ctx.stroke(); 
-    }
+      ctx.stroke();
+      ctx.closePath();
 
+      ctx.globalCompositeOperation= "source-over";
+
   };
 
+
+
   export const drawAllMoves = (
     ctx: CanvasRenderingContext2D,
     room: ClientRoom
   ) => {
     const {usersMoves, movesWithoutUser, myMoves} = room;
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 
-    drawBackground(ctx);
+    const moves= [...movesWithoutUser, ...myMoves];
 
-    movesWithoutUser.forEach((move)=>{
-      handleMove(move,ctx);
-    });
 
     usersMoves.forEach((userMoves)=>{
-      userMoves.forEach((move)=> handleMove(move,ctx));
-    });
-
-    myMoves.forEach((move)=> {
-      handleMove(move,ctx);
+      moves.push(...userMoves);
     });
 
+    moves.sort((a,b)=> a.timestamp - b.timestamp);
 
+    moves.forEach((move)=> {
+      handleMove(move, ctx);
+    })
   };
 

modules/room/hooks/useDraw.ts

@@ -1,5 +1,4 @@
 import { useOptionsValue } from "@/common/recoil/options";
-import { useUsers } from "@/common/recoil/users";
 import { useState, useEffect, useCallback} from "react";
 import { useBoardPosition } from "./useBoardPosition";
 import { socket } from "@/common/lib/socket";
@@ -31,9 +30,20 @@ export const useDraw = (
             ctx.lineCap = "round";
             ctx.lineWidth = options.lineWidth;
             ctx.strokeStyle = options.lineColor;
+            if(options.erase) ctx.globalCompositeOperation = "destination-out";
         }
     });
 
+    useEffect(()=> {
+        socket.on("your_move", (move)=>{
+            handleAddMyMove(move);
+        });
+
+        return ()=> {
+            socket.off("your_move");
+        };
+    });
+
     const handleUndo = useCallback(() => {
         if (ctx) {
             handleRemoveMyMove();
@@ -82,11 +92,13 @@ export const useDraw = (
 
         const move: Move = {
             path: tempMoves,
-            options
+            options,
+            timestamp: 0,
+            eraser: options.erase,
         };
 
-        handleAddMyMove(move);
         tempMoves = [];
+        ctx.globalCompositeOperation= "source-over"
 
         socket.emit("draw", move);
 

server/index.ts

@@ -120,9 +120,11 @@ nextApp.prepare().then(async () => {
 
         socket.on("draw", (move) => {
             const roomId = getRoomId();
-            addMove(roomId, socket.id, move);
 
-            socket.broadcast.to(roomId).emit("user_draw", move, socket.id);
+            const timestamp= Date.now();
+            addMove(roomId, socket.id, {...move, timestamp});
+            io.to(socket.id).emit("your_move", {...move, timestamp});
+            socket.broadcast.to(roomId).emit("user_draw", {...move,timestamp}, socket.id);
         });
 
         socket.on("undo", () => {
@@ -132,6 +134,10 @@ nextApp.prepare().then(async () => {
             socket.broadcast.to(roomId).emit("user_undo", socket.id);
         });
 
+        socket.on("send_msg", (msg)=> {
+            io.to(getRoomId()).emit("new_msg", socket.id, msg);
+        });
+
         socket.on("mouse_move", (x, y) => {