From d89e2d03b150c87282f1db41258681410b5bc30a Mon Sep 17 00:00:00 2001
From: Deveshi Dwivedi <deveshigurgaon@gmail.com>
Date: Thu, 20 Jun 2024 12:52:46 +0530
Subject: [PATCH] implement MousePosition component to track, emit mouse
 movements

---
 modules/room/components/MousePosition.tsx | 33 +++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 modules/room/components/MousePosition.tsx

diff --git a/modules/room/components/MousePosition.tsx b/modules/room/components/MousePosition.tsx
new file mode 100644
index 0000000..4a0c934
--- /dev/null
+++ b/modules/room/components/MousePosition.tsx
@@ -0,0 +1,33 @@
+import { useRef } from "react";
+import { useBoardPosition } from "../hooks/useBoardPosition";
+import { useInterval, useMouse } from "react-use";
+import {socket} from "@/common/lib/socket";
+import {motion} from "framer-motion";
+
+export const MousePosition = () => {
+    //setting initial values as 0
+    const prevPosition = useRef<{x:number, y:number}>({x:0, y:0});
+    const {x,y} = useBoardPosition();
+    const ref= useRef<HTMLDivElement>(null);
+
+    const {docX, docY} = useMouse(ref);
+
+    useInterval(()=>{
+        if(prevPosition.current.x !== docX || prevPosition.current.y !== docY){
+            socket.emit("mouse_move", docX- x.get(), docY- y.getY());
+            prevPosition.current = {x:docX, y:docY};
+        }
+    }, 300);
+
+    return (
+        <motion.div
+        ref={ref}
+        className="absolute top-2 left-0 z-50 select-none"
+        animate={{x:docX+15, y:docY+15}}
+        transition={{duration:0.05, ease:"linear"}}
+        >
+        {docX - x.get()} | {docY - y.get()}
+        </motion.div>
+    )
+
+}
\ No newline at end of file