From 1e38ec1cf0134c3020d186bc16b84f82a988be28 Mon Sep 17 00:00:00 2001
From: Christian Wu <christianwu56@gmail.com>
Date: Mon, 8 Apr 2024 13:46:50 -0700
Subject: [PATCH] starting on disconnection part

---
 Back-End/server.js                            | 26 ++++++++++++++-----
 .../Components/Multiplayer/Loadingpage.jsx    |  9 +++++--
 Front-End/src/Components/SocketContext.jsx    |  4 +--
 Front-End/src/api.js                          |  4 +--
 4 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/Back-End/server.js b/Back-End/server.js
index 8770316..250fef0 100644
--- a/Back-End/server.js
+++ b/Back-End/server.js
@@ -28,9 +28,9 @@ const io = socketIo(server, {
 class GameQueue {
   constructor(gameName) {
     this.gameName = gameName;
-    this.queue = []; // Array to maintain the order of players
-    this.playerMap = new Map(); // Map for quick access to player data
-    this.queueTimer = null; // Timer for resetting the queue due to inactivity
+    this.queue = []; 
+    this.playerMap = new Map(); 
+    this.queueTimer = null; 
   }
 
   addPlayer(player) {
@@ -52,6 +52,7 @@ class GameQueue {
     const player = this.playerMap.get(playerId);
     this.queue = this.queue.filter(p => p.id !== playerId);
     this.playerMap.delete(playerId);
+
     console.log(`${player.name} has been removed from the ${this.gameName} queue.`);
     if (this.queue.length > 0) {
       this.startQueueResetTimer();
@@ -89,7 +90,7 @@ class GameQueue {
     clearTimeout(this.queueTimer);
     this.queueTimer = setTimeout(() => {
       this.reset();
-    }, 60000); // Reset the queue after 60 seconds of inactivity
+    }, 60000); 
   }
 
   stopQueueResetTimer() {
@@ -97,7 +98,6 @@ class GameQueue {
   }
 }
 
-// Initialize queues for each game
 let queues = {
   valorant: new GameQueue('valorant'),
   league: new GameQueue('league'),
@@ -119,13 +119,27 @@ io.on("connection", (socket) => {
     }
   });
 
-  socket.on("disconnectPlayer", () => {
+  socket.on("disconnectPlayerQueue", () => {
     Object.keys(queues).forEach(gameName => {
       if (queues[gameName].removePlayer(socket.id)) {
         queues[gameName].matchPlayers(); 
       }
     });
   });
+
+  // socket.on("playerDisconnection", () => {
+  //   console.log(`Player ${socket.id} has left the game.`);
+    
+  //   // Retrieve the game or queue the player is part of
+  //   const gameDetails = findGameByPlayerId(socket.id); // Implement this function based on your application logic
+    
+  //   if (gameDetails) {
+  //     // Determine and declare the winner
+  //     const winnerId = determineWinner(gameDetails, socket.id); // Adjust implementation as needed
+  //     io.to(winnerId).emit("gameOver", { winner: true });
+      
+  //   }
+  // });
 });
 
 
diff --git a/Front-End/src/Components/Multiplayer/Loadingpage.jsx b/Front-End/src/Components/Multiplayer/Loadingpage.jsx
index cd297d0..ee1b3dd 100644
--- a/Front-End/src/Components/Multiplayer/Loadingpage.jsx
+++ b/Front-End/src/Components/Multiplayer/Loadingpage.jsx
@@ -62,7 +62,7 @@ const Loadingpage = () => {
 
   useEffect(() => {
     if (timeLeft <= 0) {
-      socket.emit('disconnectPlayer');
+      socket.emit('disconnectPlayerQueue');
       const Toast = Swal.mixin({
         toast: true,
         position: 'top-end',
@@ -94,12 +94,17 @@ const Loadingpage = () => {
   };
 
   const handleLeaveQueueClick = () => {
-    socket.emit('disconnectPlayer');
+    socket.emit('disconnectPlayerQueue');
     dispatch(multiplayerActions.setLoading(true));
     dispatch(multiplayerActions.setOpponent(''));
     navigate('/multiplayer/gameSelect');
   };
 
+  window.addEventListener("beforeunload", (event) => {
+    event.preventDefault();
+    socket.emit('disconnectPlayerQueue')
+  });
+
   return (
     <div>
       {loading ? (
diff --git a/Front-End/src/Components/SocketContext.jsx b/Front-End/src/Components/SocketContext.jsx
index ebc09a3..591336b 100644
--- a/Front-End/src/Components/SocketContext.jsx
+++ b/Front-End/src/Components/SocketContext.jsx
@@ -9,8 +9,8 @@ export const SocketProvider = ({ children }) => {
   const [socket, setSocket] = useState(null);
 
   useEffect(() => {
-    const newSocket = io(process.env.REACT_APP_SOCKET_URL);
-    // const newSocket = io('http://localhost:3001');
+    // const newSocket = io(process.env.REACT_APP_SOCKET_URL);
+    const newSocket = io('http://localhost:3001');
     setSocket(newSocket);
 
     return () => newSocket.close();
diff --git a/Front-End/src/api.js b/Front-End/src/api.js
index 171d139..3071733 100644
--- a/Front-End/src/api.js
+++ b/Front-End/src/api.js
@@ -1,8 +1,8 @@
 // Server Testt
-const root = process.env.REACT_APP_SOCKET_URL
+// const root = process.env.REACT_APP_SOCKET_URL
 
 // Development
-  // const root = 'http://localhost:3001';
+  const root = 'http://localhost:3001';
 
 const API = {
   BugSubmit: `${root}/form/bug`,