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/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 = ({ 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 = ({
- +

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 ? (

@@ -97,6 +112,15 @@ export const RecentConversations = () => { userImage={friend.avatar.medium} /> ))} +
+ + {EndOfFetching ? "No more Dms" : "Loading..."} + +
) : ( <> @@ -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 ? (
@@ -134,6 +149,15 @@ export const RoomChatPlaceHolder = () => {
))} +
+ + {EndOfFetching ? "No more Rooms" : "Loading..."} + +
) : (
@@ -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 (
@@ -1091,7 +1122,12 @@ export const ExploreRoomsModal = () => {
{ChatRooms.length > 0 ? ( <> - {ChatRooms.map((room) => ( + {ChatRooms.filter( + (room) => + recentRooms.recentRooms.find( + (recentRoom) => recentRoom.id === room.id + ) === undefined + ).map((room) => (
{
))} +
+ + {EndOfFetching ? "No more Rooms" : "Loading..."} + +
) : ( 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()((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/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 = () => {
-
+
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), + ( +
+
+
+ avatar +
+

+ message Received +

+

+ {notification.entity.content} +

+
+
+ +
+ avatar +
+
+
+ ) + ) + ); + } + // } + 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 = (): JSX.Element => { const navigate = useNavigate(); const socketStore = useSocketStore(); const invitationGameRef = useRef(null); + const chatState = useChatStore(); + useLayoutEffect(() => { const log = async () => { try { @@ -64,48 +67,96 @@ export const Layout: FC = (): 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), - ( -
-
-
- avatar -
-

- message Received -

-

- {msg.content} -

-
-
+ // socketStore.socket.on("message", (msg: any) => { + // toast.custom( + // (t) => + // ( + // // eslint-disable-next-line + // (t.duration = 450), + // ( + //
+ //
+ //
+ // avatar + //
+ //

+ // message Received + //

+ //

+ // {msg.content} + //

+ //
+ //
+ + //
+ // avatar + //
+ //
+ //
+ // ) + // ), + // ); + // }); + // 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), + // ( + //
+ //
+ //
+ // avatar + //
+ //

+ // message Received + //

+ //

+ // {msg.content} + //

+ //
+ //
+ + //
+ // avatar + //
+ //
+ //
+ // ) + // ) + // ); + // } + // }); -
- avatar -
-
-
- ) - ), - ); - }); 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 );