gavin/Tarokka
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

teletilt #3

Merged
gavin merged 20 commits from teletilt into trunk 2025-07-03 14:40:35 -04:00
Conversation 0 Commits 20 Files Changed 24 +21 -28
2 changed files with 21 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ddb1575dc8 - Show all commits

47
components/TiltCard.tsx
View File

@@ -2,6 +2,8 @@ import { useEffect, useRef } from 'react';
import { useAppContext } from '@/app/AppContext'; import { useAppContext } from '@/app/AppContext';
import type { Tilt } from '@/types'; import type { Tilt } from '@/types';
const ZERO_ROTATION = 'rotateX(0deg) rotateY(0deg)';
export default function TiltCard({ export default function TiltCard({
children, children,
cardIndex, cardIndex,
@@ -24,42 +26,31 @@ export default function TiltCard({
if (!card) return; if (!card) return;
if (tilt) { if (tilt) {
if (remoteTilt) { const rotateX = localTilts[cardIndex]?.rotateX || 0;
const tilts = gameData.tilts[cardIndex]; const rotateY = localTilts[cardIndex]?.rotateY || 0;
if (!tilts.length) {
card.style.transform = `rotateX(0deg) rotateY(0deg)`;
return;
}
const { totalX, totalY } = tilts.reduce( const tilts = remoteTilt
({ totalX, totalY }, { rotateX, rotateY }) => ({ ? [...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, totalX: totalX + rotateX,
totalY: totalY + rotateY, totalY: totalY + rotateY,
count: ++count,
}), }),
{ totalX: 0, totalY: 0 }, { totalX: 0, totalY: 0, count: 0 },
); );
const rotateX = totalX / tilts.length; if (count && (totalX || totalY)) {
const rotateY = totalY / tilts.length; card.style.transform = `rotateX(${totalX / count}deg) rotateY(${totalY / count}deg)`;
if (rotateX || rotateY) {
card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
} else {
card.style.transform = `rotateX(0deg) rotateY(0deg)`;
}
} else { } else {
console.log(localTilts); card.style.transform = ZERO_ROTATION;
const rotateX = localTilts[cardIndex]?.rotateX || 0;
const rotateY = localTilts[cardIndex]?.rotateY || 0;
if (rotateX || rotateY) {
card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
} else {
card.style.transform = `rotateX(0deg) rotateY(0deg)`;
}
} }
} else if (card.style.transform !== 'rotateX(0deg) rotateY(0deg)') { } else if (card.style.transform !== ZERO_ROTATION) {
card.style.transform = 'rotateX(0deg) rotateY(0deg)'; card.style.transform = ZERO_ROTATION;
} }
}, [tilt, localTilts, gameData]); }, [tilt, localTilts, gameData]);

2
hooks/useSocket.ts
View File

@@ -21,6 +21,8 @@ export default function useSocket({ gameID, setGameData, setNoGame }: UseSocketP
}); });
socket.on('game-update', (data: GameUpdate) => { 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); setGameData(data);
}); });