#LobbyFunctions

- Fixed PR based on comments.
SWU-Karabast · Dec 29, 2024 · 69bfcc9 · 69bfcc9
1 parent 18b66e9
commit 69bfcc9
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 134 deletions.
diff --git a/src/app/_components/Lobby/LobbyTypes.ts b/src/app/_components/Lobby/LobbyTypes.ts
@@ -1,3 +1,5 @@
+import {IServerCardData} from "@/app/_components/_sharedcomponents/Cards/CardTypes";
+
 export interface IPlayersProps {
 	isLobbyView?: boolean;
 }
@@ -13,45 +15,9 @@ export interface IDeckData {
 	sideboard: IServerCardData[];
 }
 
-interface ICardSetId {
-	set: string;
-	number: number;
-}
-
-type IAspect =  'aggression' | 'command' | 'cunning' | 'heroism' | 'vigilance' | 'villainy';
-
-export interface ICardData {
-	uuid: string;
-	parentCardId?: string,
-	id?: number;
-	name?: string;
-	selected?: boolean;
-	selectable: boolean;
-	disabled?: boolean;
-	unitType?: "ground" | "space";
-	handleSelect?: () => void;
-	path?: string;
-	deckSize?: number;
-	power?: number;
-	hp?: number;
-	cost?: number;
-	exhausted?: boolean;
-	damage?: number;
-	setId: ICardSetId;
-	type: string;
-	subcards?: ICardData[];
-	aspects?: IAspect[];
-	sentinel?: boolean;
-}
-export interface IServerCardData {
-	count: number;
-	card: ICardData;
-}
-
 export interface ILobbyUserProps {
 	id: string;
 	username: string;
 	ready: boolean;
 	deck: IDeckData;
-	owner: boolean;
 }
