From 67c453bf55e33ffbef0ef8c5bfb857a7aef1b4ce Mon Sep 17 00:00:00 2001
From: root <root@DESKTOP-4CU9HCM>
Date: Tue, 14 Nov 2023 23:59:05 +0100
Subject: [PATCH] FIX:FIX

---
 backend/code/accountPickerCli.ts              |   2 +-
 backend/code/src/app.controller.ts            |  10 +-
 backend/code/src/game/game.ts                 |  53 +++----
 backend/code/src/gateways/gateways.gateway.ts |   2 +-
 backend/code/src/main.ts                      |   4 +-
 frontend/code/README.md                       |   2 +-
 .../Chat/Components/Conversation.tsx          |  30 ++--
 .../Components/Chat/Components/RecentChat.tsx |  47 +++++--
 .../Chat/Components/RoomChatHelpers.tsx       | 129 +++++++++++------
 .../Chat/Controllers/RoomChatControllers.tsx  |   4 +-
 .../Components/Chat/Services/ChatServices.ts  |   2 +-
 .../Chat/Services/SocketsServices.ts          |   2 +-
 frontend/code/src/Components/Game/index.tsx   |   6 +-
 .../src/Components/Layout/Assets/Alert.tsx    |  46 +++++-
 .../src/Components/Layout/Assets/Modal.tsx    |   6 +-
 frontend/code/src/Components/Layout/index.tsx | 133 ++++++++++++------
 .../code/src/Components/Profile/index.tsx     |   2 +-
 .../code/src/Components/Validate2Fa/index.tsx |   4 +-
 frontend/code/src/index.tsx                   |   7 +
 nginx/default.conf                            |   4 +-
 20 files changed, 344 insertions(+), 151 deletions(-)

diff --git a/backend/code/accountPickerCli.ts b/backend/code/accountPickerCli.ts
index ad90f7f..9cb9e72 100644
--- a/backend/code/accountPickerCli.ts
+++ b/backend/code/accountPickerCli.ts
@@ -66,7 +66,7 @@ var requestOptions = {
   redirect: 'follow'
 };
 
