teletilting

hooks/useSocket.ts

@@ -1,7 +1,8 @@
 import { useEffect } from 'react';
 import { socket } from '@/socket';
+import throttle from '@/tools/throttle';
 
-import type { GameUpdate } from '@/types';
+import type { GameUpdate, Tilt } from '@/types';
 
 interface UseSocketProps {
 	gameID: string;
@@ -44,6 +45,13 @@ export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketP
 		});
 	};
 
+	const handleSettings = (gameData: GameUpdate) => {
+		socket.emit('settings', {
+			gameID,
+			gameData,
+		});
+	};
+
 	const redraw = (cardIndex: number) => {
 		socket.emit('redraw', {
 			gameID,
@@ -59,17 +67,18 @@ export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketP
 		});
 	};
 
-	const handleSettings = (gameData: GameUpdate) => {
-		socket.emit('settings', {
-			gameID,
-			gameData,
+	const emitTilt = throttle((cardIndex: number, tilt: Tilt) => {
+		socket.emit('tilt', {
+			cardIndex,
+			tilt,
 		});
-	};
+	}, 33.3);
 
 	return {
 		flipCard,
+		handleSettings,
 		redraw,
 		select,
-		handleSettings,
+		emitTilt,
 	};
 }