minor updates

modules/room/components/Canvas.tsx

@@ -3,7 +3,7 @@ import { useViewportSize } from "@/common/hooks/useViewportSize";
 import { useMotionValue, motion } from "framer-motion";
 import { useRef, useState, useEffect } from "react";
 import { useKeyPressEvent } from "react-use";
-import { useDraw } from "../hooks/Canvas.hooks";
+import { useDraw, useSocketDraw } from "../hooks/Canvas.hooks";
 import { socket } from "@/common/lib/socket";
 import { drawFromSocket } from "../helpers/Canvas.helpers";
 import Minimap from "./Minimap";
@@ -43,11 +43,9 @@ const Canvas = () => {
         }
     };
 
-    const { handleDraw, handleEndDrawing, handleStartDrawing, drawing } = useDraw(
+    const { handleDraw, handleEndDrawing, handleStartDrawing, drawing, handleUndo } = useDraw(
         ctx,
         dragging,
-        -x.get(),
-        -y.get(),
         copyCanvasToSmall
     );
 
@@ -66,31 +64,12 @@ const Canvas = () => {
         }
     }, [dragging]);
 
-    useEffect(() => {
-        let movesToDrawLater: [number, number][] = [];
-        let optionsToUseLater: CtxOptions = {
-            lineColor: "",
-            lineWidth: 0,
-        };
-        socket.on("socket_draw", (movesToDraw, socketOptions) => {
-            if (ctx && !drawing) {
-                drawFromSocket(movesToDraw, socketOptions, ctx, copyCanvasToSmall);
-            } else {
-                movesToDrawLater = movesToDraw;
-                optionsToUseLater = socketOptions;
-            }
-        });
-
-        return () => {
-            socket.off("socket_draw");
-            if (movesToDrawLater.length && ctx) {
-                drawFromSocket(movesToDrawLater, optionsToUseLater, ctx, copyCanvasToSmall);
-            }
-        };
-    }, [drawing, ctx]);
-
+    useSocketDraw(ctx, copyCanvasToSmall);
     return (
-        <div className=" relative h-full w-full overflow-hidden">
+        <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}

modules/room/components/Minimap.tsx

@@ -60,7 +60,7 @@ return (
             y: miniY,
         }}
         animate={{x: x.get() / -10, y: y.get() / -10}}
-        transition={{duration: 0.1}}
+        transition={{duration: 0}}
         ></motion.div>
     </div>
 )

modules/room/components/MousePosition.tsx

@@ -4,6 +4,7 @@ import { useInterval, useMouse } from "react-use";
 import { socket } from "@/common/lib/socket";
 import { motion } from "framer-motion";
 import { BsCursorFill } from "react-icons/bs";
+import { getPos } from "@/common/lib/getPos";
 
 // To track and emit mouse position changes via socket
 export const MousePosition = () => {
@@ -15,20 +16,20 @@ export const MousePosition = () => {
 
     useInterval(() => {
         if (prevPosition.current.x !== docX || prevPosition.current.y !== docY) {
-            socket.emit("mouse_move", docX - x.get(), docY - y.get());
+            socket.emit("mouse_move", getPos(docX,x), getPos(docY, y));
             prevPosition.current = { x: docX, y: docY };
         }
     }, 300);
 
     return (
         <motion.div
             ref={ref}
-            className="absolute top-2 left-0 z-50 select-none"
+            className="pointer-events-none 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()}
+            {getPos(docX, x).toFixed(0)} | {getPos(docY, y).toFixed(0)}
         </motion.div>
     );
 };