a bit less computation

components/Sheen.tsx

@@ -1,12 +1,10 @@
 import { useEffect, useRef, useState } from 'react';
 import { useAppContext } from '@/app/AppContext';
 
-const tiltSheen = (sheen: HTMLDivElement, tiltX: number, tiltY: number) => {
+const tiltSheen = (sheen: HTMLDivElement, x: number, y: number) => {
 	const rect = sheen.getBoundingClientRect();
-	const centerX = rect.width / 2;
-	const centerY = rect.height / 2;
-	const sheenX = centerX + (tiltY / -20) * centerX;
-	const sheenY = centerY + (tiltX / 20) * centerY;
+	const sheenX = rect.width - x * rect.width;
+	const sheenY = rect.height - y * rect.height;
 
 	sheen.style.opacity = '1';
 	sheen.style.backgroundImage = `
@@ -33,31 +31,30 @@ export default function Sheen({ cardIndex, className }: { cardIndex: number; cla
 		if (!sheen) return;
 
 		if (tilt) {
-			const rotateX = localTilts[cardIndex]?.rotateX || 0;
-			const rotateY = localTilts[cardIndex]?.rotateY || 0;
+			const percentX = localTilts[cardIndex]?.percentX || -1;
+			const percentY = localTilts[cardIndex]?.percentY || -1;
 
-			const tilts = remoteTilt
-				? [...gameData.tilts[cardIndex], { rotateX, rotateY }]
-				: [{ rotateX, rotateY }];
+			const percentages = remoteTilt
+				? [...gameData.tilts[cardIndex], { percentX, percentY }]
+				: [{ percentX, percentY }];
 
-			const { totalX, totalY, count } = tilts
-				.filter(({ rotateX, rotateY }) => !!rotateX && !!rotateY)
+			const { totalX, totalY, count } = percentages
+				.filter(({ percentX, percentY }) => percentX >= 0 && percentY >= 0)
 				.reduce(
-					({ totalX, totalY, count }, { rotateX, rotateY }) => ({
-						totalX: totalX + rotateX,
-						totalY: totalY + rotateY,
+					({ totalX, totalY, count }, { percentX, percentY }) => ({
+						totalX: totalX + percentX,
+						totalY: totalY + percentY,
 						count: ++count,
 					}),
 					{ totalX: 0, totalY: 0, count: 0 },
 				);
 
-			if (count && (totalX || totalY)) {
-				setUntilt(false);
-
+			if (count && totalX >= 0 && totalY >= 0) {
 				const x = totalX / count;
 				const y = totalY / count;
 
 				tiltSheen(sheen, x, y);
+				setUntilt(false);
 			} else {
 				setUntilt(true);
 			}

components/TiltCard.tsx

@@ -82,9 +82,16 @@ export default function TiltCard({
 
 		const rotateX = ((y - centerY) / centerY) * -20;
 		const rotateY = ((x - centerX) / centerX) * 20;
+		const percentX = x / rect.width;
+		const percentY = y / rect.height;
 
 		const newTilt: Tilt[] = [];
-		newTilt[cardIndex] = { rotateX, rotateY };
+		newTilt[cardIndex] = {
+			percentX,
+			percentY,
+			rotateX,
+			rotateY,
+		};
 
 		setTilt(newTilt);
 	}, thirtyFPS);

lib/GameStore.ts

@@ -157,7 +157,7 @@ export default class GameStore {
 		return this.gameUpdate(game);
 	}
 
-	tilt(playerID: string, cardIndex: number, { rotateX, rotateY }: Tilt) {
+	tilt(playerID: string, cardIndex: number, tilt: Tilt) {
 		const game = this.getGameByPlayerID(playerID);
 		const cardTilts = game.tilts[cardIndex];
 
@@ -165,8 +165,8 @@ export default class GameStore {
 
 		this._clearTilts(game, playerID);
 
-		if (rotateX && rotateY) {
-			game.tilts[cardIndex] = [...game.tilts[cardIndex], { playerID, rotateX, rotateY }];
+		if (tilt.rotateX && tilt.rotateY) {
+			game.tilts[cardIndex] = [...game.tilts[cardIndex], { ...tilt, playerID }];
 			game.lastUpdated = Date.now();
 		}
 

types/index.ts

@@ -115,6 +115,8 @@ export interface Layout {
 
 export interface Tilt {
 	playerID?: string;
+	percentX: number;
+	percentY: number;
 	rotateX: number;
 	rotateY: number;
 }