app/AppContext.tsx

@@ -33,10 +33,11 @@ export interface AppContext {
 }
 
 export function AppProvider({ children }: { children: ReactNode }) {
+	const [gameData, setGameData] = useState<GameUpdate>(gameStart);
 	const [gameID, setGameID] = useState('');
 	const [noGame, setNoGame] = useState(false);
 	const [selectCardIndex, setSelectCardIndex] = useState(-1);
-	const [gameData, setGameData] = useState<GameUpdate>(gameStart);
+	const [tilts, setTilts] = useState<Tilt[]>([]);
 
 	const { flipCard, redraw, select, handleSettings } = useSocket({
 		gameID,
@@ -44,8 +45,6 @@ export function AppProvider({ children }: { children: ReactNode }) {
 		setNoGame,
 	});
 
-	const [tilts, setTilts] = useState<Tilt[]>([]);
-
 	const handleSelect = (cardID: string) => {
 		setSelectCardIndex(-1);
 

components/Card.tsx

@@ -11,32 +11,33 @@ import getURL from '@/tools/getURL';
 import tarokkaCards from '@/constants/tarokkaCards';
 import { layout } from '@/constants/tarokka';
 
-import { Settings, TarokkaGameCard } from '@/types';
+import { TarokkaGameCard } from '@/types';
 
 const cardBack = tarokkaCards.find((card) => card.back)!;
 
 type CardProps = {
-	dm: boolean;
 	card: TarokkaGameCard;
 	cardIndex: number;
-	settings: Settings;
 };
 
-export default function Card({ dm, card, cardIndex, settings }: CardProps) {
+export default function Card({ card, cardIndex }: CardProps) {
 	const [tooltip, setTooltip] = useState<React.ReactNode>(null);
-	const { flipCard, redraw, setSelectCardIndex } = useAppContext();
+	const { flipCard, gameData, redraw, setSelectCardIndex } = useAppContext();
+
+	const { dmID, settings } = gameData;
+	const isDM = !!dmID;
 
 	const { aria, flipped } = card;
 	const position = layout[cardIndex];
 
 	const handleClick = () => {
-		if (dm) {
+		if (isDM) {
 			flipCard(cardIndex);
 		}
 	};
 
 	const getTooltip = () => {
-		const text = getCardInfo(card, position, dm, settings);
+		const text = getCardInfo(card, position, isDM, settings);
 
 		return text.length ? (
 			<>
@@ -53,7 +54,7 @@ export default function Card({ dm, card, cardIndex, settings }: CardProps) {
 	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' : ''} `}
+				className={`h-[21vh] w-[15vh] relative perspective transition-transform duration-200 z-0 hover:z-10 hover:scale-150 ${isDM ? 'cursor-pointer' : ''} `}
 				cardID={position.id}
 			>
 				<div
@@ -61,7 +62,7 @@ export default function Card({ dm, card, cardIndex, settings }: CardProps) {
 					onClick={handleClick}
 				>
 					<div className="absolute inset-0 group backface-hidden">
-						{dm && (
+						{isDM && (
 							<>
 								<img src={getURL(card, settings)} alt={aria} className="absolute rounded-lg" />
 								<img
@@ -74,9 +75,9 @@ export default function Card({ dm, card, cardIndex, settings }: CardProps) {
 						<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={() => redraw(cardIndex)}
 								onSelect={() => setSelectCardIndex(cardIndex)}

components/TarokkaGrid.tsx

@@ -7,9 +7,7 @@ import type {} from '@/types';
 
 export default function TarokkaGrid() {
 	const { gameData } = useAppContext();
-
+	const { cards } = gameData;
-	const { dmID, cards, settings } = gameData;
-	const isDM = !!dmID;
 
 	// map our five Tarokka cards to their proper locations in a 3x3 grid
 	// common deck cards: left, top, and right
@@ -22,7 +20,7 @@ export default function TarokkaGrid() {
 				.map(arrangeCards)
 				.map((card, index) => (
 					<div key={index} className="aspect-[2/3]}">
-						{card && <Card dm={isDM} card={card} cardIndex={cardMap[index]} settings={settings} />}
+						{card && <Card card={card} cardIndex={cardMap[index]} />}
 					</div>
 				))}
 		</div>