teletilting

components/Card.tsx

@@ -55,7 +55,7 @@ export default function Card({ card, cardIndex }: CardProps) {
 		<ToolTip content={tooltip || getTooltip()}>
 			<TiltCard
 				className={`h-[21vh] w-[15vh] relative perspective transition-transform duration-200 z-0 hover:z-10 hover:scale-150 ${isDM ? 'cursor-pointer' : ''} `}
-				cardID={position.id}
+				cardIndex={cardIndex}
 			>
 				<div
 					className={`absolute inset-0 transition-transform duration-500 transform-style-preserve-3d ${flipped ? 'rotate-y-180' : ''}`}

components/TiltCard.tsx

@@ -1,39 +1,51 @@
 import { useEffect, useRef } from 'react';
 import { useAppContext } from '@/app/AppContext';
+import type { Tilt } from '@/types';
 
 export default function TiltCard({
 	children,
-	cardID,
+	cardIndex,
 	className = '',
 }: {
 	children: React.ReactNode;
-	cardID: string;
+	cardIndex: number;
 	className?: string;
 }) {
 	const cardRef = useRef<HTMLDivElement>(null);
-	const { tilts, setTilts } = useAppContext();
-
-	const card = cardRef.current;
+	const { gameData, setTilt } = useAppContext();
 
 	useEffect(() => {
+		const card = cardRef.current;
 		if (!card) return;
 
-		const tilt = tilts.find((tilt) => tilt.cardID === cardID);
+		const tilt = gameData.tilts[cardIndex];
 		if (!tilt) {
 			card.style.transform = `rotateX(0deg) rotateY(0deg)`;
 			return;
 		}
 
-		const { rotateX, rotateY } = tilt;
+		const tilted = tilt.filter(({ rotateX, rotateY }) => rotateX || rotateY);
+
+		const { totalX, totalY } = tilted.reduce(
+			({ totalX, totalY }, { rotateX, rotateY }) => ({
+				totalX: totalX + rotateX,
+				totalY: totalY + rotateY,
+			}),
+			{ totalX: 0, totalY: 0 },
+		);
+
+		const rotateX = totalX / tilted.length;
+		const rotateY = totalY / tilted.length;
 
 		if (rotateX || rotateY) {
 			card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
 		} else {
 			card.style.transform = `rotateX(0deg) rotateY(0deg)`;
 		}
-	}, [tilts]);
+	}, [gameData]);
 
 	const handleMouseMove = (e: React.MouseEvent) => {
+		const card = cardRef.current;
 		if (!card) return;
 
 		const rect = card.getBoundingClientRect();
@@ -45,13 +57,14 @@ export default function TiltCard({
 		const rotateX = ((y - centerY) / centerY) * -20;
 		const rotateY = ((x - centerX) / centerX) * 20;
 
-		setTilts([...tilts.filter((tilt) => tilt.cardID !== cardID), { cardID, rotateX, rotateY }]);
+		const newTilt: Tilt[] = [];
+		newTilt[cardIndex] = { rotateX, rotateY };
+
+		setTilt(newTilt);
 	};
 
 	const handleMouseLeave = () => {
-		if (!card) return;
-
-		setTilts(tilts.filter((tilt) => tilt.cardID !== cardID));
+		setTilt([]);
 	};
 
 	return (