Tarokka/hooks/useSocket.ts

import { useEffect, useState } from 'react';
import { socket } from '@/socket';
import type { GameUpdate, Tilt } from '@/types';

interface UseSocketProps {
	gameID: string;
	setGameData: (gameUpdate: GameUpdate) => void;
	setNoGame: (noGame: boolean) => void;
}

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);
			});

			socket.on('join-error', (error) => {
				console.error('Error:', error);
				setNoGame(true);
			});

			socket.on('flip-error', (error) => {
				console.error('Error:', error);
			});

			socket.on('disconnect', () => {
				setDisconnected(true);
			});
		}

		return () => {
			socket.removeAllListeners();
		};
	}, [gameID, connect]);

	const emitFlip = (cardIndex: number) => {
		if (disconnected) setConnect(connect + 1);

		socket.emit('flip-card', {
			gameID,
			cardIndex,
		});
	};

	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 emitSelect = (cardIndex: number, cardID: string) => {
		if (disconnected) setConnect(connect + 1);

		socket.emit('select', {
			gameID,
			cardIndex,
			cardID,
		});
	};

	const emitTilt = (cardIndex: number, tilt: Tilt) => {
		if (disconnected) setConnect(connect + 1);

		socket.emit('tilt', {
			cardIndex,
			tilt,
		});
	};

	return {
		emitFlip,
		emitSettings,
		emitRedraw,
		emitSelect,
		emitTilt,
	};
}