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

use local tilts, don't wait for server relay

Browse Source
This commit is contained in:
Gavin McDonald
2025-07-02 07:58:53 -04:00
parent 4ec4ac0242
commit ddb1575dc8
2 changed files with 21 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
components/TiltCard.tsx
View File

@@ -2,6 +2,8 @@ import { useEffect, useRef } 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,
@@ -24,42 +26,31 @@ 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 rotateX = localTilts[cardIndex]?.rotateX || 0;
const rotateY = localTilts[cardIndex]?.rotateY || 0;
const { totalX, totalY } = tilts.reduce(
({ totalX, totalY }, { rotateX, rotateY }) => ({
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 },
{ totalX: 0, totalY: 0, count: 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)`;
}
if (count && (totalX || totalY)) {
card.style.transform = `rotateX(${totalX / count}deg) rotateY(${totalY / count}deg)`;
} 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)`;
} else {
card.style.transform = `rotateX(0deg) rotateY(0deg)`;
}
card.style.transform = ZERO_ROTATION;
}
} else if (card.style.transform !== 'rotateX(0deg) rotateY(0deg)') {
card.style.transform = 'rotateX(0deg) rotateY(0deg)';
} else if (card.style.transform !== ZERO_ROTATION) {
card.style.transform = ZERO_ROTATION;
}
}, [tilt, localTilts, gameData]);