simplify tilt calculations

components/Sheen.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { useAppContext } from '@/app/AppContext';
+import { validTilt } from '@/tools';
 
 const tiltSheen = (sheen: HTMLDivElement, x: number, y: number) => {
 	const rect = sheen.getBoundingClientRect();
@@ -20,48 +21,21 @@ const tiltSheen = (sheen: HTMLDivElement, x: number, y: number) => {
 export default function Sheen({ cardIndex, className }: { cardIndex: number; className?: string }) {
 	const sheenRef = useRef<HTMLDivElement>(null);
 	const [untilt, setUntilt] = useState(false);
-	const {
-		gameData,
-		settings: { tilt, remoteTilt },
-		tilt: localTilts,
-	} = useAppContext();
+	const { tilts } = useAppContext();
 
 	useEffect(() => {
 		const sheen = sheenRef.current;
 		if (!sheen) return;
 
-		if (tilt) {
-			const percentX = localTilts[cardIndex]?.percentX || -1;
-			const percentY = localTilts[cardIndex]?.percentY || -1;
+		const tilt = tilts[cardIndex];
 
-			const percentages = remoteTilt
-				? [...gameData.tilts[cardIndex], { percentX, percentY }]
-				: [{ percentX, percentY }];
-
-			const { totalX, totalY, count } = percentages
-				.filter(({ percentX, percentY }) => percentX >= 0 && percentY >= 0)
-				.reduce(
-					({ totalX, totalY, count }, { percentX, percentY }) => ({
-						totalX: totalX + percentX,
-						totalY: totalY + percentY,
-						count: ++count,
-					}),
-					{ totalX: 0, totalY: 0, count: 0 },
-				);
-
-			if (count && totalX >= 0 && totalY >= 0) {
-				const x = totalX / count;
-				const y = totalY / count;
-
-				tiltSheen(sheen, x, y);
-				setUntilt(false);
-			} else {
-				setUntilt(true);
-			}
+		if (validTilt(tilt)) {
+			setUntilt(false);
+			tiltSheen(sheen, tilt.percentX, tilt.percentY);
 		} else {
 			setUntilt(true);
 		}
-	}, [tilt, localTilts, gameData]);
+	}, [tilts]);
 
 	useEffect(() => {
 		const sheen = sheenRef.current;

components/TiltCard.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { useAppContext } from '@/app/AppContext';
-import throttle from '@/tools/throttle';
+import { throttle, validTilt } from '@/tools';
 
 import { thirtyFPS } from '@/constants/time';
 import type { Tilt } from '@/types';
@@ -18,50 +18,21 @@ export default function TiltCard({
 }) {
 	const cardRef = useRef<HTMLDivElement>(null);
 	const [untilt, setUntilt] = useState(false);
-	const {
-		gameData,
-		settings: { tilt, remoteTilt },
-		setTilt,
-		tilt: localTilts,
-	} = useAppContext();
+	const { settings, tilts, setLocalTilt } = useAppContext();
 
 	useEffect(() => {
 		const card = cardRef.current;
 		if (!card) return;
 
-		if (tilt) {
-			const rotateX = localTilts[cardIndex]?.rotateX || 0;
-			const rotateY = localTilts[cardIndex]?.rotateY || 0;
+		const tilt = tilts[cardIndex];
 
-			const tilts = remoteTilt
-				? [...gameData.tilts[cardIndex], { rotateX, rotateY }]
-				: [{ rotateX, rotateY }];
-
-			const { totalX, totalY, count } = tilts
-				.filter(({ rotateX, rotateY }) => !!rotateX && !!rotateY)
-				.reduce(
-					({ totalX, totalY, count }, { rotateX, rotateY }) => ({
-						totalX: totalX + rotateX,
-						totalY: totalY + rotateY,
-						count: ++count,
-					}),
-					{ totalX: 0, totalY: 0, count: 0 },
-				);
-
-			if (count && (totalX || totalY)) {
-				setUntilt(false);
-
-				const x = totalX / count;
-				const y = totalY / count;
-
-				card.style.transform = `rotateX(${x}deg) rotateY(${y}deg)`;
-			} else {
-				setUntilt(true);
-			}
-		} else if (card.style.transform !== ZERO_ROTATION) {
+		if (validTilt(tilt)) {
+			setUntilt(false);
+			card.style.transform = `rotateX(${tilt.rotateX}deg) rotateY(${tilt.rotateY}deg)`;
+		} else {
 			setUntilt(true);
 		}
-	}, [tilt, localTilts, gameData]);
+	}, [tilts]);
 
 	useEffect(() => {
 		const card = cardRef.current;
@@ -93,17 +64,17 @@ export default function TiltCard({
 			rotateY,
 		};
 
-		setTilt(newTilt);
+		setLocalTilt(newTilt);
 	}, thirtyFPS);
 
 	const handleMouseLeave = () => {
-		setTilt([]);
+		setLocalTilt([]);
 	};
 
 	return (
 		<div
 			className={`group ${className}`}
-			onMouseMove={tilt ? handleMouseMove : undefined}
+			onMouseMove={settings.tilt ? handleMouseMove : undefined}
 			onMouseLeave={handleMouseLeave}
 		>
 			<div