From 97f23c35dd5752e257668787cc3e94da85c9e712 Mon Sep 17 00:00:00 2001
From: Gavin McDonald <gavinmcdoh@gmail.com>
Date: Thu, 12 Jun 2025 18:27:29 -0400
Subject: [PATCH] don't present cards from hand in CardSelect

---
 app/[gameID]/page.tsx     |  5 +++--
 components/CardSelect.tsx | 34 ++++++++++++++++++++--------------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/app/[gameID]/page.tsx b/app/[gameID]/page.tsx
index d55cd46..10daa07 100644
--- a/app/[gameID]/page.tsx
+++ b/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>
diff --git a/components/CardSelect.tsx b/components/CardSelect.tsx
index 4979465..401aff9 100644
--- a/components/CardSelect.tsx
+++ b/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>
 	);