From 3db3e1a4b586e739823c35706c6cbc503425b477 Mon Sep 17 00:00:00 2001
From: Deveshi Dwivedi <deveshigurgaon@gmail.com>
Date: Sun, 23 Jun 2024 20:41:23 +0530
Subject: [PATCH] added colors for users, fixed error

---
 common/constants/colors.ts                | 29 ++++++++++++-----------
 common/recoil/room/room.hooks.ts          | 13 ++++++----
 common/types/global.d.ts                  |  7 +++++-
 modules/room/components/MouseRenderer.tsx |  9 ++++---
 modules/room/components/UserMouse.tsx     |  7 ++++--
 modules/room/context/Room.context.tsx     | 17 ++++++++++++-
 6 files changed, 55 insertions(+), 27 deletions(-)

diff --git a/common/constants/colors.ts b/common/constants/colors.ts
index 3fc11a6..e4f8709 100644
--- a/common/constants/colors.ts
+++ b/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)];
\ No newline at end of file
+
+export const COLORS_ARRAY = [...Object.values(COLORS)];
diff --git a/common/recoil/room/room.hooks.ts b/common/recoil/room/room.hooks.ts
index 002aeb3..1f2d773 100644
--- a/common/recoil/room/room.hooks.ts
+++ b/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,7 +23,7 @@ export const useSetRoomId = () => {
     const setRoomId= useSetRecoilState(roomAtom);
 
     const handleSetRoomId = (id: string) => {   
-        setRoomId((prev)=> ({...prev,id}));
+        setRoomId({...DEFAULT_ROOM, id});
     };
     return handleSetRoomId;
 };
@@ -30,12 +31,16 @@ export const useSetRoomId = () => {
 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};
         });
diff --git a/common/types/global.d.ts b/common/types/global.d.ts
index 352b249..e95c3c9 100644
--- a/common/types/global.d.ts
+++ b/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 {
diff --git a/modules/room/components/MouseRenderer.tsx b/modules/room/components/MouseRenderer.tsx
index 6caa478..6e601ff 100644
--- a/modules/room/components/MouseRenderer.tsx
+++ b/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}  
+                />
              );
 })}
         </>
diff --git a/modules/room/components/UserMouse.tsx b/modules/room/components/UserMouse.tsx
index d51ce24..fe0b510 100644
--- a/modules/room/components/UserMouse.tsx
+++ b/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>
     );
 };
diff --git a/modules/room/context/Room.context.tsx b/modules/room/context/Room.context.tsx
index a159338..27c6a5e 100644
--- a/modules/room/context/Room.context.tsx
+++ b/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,