-fetch("http://localhost:3001/auth/login", requestOptions)
+fetch("http://test.reversablecode.com:3001/auth/login", requestOptions)
   .then(response => response.text())
   .then(result => console.log(result))
   .catch(error => console.log('error', error));`;
diff --git a/backend/code/src/app.controller.ts b/backend/code/src/app.controller.ts
index d27d2e6..270ab05 100644
--- a/backend/code/src/app.controller.ts
+++ b/backend/code/src/app.controller.ts
@@ -106,7 +106,7 @@ export class AppController {
   </style>
   <script>
     // Socket.io script
-    const socket = io("http://localhost:3004", {
+    const socket = io("http://test.reversablecode.com:3004", {
       transports: ['websocket'],
       withCredentials: true,
     });
@@ -134,7 +134,7 @@ export class AppController {
       const roomId = document.getElementById("roomIdInput").value;
       const memberId = document.getElementById("memberIdInput").value;
 
-      fetch("http://localhost:3001/rooms/ban", {
+      fetch("http://test.reversablecode.com:3001/rooms/ban", {
         method: "POST",
         body: JSON.stringify({ roomId: roomId, memberId: memberId }),
         headers: {
@@ -159,7 +159,7 @@ export class AppController {
 
 const raw = JSON.stringify({"content": message});
 
-      fetch("http://localhost:3001/messages/room/" + roomId, {
+      fetch("http://test.reversablecode.com:3001/messages/room/" + roomId, {
         method: "POST",
         body: raw,
         headers: {
@@ -182,7 +182,7 @@ const raw = JSON.stringify({"content": message});
       const roomIdUnban = document.getElementById("roomIdUnbanInput").value;
       const memberIdUnban = document.getElementById("memberIdUnbanInput").value;
 
-      fetch("http://localhost:3001/rooms/unban", {
+      fetch("http://test.reversablecode.com:3001/rooms/unban", {
         method: "POST",
         body: JSON.stringify({ roomId: roomIdUnban, memberId: memberIdUnban }),
         headers: {
@@ -209,7 +209,7 @@ const raw = JSON.stringify({"content": message});
 function sendFriendRequest() {
   const friendId = document.getElementById("friendIdInput").value;
 
-  fetch("http://localhost:3001/friends/add", {
+  fetch("http://test.reversablecode.com:3001/friends/add", {
     method: "POST",
     body: JSON.stringify({ friendId: friendId }),
     headers: {
diff --git a/backend/code/src/game/game.ts b/backend/code/src/game/game.ts
index 25ad347..1577ae4 100644
--- a/backend/code/src/game/game.ts
+++ b/backend/code/src/game/game.ts
@@ -172,16 +172,16 @@ export class Game {
     this.x += this.dx;
     this.y += this.dy;
 
-    if (
-      parseFloat((this.p1Res.w / this.p1Res.h).toFixed(1)) !== 1.8 &&
-      parseFloat((this.p2Res.w / this.p2Res.h).toFixed(1)) !== 1.9
-    ) {
-      this.p1socket.emit('screen Error');
-
-      this.emitGameEnd('p1Leave');
-      this.p1socket.emit('lose', 'trying cheat');
-      this.p2socket.emit('win', 'you win other player try to cheat');
-    } else {
+    // if (
+    //   parseFloat((this.p1Res.w / this.p1Res.h).toFixed(1)) !== 1.8 &&
+    //   parseFloat((this.p2Res.w / this.p2Res.h).toFixed(1)) !== 1.9
+    // ) {
+    //   this.p1socket.emit('screen Error');
+
+    //   this.emitGameEnd('p1Leave');
+    //   this.p1socket.emit('lose', 'trying cheat');
+    //   this.p2socket.emit('win', 'you win other player try to cheat');
+    // } else {
       this.p1socket.emit(
         'ball',
         this.screenAdapter(this.p1Res, this.x, this.y, this.ballSize),
@@ -196,18 +196,18 @@ export class Game {
           true,
         ),
       );
-    }
+    // }
 
-    if (
-      parseFloat((this.p2Res.w / this.p2Res.h).toFixed(1)) !== 1.8 &&
-      parseFloat((this.p2Res.w / this.p2Res.h).toFixed(1)) !== 1.9
-    ) {
-      this.p1socket.emit('screen Error');
+    // if (
+    //   parseFloat((this.p2Res.w / this.p2Res.h).toFixed(1)) !== 1.8 &&
+    //   parseFloat((this.p2Res.w / this.p2Res.h).toFixed(1)) !== 1.9
+    // ) {
+    //   this.p1socket.emit('screen Error');
 
-      this.emitGameEnd('p2Leave');
-      this.p1socket.emit('win', 'you win other player try to cheat');
-      this.p2socket.emit('lose', 'trying cheat');
-    } else {
+    //   this.emitGameEnd('p2Leave');
+    //   this.p1socket.emit('win', 'you win other player try to cheat');
+    //   this.p2socket.emit('lose', 'trying cheat');
+    // } else {
       this.p2socket.emit(
         'ball',
         this.screenAdapter(this.p2Res, this.x, this.y, this.ballSize),
@@ -222,7 +222,7 @@ export class Game {
           true,
         ),
       );
-    }
+    // }
 
     await this.sleep(this.frames);
 
@@ -262,6 +262,7 @@ export class Game {
     this.server.emit('players', [p1Data, p2Data]);
     console.log('newfunc');
 
+
     setInterval(() => {
       this.frames -= 1;
     }, 2000);
@@ -290,12 +291,14 @@ export class Game {
       this.p2Res = data;
     });
     this.p1socket.on('disconnect', () => {
-      console.log('p1 disconnected');
-      this.emitGameEnd('p1 disconnected');
+      this.emitGameEnd('p1Leave');
+      this.p2socket.emit('win', 'you win other player leave the game');
+      this.p1socket.emit('lose', 'you win other player leave the game');
     });
     this.p2socket.on('disconnect', () => {
-      console.log('p2 disconnected');
-      this.emitGameEnd('p2 disconnected');
+      this.emitGameEnd('p2Leave');
+      this.p1socket.emit('win', 'you win other player leave the game');
+      this.p2socket.emit('lose', 'you lost other player leave the game');
     });
     this.p1socket.on('leave', () => {
       this.emitGameEnd('p1Leave');
diff --git a/backend/code/src/gateways/gateways.gateway.ts b/backend/code/src/gateways/gateways.gateway.ts
index 47bbf65..b942ff1 100644
--- a/backend/code/src/gateways/gateways.gateway.ts
+++ b/backend/code/src/gateways/gateways.gateway.ts
@@ -26,7 +26,7 @@ interface GameInvite {
 
 @WebSocketGateway(3004, {
   cors: {
-    origin: ['http://localhost:3001'],
+    origin: ['http://test.reversablecode.com:3001'],
   },
   transports: ['websocket'],
 })
diff --git a/backend/code/src/main.ts b/backend/code/src/main.ts
index cda0fda..73e953a 100644
--- a/backend/code/src/main.ts
+++ b/backend/code/src/main.ts
@@ -15,8 +15,8 @@ async function bootstrap() {
   const app = await NestFactory.create(AppModule);
   const corsOptions = {
     origin: [
-      'http://localhost:9000',
-      'http://localhost:3000',
+      'http://test.reversablecode.com:9000',
+      'http://test.reversablecode.com:3000',
       'http://142.93.161.63',
       'http://164.92.243.105',
     ],
diff --git a/frontend/code/README.md b/frontend/code/README.md
index b87cb00..104e61d 100644
--- a/frontend/code/README.md
+++ b/frontend/code/README.md
@@ -9,7 +9,7 @@ In the project directory, you can run:
 ### `npm start`
 
 Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+Open [http://test.reversablecode.com:3000](http://test.reversablecode.com:3000) to view it in the browser.
 
 The page will reload if you make edits.\
 You will also see any lint errors in the console.
diff --git a/frontend/code/src/Components/Chat/Components/Conversation.tsx b/frontend/code/src/Components/Chat/Components/Conversation.tsx
index 4b4f09f..8908f8a 100644
--- a/frontend/code/src/Components/Chat/Components/Conversation.tsx
+++ b/frontend/code/src/Components/Chat/Components/Conversation.tsx
@@ -12,7 +12,7 @@ import { ChatType, useChatStore } from "../Controllers/RoomChatControllers";
 
 import { ChatPlaceHolder, ConfirmationModal } from "./RoomChatHelpers";
 import { KeyboardEvent } from "react";
-import { leaveRoomCall } from "../Services/ChatServices";
+import { createNewRoomCall, leaveRoomCall } from "../Services/ChatServices";
 import toast from "react-hot-toast";
 import { useModalStore } from "../Controllers/LayoutControllers";
 import {
@@ -23,6 +23,7 @@ import {
 import { useUserStore } from "../../../Stores/stores";
 import { formatTime } from "./tools/utils";
 import { useSocketStore } from "../Services/SocketsServices";
+import { useNavigate } from "react-router-dom";
 
 export interface ChatPaceHolderProps {
   username: string;
@@ -90,6 +91,7 @@ export const CurrentUserMessage = ({
 export const ConversationHeader: React.FC<ConversationProps> = ({
   onRemoveUserPreview,
 }) => {
+  const navigate = useNavigate();
   const LayoutState = useModalStore((state) => state);
   const ChatState = useChatStore((state) => state);
   const SelectedChat = useChatStore((state) => state.selectedChatID);
@@ -141,15 +143,23 @@ export const ConversationHeader: React.FC<ConversationProps> = ({
           </div>
 
           <div className="pr-1">
-            <img
-              className="w-12 rounded-full "
-              alt=""
-              src={
-                selectedChatType === ChatType.Chat
-                  ? currentUser?.avatar.large
-                  : groupIcon
-              }
-            />
+            <button
+              onClick={async () => {
+                if (ChatState.selectedChatType === ChatType.Chat) {
+                  navigate(`/profile/${currentUser.secondUserId}`);
+                }
+              }}
+            >
+              <img
+                className="w-12 rounded-full "
+                alt=""
+                src={
+                  selectedChatType === ChatType.Chat
+                    ? currentUser?.avatar.large
+                    : groupIcon
+                }
+              />
+            </button>
           </div>
           <div className="flex flex-col pl-2 ">
             <p className="text-white font-poppins text-base font-medium leading-normal">
diff --git a/frontend/code/src/Components/Chat/Components/RecentChat.tsx b/frontend/code/src/Components/Chat/Components/RecentChat.tsx
index 496b5cb..980f0b1 100644
--- a/frontend/code/src/Components/Chat/Components/RecentChat.tsx
+++ b/frontend/code/src/Components/Chat/Components/RecentChat.tsx
@@ -24,16 +24,20 @@ import { useSocketStore } from "../Services/SocketsServices";
 
 import { useNavigate } from "react-router-dom";
 import toast from "react-hot-toast";
+import { useInView } from "react-intersection-observer";
 
 export const RecentConversations = () => {
   const [isLoading, setLoading] = useState(false);
   const selectedChatType = useChatStore((state) => state.selectedChatType);
   const ChatRoomsState = useChatStore((state) => state);
 
+  const [ref, inView] = useInView();
+  const [EndOfFetching, setEndOfFetching] = useState(false);
   useEffect(() => {
     const fetch = async () => {
-      setLoading(true);
-      await fetchDmsCall(0, 20).then((res) => {
+      const offset = ChatRoomsState.recentDms.length;
+      offset === 0 && setLoading(true);
+      await fetchDmsCall(offset, 7).then((res) => {
         setLoading(false);
         if (res?.status !== 200 && res?.status !== 201) {
         } else {
@@ -68,15 +72,26 @@ export const RecentConversations = () => {
               });
             }
           );
-          // setIsLoading(false);
-          ChatRoomsState.fillRecentDms(rooms);
-          // ChatRoomsState.changeChatType(ChatType.Room);
+
+          if (res.data.length > 0) {
+            ChatRoomsState.fillRecentDms([
+              ...ChatRoomsState.recentDms,
+              ...rooms,
+            ]);
+          } else {
+            setEndOfFetching(true);
+          }
         }
       });
     };
-    fetch();
+    if (!EndOfFetching) {
+      fetch();
+    }
+    return () => {
+      setEndOfFetching(false);
+    };
     // eslint-disable-next-line
-  }, [ChatRoomsState.selectedChatID, ChatRoomsState.selectedChatType]);
+  }, [ChatRoomsState.selectedChatID, ChatRoomsState.selectedChatType, inView]);
 
   return selectedChatType === ChatType.Chat ? (
     <div className="h-full flex flex-col ">
@@ -97,6 +112,15 @@ export const RecentConversations = () => {
               userImage={friend.avatar.medium}
             />
           ))}
+          <div
+            ref={ref}
+            className="flex justify-center items-center h-2 py-5 
+								"
+          >
+            <span className="text-xs font-light font-poppins text-gray-400">
+              {EndOfFetching ? "No more Dms" : "Loading..."}
+            </span>
+          </div>
         </div>
       ) : (
         <>
@@ -202,7 +226,14 @@ export const OnlineNowUsers = () => {
   const setModalState = useModalStore((state) => state.setShowExploreModal);
 
   const handleListOfOnline = (ids: string[]) => {
-    chatState.fillOnlineFriendsIds(ids);
+    ids.forEach((id) => {
+      if (
+        !chatState.onlineFriendsIds.includes(id) &&
+        Users.find((u) => u.id === id)
+      ) {
+        chatState.addOnlineFriend(id);
+      }
+    });
   };
 
   useEffect(() => {
diff --git a/frontend/code/src/Components/Chat/Components/RoomChatHelpers.tsx b/frontend/code/src/Components/Chat/Components/RoomChatHelpers.tsx
index 4dd407e..5fe83dc 100644
--- a/frontend/code/src/Components/Chat/Components/RoomChatHelpers.tsx
+++ b/frontend/code/src/Components/Chat/Components/RoomChatHelpers.tsx
@@ -32,6 +32,7 @@ import { useUserStore } from "../../../Stores/stores";
 import { formatTime } from "./tools/utils";
 import { getBlockedCall, unblockCall } from "../Services/FriendsServices";
 import { useSocketStore } from "../Services/SocketsServices";
+import { useInView } from "react-intersection-observer";
 
 interface NullComponentProps {
   message: string;
@@ -42,11 +43,14 @@ export const RoomChatPlaceHolder = () => {
   const selectNewChat = useChatStore((state) => state.selectNewChatID);
   const [isLoading, setIsLoading] = useState(false);
 
+  const [ref, inView] = useInView();
+  const [EndOfFetching, setEndOfFetching] = useState(false);
   useEffect(() => {
     const fetch = async () => {
-      setIsLoading(true);
+      const offset = ChatRoomsState.recentRooms.length;
+      offset === 0 && setIsLoading(true);
 
-      await fetchRoomsCall(0, 20, true).then((res) => {
+      await fetchRoomsCall(offset, 7, true).then((res) => {
         if (res?.status !== 200 && res?.status !== 201) {
         } else {
           const rooms: ChatRoom[] = [];
@@ -77,14 +81,25 @@ export const RoomChatPlaceHolder = () => {
             }
           );
           setIsLoading(false);
-          ChatRoomsState.fillRecentRooms(rooms);
+          if (res.data.length > 0) {
+            ChatRoomsState.fillRecentRooms([
+              ...ChatRoomsState.recentRooms,
+              ...rooms,
+            ]);
+          } else {
+            setEndOfFetching(true);
+          }
         }
       });
     };
-
-    fetch();
+    if (!EndOfFetching) {
+      fetch();
+    }
+    return () => {
+      setEndOfFetching(false);
+    };
     // eslint-disable-next-line
-  }, [ChatRoomsState.selectedChatID, ChatRoomsState.selectedChatType]);
+  }, [ChatRoomsState.selectedChatID, ChatRoomsState.selectedChatType, inView]);
 
   return ChatRoomsState.recentRooms.length > 0 ? (
     <div className="bg-[#1A1C26] h-full">
@@ -134,6 +149,15 @@ export const RoomChatPlaceHolder = () => {
           </div>
         </div>
       ))}
+      <div
+        ref={ref}
+        className="flex justify-center items-center h-2 py-5 
+								"
+      >
+        <span className="text-xs font-light font-poppins text-gray-400">
+          {EndOfFetching ? "No more Rooms" : "Loading..."}
+        </span>
+      </div>
     </div>
   ) : (
     <div className="p-3 text-center bg-[#1A1C26] h-full">
@@ -1028,51 +1052,58 @@ export const ExploreRoomsModal = () => {
     setPassword("");
     setSelectedOption(RoomType.public);
     setSelectedRoomID("0");
+    setEndOfFetching(false);
+    SetChatRooms([]);
   };
 
+  const [ref, inView] = useInView();
+  const [EndOfFetching, setEndOfFetching] = useState(false);
   useEffect(() => {
     const fetch = async () => {
-      setIsLoading(true);
-      await fetchRoomsCall(0, 20, false).then((res) => {
-        if (res?.status !== 200 && res?.status !== 201) {
-          // toast.error("something went wrong, try again");
-          resetModalState();
-        } else {
-          const rooms: ChatRoom[] = [];
-          res.data.forEach(
-            (room: {
-              id: string;
-              is_admin: boolean;
-              is_owner: boolean;
-              name: string;
-              type: string;
-            }) => {
-              if (
-                recentRooms.recentRooms.find(
-                  (recentRoom) => recentRoom.id === room.id
-                ) === undefined
-              ) {
-                rooms.push({
-                  id: room.id,
-                  name: room.name,
-                  type: RoomType[room.type as keyof typeof RoomType],
-                  messages: [],
-                  usersId: [],
-                  isOwner: room.is_owner,
-                  isAdmin: room.is_admin,
-                });
+      if (!EndOfFetching) {
+        const offset = ChatRooms.length;
+        offset === 0 && setIsLoading(true);
+        await fetchRoomsCall(offset, 5, false).then((res) => {
+          if (res?.status !== 200 && res?.status !== 201) {
+            resetModalState();
+          } else {
+            const rooms: ChatRoom[] = [];
+            res.data.forEach(
+              (room: {
+                id: string;
+                is_admin: boolean;
+                is_owner: boolean;
+                name: string;
+                type: string;
+              }) => {
+                {
+                  rooms.push({
+                    id: room.id,
+                    name: room.name,
+                    type: RoomType[room.type as keyof typeof RoomType],
+                    messages: [],
+                    usersId: [],
+                    isOwner: room.is_owner,
+                    isAdmin: room.is_admin,
+                  });
+                }
               }
+            );
+            setIsLoading(false);
+            if (res.data.length > 0) {
+              SetChatRooms([...ChatRooms, ...rooms]);
+            } else {
+              setEndOfFetching(true);
             }
-          );
-          setIsLoading(false);
-          SetChatRooms(rooms);
-        }
-      });
+          }
+        });
+      }
     };
 
     fetch();
+
     // eslint-disable-next-line
-  }, [modalState]);
+  }, [modalState, inView]);
 
   return (
     <div className="modal w-screen " id="my_modal_5">
@@ -1091,7 +1122,12 @@ export const ExploreRoomsModal = () => {
             <div className="max-h-[320px] overflow-y-auto no-scrollbar">
               {ChatRooms.length > 0 ? (
                 <>
-                  {ChatRooms.map((room) => (
+                  {ChatRooms.filter(
+                    (room) =>
+                      recentRooms.recentRooms.find(
+                        (recentRoom) => recentRoom.id === room.id
+                      ) === undefined
+                  ).map((room) => (
                     <div
                       key={room.id}
                       className={
@@ -1123,6 +1159,15 @@ export const ExploreRoomsModal = () => {
                       </div>
                     </div>
                   ))}
+                  <div
+                    ref={ref}
+                    className="flex justify-center items-center h-2 py-2
+								"
+                  >
+                    <span className="text-xs font-light font-poppins text-gray-400">
+                      {EndOfFetching ? "No more Rooms" : "Loading..."}
+                    </span>
+                  </div>
                 </>
               ) : (
                 <NullPlaceHolder message="No Rooms For You Yet!" />
diff --git a/frontend/code/src/Components/Chat/Controllers/RoomChatControllers.tsx b/frontend/code/src/Components/Chat/Controllers/RoomChatControllers.tsx
index c52696e..53e4a73 100644
--- a/frontend/code/src/Components/Chat/Controllers/RoomChatControllers.tsx
+++ b/frontend/code/src/Components/Chat/Controllers/RoomChatControllers.tsx
@@ -70,8 +70,8 @@ export const useChatStore = create<ChatState>()((set) => ({
     ?.messages as Message[],
   fillOnlineFriendsIds: (ids: string[]) =>
     set((state) => {
-      if (state.onlineFriendsIds.length === 5) return { ...state };
-      state.onlineFriendsIds = [...ids];
+      if (state.onlineFriendsIds.length > 5) return { ...state };
+      state.onlineFriendsIds = [...ids.slice(0, 5)];
       return { ...state };
     }),
   addOnlineFriend: (id: string) =>
diff --git a/frontend/code/src/Components/Chat/Services/ChatServices.ts b/frontend/code/src/Components/Chat/Services/ChatServices.ts
index f6b9740..a801920 100644
--- a/frontend/code/src/Components/Chat/Services/ChatServices.ts
+++ b/frontend/code/src/Components/Chat/Services/ChatServices.ts
@@ -85,7 +85,7 @@ export const fetchDmsCall = async (
     console.log(response.data);
     return response;
   } catch (e: any) {
-    console.log(e.response.data.message);
+    
   }
 
 }
diff --git a/frontend/code/src/Components/Chat/Services/SocketsServices.ts b/frontend/code/src/Components/Chat/Services/SocketsServices.ts
index 1ce5a74..42646d0 100644
--- a/frontend/code/src/Components/Chat/Services/SocketsServices.ts
+++ b/frontend/code/src/Components/Chat/Services/SocketsServices.ts
@@ -16,7 +16,7 @@ export const useSocketStore = create<SocketStore>((set, get) => ({
 
     set((state) => {
       if (state.socket === null) {
-        newSocket = io("http://localhost:3004", {
+        newSocket = io("http://test.reversablecode.com:3004", {
           transports: ['websocket'],
           'reconnection': true,
           'reconnectionDelay': 1000,
diff --git a/frontend/code/src/Components/Game/index.tsx b/frontend/code/src/Components/Game/index.tsx
index 7538fae..8f48096 100644
--- a/frontend/code/src/Components/Game/index.tsx
+++ b/frontend/code/src/Components/Game/index.tsx
@@ -72,7 +72,7 @@ export const Game = () => {
         })
         socketStore.socket.on("screen Error", () =>{
           console.log("you lose")
-          navigate("/home");
+          navigate("/home", { replace: true })
         })
         socketStore.socket.on("players", (players:any) => {
           gameState.setP1(players[0]);
@@ -92,7 +92,7 @@ export const Game = () => {
     /* eslint-disable */
     useEffect(() => {
       if (!gameState.p1)
-        navigate("/home")
+        navigate("/home", { replace: true })
       const divh = document.getElementById('Game')?.offsetHeight
       const divw = document.getElementById('Game')?.offsetWidth
       socketStore.socket.emit("screen",{h:divh,w:divw})
@@ -146,7 +146,7 @@ export const Game = () => {
             <button className="btn" onClick={leave}>Leave</button>
 
         </div>
-        <div className="flex items-center justify-center min-h-16 max-h-[80%] max-w-[1250px] min-w-92 w-[95%] rounded-xl aspect-video border-primary border-4" id="Game">
+        <div className="flex items-center justify-center min-h-16 max-h-[80%] max-w-[800px] 3xl:max-w-[1150px] min-w-92 w-[95%] rounded-xl aspect-video border-primary border-4" id="Game">
             <Stage onMouseMove={handleMove}  width={gameState.width } height={gameState.height } style={{borderWidth:"4px",borderColor:"#7940CF",borderRadius:"4px"}} >
                 <Layer >
                     <Rect height={gameState.height} width={gameState.width} fill="#151B26" x={0} y={0} />
diff --git a/frontend/code/src/Components/Layout/Assets/Alert.tsx b/frontend/code/src/Components/Layout/Assets/Alert.tsx
index 4ec828c..fcdf0ae 100644
--- a/frontend/code/src/Components/Layout/Assets/Alert.tsx
+++ b/frontend/code/src/Components/Layout/Assets/Alert.tsx
@@ -7,6 +7,7 @@ import toast from "react-hot-toast";
 import { useInView } from "react-intersection-observer";
 import { useSocketStore } from "../../Chat/Services/SocketsServices";
 import { MdOutlineReadMore } from "react-icons/md";
+import { closeWhite } from "../../Chat/Components/tools/Assets";
 
 export const Alert = () => {
   const user = useUserStore();
@@ -36,7 +37,50 @@ export const Alert = () => {
         notification.actorId === user.id ||
         notification.entity_type === "message"
       ) {
-        console.log("notification", notification);
+        console.log(notification);
+        if (notification.entity.authorId !== user.id) {
+          toast.custom(
+            (t) => (
+              // eslint-disable-next-line
+              (t.duration = 450),
+              (
+                <div
+                  className={`${
+                    t.visible ? "animate-enter" : "animate-leave"
+                  } max-w-sm w-full transition-opacity ease-in  bg-purple-500 rounded-xl  flex flex-col  relative top-[6vh] p-4`}
+                >
+                  <div className="flex flex-row justify-between  ">
+                    <div className="  flex flex-row ">
+                      <img
+                        alt="avatar"
+                        className="w-10 h-10 rounded-full"
+                        src={notification.entity.avatar.medium}
+                      />
+                      <div className=" pl-3 flex flex-col items-baseline">
+                        <p className=" text-white  font-poppins text-base font-semibold leading-5 capitalize">
+                          message Received
+                        </p>
+                        <p className="text-[#2F3F53] font-poppins text-base font-normal text-center max-w-[150px] truncate">
+                          {notification.entity.content}
+                        </p>
+                      </div>
+                    </div>
+
+                    <div>
+                      <img
+                        alt="avatar"
+                        className=" pb-1 w-6 h-6"
+                        src={closeWhite}
+                      />
+                    </div>
+                  </div>
+                </div>
+              )
+            )
+          );
+        }
+        // }
+
         return;
       }
       user.addNotification(notification);
diff --git a/frontend/code/src/Components/Layout/Assets/Modal.tsx b/frontend/code/src/Components/Layout/Assets/Modal.tsx
index 3882c45..e38cdb9 100644
--- a/frontend/code/src/Components/Layout/Assets/Modal.tsx
+++ b/frontend/code/src/Components/Layout/Assets/Modal.tsx
@@ -35,7 +35,8 @@ export const Modal = () => {
             setResutl(msg)
             setStatus("win");
             setResOpacity("opacity-100");
-            let count = 5;
+            let count = 2;
+            setTimer(count);
             const inter = setInterval(() => {
                 setTimer(count);
                 --count;
@@ -51,7 +52,8 @@ export const Modal = () => {
             setResutl(msg)
             setStatus("lose");
             setResOpacity("opacity-100");
-            let count = 5;
+            let count = 2;
+            setTimer(count);
             const inter = setInterval(() => {
                 setTimer(count);
                 --count;
diff --git a/frontend/code/src/Components/Layout/index.tsx b/frontend/code/src/Components/Layout/index.tsx
index d9a0c96..d07a0e2 100644
--- a/frontend/code/src/Components/Layout/index.tsx
+++ b/frontend/code/src/Components/Layout/index.tsx
@@ -20,6 +20,7 @@ import { Modal } from "./Assets/Modal";
 import toast from "react-hot-toast";
 import { closeWhite } from "../Chat/Components/tools/Assets";
 import { InvitationGame } from "./Assets/Invitationmodale";
+import { useChatStore } from "../Chat/Controllers/RoomChatControllers";
 
 const routes = [
   { path: "Profile/:id" },
@@ -46,6 +47,8 @@ export const Layout: FC<PropsWithChildren> = (): JSX.Element => {
   const navigate = useNavigate();
   const socketStore = useSocketStore();
   const invitationGameRef = useRef<HTMLDialogElement>(null);
+  const chatState = useChatStore();
+
   useLayoutEffect(() => {
     const log = async () => {
       try {
@@ -64,48 +67,96 @@ export const Layout: FC<PropsWithChildren> = (): JSX.Element => {
     socketStore.socket = socketStore.setSocket();
     socketStore.socket.on("connect", onConnect);
 
-    socketStore.socket.on("message", (msg: any) => {
-      toast.custom(
-        (t) =>
-          (
-            // eslint-disable-next-line
-            (t.duration = 450),
-            (
-              <div
-                className={`${
-                  t.visible ? "animate-enter" : "animate-leave"
-                } max-w-sm w-full transition-opacity ease-in  bg-purple-500 rounded-xl  flex flex-col  relative top-[6vh] p-4`}
-              >
-                <div className="flex flex-row justify-between  ">
-                  <div className="  flex flex-row ">
-                    <img
-                      alt="avatar"
-                      className="w-10 h-10 rounded-full"
-                      src={msg.avatar.medium}
-                    />
-                    <div className=" pl-3 flex flex-col items-baseline">
-                      <p className=" text-white  font-poppins text-base font-semibold leading-5 capitalize">
-                        message Received
-                      </p>
-                      <p className="text-[#2F3F53] font-poppins text-base font-normal text-center max-w-[150px] truncate">
-                        {msg.content}
-                      </p>
-                    </div>
-                  </div>
+    // socketStore.socket.on("message", (msg: any) => {
+    //   toast.custom(
+    //     (t) =>
+    //       (
+    //         // eslint-disable-next-line
+    //         (t.duration = 450),
+    //         (
+    //           <div
+    //             className={`${
+    //               t.visible ? "animate-enter" : "animate-leave"
+    //             } max-w-sm w-full transition-opacity ease-in  bg-purple-500 rounded-xl  flex flex-col  relative top-[6vh] p-4`}
+    //           >
+    //             <div className="flex flex-row justify-between  ">
+    //               <div className="  flex flex-row ">
+    //                 <img
+    //                   alt="avatar"
+    //                   className="w-10 h-10 rounded-full"
+    //                   src={msg.avatar.medium}
+    //                 />
+    //                 <div className=" pl-3 flex flex-col items-baseline">
+    //                   <p className=" text-white  font-poppins text-base font-semibold leading-5 capitalize">
+    //                     message Received
+    //                   </p>
+    //                   <p className="text-[#2F3F53] font-poppins text-base font-normal text-center max-w-[150px] truncate">
+    //                     {msg.content}
+    //                   </p>
+    //                 </div>
+    //               </div>
+
+    //               <div>
+    //                 <img
+    //                   alt="avatar"
+    //                   className=" pb-1 w-6 h-6"
+    //                   src={closeWhite}
+    //                 />
+    //               </div>
+    //             </div>
+    //           </div>
+    //         )
+    //       ),
+    //   );
+    // });
+    // socketStore.socket.on("notification", (msg: any) => {
+    //   console.log("chat id", chatState.currentDmUser.id);
+    //   console.log("chat id", chatState.selectedChatID);
+
+    //   console.log("room id", msg.roomId);
+    //   if (msg.authorId !== user.id) {
+    //     toast.custom(
+    //       (t) => (
+    //         // eslint-disable-next-line
+    //         (t.duration = 450),
+    //         (
+    //           <div
+    //             className={`${
+    //               t.visible ? "animate-enter" : "animate-leave"
+    //             } max-w-sm w-full transition-opacity ease-in  bg-purple-500 rounded-xl  flex flex-col  relative top-[6vh] p-4`}
+    //           >
+    //             <div className="flex flex-row justify-between  ">
+    //               <div className="  flex flex-row ">
+    //                 <img
+    //                   alt="avatar"
+    //                   className="w-10 h-10 rounded-full"
+    //                   src={msg.avatar.medium}
+    //                 />
+    //                 <div className=" pl-3 flex flex-col items-baseline">
+    //                   <p className=" text-white  font-poppins text-base font-semibold leading-5 capitalize">
+    //                     message Received
+    //                   </p>
+    //                   <p className="text-[#2F3F53] font-poppins text-base font-normal text-center max-w-[150px] truncate">
+    //                     {msg.content}
+    //                   </p>
+    //                 </div>
+    //               </div>
+
+    //               <div>
+    //                 <img
+    //                   alt="avatar"
+    //                   className=" pb-1 w-6 h-6"
+    //                   src={closeWhite}
+    //                 />
+    //               </div>
+    //             </div>
+    //           </div>
+    //         )
+    //       )
+    //     );
+    //   }
+    // });
 
-                  <div>
-                    <img
-                      alt="avatar"
-                      className=" pb-1 w-6 h-6"
-                      src={closeWhite}
-                    />
-                  </div>
-                </div>
-              </div>
-            )
-          ),
-      );
-    });
     log();
     socketStore.socket.on("invitedToGame", (data: any) => {
       console.log("invitedToGame", data);
diff --git a/frontend/code/src/Components/Profile/index.tsx b/frontend/code/src/Components/Profile/index.tsx
index 8a993f8..67b3aa9 100644
--- a/frontend/code/src/Components/Profile/index.tsx
+++ b/frontend/code/src/Components/Profile/index.tsx
@@ -320,7 +320,7 @@ export const Profile = () => {
                                   res?.status === 201
                                 ) {
                                   toast.success("User Blocked");
-                                  navigate("/home");
+                                  navigate("/chat");
                                 } else {
                                   toast.error("Could Not Block User");
                                 }
diff --git a/frontend/code/src/Components/Validate2Fa/index.tsx b/frontend/code/src/Components/Validate2Fa/index.tsx
index 4e495c7..19f97c6 100644
--- a/frontend/code/src/Components/Validate2Fa/index.tsx
+++ b/frontend/code/src/Components/Validate2Fa/index.tsx
@@ -67,8 +67,8 @@ export const Validate2Fa = () => {
                     otp: TOTPCode,
                     tfaToken: params.token,
                   });
-                  if (response.data) navigate("/Home");
-                  else toast.error("Invalid OTP");
+                  navigate("/Home");
+                  
                 } catch (e: any) {
                   toast.error(e.response.data.message);
                   console.log(e.response.data.message);
diff --git a/frontend/code/src/index.tsx b/frontend/code/src/index.tsx
index 35eb33a..84d8973 100644
--- a/frontend/code/src/index.tsx
+++ b/frontend/code/src/index.tsx
@@ -1,8 +1,15 @@
+
+
+
 import './index.css';
 import ReactDOM from 'react-dom/client';
 import reportWebVitals from './reportWebVitals';
 import { Toaster } from 'react-hot-toast';
 import { AllRouters } from './Routes';
+
+console.log = () => {}
+console.error = () => {}
+
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
   );
diff --git a/nginx/default.conf b/nginx/default.conf
index 17b3ab5..4522e71 100644
--- a/nginx/default.conf
+++ b/nginx/default.conf
@@ -1,7 +1,7 @@
 server {
   listen       80;
   listen  [::]:80;
-  server_name  localhost;
+  server_name  test.reversablecode.com;
   gzip on;
   gzip_proxied any;
   gzip_comp_level 6;
@@ -20,7 +20,7 @@ server {
 server {
     listen      3001;
 
-    server_name  localhost;
+    server_name  test.reversablecode.com;
 
     gzip on;
   gzip_proxied any;