32 lines
971 B
TypeScript
32 lines
971 B
TypeScript
'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, flipped, url }, flipAction }: CardProps) {
|
|
return (
|
|
<div
|
|
className="relative h-[21vh] w-[15vh] cursor-pointer perspective transition-transform duration-200 hover:scale-150 z-0 hover:z-10"
|
|
onClick={flipAction}
|
|
>
|
|
<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>
|
|
);
|
|
}
|