add chat functionality

modules/room/components/board/Canvas.tsx

@@ -1,26 +1,19 @@
 import { CANVAS_SIZE } from "@/common/constants/canvasSize";
-
 import { useViewportSize } from "@/common/hooks/useViewportSize";
-
 import { useMotionValue, motion } from "framer-motion";
-
-import { useRef, useState, useEffect } from "react";
-
+import { useRef, useState, useEffect, RefObject } from "react";
 import { useKeyPressEvent } from "react-use";
-
-import { useDraw } from "@/common/hooks/drawing";
-
+import { useDraw } from "../../hooks/useDraw";
 import { useSocketDraw } from "../../hooks/useSocketDraw";
-
 import { socket } from "@/common/lib/socket";
-
 import Minimap from "./Minimap";
-
 import room, { useRoom } from "@/common/recoil/room";
 import { drawAllMoves } from "../../helpers/Canvas.helpers";
+import { useBoardPosition } from "../../hooks/useBoardPosition";
+import Background from "./Background";
 
 
-const Canvas = () => {
+const Canvas = ({undoRef}: {undoRef: RefObject<HTMLButtonElement>}) => {
     const room= useRoom();
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const smallCanvasRef = useRef<HTMLCanvasElement>(null);
@@ -30,14 +23,14 @@ const Canvas = () => {
     const [, setMovedMiniMap] = useState(false);
 
     const { width, height } = useViewportSize();
+    const {x,y} = useBoardPosition();
 
     useKeyPressEvent("Control", (e) => {
         if (e.ctrlKey && !dragging) {
             setDragging(true);
         }
     });
-    const x = useMotionValue(0);
-    const y = useMotionValue(0);
+
 
     const copyCanvasToSmall = () => {
         if (canvasRef.current && smallCanvasRef.current) {
@@ -56,7 +49,7 @@ const Canvas = () => {
         }
     };
 
-    const { handleDraw, handleEndDrawing, handleStartDrawing, drawing, handleUndo } = useDraw(
+    const { handleEndDrawing,  handleDraw, handleStartDrawing, drawing, handleUndo } = useDraw(
         ctx,
         dragging
     );
@@ -73,10 +66,15 @@ const Canvas = () => {
             }
         }
         window.addEventListener("keyup", handleKeyUp);
+
+        const undoBtn= undoRef.current;
+        undoBtn?.addEventListener("click", handleUndo);
+
         return () => {
             window.removeEventListener("keyup", handleKeyUp);
+            undoBtn?.removeEventListener("click", handleUndo);
         }
-    }, [dragging]);
+    }, [dragging, handleUndo, undoRef]);
 
     useEffect(()=> {
         if(ctx) socket.emit("joined_room");
@@ -92,14 +90,11 @@ const Canvas = () => {
 
     return (
         <div className="relative h-full w-full overflow-hidden">
-            <button className="absolute top-0" onClick={handleUndo}>
-                Undo
-            </button>
             <motion.canvas
                 ref={canvasRef}
                 width={CANVAS_SIZE.width}
                 height={CANVAS_SIZE.height}
-                className={`bg-zinc-100 ${dragging && 'cursor-move'}`}
+                className={`absolute top-0 z-10 ${dragging && 'cursor-move'}`}
                 style={{ x, y }}
                 drag={dragging}
                 dragConstraints={{
@@ -139,6 +134,7 @@ const Canvas = () => {
                     );
                 }}
             />
+            <Background/>
             <Minimap
                 ref={smallCanvasRef}
                 dragging={dragging}

modules/room/components/board/Minimap.tsx

@@ -35,7 +35,7 @@ HTMLCanvasElement,{
     }, [dragging, miniX, miniY, x, y]);
 //the mini version of canvas on top right corner
 return (
-    <div className="absolute right-10 top-10 z-30 rounded-lg bg-zinc-200" ref={containerRef} style={{
+    <div className="absolute right-10 top-10 z-30 overflow-hidden rounded-lg bg-zinc-50" ref={containerRef} style={{
         width: CANVAS_SIZE.width / 7,
         height: CANVAS_SIZE.height / 7,    
     }}>

modules/room/components/board/MousePosition.tsx

@@ -18,7 +18,7 @@ export const MousePosition = () => {
             socket.emit("mouse_move", getPos(docX,x), getPos(docY, y));
             prevPosition.current = { x: docX, y: docY };
         }
-    }, 25);
+    }, 150);
 
     return (
         <motion.div

modules/room/components/board/UserMouse.tsx

@@ -8,21 +8,34 @@ import { useRoom } from "@/common/recoil/room";
 //cursor issue
 const UserMouse = ({ userId  }: { userId: string  }) => {
     const {users} = useRoom();  
+    const [msg, setMsg] = useState("");
     const boardPos = useBoardPosition();
     const [x, setX] = useState(boardPos.x.get());
     const [y, setY] = useState(boardPos.y.get());
     const [pos, setPos] = useState({ x: -1, y: -1 });
 
     useEffect(() => {
-        const handleMouseMove = (newX: number, newY: number, socketIdMoved: string) => {
-            if (socketIdMoved === userId) {
+        socket.on("mouse_moved", (newX, newY, socketIdMoved)=> {
+            if(socketIdMoved === userId){
                 setPos({ x: newX, y: newY });
+            };
+        });
+
+        const handleNewMsg = (msgUserId: string, newMsg: string)=> {
+            if(msgUserId === userId){
+                setMsg(newMsg);
+                setTimeout(()=> {
+                    setMsg("");
+                }, 3000);
             }
         };
 
-        socket.on("mouse_moved", handleMouseMove);
+        socket.on("new_msg", handleNewMsg);
+
+      //  socket.on("mouse_moved", handleMouseMove);
         return () => {
-            socket.off("mouse_moved", handleMouseMove);
+            socket.off("mouse_moved");
+            socket.off("new_msg", handleNewMsg);
         };
     }, [userId]);
 
@@ -41,9 +54,12 @@ const UserMouse = ({ userId  }: { userId: string  }) => {
             className={`absolute top-0 left-0 text-blue-800 ${pos.x === -1 ? 'hidden' : ''} pointer-events-none`}
             style={{color: users.get(userId)?.color}}
             animate={{ x: pos.x + x, y: pos.y + y }}
-            transition={{ duration: 0.1, ease: "linear" }}
+            transition={{ duration: 0.2, ease: "linear" }}
         >
             <BsCursorFill className="-rotate-90" />
+            {msg && (
+                <p className="absolute top-full left-5 max-w-[15rem] overflow-hidden text-ellipsis rounded-md bg-zinc-900 p-1 px-3 text-white">{msg}</p>
+            )}
             <p className="ml-2">{users.get(userId)?.name || "Anonymous"}</p>
         </motion.div>
     );