diff --git a/modules/room/components/SocketMouse.tsx b/modules/room/components/SocketMouse.tsx
index b2d018d..d85c930 100644
--- a/modules/room/components/SocketMouse.tsx
+++ b/modules/room/components/SocketMouse.tsx
@@ -1,50 +1,42 @@
import { useEffect, useState } from "react";
import { useBoardPosition } from "../hooks/useBoardPosition";
-import {socket} from "@/common/lib/socket";
-import {motion } from "framer-motion";
-import {BsCursorFill} from "react-icons/bs";
-
-
-const SocketMouse = ({ userId}: { userId: string }) => {
-
- //board postn
-const boardPos= useBoardPosition();
-const [x, setX]= useState(boardPos.x.get());
-const [y, setY]= useState(boardPos.y.get());
+import { socket } from "@/common/lib/socket";
+import { motion } from "framer-motion";
+import { BsCursorFill } from "react-icons/bs";
+
+const SocketMouse = ({ userId }: { userId: string }) => {
+ 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 });
-//updated socket mouse, error prone
-
-useEffect(()=>{
- socket.on("mouse_moved", (newX, newY, socketIdMoved) => {
- if(socketIdMoved === userId){
- setPos({x: newX, y: newY});
- }
- });
-}, [userId]);
-
-//update x position when board position x changes
-useEffect(()=>{
- const unsubscribe= boardPos.x.onChange(setX);
- return unsubscribe;
-
-}, [boardPos.x]);
-
-//update y position when board position y changes
-useEffect(()=>{
- const unsubscribe= boardPos.y.onChange(setY);
- return unsubscribe;
-
-}, [boardPos.y]);
-
-
-return (
-
-
-
- )
- };
- export default SocketMouse;
\ No newline at end of file
+ useEffect(() => {
+ socket.on("mouse_moved", (newX, newY, socketIdMoved) => {
+ if (socketIdMoved === userId) {
+ setPos({ x: newX, y: newY });
+ }
+ });
+ }, [userId]);
+
+ useEffect(() => {
+ const unsubscribe = boardPos.x.onChange(setX);
+ return unsubscribe;
+ }, [boardPos.x]);
+
+ useEffect(() => {
+ const unsubscribe = boardPos.y.onChange(setY);
+ return unsubscribe;
+ }, [boardPos.y]);
+
+ return (
+
+
+
+ );
+};
+
+export default SocketMouse;
diff --git a/modules/room/hooks/Canvas.hooks.ts b/modules/room/hooks/Canvas.hooks.ts
index 4521013..8b92495 100644
--- a/modules/room/hooks/Canvas.hooks.ts
+++ b/modules/room/hooks/Canvas.hooks.ts
@@ -2,91 +2,88 @@ import { useCallback, useEffect, useState } from "react";
import { socket } from "@/common/lib/socket";
import { useOptions } from "@/common/recoil/options";
import { drawOnUndo } from "../helpers/Canvas.helpers";
-import usersAtom, { useUsers } from "@/common/recoil/users";
+import usersAtom, { useUsers } from "@/common/recoil/users";
import { useBoardPosition } from "./useBoardPosition";
import { getPos } from "@/common/lib/getPos";
import { useSetRecoilState } from "recoil";
-
-const savedMoves: [number, number][][]= [];
-let moves: [number, number][]= [];
+const savedMoves: [number, number][][] = [];
+let moves: [number, number][] = [];
export const useDraw = (
ctx: CanvasRenderingContext2D | undefined,
blocked: boolean,
handleEnd: () => void
) => {
- const users= useUsers();
+ const users = useUsers();
const options = useOptions();
const [drawing, setDrawing] = useState(false);
- const boardPosition= useBoardPosition();
+ const boardPosition = useBoardPosition();
const movedX = boardPosition.x;
const movedY = boardPosition.y;
- useEffect(()=>{
- if(ctx){
- ctx.lineJoin= "round";
- ctx.lineCap= "round";
- ctx.lineWidth= options.lineWidth;
- ctx.strokeStyle= options.lineColor;
- }
+ useEffect(() => {
+ if (ctx) {
+ ctx.lineJoin = "round";
+ ctx.lineCap = "round";
+ ctx.lineWidth = options.lineWidth;
+ ctx.strokeStyle = options.lineColor;
+ }
});
- const handleUndo = useCallback(()=> {
- if(ctx){
+ const handleUndo = useCallback(() => {
+ if (ctx) {
savedMoves.pop();
socket.emit("undo");
-
+
drawOnUndo(ctx, savedMoves, users);
handleEnd();
}
}, [ctx, handleEnd, users]);
- useEffect (()=>{
+ useEffect(() => {
const handleUndoKeyboard = (e: KeyboardEvent) => {
- if(e.key === 'z' && e.ctrlKey){
+ if (e.key === 'z' && e.ctrlKey) {
handleUndo();
}
- }
+ };
document.addEventListener('keydown', handleUndoKeyboard);
return () => {
document.removeEventListener('keydown', handleUndoKeyboard);
-
};
}, [handleUndo]);
- const handleStartDrawing = (x: number, y: number) =>{
- if(!ctx || blocked) return ;
+ const handleStartDrawing = (x: number, y: number) => {
+ if (!ctx || blocked) return;
- setDrawing(true);
+ setDrawing(true);
- ctx.beginPath();
- ctx.lineTo(getPos(x, movedX), getPos(x, movedY));
- ctx.stroke();
+ ctx.beginPath();
+ ctx.lineTo(getPos(x, movedX), getPos(y, movedY));
+ ctx.stroke();
};
- const handleEndDrawing = () =>{
- if(!ctx || blocked) return ;
- setDrawing(false);
- ctx.closePath();
+
+ const handleEndDrawing = () => {
+ if (!ctx || blocked) return;
+ setDrawing(false);
+ ctx.closePath();
savedMoves.push(moves);
-
socket.emit("draw", moves, options);
- moves=[];
+ moves = [];
handleEnd();
};
- const handleDraw= (x:number, y:number) =>{
- if(!ctx || !drawing || blocked){
- return;
- }
-
- ctx.lineTo(getPos(x,movedX), getPos(y, movedY));
+
+ const handleDraw = (x: number, y: number) => {
+ if (!ctx || !drawing || blocked) return;
+
+ ctx.lineTo(getPos(x, movedX), getPos(y, movedY));
ctx.stroke();
- moves.push([getPos(x,movedX), getPos(y, movedY)]);
+ moves.push([getPos(x, movedX), getPos(y, movedY)]);
};
return {
@@ -96,56 +93,57 @@ export const useDraw = (
handleUndo,
drawing,
}
+};
- };
+// Hook to listen for user draw & undo events
+export const useSocketDraw = (
+ ctx: CanvasRenderingContext2D | undefined,
+ handleEnd: () => void
+) => {
+ const setUsers = useSetRecoilState(usersAtom);
- //hook to listen for user draw & undo events
- export const useSocketDraw = (
- ctx: CanvasRenderingContext2D | undefined,
- handleEnd: () => void
- ) => {
-
- const setUsers = useSetRecoilState(usersAtom);
-
- useEffect(()=>{
- socket.on("user_draw", (newMoves, options, userId)=> {
- if(ctx){
- ctx.lineWidth= options.lineWidth;
- ctx.strokeStyle= options.lineColor;
- ctx.beginPath();
-
- newMoves.forEach(([x,y])=> {
- ctx.lineTo(x,y);
- });
- ctx.stroke();
- ctx.closePath();
- handleEnd();
- setUsers((prevUsers)=> {
- const newUsers= {...prevUsers};
- newUsers[userId] = [...newUsers[userId], newMoves];
- return newUsers;
- });
- }
- });
+ useEffect(() => {
+ socket.on("user_draw", (newMoves, options, userId) => {
+ if (ctx) {
+ ctx.lineWidth = options.lineWidth;
+ ctx.strokeStyle = options.lineColor;
+ ctx.beginPath();
- socket.on("user_undo", (userId)=>{
- setUsers((prevUsers)=>{
- const newUsers= {...prevUsers};
- newUsers[userId]= newUsers[userId].slice(0, -1);
-
- if(ctx){
- drawOnUndo(ctx, savedMoves, newUsers);
- handleEnd();
+ newMoves.forEach(([x, y]) => {
+ ctx.lineTo(x, y);
+ });
+ ctx.stroke();
+ ctx.closePath();
+ handleEnd();
+ setUsers((prevUsers) => {
+ const newUsers = { ...prevUsers };
+ // newUsers[userId] is initialized as an array
+ if (!Array.isArray(newUsers[userId])) {
+ newUsers[userId] = [];
}
+ newUsers[userId] = [...newUsers[userId], newMoves];
return newUsers;
});
- });
+ }
+ });
- return () => {
- socket.off("user_draw");
- socket.off("user_undo");
- };
-
+ socket.on("user_undo", (userId) => {
+ setUsers((prevUsers) => {
+ const newUsers = { ...prevUsers };
+ if (Array.isArray(newUsers[userId])) {
+ newUsers[userId] = newUsers[userId].slice(0, -1);
+ }
+ if (ctx) {
+ drawOnUndo(ctx, savedMoves, newUsers);
+ handleEnd();
+ }
+ return newUsers;
+ });
});
-
- };
\ No newline at end of file
+
+ return () => {
+ socket.off("user_draw");
+ socket.off("user_undo");
+ };
+ }, [ctx, handleEnd, setUsers]);
+};