added colors for users, fixed error

common/constants/colors.ts

@@ -1,16 +1,17 @@
 export const COLORS = {
-    PINK: "EB29DA",
-    NAVY: "1A237E",
-    TEAL: "00796B",
-    PURPLE: "6A1B9A",
-    ORANGE: "FF6D00",
-    GREEN: "00C853",
-    GOLD: "FFD600",
-    LILAC: "E1BEE7",
-    CYAN: "00BCD4",
-    RED: "D32F2F",
-    BLUE: "1976D2",
-    AMBER: "FFC107",
-    LIME: "CDDC39",
+    PINK: "#EB29DA",
+    NAVY: "#1A237E",
+    TEAL: "#00796B",
+    PURPLE: "#6A1B9A",
+    ORANGE: "#FF6D00",
+    GREEN: "#00C853",
+    GOLD: "#FFD600",
+    LILAC: "#E1BEE7",
+    CYAN: "#00BCD4",
+    RED: "#D32F2F",
+    BLUE: "#1976D2",
+    AMBER: "#FFC107",
+    LIME: "#CDDC39",
 };
-export const COLORS_ARRAY =[...Object.values(COLORS)];
+
+export const COLORS_ARRAY = [...Object.values(COLORS)];

common/recoil/room/room.hooks.ts

@@ -1,6 +1,7 @@
 import { useRecoilValue, useRecoilState, useSetRecoilState } from "recoil";
 
-import { roomAtom } from "./room.atom";
+import { DEFAULT_ROOM, roomAtom } from "./room.atom";
+import { getNextColor } from "@/common/lib/getNextColor";
 
 export const useRoom = () => {
     const room = useRecoilValue(roomAtom);
@@ -22,20 +23,24 @@ export const useSetRoomId = () => {
     const setRoomId= useSetRecoilState(roomAtom);
 
     const handleSetRoomId = (id: string) => {   
-        setRoomId((prev)=> ({...prev,id}));
+        setRoomId({...DEFAULT_ROOM, id});
     };
     return handleSetRoomId;
 };
 
 export const useSetUsers = () => {
     const setRoom = useSetRecoilState(roomAtom);
 
-    const handleAddUser= (userId: string, username: string) => {
+    const handleAddUser= (userId: string,  name: string) => {
         setRoom((prev)=> {
             const newUsers = prev.users;
             const newUsersMoves = prev.usersMoves;
 
-            newUsers.set(userId, username);
+            const color= getNextColor([...newUsers.values()].pop()?.color);
+            newUsers.set(userId, {
+                name,
+                color,
+            });
             newUsersMoves.set(userId, []); 
             return {...prev, users: newUsers, usersMoves: newUsersMoves};
         });

common/types/global.d.ts

@@ -14,12 +14,17 @@ export declare global {
          users: Map<string, string>;
         };
 
+    interface User {
+        name:string;
+        color: string;
+    };
+
     interface ClientRoom{
         id:string;
         usersMoves: Map<string, Move[]>;
         movesWithoutUser: Move[];
         myMoves: Move[];
-        users: Map<string, string>;
+        users: Map<string, User>;
     }
 
     interface ServerToClientEvents {

modules/room/components/MouseRenderer.tsx

@@ -6,16 +6,15 @@ import UserMouse from "./UserMouse";
 
 export const MouseRenderer = () => { 
 
-    const room = useRoom ();
+    const {users} = useRoom ();
     return (
         <>
-            {[...room.users.keys()].map((userId) => {
+            {[...users.keys()].map((userId) => {
                 if (userId === socket.id) return null;
              return (
                  <UserMouse 
-                 userId={userId} 
-                 key={userId} 
-                 username={room.users.get(userId) || "Anonymous"} />
+                 userId={userId}  
+                />
              );
 })}
         </>

modules/room/components/UserMouse.tsx

@@ -3,9 +3,11 @@ import { useBoardPosition } from "../hooks/useBoardPosition";
 import { socket } from "@/common/lib/socket";
 import { motion } from "framer-motion";
 import { BsCursorFill } from "react-icons/bs";
+import { useRoom } from "@/common/recoil/room";
 
 //cursor issue
-const UserMouse = ({ userId, username, }: { userId: string, username: string }) => {
+const UserMouse = ({ userId  }: { userId: string  }) => {
+    const {users} = useRoom();  
     const boardPos = useBoardPosition();
     const [x, setX] = useState(boardPos.x.get());
     const [y, setY] = useState(boardPos.y.get());
@@ -37,11 +39,12 @@ const UserMouse = ({ userId, username, }: { userId: string, username: string })
     return (
         <motion.div
             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" }}
         >
             <BsCursorFill className="-rotate-90" />
-            <p className="ml-2">{username}</p>
+            <p className="ml-2">{users.get(userId)?.name || "Anonymous"}</p>
         </motion.div>
     );
 };

modules/room/context/Room.context.tsx

@@ -1,3 +1,4 @@
+import { COLORS_ARRAY } from "@/common/constants/colors";
 import { socket } from "@/common/lib/socket";
 import { useSetRoom, useSetUsers } from "@/common/recoil/room/room.hooks";
 import usersAtom, { useUserIds } from "@/common/recoil/users";
@@ -24,7 +25,21 @@ const RoomContextProvider = ({ children }: { children: ReactChild }) => {
 
         socket.on("room",(room, usersMovesToParse, usersToParse)=> {
             const usersMoves= new Map< string, Move[]>(JSON.parse(usersMovesToParse));
-            const users= new Map< string, string>(JSON.parse(usersToParse))
+            const usersParsed= new Map< string, string>(JSON.parse(usersToParse))
+
+            const users= new Map<string, User>();
+            usersParsed.forEach((name,id)=> {
+                if(id === socket.id) return;
+
+                const index=[...usersParsed.keys()].indexOf(id);
+
+                const color = COLORS_ARRAY[index% COLORS_ARRAY.length];
+
+                users.set(id, {
+                    name,
+                    color,
+                });
+            });
             setRoom((prev)=>({
                 ...prev,
                 users,