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 +42 -27
2 changed files with 42 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4ec4ac0242 - Show all commits

18
app/AppContext.tsx
View File

@@ -41,16 +41,18 @@ export function AppProvider({ children }: { children: ReactNode }) {
}); });
useEffect(() => { useEffect(() => {
const cardIndex = tilt.findIndex((tilt) => !!tilt); if (localSettings.remoteTilt) {
const cardIndex = tilt.findIndex((tilt) => !!tilt);
if (tilt[cardIndex]) { if (tilt[cardIndex]) {
emitTilt(cardIndex, tilt[cardIndex]); emitTilt(cardIndex, tilt[cardIndex]);
} else { } else {
// cardIndex does not matter // cardIndex does not matter
// all tilts for this user will be cleared // all tilts for this user will be cleared
emitTilt(0, { rotateX: 0, rotateY: 0 }); emitTilt(0, { rotateX: 0, rotateY: 0 });
}
} }
}, [tilt]); }, [tilt, localSettings]);
const handleSelect = (cardID: string) => { const handleSelect = (cardID: string) => {
setSelectCardIndex(-1); setSelectCardIndex(-1);

51
components/TiltCard.tsx
View File

@@ -14,8 +14,9 @@ export default function TiltCard({
const cardRef = useRef<HTMLDivElement>(null); const cardRef = useRef<HTMLDivElement>(null);
const { const {
gameData, gameData,
settings: { tilt }, settings: { tilt, remoteTilt },
setTilt, setTilt,
tilt: localTilts,
} = useAppContext(); } = useAppContext();
useEffect(() => { useEffect(() => {
@@ -23,32 +24,44 @@ export default function TiltCard({
if (!card) return; if (!card) return;
if (tilt) { if (tilt) {
const tilts = gameData.tilts[cardIndex]; if (remoteTilt) {
if (!tilts.length) { const tilts = gameData.tilts[cardIndex];
card.style.transform = `rotateX(0deg) rotateY(0deg)`; if (!tilts.length) {
return; card.style.transform = `rotateX(0deg) rotateY(0deg)`;
} return;
}
const { totalX, totalY } = tilts.reduce( const { totalX, totalY } = tilts.reduce(
({ totalX, totalY }, { rotateX, rotateY }) => ({ ({ totalX, totalY }, { rotateX, rotateY }) => ({
totalX: totalX + rotateX, totalX: totalX + rotateX,
totalY: totalY + rotateY, totalY: totalY + rotateY,
}), }),
{ totalX: 0, totalY: 0 }, { totalX: 0, totalY: 0 },
); );
const rotateX = totalX / tilts.length; const rotateX = totalX / tilts.length;
const rotateY = totalY / tilts.length; const rotateY = totalY / tilts.length;
if (rotateX || rotateY) { if (rotateX || rotateY) {
card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
} else {
card.style.transform = `rotateX(0deg) rotateY(0deg)`;
}
} else { } else {
card.style.transform = `rotateX(0deg) rotateY(0deg)`; 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)`;
}
} }
} else if (card.style.transform !== 'rotateX(0deg) rotateY(0deg)') { } else if (card.style.transform !== 'rotateX(0deg) rotateY(0deg)') {
card.style.transform = 'rotateX(0deg) rotateY(0deg)'; card.style.transform = 'rotateX(0deg) rotateY(0deg)';
} }
}, [tilt, gameData]); }, [tilt, localTilts, gameData]);
const handleMouseMove = (e: React.MouseEvent) => { const handleMouseMove = (e: React.MouseEvent) => {
const card = cardRef.current; const card = cardRef.current;