throttle mouse events

components/TiltCard.tsx

@@ -1,5 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
 import { useAppContext } from '@/app/AppContext';
+import throttle from '@/tools/throttle';
+
+import { thirtyFPS } from '@/constants/time';
 import type { Tilt } from '@/types';
 
 const ZERO_ROTATION = 'rotateX(0deg) rotateY(0deg)';
@@ -90,7 +93,7 @@ export default function TiltCard({
 		sheen.style.opacity = '0';
 	}, [untilt]);
 
-	const handleMouseMove = (e: React.MouseEvent) => {
+	const handleMouseMove = throttle((e: React.MouseEvent) => {
 		const card = cardRef.current;
 		if (!card) return;
 
@@ -107,7 +110,7 @@ export default function TiltCard({
 		newTilt[cardIndex] = { rotateX, rotateY };
 
 		setTilt(newTilt);
-	};
+	}, thirtyFPS);
 
 	const handleMouseLeave = () => {
 		setTilt([]);

hooks/useSocket.ts

@@ -1,8 +1,5 @@
 import { useEffect } from 'react';
 import { socket } from '@/socket';
-import throttle from '@/tools/throttle';
-
-import { thirtyFPS } from '@/constants/time';
 import type { GameUpdate, Tilt } from '@/types';
 
 interface UseSocketProps {
@@ -70,12 +67,12 @@ export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketP
 		});
 	};
 
-	const emitTilt = throttle((cardIndex: number, tilt: Tilt) => {
+	const emitTilt = (cardIndex: number, tilt: Tilt) => {
 		socket.emit('tilt', {
 			cardIndex,
 			tilt,
 		});
-	}, thirtyFPS);
+	};
 
 	return {
 		emitFlip,