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

card flip animations

Browse Source
This commit is contained in:
Gavin McDonald
2025-04-13 10:20:45 -04:00
parent 55409766b3
commit 070e7c9cf0
3 changed files with 33 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/Card.tsx
View File

@@ -1,19 +1,31 @@
'use client';
import { StandardGameCard, TarokkaGameCard } from '@/types';
import tarokkaCards from '@/constants/tarokkaCards';
const cardBack = tarokkaCards.find((card) => card.back)!;
type CardProps = {
card: StandardGameCard | TarokkaGameCard;
flipAction: () => void;
};
export default function Card({ card: { aria, url }, flipAction }: CardProps) {
export default function Card({ card: { aria, flipped, url }, flipAction }: CardProps) {
return (
<div
className="h-[21vh] w-[15vh] flex items-center justify-center cursor-pointer transform transition-transform duration-200 hover:scale-150 relative z-0 hover:z-10"
className="relative h-[21vh] w-[15vh] cursor-pointer perspective transition-transform duration-200 hover:scale-150 z-0 hover:z-10"
onClick={flipAction}
>
<img className="rounded-xl" src={url} alt={aria} />
<div
className={`transition-transform duration-500 transform-style-preserve-3d ${flipped ? 'rotate-y-180' : ''}`}
>
<div className="absolute inset-0 backface-hidden">
<img src={cardBack.url} alt="Card Back" className="rounded-xl" />
</div>
<div className="absolute inset-0 backface-hidden rotate-y-180">
<img src={url} alt={aria} className="rounded-xl" />
</div>
</div>
</div>
);
}