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

setting to disable tilt

Browse Source
This commit is contained in:
Gavin McDonald
2025-07-01 09:21:41 -04:00
parent 1dbe6b7ec0
commit 6b3ab9a54e
6 changed files with 164 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
components/TiltCard.tsx
View File

@@ -12,37 +12,45 @@ export default function TiltCard({
className?: string;
}) {
const cardRef = useRef<HTMLDivElement>(null);
const { gameData, setTilt } = useAppContext();
const {
gameData,
settings: { tilt },
setTilt,
} = useAppContext();
useEffect(() => {
const card = cardRef.current;
if (!card) return;
const tilt = gameData.tilts[cardIndex];
if (!tilt) {
card.style.transform = `rotateX(0deg) rotateY(0deg)`;
return;
if (tilt) {
const tilt = gameData.tilts[cardIndex];
if (!tilt) {
card.style.transform = `rotateX(0deg) rotateY(0deg)`;
return;
}
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)`;
}
} else if (card.style.transform !== 'rotateX(0deg) rotateY(0deg)') {
card.style.transform = 'rotateX(0deg) rotateY(0deg)';
}
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)`;
}
}, [gameData]);
}, [tilt, gameData]);
const handleMouseMove = (e: React.MouseEvent) => {
const card = cardRef.current;
@@ -68,7 +76,11 @@ export default function TiltCard({
};
return (
<div className={`${className}`} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
<div
className={`${className}`}
onMouseMove={tilt ? handleMouseMove : undefined}
onMouseLeave={handleMouseLeave}
>
<div ref={cardRef} className={`h-full w-full transition-transform duration-0`}>
{children}
</div>