card flip animations

app/globals.css

@@ -24,3 +24,19 @@ body {
 	color: var(--foreground);
 	font-family: Arial, Helvetica, sans-serif;
 }
+
+.perspective {
+	perspective: 1000px;
+}
+
+.transform-style-preserve-3d {
+	transform-style: preserve-3d;
+}
+
+.backface-hidden {
+	backface-visibility: hidden;
+}
+
+.rotate-y-180 {
+	transform: rotateY(180deg);
+}

components/Card.tsx

@@ -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>
 	);
 }

lib/GameStore.ts

@@ -66,12 +66,8 @@ export default class GameStore {
 
 	gameUpdate(game: GameState): GameUpdate {
 		const { id, cards } = game;
-		return {
+
-			id,
+		return { id, cards };
-			cards: (cards as TarokkaGameCard[]).map((card: TarokkaGameCard) =>
-				card.flipped ? card : { ...deck.getBack(), flipped: false },
-			),
-		};
 	}
 
 	deleteGame(gameID: string): void {