#LobbyDesign

- Cleaned up code for PR resolved some comments

src/app/_components/Gameboard/GameboardTypes.ts

@@ -55,11 +55,6 @@ export interface IBasicPromptProps {
 	handleBasicPromptToggle: () => void;
 }
 
-export interface ICardAreaProps {
-	cards: ICardData[];
-	pile: "Deck" | "Sideboard" | null;
-}
-
 export interface IUnitsBoardProps {
 	sidebarOpen: boolean;
 	arena: string;

src/app/_components/Gameboard/_subcomponents/Overlays/ResourcesOverlay/ResourcesOverlay.tsx

@@ -10,17 +10,25 @@ import {
 	IconButton,
 } from "@mui/material";
 import { Close } from "@mui/icons-material";
-import CardArea from "../../../../_sharedcomponents/CardArea/CardArea";
+import { ICardData } from "@/app/_components/_sharedcomponents/Cards/CardTypes";
 import { IResourcesOverlayProps } from "@/app/_components/Gameboard/GameboardTypes";
 import { useGame } from "@/app/_contexts/Game.context";
+import GameCard from "@/app/_components/_sharedcomponents/Cards/GameCard/GameCard";
 
 const ResourcesOverlay: React.FC<IResourcesOverlayProps> = ({
 	isModalOpen,
 	handleModalToggle,
 }) => {
 
 	const { gameState, connectedPlayer } = useGame();
-
+	const mainContainerStyle = {
+		display: "flex",
+		flexWrap: "wrap",
+		gap: "1em",
+		p: "1em",
+		justifyContent: "center",
+		textWrap: "wrap",
+	};
 	return (
 		<Modal
 			open={isModalOpen}
@@ -49,8 +57,14 @@ const ResourcesOverlay: React.FC<IResourcesOverlayProps> = ({
 					<Typography variant="caption" color="#fff">
 						Your Resources
 					</Typography>
-
-					<CardArea cards={gameState.players[connectedPlayer].cardPiles["resources"]} pile={null} />
+					<Box sx={mainContainerStyle}>
+						{gameState.players[connectedPlayer].cardPiles["resources"].map((card: ICardData) => (
+							<GameCard
+								key={card.uuid}
+								card={card}
+							/>
+						))}
+					</Box>
 				</CardContent>
 				<Box
 					sx={{

src/app/_components/Lobby/Deck/Deck.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import {Card, Box, Typography, Divider} from "@mui/material";
-import CardArea from "../../_sharedcomponents/CardArea/CardArea";
+import { ICardData, IServerCardData } from "@/app/_components/_sharedcomponents/Cards/CardTypes";
 import { useDragScroll } from "@/app/_utils/useDragScroll";
 import {useGame} from "@/app/_contexts/Game.context";
+import GameCard from "@/app/_components/_sharedcomponents/Cards/GameCard/GameCard";
 
 const Deck: React.FC = () => {
 	// Use the custom hook with horizontal or vertical scrolling as required
@@ -98,7 +99,15 @@ const Deck: React.FC = () => {
 		},
 		transition: "scrollbar-color 0.3s ease-in-out",
 	};
-	const { connectedDeck } = useGame();
+	const mainContainerStyle = {
+		display: "flex",
+		flexWrap: "wrap",
+		gap: "1em",
+		p: "1em",
+		justifyContent: "center",
+		textWrap: "wrap",
+	};
+	const { connectedDeck, updateDeck } = useGame();
 	const newDeck = connectedDeck?.deckCards ?? [];
 	const sideBoard = connectedDeck?.sideboard ?? [];
 	// Calculate the total counts
@@ -111,6 +120,7 @@ const Deck: React.FC = () => {
 		(sum: number, item: { count: number; }) => sum + (item.count || 0),
 		0
 	) ?? 0;
+
 	return (
 		<Box sx={{width:'100%'}}>
 			<Card sx={cardStyle}>
@@ -130,7 +140,17 @@ const Deck: React.FC = () => {
 					onTouchEnd={handleTouchEnd}
 					sx={scrollableBoxStyle}
 				>
-					<CardArea cards={newDeck} pile={"Deck"} />
+					<Box sx={mainContainerStyle}>
+						{newDeck.map((card:IServerCardData) => (
+							<GameCard
+								key={card.card.uuid}
+								card={card}
+								options={['counter']}
+								size={'lobby'}
+								onClick={() => updateDeck(['Deck', card.card.id])}
+							/>
+						))}
+					</Box>
 				</Box>
 				{sideBoard?.length > 0 && (
 					<>
@@ -145,7 +165,17 @@ const Deck: React.FC = () => {
 							ref={containerRef}
 							sx={scrollableBoxStyleSideboard}
 						>
-							<CardArea cards={sideBoard} pile={"Sideboard"} />
+							<Box sx={mainContainerStyle}>
+								{sideBoard.map((card:IServerCardData) => (
+									<GameCard
+										key={card.card.uuid}
+										card={card}
+										options={['counter']}
+										size={'lobby'}
+										onClick={() => updateDeck(['SideBoard', card.card.uuid])}
+									/>
+								))}
+							</Box>
 						</Box>
 					</>
 				)}
@@ -154,4 +184,4 @@ const Deck: React.FC = () => {
 	);
 };
 
-export default Deck;
+export default Deck;

src/app/_components/Lobby/SetUp/SetUp.tsx

@@ -23,38 +23,17 @@ const SetUp: React.FC<ISetUpProps> = ({
 	const { sendMessage } = useGame();
 	const router = useRouter();
 	const searchParams = useSearchParams();
-	const { connectedPlayer, connectedDeck } = useGame();
 	// Extract the player from the URL query params
 	const player = searchParams.get("player");
 
 	const handleStartGame = async () => {
-		try {
-			const payload = {
-				user: connectedPlayer,
-				deck: connectedDeck
-			};
-			const response = await fetch("http://localhost:9500/api/submit-deck", {
-				method: "POST",
-				headers: {
-					"Content-Type": "application/json",
-				},
-				body: JSON.stringify(payload),
-			});
-
-			if (!response.ok) {
-				throw new Error("Failed to submit deck");
-			}
-
-			sendMessage("startGame");
-			if (player) {
-				router.push("/GameBoard?player=" + player);
-			} else {
-				router.push("/GameBoard");
-			}
-
-		} catch (error) {
-			console.error(error);
+		sendMessage("startGame");
+		if (player) {
+			router.push("/GameBoard?player=" + player);
+		} else {
+			router.push("/GameBoard");
 		}
+
 	};
 
 	//------------------------STYLES------------------------//

src/app/_components/_sharedcomponents/Cards/CardTypes.ts

@@ -28,10 +28,9 @@ export interface IServerCardData {
 }
 export interface IGameCardProps {
 	card: ICardData | IServerCardData;
-	size?: "standard" | "square";
-	options: string[];
-	location: "lobby" | "gameBoard";
-	pile: "Deck" | "Sideboard" | null;
+	size?: "standard" | "square" | "lobby";
+	onClick?: () => void;
+	options?: string[];
 }
 
 export interface ILeaderBaseCardProps {

src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx

@@ -18,85 +18,53 @@ const isICardData = (card: ICardData | IServerCardData): card is ICardData => {
 const GameCard: React.FC<IGameCardProps> = ({
 	card,
 	size = "standard",
-	location = "gameBoard",
-	pile,
+	onClick,
 	options,
 }) => {
 	// const isLobbyView = path === "/lobby";
-	const isLobbyView = false;
 	const isFaceUp = true;
+
 	// Determine whether card is ICardData or IServerCardData
 	const cardData = isICardData(card) ? card : card.card;
 	const cardCounter = !isICardData(card) ? card.count : 0;
-	const { sendGameMessage, connectedDeck, setConnectedDeck } = useGame();
+	const { sendGameMessage } = useGame();
+
+	// default on click
+	const defaultClickFunction = () => {
+		if (cardData.selectable) {
+			sendGameMessage(["cardClicked", cardData.uuid]);
+		}
+	};
+
+	const handleClick = onClick ?? defaultClickFunction;
 	const cardBorderColor = (card: ICardData) => {
 		if (card.selected) return "yellow";
 		if (card.selectable) return "limegreen";
 		if (card.exhausted) return "gray";
 		return "";
 	}
 
-	// handle deck movement
-	const handleSwitch = () => {
-		const updatedDeck = {...connectedDeck};
-		const deckList = updatedDeck.deckCards || [];
-		const sideboardList = updatedDeck.sideboard || [];
-
-		// Helper function to move the card between lists
-		const moveCard = (sourceList: IServerCardData[], targetList: IServerCardData[]) => {
-			const cardIndex = sourceList.findIndex((c: IServerCardData) => c.card.id === cardData.id);
-
-			if (cardIndex !== -1) {
-				// Decrement one copy from the source card
-				sourceList[cardIndex].count -= 1;
-
-				// If count drops to zero, remove the card entirely from source
-				if (sourceList[cardIndex].count === 0) {
-					sourceList.splice(cardIndex, 1);
-				}
-
-				// Now handle the target list
-				const existingCardIndex = targetList.findIndex((c: IServerCardData) => c.card.id === cardData.id);
-
-				if (existingCardIndex !== -1) {
-					// If the card already exists in the target, just increment its count
-					targetList[existingCardIndex].count += 1;
-				} else {
-					// If the card doesn't exist in the target, add it with count = 1
-					targetList.push({ count: 1, card: { ...cardData } });
-				}
-			}
-		};
-		// Check if the card is in the deck or sideboard
-		if (pile === 'Deck') {
-			// Move from deck to sideboard
-			moveCard(deckList, sideboardList);
-		} else {
-			// Move from sideboard to deck
-			moveCard(sideboardList, deckList);
-		}
-
-		// Update the connectedDeck state
-		setConnectedDeck(updatedDeck);
-	}
-
-
 	const styles = {
 		cardStyles: {
 			borderRadius: ".38em",
-			height: size === "standard" ? "10rem" : "8rem",
-			width: size === "standard" ? "7.18rem" : "8rem",
-		},
-		cardStylesLobby: {
-			borderRadius: ".38em",
-			height: "18vh",
-			width: "6.7vw",
-			minWidth: "101px",
-			minHeight: "151px",
-			overflow: "hidden",
-			cursor: "pointer",
-			backgroundColor: "transparent",
+			...(size === "lobby"
+					? {
+						height: "18vh",
+						width: "6.7vw",
+						minWidth: "101px",
+						minHeight: "151px",
+						overflow: "hidden",
+						cursor: "pointer",
+						backgroundColor: "transparent",
+					}
+					: {
+						// For "standard" or other sizes:
+						height: size === "standard" ? "10rem" : "8rem",
+						width: size === "standard" ? "7.18rem" : "8rem",
+					}
+			),
 		},
+
 		cardContentStyle: {
 			width: "100%",
 			height: "100%",
@@ -139,13 +107,8 @@ const GameCard: React.FC<IGameCardProps> = ({
 		}
 	}
 	return (
-		<MuiCard sx={location === 'lobby' ? styles.cardStylesLobby: styles.cardStyles }
-			 onClick={location === 'lobby' ? handleSwitch : () => {
-				 console.log("Hello world")
-				 if (cardData.selectable) {
-					 sendGameMessage(["cardClicked", cardData.uuid]);
-				 }
-			 }}
+		<MuiCard sx={styles.cardStyles}
+			 onClick={handleClick}
 		>
 			{isFaceUp ? (
 				<CardContent sx={styles.cardContentStyle}>
@@ -181,4 +144,4 @@ const GameCard: React.FC<IGameCardProps> = ({
 	);
 };
 
-export default GameCard;
+export default GameCard;