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,7 +52,9 @@ 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
+					.filter(({ id }) => !handIDs.includes(id))
+					.map((card) => (
 						<div
 							key={card.id}
 							className={`relative h-[21vh] w-[15vh] perspective transition-transform duration-200 hover:scale-150 z-0 hover:z-10`}