refactoring

components/Card.tsx

@@ -1,43 +1,37 @@
 '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 { Settings, TarokkaGameCard } from '@/types';
 
 const cardBack = tarokkaCards.find((card) => card.back)!;
 
 type CardProps = {
 	dm: boolean;
 	card: TarokkaGameCard;
-	position: Layout;
+	cardIndex: number;
 	settings: Settings;
-	flipAction: () => void;
-	redrawAction: () => void;
-	selectAction: () => void;
 };
 
-export default function Card({
-	dm,
-	card,
-	position,
-	settings,
-	flipAction,
-	redrawAction,
-	selectAction,
-}: CardProps) {
+export default function Card({ dm, card, cardIndex, settings }: CardProps) {
 	const [tooltip, setTooltip] = useState<React.ReactNode>(null);
+	const { flipCard, redraw, setSelectCardIndex } = useAppContext();
 
 	const { aria, flipped } = card;
+	const position = layout[cardIndex];
 
 	const handleClick = () => {
 		if (dm) {
-			flipAction();
+			flipCard(cardIndex);
 		}
 	};
 
@@ -84,8 +78,8 @@ export default function Card({
 						/>
 						{dm && !flipped && (
 							<StackTheDeck
-								onRedraw={redrawAction}
-								onSelect={() => selectAction()}
+								onRedraw={() => redraw(cardIndex)}
+								onSelect={() => setSelectCardIndex(cardIndex)}
 								onHover={setTooltip}
 							/>
 						)}