save

frontend/code/src/Components/Game/States/GameState.ts

@@ -17,6 +17,7 @@ type GameStateType = {
   p1:any;
   p2:any;
   side:boolean;
+  end:boolean;
 }
 
 type GameActions = {
@@ -29,6 +30,7 @@ type GameActions = {
   setP1 : (p1 : GameStateType['p1']) => void;
   setP2 : (p2 : GameStateType['p2']) => void;
   setSide : (side : GameStateType['side']) => void;
+  setEnd : (end : GameStateType['end']) => void;
 }
 
 export const useGameState = create<GameStateType & GameActions>((set)=> ({
@@ -42,6 +44,7 @@ export const useGameState = create<GameStateType & GameActions>((set)=> ({
   p1:null,
   p2:null,
   side:false,
+  end:true,
   setHeight : (h) => set(() => ({height : h})),
   setWidth : (w) => set(() => ({width : w})),
   setLPaddle : (lp) => set(() => ({lPaddle : lp})),
@@ -51,6 +54,6 @@ export const useGameState = create<GameStateType & GameActions>((set)=> ({
   setP1 : (p1) => set(() => ({p1:p1})),
   setP2 : (p2) => set(() => ({p2:p2})),
   setSide : (side) => set(() => ({side:side})), 
-
+  setEnd : (end) => set(() => ({end:end})),
 
 }))

frontend/code/src/Components/Game/index.tsx

@@ -4,7 +4,19 @@ import { BsFillArrowRightCircleFill, BsFillArrowLeftCircleFill} from "react-icon
 import { useGameState } from "./States/GameState";
 import { useSocketStore } from "../Chat/Services/SocketsServices";
 import { useNavigate } from "react-router-dom";
+import { matchRoutes, useLocation } from "react-router-dom";
 
+
+
+const routes = [
+  { path: "Game/:id" },
+];
+
+const useCurrentPath = () => {
+  const location = useLocation();
+  const [{ route }]: any = matchRoutes(routes, location);
+  return route.path;
+};
 const DURATION = 20;
 type Cords = {
   x:number;
@@ -41,10 +53,13 @@ export const Game = () => {
     const [level , setLevel] = useState(1);
     const [t , setT ] = useState(0);
     const navigate = useNavigate()
+
     const leave = useCallback(() => {
       socketStore.socket.emit("leave")
+      gameState.setEnd(true);
       // eslint-disable-next-line
     },[])
+
     const handleMove = throttlify((e :any) => {
         socketStore.socket.emit("mouse",e.evt.layerY);
     })
@@ -59,7 +74,9 @@ export const Game = () => {
     useEffect(() => {
       socketStore.socket.on("level", (l:number) => {setLevel(l)})
       socketStore.socket.on("t", (t:number) => {setT(t)})
-
+      socketStore.socket.on("game.end", () =>{
+        gameState.setEnd(true)
+      })
       document.addEventListener('keydown', (event) =>{
         if (event.key === "ArrowUp")
           socketStore.socket.emit("up");
@@ -91,6 +108,7 @@ export const Game = () => {
           socketStore.socket.off("leave")
           socketStore.socket.off("level")
           socketStore.socket.off("t")
+          socketStore.socket.off("game.end")
 
           window.removeEventListener("keydown",()=>{});
 
@@ -104,9 +122,10 @@ export const Game = () => {
       const divh = document.getElementById('Game')?.offsetHeight
       const divw = document.getElementById('Game')?.offsetWidth
       socketStore.socket.emit("screen",{h:divh,w:divw})
+      gameState.setEnd(false);
       if (divw) {divw <= 742 ? gameState.setMobile(true) : gameState.setMobile(false)}
         window.addEventListener('resize', () => {
-            
+          gameState.setEnd(false);
             const divh = document.getElementById('Game')?.offsetHeight
             const divw = document.getElementById('Game')?.offsetWidth
             const aspectRatio = 16 / 9;

frontend/code/src/Components/Layout/index.tsx

@@ -8,7 +8,7 @@ import { Message } from "./Assets/Message";
 import { Profile } from "./Assets/Profile";
 import { Settings } from "./Assets/Settings";
 import { Out } from "./Assets/Out";
-import { FC, PropsWithChildren, useLayoutEffect, useRef } from "react";
+import { FC, PropsWithChildren, useEffect, useLayoutEffect, useRef } from "react";
 import { Outlet } from "react-router";
 import { matchRoutes, useLocation } from "react-router-dom";
 import { useUserStore } from "../../Stores/stores";
@@ -18,7 +18,7 @@ import { useSocketStore } from "../Chat/Services/SocketsServices";
 import { ShowLogoModal } from "../Chat/Components/RoomChatHelpers";
 import { Modal } from "./Assets/Modal";
 import { InvitationGame } from "./Assets/Invitationmodale";
-
+import { useGameState } from "../Game/States/GameState";
 const routes = [
   { path: "Profile/:id" },
   { path: "Dm/:id" },
@@ -40,11 +40,24 @@ function onConnect() {
   console.log("hello");
 }
 export const Layout: FC<PropsWithChildren> = (): JSX.Element => {
+  const gameStore = useGameState();
   const user = useUserStore();
   const navigate = useNavigate();
   const socketStore = useSocketStore();
   const invitationGameRef = useRef<HTMLDialogElement>(null);
-
+  const path: string = useCurrentPath();
+  useEffect(() => {
+    console.log(gameStore)
+    console.log(`path is saads ${path}`)
+    if (gameStore.end === false && path !== "Game/:id")
+    {
+        socketStore.socket.emit("leave");
+        gameStore.setEnd(true)
+    }
+    return () => {
+      socketStore.socket.off("leave");
+    }
+  },[path])
   useLayoutEffect(() => {
     const log = async () => {
       try {
@@ -166,7 +179,7 @@ export const Layout: FC<PropsWithChildren> = (): JSX.Element => {
     //eslint-disable-next-line
   }, []);
 
-  const path: string = useCurrentPath();
+
 
   return (
     <>