reconnect clients

hooks/useSocket.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { socket } from '@/socket';
 import type { GameUpdate, Tilt } from '@/types';
 
@@ -9,11 +9,15 @@ interface UseSocketProps {
 }
 
 export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketProps) {
+	const [connect, setConnect] = useState(1);
+	const [disconnected, setDisconnected] = useState(true);
+
 	useEffect(() => {
 		if (gameID) {
 			socket.emit('join', gameID);
 
 			socket.on('init', (data: GameUpdate) => {
+				setDisconnected(false);
 				setGameData(data);
 			});
 
@@ -31,14 +35,20 @@ export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketP
 			socket.on('flip-error', (error) => {
 				console.error('Error:', error);
 			});
+
+			socket.on('disconnect', () => {
+				setDisconnected(true);
+			});
 		}
 
 		return () => {
 			socket.removeAllListeners();
 		};
-	}, [gameID]);
+	}, [gameID, connect]);
 
 	const emitFlip = (cardIndex: number) => {
+		if (disconnected) setConnect(connect + 1);
+
 		socket.emit('flip-card', {
 			gameID,
 			cardIndex,
@@ -46,6 +56,8 @@ export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketP
 	};
 
 	const emitSettings = (gameData: GameUpdate) => {
+		if (disconnected) setConnect(connect + 1);
+
 		socket.emit('settings', {
 			gameID,
 			gameData,
@@ -53,6 +65,8 @@ export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketP
 	};
 
 	const emitRedraw = (cardIndex: number) => {
+		if (disconnected) setConnect(connect + 1);
+
 		socket.emit('redraw', {
 			gameID,
 			cardIndex,
@@ -60,6 +74,8 @@ export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketP
 	};
 
 	const emitSelect = (cardIndex: number, cardID: string) => {
+		if (disconnected) setConnect(connect + 1);
+
 		socket.emit('select', {
 			gameID,
 			cardIndex,
@@ -68,6 +84,8 @@ export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketP
 	};
 
 	const emitTilt = (cardIndex: number, tilt: Tilt) => {
+		if (disconnected) setConnect(connect + 1);
+
 		socket.emit('tilt', {
 			cardIndex,
 			tilt,