FIX:FIX

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));`;

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: {

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');

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'],
 })

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',
  ],

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.

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">

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(() => {