diff --git a/src/app/_components/Lobby/SetUp/SetUp.tsx b/src/app/_components/Lobby/SetUp/SetUp.tsx
@@ -20,7 +20,6 @@ const SetUp: React.FC = ({
 
 	// find the user
 	const connectedUser = lobbyState ? lobbyState.users.find((u: ILobbyUserProps) => u.id === connectedPlayer) : null;
-
 	// setup chat mechanics
 	const [chatMessage, setChatMessage] = useState("");
 	const handleChatSubmit = () => {
@@ -85,7 +84,7 @@ const SetUp: React.FC = ({
 	return (
 		<Box sx={boxContainer}>
 			<Typography sx={lobbyTextStyle}>KARABAST</Typography>
-			<SetUpCard owner={connectedUser ? connectedUser.owner : false} readyStatus={connectedUser ? connectedUser.ready : false}/>
+			<SetUpCard owner={lobbyState ? lobbyState.lobbyOwner === connectedPlayer : false} readyStatus={connectedUser ? connectedUser.ready : false}/>
 			<Card sx={mainCardStyle}>
 				<Chat
 					chatHistory={lobbyState ? lobbyState.gameChat : []}

diff --git a/src/app/_components/Lobby/_subcomponents/SetUpCard/SetUpCard.tsx b/src/app/_components/Lobby/_subcomponents/SetUpCard/SetUpCard.tsx
@@ -8,15 +8,15 @@ import {
 	Box, CardActions,
 } from "@mui/material";
 import { useGame } from "@/app/_contexts/Game.context";
-import { useRouter, useSearchParams } from "next/navigation"
+import { useRouter } from "next/navigation"
 import {ILobbyUserProps, ISetUpProps} from "@/app/_components/Lobby/LobbyTypes";
 
 const SetUpCard: React.FC<ISetUpProps> = ({
   readyStatus,
   owner,
 }) => {
 
-	const { sendMessage, lobbyState, connectedPlayer, sendLobbyMessage, gameState } = useGame();
+	const { sendMessage, lobbyState, connectedPlayer, sendLobbyMessage } = useGame();
 	const opponentUser = lobbyState ? lobbyState.users.find((u: ILobbyUserProps) => u.id !== connectedPlayer) : null;
 	// Extract the player from the URL query params
 	const router = useRouter();
@@ -28,89 +28,83 @@ const SetUpCard: React.FC<ISetUpProps> = ({
 	};
 
 	//------------------------STYLES------------------------//
-	const setUpCard = {
-		paddingLeft: "20px",
-		paddingRight: "20px",
-	}
-	const readyImg = {
-		width: "15px",
-		height: "15px",
-		backgroundImage: `url(${readyStatus ? '/ready.png' : '/notReady.png'})`,
-		backgroundSize: "contain",
-		backgroundRepeat: "no-repeat",
-		marginTop:"7px",
-		marginRight:"5px"
-	}
-
-	const cardStyle = {
-		height: "fit-content",
-		background: "#18325199",
-		pb: "4vh",
-		backgroundColor: "#000000E6",
-		backdropFilter: "blur(20px)",
-	};
-
-	const textFieldStyle = {
-		backgroundColor: "#fff2",
-		"& .MuiInputBase-input": {
-			color: "#fff",
+	const styles = {
+		setUpCard: {
+			paddingLeft: "20px",
+			paddingRight: "20px",
 		},
-		"& .MuiInputBase-input::placeholder": {
-			color: "#fff",
+		readyImg: {
+			width: "15px",
+			height: "15px",
+			backgroundImage: `url(${readyStatus ? '/ready.png' : '/notReady.png'})`,
+			backgroundSize: "contain",
+			backgroundRepeat: "no-repeat",
+			marginTop: "7px",
+			marginRight: "5px"
 		},
-	};
-
-	const boxStyle = {
-		display: "flex",
-		justifyContent: "flex-end",
-		mt: "1em",
-	};
-
-	const buttonStyle = {
-		backgroundColor: "#292929",
-		minWidth: "9rem",
-	};
-
-	const initiativeCardStyle = {
-		height: "15vh",
-		minHeight: "8.5rem",
-		background: "#18325199",
-		display: "flex",
-		paddingLeft: "30px",
-		paddingRight: "30px",
-		flexDirection: "column",
-		justifyContent: "center",
-	};
-
-	const buttonsContainerStyle = {
-		display: "flex",
-		justifyContent: "center",
-		width: "100%",
-	};
-
-	const setUpTextStyle = {
-		fontSize: "1.5em",
-		fontWeight: "800",
-		color: "white",
-		alignSelf: "flex-start",
-	};
-
+		cardStyle: {
+			height: "fit-content",
+			background: "#18325199",
+			pb: "4vh",
+			backgroundColor: "#000000E6",
+			backdropFilter: "blur(20px)",
+		},
+		textFieldStyle: {
+			backgroundColor: "#fff2",
+			"& .MuiInputBase-input": {
+				color: "#fff",
+			},
+			"& .MuiInputBase-input::placeholder": {
+				color: "#fff",
+			},
+		},
+		boxStyle: {
+			display: "flex",
+			justifyContent: "flex-end",
+			mt: "1em",
+		},
+		buttonStyle: {
+			backgroundColor: "#292929",
+			minWidth: "9rem",
+		},
+		initiativeCardStyle: {
+			height: "15vh",
+			minHeight: "8.5rem",
+			background: "#18325199",
+			display: "flex",
+			paddingLeft: "30px",
+			paddingRight: "30px",
+			flexDirection: "column",
+			justifyContent: "center",
+		},
+		buttonsContainerStyle: {
+			display: "flex",
+			justifyContent: "center",
+			width: "100%",
+		},
+		setUpTextStyle: {
+			fontSize: "1.5em",
+			fontWeight: "800",
+			color: "white",
+			alignSelf: "flex-start",
+		},
+	}
 	return (
-		<Card sx={initiativeCardStyle}>
-			<Typography variant="h3" sx={setUpTextStyle}>
+		<Card sx={styles.initiativeCardStyle}>
+			<Typography variant="h3" sx={styles.setUpTextStyle}>
 				Set Up
 			</Typography>
 			{!opponentUser ? (
 				// If opponent is null, show "Waiting for an opponent" UI
-				<CardContent sx={setUpCard}>
+				<CardContent sx={styles.setUpCard}>
 					<Box sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
 						<Typography variant="h6" sx={{ marginTop: "6px" }}>
 							Waiting for an opponent to join
 						</Typography>
 					</Box>
-					<Box sx={boxStyle}>
-						<TextField fullWidth sx={textFieldStyle} placeholder="https://properlink.com" />
-						<Button variant="contained" sx={buttonStyle}>Copy Invite Link</Button>
+					<Box sx={styles.boxStyle}>
+						<TextField fullWidth sx={styles.textFieldStyle} placeholder="https://properlink.com" />
+						<Button variant="contained" sx={styles.buttonStyle}>Copy Invite Link</Button>
 					</Box>
 				</CardContent>
 			) : (
@@ -120,12 +114,12 @@ const SetUpCard: React.FC<ISetUpProps> = ({
 						/* Both are ready */
 						<>
 							<Box sx={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
-								<Box sx={readyImg} />
+								<Box sx={styles.readyImg} />
 								<Typography variant="h6" sx={{ marginTop: "6px" }}>
 									Both players are ready.
 								</Typography>
 							</Box>
-							<CardActions sx={buttonsContainerStyle}>
+							<CardActions sx={styles.buttonsContainerStyle}>
 								<Button variant="contained" onClick={() => handleStartGame()}>
 									Start Game
 								</Button>
@@ -139,8 +133,8 @@ const SetUpCard: React.FC<ISetUpProps> = ({
 						</>
 					) : (
 						/* Not both ready — show toggle-ready button */
-						<CardActions sx={buttonsContainerStyle}>
-							<Box sx={readyImg} />
+						<CardActions sx={styles.buttonsContainerStyle}>
+							<Box sx={styles.readyImg} />
 							<Button
 								variant="contained"
 								onClick={() => sendLobbyMessage(["setReadyStatus", !readyStatus])}

diff --git a/src/app/_components/_sharedcomponents/Chat/Chat.tsx b/src/app/_components/_sharedcomponents/Chat/Chat.tsx
@@ -93,25 +93,16 @@ const Chat: React.FC<IChatProps> = ({
 				<Typography sx={titleStyle}>Chat</Typography>
 				<Divider sx={dividerStyle} />
 				<Box sx={chatBoxStyle}>
-					{/* If there are no messages, show a default */}
-					{(!chatHistory.messages || chatHistory.messages.length === 0) ? (
-						<Box>
-							<Typography sx={messageTextStyle}>Player 1 has connected.</Typography>
-							<Typography sx={messageTextStyle}>Player 2 has connected.</Typography>
-						</Box>
-					) : (
-						chatHistory.messages.map((chatEntry, index) => {
-							// [ { name: 'Order66', email: null }, 'test' ]
-							// Extract the sender (an object with name)
-							const [senderObject, _, text] = chatEntry.message;
-
-							return (
-								<Typography key={index} sx={messageTextStyle}>
-									{senderObject.name}: {text}
-								</Typography>
-							);
-						})
-					)}
+					{chatHistory.messages.map((chatEntry, index) => {
+						// [ { name: 'Order66', email: null }, 'test', 'some message text' ]
+						// Extract the sender (an object with name) and the text
+						const [senderObject, _, text] = chatEntry.message;
+						return (
+							<Typography key={index} sx={messageTextStyle}>
+								{senderObject.name}: {text}
+							</Typography>
+						);
+					})}
 				</Box>
 			</Box>