more refactoring

app/[gameID]/page.tsx

@@ -1,29 +1,20 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useParams } from 'next/navigation';
-import { useAppContext } from '@/app/AppContext';
-import { Eye } from 'lucide-react';
 
+import { useAppContext } from '@/app/AppContext';
 import CardSelect from '@/components/CardSelect';
-import CopyButton from '@/components/CopyButton';
 import Notes from '@/components/Notes';
 import NotFound from '@/components/NotFound';
 import Settings from '@/components/Settings';
+import { SpectatorLink } from '@/components/SpectatorLink';
 import TarokkaGrid from '@/components/TarokkaGrid';
 
-import type { Deck } from '@/types';
-
 export default function GamePage() {
-	const { gameData, noGame, handleSettings, select, setGameID } = useAppContext();
+	const { noGame, setGameID } = useAppContext();
 	const { gameID } = useParams();
 
-	const [selectCard, setSelectCard] = useState(-1);
-
-	const { dmID, cards, settings } = gameData;
-	const isDM = !!dmID;
-	const selectDeck: Deck | null = selectCard >= 0 ? cards[selectCard].deck : null;
-
 	useEffect(() => {
 		if (gameID) {
 			setGameID(Array.isArray(gameID) ? gameID[0] : gameID);
@@ -32,28 +23,13 @@ export default function GamePage() {
 
 	return noGame ? (
 		<NotFound />
-	) : cards ? (
+	) : (
 		<main className="min-h-screen flex flex-col items-center justify-center gap-4 bg-[url('/img/table3.png')] bg-cover bg-center">
-			{isDM && (
-				<CopyButton
-					copy={`${location.origin}/${gameData.spectatorID}`}
-					tooltip={`Spectator link: ${location.origin}/${gameData.spectatorID}`}
-					Icon={Eye}
-					className={`fixed top-3 left-3 p-2 z-25 transition-all duration-250 text-yellow-400 hover:text-yellow-300 hover:drop-shadow-[0_0_3px_#ffd700] cursor-pointer`}
-					size={24}
-				/>
-			)}
-
-			{isDM && <Settings gameData={gameData} changeAction={handleSettings} />}
+			<SpectatorLink />
+			<Settings />
 			<TarokkaGrid />
-			<Notes gameData={gameData} show={cards.every(({ flipped }) => flipped)} />
-			<CardSelect
-				show={selectDeck}
-				hand={cards}
-				settings={settings}
-				closeAction={() => setSelectCard(-1)}
-				selectAction={select}
-			/>
+			<Notes />
+			<CardSelect />
 		</main>
-	) : null;
+	);
 }