#LobbyDesign

- Added changes for the comments on the PR.
SWU-Karabast · Dec 18, 2024 · d46b2f7 · d46b2f7
1 parent b2721d6
commit d46b2f7
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 63 deletions.
diff --git a/src/app/_components/Gameboard/Board/Board.tsx b/src/app/_components/Gameboard/Board/Board.tsx
@@ -4,7 +4,7 @@ import UnitsBoard from "../_subcomponents/UnitsBoard";
 import { IBoardProps } from "@/app/_components/Gameboard/GameboardTypes";
 import {useGame} from "@/app/_contexts/Game.context";
 import LeaderBaseCard from "@/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard";
-import { Box } from "@mui/material";
+import {Box, Typography} from "@mui/material";
 import CardActionTray from "@/app/_components/Gameboard/_subcomponents/PlayerTray/CardActionTray";
 
 const Board: React.FC<IBoardProps> = ({
@@ -47,6 +47,23 @@ const Board: React.FC<IBoardProps> = ({
 		flexGrow: 1,
 		width: "100%"
 	};
+	//the title of the deck i believe
+	const redBoxStyle = {
+		position: "absolute",
+		bottom: "10px",
+		left: "50%",
+		transform: "translateX(-50%)",
+		backgroundColor: "red",
+		borderRadius: "4px",
+		p: "4px 8px",
+	};
+
+	const redBoxTypographyStyle = {
+		color: "white",
+		fontFamily: "var(--font-barlow), sans-serif",
+		fontWeight: "600",
+		fontSize: "1em",
+	};
 	return (
 		<Grid container sx={{ height: "64.18%" }}>
 			<Grid container size={5} sx={leftColumnStyle}>

diff --git a/src/app/_components/Lobby/Players/Players.tsx b/src/app/_components/Lobby/Players/Players.tsx
@@ -74,15 +74,41 @@ const Players: React.FC<IPlayersProps> = ({ isLobbyView }) => {
 	};
 	const rowStyle = {
 		flexGrow: 1,
-		width: "100%"
+		width: "100%",
+		alignItems: "center",
+		justifyContent: "center",
+		display: "flex"
 	};
+	const titleTypographyStyle = {
+		fontFamily: "var(--font-barlow), sans-serif",
+		fontWeight: "600",
+		fontSize: "1.5em",
+		marginBottom: isLobbyView ? 0 : "0.5em",
+		textAlign: "left",
+		color: "white",
+	};
+	const titleTypographyStyleOpponent = {
+		fontFamily: "var(--font-barlow), sans-serif",
+		fontWeight: "600",
+		fontSize: "1.5em",
+		marginBottom: "10px",
+		textAlign: "left" as const,
+		color: "white",
+		opacity: "15%",
+	}
 	return (
 		<Card sx={cardStyle}>
 			<Box sx={{ width: "100%" }}>
 				<Typography sx={typographyStyle}>Players</Typography>
 				<Grid container direction="column" sx={containerStyle}>
 					<Grid sx={rowStyle}>
 						<Box sx={lobbyLeaderBaseContainer}>
+							<Typography
+								variant="subtitle1"
+								sx={titleTypographyStyle}
+							>
+								{connectedPlayer}
+							</Typography>
 							<LeaderBaseCard
 								variant="leader"
 								isLobbyView={true}
@@ -94,6 +120,12 @@ const Players: React.FC<IPlayersProps> = ({ isLobbyView }) => {
 					</Grid>
 					<Grid sx={rowStyle}>
 						<Box sx={lobbyLeaderBaseContainer}>
+							<Typography
+								variant="subtitle1"
+								sx={titleOpponent === undefined ? titleTypographyStyleOpponent : titleTypographyStyle}
+							>
+								{titleOpponent === undefined ? "Opponent" : titleOpponent}
+							</Typography>
 							<LeaderBaseCard
 								variant="leader"
 								isLobbyView={isLobbyView}

diff --git a/src/app/_components/Lobby/SetUp/SetUp.tsx b/src/app/_components/Lobby/SetUp/SetUp.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import {
 	Card,
 	Typography,
@@ -10,8 +11,6 @@ import GameLinkCard from "../_subcomponents/GameLinkCard/GameLinkCard";
 import { useGame } from "@/app/_contexts/Game.context";
 import { ISetUpProps } from "../LobbyTypes";
 import { useRouter, useSearchParams } from "next/navigation"
-import React from "react";
-
 
 const SetUp: React.FC<ISetUpProps> = ({
 	chatHistory,

diff --git a/src/app/_components/_sharedcomponents/Cards/CardTypes.ts b/src/app/_components/_sharedcomponents/Cards/CardTypes.ts
@@ -31,6 +31,7 @@ export interface IGameCardProps {
 	size?: "standard" | "square";
 	onClick?: () => void;
 	variant?: "lobby" | "gameboard";
+	disabled?: boolean;
 }
 
 export interface ILeaderBaseCardProps {
@@ -40,4 +41,5 @@ export interface ILeaderBaseCardProps {
 	handleSelect?: () => void;
 	title?: string;
 	card: ICardData;
+	disabled?: boolean;
 }
diff --git a/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx b/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx
@@ -20,6 +20,7 @@ const GameCard: React.FC<IGameCardProps> = ({
 	size = "standard",
 	onClick,
 	variant,
+	disabled = false,
 }) => {
 	// const isLobbyView = path === "/lobby";
 	const isFaceUp = true;
@@ -49,8 +50,8 @@ const GameCard: React.FC<IGameCardProps> = ({
 			borderRadius: ".38em",
 			...(variant === "lobby"
 					? {
-						height: "18vh",
-						width: "6.7vw",
+						height: "13rem",
+						width: "10rem",
 						minWidth: "101px",
 						minHeight: "151px",
 						overflow: "hidden",
@@ -102,13 +103,14 @@ const GameCard: React.FC<IGameCardProps> = ({
 
 		},
 		numberStyle:{
-			fontSize: "1.5vw",
+			fontSize: "2rem",
 			fontWeight: "700",
 		}
 	}
 	return (
 		<MuiCard sx={styles.cardStyles}
-			 onClick={handleClick}
+
+			 onClick={disabled ? undefined : handleClick}
 		>
 			{isFaceUp ? (
 				<CardContent sx={styles.cardContentStyle}>

diff --git a/src/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard.tsx b/src/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard.tsx
@@ -13,11 +13,12 @@ import { s3CardImageURL } from "@/app/_utils/s3Utils";
 
 
 const LeaderBaseCard: React.FC<ILeaderBaseCardProps> = ({
-                                                            variant,
-                                                            isLobbyView = false,
-                                                            title,
-                                                            card
-                                                        }) => {
+    variant,
+    isLobbyView = false,
+    title,
+    card,
+    disabled = false,
+}) => {
     const cardBorderColor = (card: ICardData) => {
         if (!card) return "";
         if (card.selected) return "yellow";
@@ -76,24 +77,6 @@ const LeaderBaseCard: React.FC<ILeaderBaseCardProps> = ({
         color: "hotpink",
     };
 
-    const titleTypographyStyle = {
-        fontFamily: "var(--font-barlow), sans-serif",
-        fontWeight: "600",
-        fontSize: "1.5em",
-        marginBottom: isLobbyView ? 0 : "0.5em",
-        textAlign: "left",
-        color: "white",
-    };
-    const titleTypographyStyleOpponent = {
-        fontFamily: "var(--font-barlow), sans-serif",
-        fontWeight: "600",
-        fontSize: "1.5em",
-        marginBottom: "10px",
-        textAlign: "left" as const,
-        color: "white",
-        opacity: "15%",
-    }
-
     //the title of the deck i believe
     const redBoxStyle = {
         position: "absolute",
@@ -116,43 +99,35 @@ const LeaderBaseCard: React.FC<ILeaderBaseCardProps> = ({
 
     return (
         <Box>
-            {/* Show title above the card if in lobby view and variant is leader */}
-            {variant === "leader" && isLobbyView && title && (
-                <Typography
-                    variant="subtitle1"
-                    sx={title === undefined ? titleTypographyStyleOpponent : titleTypographyStyle}
-                >
-                    {title === undefined ? "Opponent" : title}
-                </Typography>
-            )}
-
-            {isLobbyView ? (
-                <Card sx={cardStyleLobby}></Card>
-            ) : (
-                <Card
-                    sx={cardStyle}
-                    onClick={() => {
-                        if (card.selectable) {
-                            sendGameMessage(["cardClicked", card.uuid]);
-                        }
-                    }}
-                >
+            <Card
+                sx={isLobbyView ? cardStyleLobby : cardStyle}
+                onClick={() => {
+                    // Only allow clicking if not lobby view and the card is selectable
+                    if (!disabled) {
+                        sendGameMessage(["cardClicked", card.uuid]);
+                    }
+                }}
+            >
+                {/* Only show card content if not in lobby view */}
+                {!isLobbyView && card && (
                     <CardContent>
                         <Box sx={{ display: "flex", justifyContent: "end" }}>
-                            <Typography variant="body1" sx={damageStyle}>{card.damage}</Typography>
+                            <Typography variant="body1" sx={damageStyle}>
+                                {card.damage}
+                            </Typography>
                         </Box>
                     </CardContent>
+                )}
 
-                    {/* Show title inside a red box at the bottom if not in lobby view and variant is leader */}
-                    {variant === "leader" && !isLobbyView && title && (
-                        <Box sx={redBoxStyle}>
-                            <Typography variant="body2" sx={redBoxTypographyStyle}>
-                                {title}
-                            </Typography>
-                        </Box>
-                    )}
-                </Card>
-            )}
+                {/* Show title inside a red box only if variant is leader and not lobby view */}
+                {variant === "leader" && !isLobbyView && title && (
+                    <Box sx={redBoxStyle}>
+                        <Typography variant="body2" sx={redBoxTypographyStyle}>
+                            {title}
+                        </Typography>
+                    </Box>
+                )}
+            </Card>
         </Box>
     );
 };