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

teletilt (#3)

Browse Source 
- Context
- sync _tilts_ between participants
- shiny cards
- reconnect clients
- updates Settings
- re-animate Switches

Co-authored-by: Gavin McDonald <gavinmcdoh@gmail.com>
Reviewed-on: #3
This commit was merged in pull request #3.
This commit is contained in:
gavin
2025-07-03 14:40:35 -04:00
parent 59aa904c5a
commit fa352238bb
24 changed files with 712 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
components/Card.tsx
View File

@@ -1,48 +1,43 @@
'use client';
import { useState } from 'react';
import { useAppContext } from '@/app/AppContext';
import TiltCard from '@/components/TiltCard';
import ToolTip from '@/components/ToolTip';
import StackTheDeck from '@/components/StackTheDeck';
import tarokkaCards from '@/constants/tarokkaCards';
import getCardInfo from '@/tools/getCardInfo';
import getURL from '@/tools/getURL';
import { Layout, Settings, TarokkaGameCard } from '@/types';
import tarokkaCards from '@/constants/tarokkaCards';
import { layout } from '@/constants/tarokka';
import { TarokkaGameCard } from '@/types';
const cardBack = tarokkaCards.find((card) => card.back)!;
type CardProps = {
dm: boolean;
card: TarokkaGameCard;
position: Layout;
settings: Settings;
flipAction: () => void;
redrawAction: () => void;
selectAction: () => void;
cardIndex: number;
};
export default function Card({
dm,
card,
position,
settings,
flipAction,
redrawAction,
selectAction,
}: CardProps) {
export default function Card({ card, cardIndex }: CardProps) {
const [tooltip, setTooltip] = useState<React.ReactNode>(null);
const { emitFlip, gameData, emitRedraw, setSelectCardIndex } = useAppContext();
const { dmID, settings } = gameData;
const isDM = !!dmID;
const { aria, flipped } = card;
const position = layout[cardIndex];
const handleClick = () => {
if (dm) {
flipAction();
if (isDM) {
emitFlip(cardIndex);
}
};
const getTooltip = () => {
const text = getCardInfo(card, position, dm, settings);
const text = getCardInfo(card, position, isDM, settings);
return text.length ? (
<>
@@ -59,14 +54,15 @@ export default function Card({
return (
<ToolTip content={tooltip || getTooltip()}>
<TiltCard
className={`h-[21vh] w-[15vh] relative perspective transition-transform duration-200 z-0 hover:z-10 hover:scale-150 ${dm ? 'cursor-pointer' : ''} `}
onClick={handleClick}
className={`h-[21vh] w-[15vh] relative perspective transition-transform duration-200 z-0 hover:z-10 hover:scale-150 ${isDM ? 'cursor-pointer' : ''} `}
cardIndex={cardIndex}
>
<div
className={`absolute inset-0 transition-transform duration-500 transform-style-preserve-3d ${flipped ? 'rotate-y-180' : ''}`}
onClick={handleClick}
>
<div className="absolute inset-0 group backface-hidden">
{dm && (
{isDM && (
<>
<img src={getURL(card, settings)} alt={aria} className="absolute rounded-lg" />
<img
@@ -79,12 +75,12 @@ export default function Card({
<img
src={getURL(cardBack as TarokkaGameCard, settings)}
alt="Card Back"
className={`absolute rounded-lg ${dm ? 'transition duration-500 group-hover:opacity-0' : ''} ${settings.cardStyle === 'grayscale' ? 'border border-yellow-500/25 group-hover:drop-shadow-[0_0_3px_#ffd700/50]' : ''}`}
className={`absolute rounded-lg ${isDM ? 'transition duration-500 group-hover:opacity-0' : ''} ${settings.cardStyle === 'grayscale' ? 'border border-yellow-500/25 group-hover:drop-shadow-[0_0_3px_#ffd700/50]' : ''}`}
/>
{dm && !flipped && (
{isDM && !flipped && (
<StackTheDeck
onRedraw={redrawAction}
onSelect={() => selectAction()}
onRedraw={() => emitRedraw(cardIndex)}
onSelect={() => setSelectCardIndex(cardIndex)}
onHover={setTooltip}
/>
)}

33
components/CardSelect.tsx
View File

@@ -1,41 +1,36 @@
'use client';
import { CircleX } from 'lucide-react';
import { useAppContext } from '@/app/AppContext';
import TarokkaDeck from '@/lib/TarokkaDeck';
import getURL from '@/tools/getURL';
import { Deck, Settings, TarokkaGameCard } from '@/types';
import { Deck } from '@/types';
const tarokkaDeck = new TarokkaDeck();
type CardSelectProps = {
closeAction: () => void;
selectAction: (cardID: string) => void;
hand: TarokkaGameCard[];
settings: Settings;
show: Deck | null;
className?: string;
};
export default function CardSelect({
closeAction,
selectAction,
hand,
settings,
show,
className = '',
}: CardSelectProps) {
export default function CardSelect({ className = '' }: CardSelectProps) {
const { gameData, emitSelect, selectCardIndex, setSelectCardIndex } = useAppContext();
const { cards: hand, settings } = gameData;
const handIDs = hand.map(({ id }) => id);
const selectDeck: Deck | null = selectCardIndex >= 0 ? hand[selectCardIndex].deck : null;
const close = () => setSelectCardIndex(-1);
const handleClose = (event: React.MouseEvent<HTMLElement>) => {
if (event.target === event.currentTarget) {
closeAction();
close();
}
};
if (!show) return null;
if (!selectDeck) return null;
const cards = show === 'high' ? tarokkaDeck.getHigh() : tarokkaDeck.getLow();
const cards = selectDeck === 'high' ? tarokkaDeck.getHigh() : tarokkaDeck.getLow();
return (
<div
@@ -44,7 +39,7 @@ export default function CardSelect({
>
<button
className={`fixed top-4 right-4 p-2 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer`}
onClick={closeAction}
onClick={close}
>
<CircleX className="w-6 h-6" />
</button>
@@ -58,7 +53,7 @@ export default function CardSelect({
<div
key={card.id}
className={`relative h-[21vh] w-[15vh] perspective transition-transform duration-200 hover:scale-150 z-0 hover:z-10`}
onClick={() => selectAction(card.id)}
onClick={() => emitSelect(card.id)}
>
<img
src={getURL(card, settings)}

12
components/Notes.tsx
View File

@@ -3,20 +3,18 @@
import { useMemo, useState } from 'react';
import { ScrollText } from 'lucide-react';
import { useAppContext } from '@/app/AppContext';
import CopyButton from '@/components/CopyButton';
import Scrim from '@/components/Scrim';
import getCardInfo from '@/tools/getCardInfo';
import { cardMap, layout } from '@/constants/tarokka';
import { GameUpdate } from '@/types';
export default function Notes() {
const { gameData } = useAppContext();
const { dmID, cards, settings } = gameData;
type NotesProps = {
gameData: GameUpdate;
show: boolean;
};
export default function Notes({ gameData: { dmID, cards, settings }, show }: NotesProps) {
const isDM = !!dmID;
const show = cards.every(({ flipped }) => flipped);
const [open, setOpen] = useState(false);

133
components/Settings.tsx
View File

@@ -1,133 +0,0 @@
'use client';
import { useState } from 'react';
import { Settings as Gear } from 'lucide-react';
import { Cinzel_Decorative } from 'next/font/google';
import BuyMeACoffee from '@/components/BuyMeACoffee';
import CopyButton from '@/components/CopyButton';
import GitHubButton from '@/components/GitHubButton';
import Scrim from '@/components/Scrim';
import Switch from '@/components/Switch';
import { CardStyle, GameUpdate } from '@/types';
const cinzel = Cinzel_Decorative({
variable: '--font-cinzel',
subsets: ['latin'],
weight: '400',
});
type SettingsProps = {
gameData: GameUpdate;
changeAction: (updatedSettings: GameUpdate) => void;
};
const cardStyleOptions: CardStyle[] = ['standard', 'color', 'grayscale'];
export default function Settings({ gameData, changeAction }: SettingsProps) {
const [open, setOpen] = useState(false);
const togglePermission = (key: string) => {
changeAction({
...gameData,
settings: {
...gameData.settings,
[key]: !gameData.settings[key],
},
});
};
const tuneRadio = (cardStyle: CardStyle) => {
changeAction({
...gameData,
settings: {
...gameData.settings,
cardStyle,
},
});
};
const Links = () => (
<>
<CopyButton
title="Copy DM link"
copy={`${location.origin}/${gameData.dmID}`}
tooltip={`${location.origin}/${gameData.dmID}`}
className="flex flex-row content-between w-full py-1 px-2 transition-all duration-250 bg-slate-700 hover:bg-slate-600 hover:text-yellow-300 rounded-lg shadow"
/>
<CopyButton
title="Copy Spectator link"
copy={`${location.origin}/${gameData.spectatorID}`}
tooltip={`${location.origin}/${gameData.spectatorID}`}
className="flex flex-row content-between w-full py-1 px-2 transition-all duration-250 bg-slate-700 hover:bg-slate-600 hover:text-yellow-300 rounded-lg shadow"
/>
</>
);
const Permissions = () => (
<>
{Object.entries(gameData.settings)
.filter(([_key, value]) => typeof value === 'boolean')
.map(([key, value]) => (
<Switch key={key} label={key} value={value} toggleAction={() => togglePermission(key)} />
))}
</>
);
const CardStyle = () => (
<fieldset className="flex flex-col w-full">
<div className="text-xs my-1">Card style:</div>
<div className="inline-flex overflow-hidden rounded-md w-full">
{cardStyleOptions.map((option, index) => (
<label
key={option}
className={`flex justify-center items-center cursor-pointer w-full px-4 py-2 text-sm font-medium transition
${gameData.settings.cardStyle === option ? 'bg-slate-700 text-yellow-300 font-extrabold' : 'bg-slate-800 hover:bg-slate-700'}
${index === 0 ? 'rounded-l-md' : ''}
${index === cardStyleOptions.length - 1 ? 'rounded-r-md' : ''}
${index !== 0 && 'border-l border-gray-600'}
border border-yellow-500 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700]
`}
>
<input
type="radio"
name="cardStyle"
value={option}
checked={gameData.settings.cardStyle === option}
onChange={() => tuneRadio(option)}
className="sr-only"
/>
{option}
</label>
))}
</div>
</fieldset>
);
return (
<div className={`fixed top-4 right-4 z-25 ${cinzel.className}`}>
<Scrim
clickAction={() => setOpen((prev) => !prev)}
className={`transition-all duration-250 ${open ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
>
<div
className={`fixed top-4 right-4 flex flex-col items-center justify-evenly bg-slate-800 text-yellow-400 rounded-lg border border-yellow-400 py-3 px-4 transition-all duration-250 ${open ? 'opacity-100 w-[350px] h-[350px]' : 'opacity-0 w-0 h-0'}`}
>
<Links />
<Permissions />
<CardStyle />
<span className="w-full flex flex-row justify-evenly">
<GitHubButton className="h-[35px] w-[125px]" />
<BuyMeACoffee className="h-[35px] w-[125px]" />
</span>
</div>
</Scrim>
<button
className={`p-2 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer ${open ? 'pointer-events-none opacity-0' : 'pointer-events-auto opacity-100'}`}
onClick={() => setOpen((prev) => !prev)}
>
<Gear className="w-5 h-5" />
</button>
</div>
);
}

55
components/Settings/CardStyle.tsx Normal file
View File

@@ -0,0 +1,55 @@
'use client';
import { useAppContext } from '@/app/AppContext';
import type { CardStyle } from '@/types';
const cardStyleOptions: CardStyle[] = ['standard', 'color', 'grayscale'];
export default function CardStyle({ className }: { className?: string }) {
const { gameData, isDM, settings, emitSettings } = useAppContext();
const tuneRadio = (cardStyle: CardStyle) => {
emitSettings({
...gameData,
settings: {
...gameData.settings,
cardStyle,
},
});
};
return isDM ? (
<fieldset className={`flex flex-col w-full ${className}`}>
<div className="text-xs ml-1 mb-1">Card style:</div>
<div className="inline-flex overflow-hidden rounded-md w-full">
{cardStyleOptions.map((option, index) => (
<label
key={option}
className={`
flex justify-center
cursor-pointer
w-full px-3 py-2
text-xs font-medium
border border-yellow-500
transition hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700]
${settings.cardStyle === option ? 'bg-slate-700 text-yellow-300 font-extrabold' : 'bg-slate-800 hover:bg-slate-700'}
${index === 0 ? 'rounded-l-md' : ''}
${index === cardStyleOptions.length - 1 ? 'rounded-r-md' : ''}
${index !== 0 && 'border-l border-gray-600'}
`}
>
<input
type="radio"
name="cardStyle"
value={option}
checked={settings.cardStyle === option}
onChange={() => tuneRadio(option)}
className="sr-only"
/>
{option}
</label>
))}
</div>
</fieldset>
) : null;
}

13
components/Settings/ExternalLinks.tsx Normal file
View File

@@ -0,0 +1,13 @@
'use client';
import BuyMeACoffee from '@/components/BuyMeACoffee';
import GitHubButton from '@/components/GitHubButton';
export default function CardStyle({ className }: { className?: string }) {
return (
<span className={`w-full flex flex-row justify-between ${className}`}>
<GitHubButton className="h-[35px] w-[125px]" />
<BuyMeACoffee className="h-[35px] w-[125px]" />
</span>
);
}

27
components/Settings/GameLinks.tsx Normal file
View File

@@ -0,0 +1,27 @@
'use client';
import { useAppContext } from '@/app/AppContext';
import CopyButton from '@/components/CopyButton';
export default function Links({ className }: { className?: string }) {
const { gameData, isDM } = useAppContext();
return (
<div className={`w-full flex flex-col justify-between gap-2 ${className}`}>
{isDM && (
<CopyButton
title="Copy DM link"
copy={`${location.origin}/${gameData.dmID}`}
tooltip={`${location.origin}/${gameData.dmID}`}
className="flex flex-row content-between w-full py-1 px-2 transition-all duration-250 bg-slate-700 hover:bg-slate-600 hover:text-yellow-300 rounded-lg shadow"
/>
)}
<CopyButton
title="Copy Spectator link"
copy={`${location.origin}/${gameData.spectatorID}`}
tooltip={`${location.origin}/${gameData.spectatorID}`}
className="flex flex-row content-between w-full py-1 px-2 transition-all duration-250 bg-slate-700 hover:bg-slate-600 hover:text-yellow-300 rounded-lg shadow"
/>
</div>
);
}

34
components/Settings/Permissions.tsx Normal file
View File

@@ -0,0 +1,34 @@
'use client';
import { useAppContext } from '@/app/AppContext';
import Switch from '@/components/Switch';
import { LOCAL_SETTINGS, SPECTATOR_SETTINGS } from '@/constants';
export default function Permissions() {
const { gameData, isDM, settings, emitSettings, setLocalSettings } = useAppContext();
const togglePermission = (key: string) => {
if (LOCAL_SETTINGS.includes(key)) {
setLocalSettings((prev) => ({ ...prev, [key]: !prev[key] }));
} else if (isDM) {
emitSettings({
...gameData,
settings: {
...gameData.settings,
[key]: !gameData.settings[key],
},
});
}
};
return (
<>
{Object.entries(settings)
.filter(([_key, value]) => typeof value === 'boolean')
.filter(([key]) => isDM || SPECTATOR_SETTINGS.includes(key))
.map(([key, value]) => (
<Switch key={key} label={key} value={value} toggleAction={() => togglePermission(key)} />
))}
</>
);
}

62
components/Settings/index.tsx Normal file
View File

@@ -0,0 +1,62 @@
'use client';
import { useState } from 'react';
import { CircleX, Settings as Gear } from 'lucide-react';
import { Cinzel_Decorative } from 'next/font/google';
import { useAppContext } from '@/app/AppContext';
import Scrim from '@/components/Scrim';
import CardStyle from './CardStyle';
import ExternalLinks from './ExternalLinks';
import GameLinks from './GameLinks';
import Permissions from './Permissions';
const cinzel = Cinzel_Decorative({
variable: '--font-cinzel',
subsets: ['latin'],
weight: '400',
});
export default function Settings() {
const [open, setOpen] = useState(false);
const { isDM } = useAppContext();
return (
<div className={`fixed top-4 right-4 z-25 ${cinzel.className}`}>
<Scrim
clickAction={() => setOpen((prev) => !prev)}
className={`transition-all duration-250 ${open ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'}`}
>
<div
className={`
fixed top-4 right-4
flex flex-col items-center justify-between
bg-slate-800 text-yellow-400
rounded-lg border border-yellow-400
h-full p-8
transition-all duration-250
${open ? `opacity-100 ${isDM ? 'w-[350px] max-h-[425px]' : 'w-[325px] max-h-[200px]'}` : 'opacity-0 w-0 max-h-0'}
`}
>
<GameLinks />
<Permissions />
<CardStyle />
<ExternalLinks />
</div>
<button
className={`fixed top-4 right-4 p-2 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer`}
onClick={() => setOpen((prev) => !prev)}
>
<CircleX className="w-5 h-5" />
</button>
</Scrim>
<button
className={`p-2 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer`}
onClick={() => setOpen((prev) => !prev)}
>
<Gear className="w-5 h-5" />
</button>
</div>
);
}

19
components/SpectatorLink.tsx Normal file
View File

@@ -0,0 +1,19 @@
'use client';
import { Eye } from 'lucide-react';
import { useAppContext } from '@/app/AppContext';
import CopyButton from '@/components/CopyButton';
export function SpectatorLink() {
const { gameData } = useAppContext();
return (
<CopyButton
copy={`${location.origin}/${gameData.spectatorID}`}
tooltip={`Spectator link: ${location.origin}/${gameData.spectatorID}`}
Icon={Eye}
className={`fixed top-3 left-3 p-2 z-25 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer`}
size={24}
/>
);
}

43
components/Switch.tsx
View File

@@ -1,25 +1,44 @@
import type { ChangeEventHandler } from 'react';
export interface SwitchProps {
label: string;
value: boolean;
toggleAction: (event: React.ChangeEvent<HTMLInputElement>) => void;
toggleAction: ChangeEventHandler<HTMLInputElement>;
className?: string;
}
export default function Switch({ label, value, toggleAction }: SwitchProps) {
const nonInitialCaps = /(?!^)([A-Z])/g;
export default function Switch({ label, value, toggleAction, className }: SwitchProps) {
return (
<label className="flex items-center justify-between w-full gap-2 cursor-pointer text-yellow-400 hover:text-yellow-300">
<span className="text-sm capitalize">{label}</span>
<label
className={`flex items-center justify-between gap-2 w-full cursor-pointer text-yellow-400 hover:text-yellow-300 ${className}`}
>
<span className="text-sm capitalize">{label.replace(nonInitialCaps, ' $1')}</span>
<div className="relative inline-block w-8 h-4 align-middle select-none transition duration-200 ease-in">
<input type="checkbox" checked={value} onChange={toggleAction} className="sr-only" />
<div
className={`block w-8 h-4 rounded-full transition ${
value ? 'bg-slate-500' : 'bg-slate-600'
}`}
<input
id={`switch-${label}`}
type="checkbox"
checked={value}
onChange={toggleAction}
className="sr-only peer"
/>
<div
className={`absolute top-[2px] left-[2px] w-3 h-3 rounded-full transition-all duration-250 ease-out transform
${value ? 'translate-x-4 scale-110' : 'scale-95'}
${value ? 'bg-yellow-400' : 'bg-yellow-500'}`}
className={`
block w-8 h-4 rounded-full
transition-colors duration-200 ease-in
bg-slate-600 peer-checked:bg-slate-500
`}
/>
<div
className={`
absolute top-[2px] left-[2px]
w-3 h-3 rounded-full
transition-all duration-250 ease-out
translate-x-0 scale-95 bg-yellow-500
peer-checked:translate-x-4 peer-checked:scale-110 peer-checked:bg-yellow-400
`}
/>
</div>
</label>

28
components/TarokkaGrid.tsx Normal file
View File

@@ -0,0 +1,28 @@
'use client';
import { useAppContext } from '@/app/AppContext';
import Card from '@/components/Card';
import { cardMap } from '@/constants/tarokka';
import type {} from '@/types';
export default function TarokkaGrid() {
const { gameData } = useAppContext();
const { cards } = gameData;
// map our five Tarokka cards to their proper locations in a 3x3 grid
// common deck cards: left, top, and right
// high deck cards: bottom and center
const arrangeCards = (_cell: unknown, index: number) => cards[cardMap[index]];
return (
<div className="grid grid-cols-3 grid-rows-3 gap-8 w-fit mx-auto">
{Array.from({ length: 9 })
.map(arrangeCards)
.map((card, index) => (
<div key={index} className="aspect-[2/3]}">
{card && <Card card={card} cardIndex={cardMap[index]} />}
</div>
))}
</div>
);
}

116
components/TiltCard.tsx
View File

@@ -1,17 +1,99 @@
import { useRef } from 'react';
import { useEffect, useRef, useState } from 'react';
import { useAppContext } from '@/app/AppContext';
import throttle from '@/tools/throttle';
import { thirtyFPS } from '@/constants/time';
import type { Tilt } from '@/types';
const ZERO_ROTATION = 'rotateX(0deg) rotateY(0deg)';
const tiltSheen = (sheen: HTMLDivElement, tiltX: number, tiltY: 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;
sheen.style.opacity = '1';
sheen.style.backgroundImage = `
radial-gradient(
circle at
${sheenX}px ${sheenY}px,
#ffffff44,
#0000000f
)
`;
};
export default function TiltCard({
children,
cardIndex,
className = '',
onClick = () => {},
}: {
children: React.ReactNode;
cardIndex: number;
className?: string;
onClick: (event: React.MouseEvent) => void;
}) {
const cardRef = useRef<HTMLDivElement>(null);
const sheenRef = useRef<HTMLDivElement>(null);
const [untilt, setUntilt] = useState(false);
const {
gameData,
settings: { tilt, remoteTilt },
setTilt,
tilt: localTilts,
} = useAppContext();
const handleMouseMove = (e: React.MouseEvent) => {
useEffect(() => {
const card = cardRef.current;
const sheen = sheenRef.current;
if (!card || !sheen) return;
if (tilt) {
const rotateX = localTilts[cardIndex]?.rotateX || 0;
const rotateY = localTilts[cardIndex]?.rotateY || 0;
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, count: 0 },
);
if (count && (totalX || totalY)) {
setUntilt(false);
const x = totalX / count;
const y = totalY / count;
card.style.transform = `rotateX(${x}deg) rotateY(${y}deg)`;
tiltSheen(sheen, x, y);
} else {
setUntilt(true);
}
} else if (card.style.transform !== ZERO_ROTATION) {
setUntilt(true);
}
}, [tilt, localTilts, gameData]);
useEffect(() => {
const card = cardRef.current;
const sheen = sheenRef.current;
if (!card || !sheen || !untilt) return;
card.style.transform = ZERO_ROTATION;
sheen.style.opacity = '0';
}, [untilt]);
const handleMouseMove = throttle((e: React.MouseEvent) => {
const card = cardRef.current;
if (!card) return;
@@ -24,24 +106,32 @@ export default function TiltCard({
const rotateX = ((y - centerY) / centerY) * -20;
const rotateY = ((x - centerX) / centerX) * 20;
card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
};
const newTilt: Tilt[] = [];
newTilt[cardIndex] = { rotateX, rotateY };
setTilt(newTilt);
}, thirtyFPS);
const handleMouseLeave = () => {
const card = cardRef.current;
if (!card) return;
card.style.transform = `rotateX(0deg) rotateY(0deg)`;
setTilt([]);
};
return (
<div
className={`${className}`}
onMouseMove={handleMouseMove}
className={`group ${className}`}
onMouseMove={tilt ? handleMouseMove : undefined}
onMouseLeave={handleMouseLeave}
onClick={onClick}
>
<div ref={cardRef} className={`h-full w-full transition-transform duration-0`}>
<div
ref={cardRef}
onAnimationEnd={() => setUntilt(false)}
className={`h-full w-full transition-transform ${untilt ? 'duration-500' : 'duration-0'}`}
>
{children}
<div
ref={sheenRef}
className="pointer-events-none absolute inset-0 rounded-lg bg-gradient-to-tr from-transparent via-white/20 to-transparent mix-blend-screen opacity-0 transition-opacity duration-500"
/>
</div>
</div>
);