untilt

components/TiltCard.tsx

@@ -1,7 +1,9 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useAppContext } from '@/app/AppContext';
 import type { Tilt } from '@/types';
 
+const ZERO_ROTATION = 'rotateX(0deg) rotateY(0deg)';
+
 export default function TiltCard({
 	children,
 	cardIndex,
@@ -12,6 +14,7 @@ export default function TiltCard({
 	className?: string;
 }) {
 	const cardRef = useRef<HTMLDivElement>(null);
+	const [untilt, setUntilt] = useState(false);
 	const {
 		gameData,
 		settings: { tilt, remoteTilt },
@@ -24,45 +27,42 @@ export default function TiltCard({
 		if (!card) return;
 
 		if (tilt) {
-			if (remoteTilt) {
-				const tilts = gameData.tilts[cardIndex];
-				if (!tilts.length) {
-					card.style.transform = `rotateX(0deg) rotateY(0deg)`;
-					return;
-				}
-
-				const { totalX, totalY } = tilts.reduce(
-					({ totalX, totalY }, { rotateX, rotateY }) => ({
-						totalX: totalX + rotateX,
-						totalY: totalY + rotateY,
-					}),
-					{ totalX: 0, totalY: 0 },
-				);
-
-				const rotateX = totalX / tilts.length;
-				const rotateY = totalY / tilts.length;
-
-				if (rotateX || rotateY) {
-					card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
-				} else {
-					card.style.transform = `rotateX(0deg) rotateY(0deg)`;
-				}
-			} else {
-				console.log(localTilts);
 			const rotateX = localTilts[cardIndex]?.rotateX || 0;
 			const rotateY = localTilts[cardIndex]?.rotateY || 0;
 
-				if (rotateX || rotateY) {
-					card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
+			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);
+				card.style.transform = `rotateX(${totalX / count}deg) rotateY(${totalY / count}deg)`;
 			} else {
-					card.style.transform = `rotateX(0deg) rotateY(0deg)`;
+				setUntilt(true);
 			}
-			}
-		} else if (card.style.transform !== 'rotateX(0deg) rotateY(0deg)') {
-			card.style.transform = 'rotateX(0deg) rotateY(0deg)';
+		} else if (card.style.transform !== ZERO_ROTATION) {
+			setUntilt(true);
 		}
 	}, [tilt, localTilts, gameData]);
 
+	useEffect(() => {
+		const card = cardRef.current;
+		if (!card || !untilt) return;
+
+		card.style.transform = ZERO_ROTATION;
+	}, [untilt]);
+
 	const handleMouseMove = (e: React.MouseEvent) => {
 		const card = cardRef.current;
 		if (!card) return;
@@ -92,7 +92,11 @@ export default function TiltCard({
 			onMouseMove={tilt ? handleMouseMove : undefined}
 			onMouseLeave={handleMouseLeave}
 		>
-			<div ref={cardRef} className={`h-full w-full transition-transform duration-0`}>
+			<div
+				ref={cardRef}
+				onAnimationEnd={() => setUntilt(false)}
+				className={`h-full w-full transition-transform ${untilt ? 'duration-500' : 'duration-0'}`}
+			>
 				{children}
 			</div>
 		</div>

hooks/useSocket.ts

@@ -21,6 +21,8 @@ export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketP
 			});
 
 			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);
 			});