don't present cards from hand in CardSelect

app/[gameID]/page.tsx

@@ -141,9 +141,10 @@ export default function GamePage() {
 			</div>
 			<Notes gameData={gameData} show={cards.every(({ flipped }) => flipped)} />
 			<CardSelect
-				closeAction={() => setSelectCard(-1)}
-				settings={settings}
 				show={selectDeck}
+				hand={cards}
+				settings={settings}
+				closeAction={() => setSelectCard(-1)}
 				selectAction={(cardID) => select(selectCard, cardID)}
 			/>
 		</main>

components/CardSelect.tsx

@@ -4,13 +4,14 @@ import { CircleX } from 'lucide-react';
 import TarokkaDeck from '@/lib/TarokkaDeck';
 import getURL from '@/tools/getURL';
 
-import { Deck, Settings } from '@/types';
+import { Deck, Settings, TarokkaGameCard } from '@/types';
 
 const tarokkaDeck = new TarokkaDeck();
 
 type CardSelectProps = {
 	closeAction: () => void;
 	selectAction: (cardID: string) => void;
+	hand: TarokkaGameCard[];
 	settings: Settings;
 	show: Deck | null;
 	className?: string;
@@ -19,10 +20,13 @@ type CardSelectProps = {
 export default function CardSelect({
 	closeAction,
 	selectAction,
+	hand,
 	settings,
 	show,
 	className = '',
 }: CardSelectProps) {
+	const handIDs = hand.map(({ id }) => id);
+
 	const handleClose = (event: React.MouseEvent<HTMLElement>) => {
 		if (event.target === event.currentTarget) {
 			closeAction();
@@ -48,19 +52,21 @@ export default function CardSelect({
 				onClick={handleClose}
 				className={`flex flex-wrap justify-center items-center gap-3 h-dvh w-2/3 overflow-scroll scrollbar-hide p-4`}
 			>
-				{cards.map((card) => (
+				{cards
-					<div
+					.filter(({ id }) => !handIDs.includes(id))
-						key={card.id}
+					.map((card) => (
-						className={`relative h-[21vh] w-[15vh] perspective transition-transform duration-200 hover:scale-150 z-0 hover:z-10`}
+						<div
-						onClick={() => selectAction(card.id)}
+							key={card.id}
-					>
+							className={`relative h-[21vh] w-[15vh] perspective transition-transform duration-200 hover:scale-150 z-0 hover:z-10`}
-						<img
+							onClick={() => selectAction(card.id)}
-							src={getURL(card, settings)}
+						>
-							alt={card.aria}
+							<img
-							className="rounded-lg border border-yellow-500/25 hover:drop-shadow-[0_0_3px_#ffd700/50]"
+								src={getURL(card, settings)}
-						/>
+								alt={card.aria}
-					</div>
+								className="rounded-lg border border-yellow-500/25 hover:drop-shadow-[0_0_3px_#ffd700/50]"
-				))}
+							/>
+						</div>
+					))}
 			</div>
 		</div>
 	);