don't present cards from hand in CardSelect

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) => (
-					<div
-						key={card.id}
-						className={`relative h-[21vh] w-[15vh] perspective transition-transform duration-200 hover:scale-150 z-0 hover:z-10`}
-						onClick={() => selectAction(card.id)}
-					>
-						<img
-							src={getURL(card, settings)}
-							alt={card.aria}
-							className="rounded-lg border border-yellow-500/25 hover:drop-shadow-[0_0_3px_#ffd700/50]"
-						/>
-					</div>
-				))}
+				{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`}
+							onClick={() => selectAction(card.id)}
+						>
+							<img
+								src={getURL(card, settings)}
+								alt={card.aria}
+								className="rounded-lg border border-yellow-500/25 hover:drop-shadow-[0_0_3px_#ffd700/50]"
+							/>
+						</div>
+					))}
 			</div>
 		</div>
 	);