# Lobby-Connections

src/app/_components/HomePage/PublicGames/PublicGames.tsx

@@ -30,13 +30,10 @@ const PublicGames: React.FC<PublicGamesProps> = ({ format }) => {
 				<Typography variant="h3">{format}</Typography>
 				<Divider sx={styles.divider} />
 				<JoinableGame />
-				<JoinableGame />
-				<JoinableGame />
 				<Typography variant="h3">
 					Request-Undo {format}
 				</Typography>
 				<Divider sx={styles.divider} />
-				<JoinableGame />
 				<GamesInProgress />
 			</CardContent>
 		</Card>

src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx

@@ -1,8 +1,55 @@
-import React from "react";
+import React, { useEffect, useState} from "react";
 import { Box, Button, Typography } from "@mui/material";
+import { usePathname, useRouter } from "next/navigation";
+interface Lobby {
+	id: string;
+	name: string;
+}
 
 const JoinableGame: React.FC = () => {
-	const randomGameId = Math.floor(Math.random() * 10000);
+	//const randomGameId = Math.floor(Math.random() * 10000);
+	const router = useRouter();
+	const [lobbies, setLobbies] = useState<Lobby[]>([]);
+	useEffect(() => {
+		// Fetch unfilled lobbies from the server
+		const fetchLobbies = async () => {
+			try {
+				const response = await fetch('http://localhost:9500/api/available-lobbies');
+				if (!response.ok) {
+					throw new Error(`Error fetching lobbies: ${response.statusText}`);
+				}
+				const data: Lobby[] = await response.json();
+				setLobbies(data);
+			} catch (error) {
+				console.error('Error fetching lobbies:', error);
+			}
+		};
+
+		fetchLobbies();
+	}, []);
+
+	const joinLobby = async (lobbyId: string) => {
+		try {
+			const response = await fetch('http://localhost:9500/api/join-lobby', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+				},
+				body: JSON.stringify({ lobbyId, userId: 'ThisIsTheWay' }),
+			});
+
+			if (!response.ok) {
+				const errorData = await response.json();
+				console.error('Error joining lobby:', errorData.message);
+				alert(errorData.message);
+				return;
+			}
+			alert('Successfully joined the lobby');
+			router.push("/lobby?player=ThisIsTheWay");
+		} catch (error) {
+			console.error('Error joining lobby:', error);
+		}
+	};
 
 	//------------------------STYLES------------------------//
 
@@ -21,10 +68,14 @@ const JoinableGame: React.FC = () => {
 	};
 
 	return (
-		<Box sx={styles.box}>
-			<Typography variant="body1" sx={styles.matchType}>Game #{randomGameId}</Typography>
-			<Button>Join Game</Button>
-		</Box>
+		<>
+			{lobbies.map((lobby) => (
+				<Box sx={styles.box} key={lobby.id}>
+					<Typography variant="body1" sx={styles.matchType}>{lobby.name}</Typography>
+					<Button onClick={() => joinLobby(lobby.id)}>Join Game</Button>
+				</Box>
+			))}
+		</>
 	);
 };
 

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

@@ -8,7 +8,7 @@ import Chat from "@/app/_components/_sharedcomponents/Chat/Chat";
 import GameLinkCard from "../_subcomponents/GameLinkCard/GameLinkCard";
 import { useGame } from "@/app/_contexts/Game.context";
 import { SetUpProps } from "../LobbyTypes";
-import { useRouter } from "next/navigation"
+import { useRouter, useSearchParams } from "next/navigation"
 
 const SetUp: React.FC<SetUpProps> = ({
 	chatHistory,
@@ -19,11 +19,18 @@ const SetUp: React.FC<SetUpProps> = ({
 
 	const { sendMessage } = useGame();
 	const router = useRouter();
+	const searchParams = useSearchParams();
 
+	// Extract the player from the URL query params
+	const player = searchParams.get("player");
 
 	const handleStartGame = () => {
 		sendMessage("startGame");
-		router.push("/GameBoard");
+		if (player){
+			router.push("/GameBoard?player=" + player);
+		}else {
+			router.push("/GameBoard");
+		}
 	}
 
 	//------------------------STYLES------------------------//