teletilt (#3)

- Context
- sync _tilts_ between participants
- shiny cards
- reconnect clients
- updates Settings
- re-animate Switches

Co-authored-by: Gavin McDonald <gavinmcdoh@gmail.com>
Reviewed-on: #3

hooks/useSocket.ts

@@ -1,7 +1,6 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { socket } from '@/socket';
-
-import type { GameUpdate } from '@/types';
+import type { GameUpdate, Tilt } from '@/types';
 
 interface UseSocketProps {
 	gameID: string;
@@ -10,15 +9,21 @@ 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);
 			});
 
 			socket.on('game-update', (data: GameUpdate) => {
+				// remove user's own tilts in favor of local values
+				data.tilts = data.tilts.map((card) => card.filter((tilt) => tilt.playerID !== socket.id));
 				setGameData(data);
 			});
 
@@ -30,28 +35,47 @@ 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);
 
-	const flipCard = (cardIndex: number) => {
 		socket.emit('flip-card', {
 			gameID,
 			cardIndex,
 		});
 	};
 
-	const redraw = (cardIndex: number) => {
+	const emitSettings = (gameData: GameUpdate) => {
+		if (disconnected) setConnect(connect + 1);
+
+		socket.emit('settings', {
+			gameID,
+			gameData,
+		});
+	};
+
+	const emitRedraw = (cardIndex: number) => {
+		if (disconnected) setConnect(connect + 1);
+
 		socket.emit('redraw', {
 			gameID,
 			cardIndex,
 		});
 	};
 
-	const select = (cardIndex: number, cardID: string) => {
+	const emitSelect = (cardIndex: number, cardID: string) => {
+		if (disconnected) setConnect(connect + 1);
+
 		socket.emit('select', {
 			gameID,
 			cardIndex,
@@ -59,17 +83,20 @@ export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketP
 		});
 	};
 
-	const handleSettings = (gameData: GameUpdate) => {
-		socket.emit('settings', {
-			gameID,
-			gameData,
+	const emitTilt = (cardIndex: number, tilt: Tilt) => {
+		if (disconnected) setConnect(connect + 1);
+
+		socket.emit('tilt', {
+			cardIndex,
+			tilt,
 		});
 	};
 
 	return {
-		flipCard,
-		redraw,
-		select,
-		handleSettings,
+		emitFlip,
+		emitSettings,
+		emitRedraw,
+		emitSelect,
+		emitTilt,
 	};
 }