From 2ac21335ca322f5288731c8c8dda057411b68e5a Mon Sep 17 00:00:00 2001
From: Matevz <matevz.ogrinc@ijs.si>
Date: Sat, 30 Nov 2024 19:18:22 +0100
Subject: [PATCH 1/2] # Lobby-Connections - Displaying lobbies that are
 joinable - being able to click and join a lobby and then a game

---
 .../HomePage/PublicGames/PublicGames.tsx      |  3 -
 .../JoinableGame/JoinableGame.tsx             | 63 +++++++++++++++++--
 src/app/_components/Lobby/SetUp/SetUp.tsx     | 11 +++-
 3 files changed, 66 insertions(+), 11 deletions(-)

diff --git a/src/app/_components/HomePage/PublicGames/PublicGames.tsx b/src/app/_components/HomePage/PublicGames/PublicGames.tsx
index dfd50e83..4e094abb 100644
--- a/src/app/_components/HomePage/PublicGames/PublicGames.tsx
+++ b/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>
diff --git a/src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx b/src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx
index bacd238b..caea4762 100644
--- a/src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx
+++ b/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/unfilled-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>
+			))}
+		</>
 	);
 };
 
diff --git a/src/app/_components/Lobby/SetUp/SetUp.tsx b/src/app/_components/Lobby/SetUp/SetUp.tsx
index bef1d584..ddccacd5 100644
--- a/src/app/_components/Lobby/SetUp/SetUp.tsx
+++ b/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------------------------//

From a0c311e7101105f2c26e8353c478684df0090433 Mon Sep 17 00:00:00 2001
From: Matevz <matevz.ogrinc@ijs.si>
Date: Mon, 2 Dec 2024 17:40:09 +0100
Subject: [PATCH 2/2] # Lobby-Connections - Fixed comment

---
 .../HomePage/_subcomponents/JoinableGame/JoinableGame.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx b/src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx
index caea4762..98cfe78b 100644
--- a/src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx
+++ b/src/app/_components/HomePage/_subcomponents/JoinableGame/JoinableGame.tsx
@@ -14,7 +14,7 @@ const JoinableGame: React.FC = () => {
 		// Fetch unfilled lobbies from the server
 		const fetchLobbies = async () => {
 			try {
-				const response = await fetch('http://localhost:9500/api/unfilled-lobbies');
+				const response = await fetch('http://localhost:9500/api/available-lobbies');
 				if (!response.ok) {
 					throw new Error(`Error fetching lobbies: ${response.statusText}`);
 				}