#LobbyDesign

- Cleaned up the code for PR
SWU-Karabast · Dec 17, 2024 · 76727f8 · 76727f8
1 parent 20cd5d7
commit 76727f8
Show file tree

Hide file tree

Showing 9 changed files with 144 additions and 268 deletions.
diff --git a/src/app/_components/Gameboard/Board/Board.tsx b/src/app/_components/Gameboard/Board/Board.tsx
@@ -1,12 +1,25 @@
 import React from "react";
 import Grid from "@mui/material/Grid2";
 import UnitsBoard from "../_subcomponents/UnitsBoard";
-import LeaderBaseBoard from "../../_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard";
 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";
 
 const Board: React.FC<IBoardProps> = ({
 	sidebarOpen,
 }) => {
+	const { gameState, connectedPlayer } = useGame();
+
+	const titleOpponent =
+		connectedPlayer === "ThisIsTheWay" ? "Order66" : "ThisIsTheWay";
+
+	const playerLeader = gameState?.players[connectedPlayer].leader;
+	const playerBase = gameState?.players[connectedPlayer].base;
+	const opponentLeader = gameState?.players[titleOpponent].leader;
+	const opponentBase = gameState?.players[titleOpponent].base;
+
+
 	//----------------Styles----------------//
 	const leftColumnStyle = {
 		justifyContent: "flex-end",
@@ -17,7 +30,22 @@ const Board: React.FC<IBoardProps> = ({
 		justifyContent: "flex-start",
 		alignItems: "center",
 	};
-
+	const containerStyle = {
+		height: "100%",
+		width: "100%",
+		justifyContent: "center",
+		alignItems: "center"
+	};
+	const lobbyLeaderBaseContainer = {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		width: "100%",
+	}
+	const rowStyle = {
+		flexGrow: 1,
+		width: "100%"
+	};
 	return (
 		<Grid container sx={{ height: "64.18%" }}>
 			<Grid container size={5} sx={leftColumnStyle}>
@@ -26,7 +54,32 @@ const Board: React.FC<IBoardProps> = ({
 				/>
 			</Grid>
 			<Grid container size={2}>
-				<LeaderBaseBoard />
+				<Grid sx={rowStyle}>
+					<Grid container direction="column" sx={containerStyle}>
+						<Box sx={lobbyLeaderBaseContainer}>
+							<LeaderBaseCard
+								variant="leader"
+								title={titleOpponent}
+								isLobbyView={false}
+								card={opponentLeader}
+							/>
+							<LeaderBaseCard variant="base" isLobbyView={false} card={opponentBase}></LeaderBaseCard>
+						</Box>
+					</Grid>
+				</Grid>
+				<Grid sx={rowStyle}>
+					<Grid container direction="column" sx={containerStyle}>
+						<Box sx={lobbyLeaderBaseContainer}>
+							<LeaderBaseCard
+								variant="leader"
+								isLobbyView={false}
+								title={connectedPlayer}
+								card={playerLeader}
+							/>
+							<LeaderBaseCard variant="base" isLobbyView={false} card={playerBase}></LeaderBaseCard>
+						</Box>
+					</Grid>
+				</Grid>
 			</Grid>
 			<Grid container size={5} sx={rightColumnStyle}>
 				<UnitsBoard

diff --git a/src/app/_components/Gameboard/_subcomponents/PlayerTray/PlayerHand.tsx b/src/app/_components/Gameboard/_subcomponents/PlayerTray/PlayerHand.tsx
@@ -60,7 +60,7 @@ const PlayerHand: React.FC<IPlayerHandProps> = ({
 					{cards.map((card) => (
 						<Box key={card.uuid} sx={{ flex: "0 0 auto" }}>
 							<GameCard
-								card={card} options={[]} location={"gameBoard"} pile={null}							/>
+								card={card} options={[]}/>
 						</Box>
 					))}
 				</Box>

diff --git a/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx b/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx
@@ -55,7 +55,7 @@ const UnitsBoard: React.FC<IUnitsBoardProps> = ({
 				<Grid sx={opponentGridStyle}>
 					{opponentUnits.map((card: ICardData) => (
 						<Box key={card.id} sx={{ flex: "0 0 auto" }}>
-							<GameCard card={card} size="square" options={[]} location={"gameBoard"} pile={null}/>
+							<GameCard card={card} size="square" options={[]}/>
 						</Box>
 					))}
 				</Grid>
@@ -64,7 +64,7 @@ const UnitsBoard: React.FC<IUnitsBoardProps> = ({
 				<Grid sx={playerGridStyle}>
 					{playerUnits.map((card: ICardData) => (
 						<Box key={card.id} sx={{ flex: "0 0 auto" }}>
-							<GameCard card={card} size="square" options={[]} location={"gameBoard"} pile={null} />
+							<GameCard card={card} size="square" options={[]}/>
 						</Box>
 					))}
 				</Grid>

diff --git a/src/app/_components/Lobby/Players/Players.tsx b/src/app/_components/Lobby/Players/Players.tsx
@@ -1,11 +1,25 @@
 // Players.tsx
 import React from "react";
 import { Card, Box, Typography } from "@mui/material";
-import LeaderBaseBoard from "../../_sharedcomponents/LeaderBaseBoard/LeaderBaseBoard";
+import Grid from "@mui/material/Grid2";
 import { IPlayersProps } from "../LobbyTypes";
+import LeaderBaseCard from "@/app/_components/_sharedcomponents/Cards/LeaderBaseCard/LeaderBaseCard";
+import {useGame} from "@/app/_contexts/Game.context";
 
 const Players: React.FC<IPlayersProps> = ({ isLobbyView }) => {
 	//------------------------STYLES------------------------//
+	const { connectedPlayer, connectedDeck } = useGame();
+
+	const titleOpponent =
+		connectedPlayer === "ThisIsTheWay" ? "Order66" : "ThisIsTheWay";
+	let playerLeader = null;
+	let playerBase = null;
+
+	// we get the connected deck
+	if (connectedDeck) {
+		playerLeader = connectedDeck.leader[0].card;
+		playerBase = connectedDeck.base[0].card;
+	}
 
 	const cardStyle = {
 		borderRadius: "1.1em",
@@ -46,11 +60,50 @@ const Players: React.FC<IPlayersProps> = ({ isLobbyView }) => {
 		mb: "0px"
 	};
 
+	const lobbyLeaderBaseContainer = {
+		display: "flex",
+		flexDirection: "column",
+		alignItems: "center",
+		width: "100%",
+	}
+	const containerStyle = {
+		height: "100%",
+		width: "100%",
+		justifyContent: "center",
+		alignItems: "center"
+	};
+	const rowStyle = {
+		flexGrow: 1,
+		width: "100%"
+	};
 	return (
 		<Card sx={cardStyle}>
 			<Box sx={{ width: "100%" }}>
 				<Typography sx={typographyStyle}>Players</Typography>
-				<LeaderBaseBoard isLobbyView={isLobbyView} />
+				<Grid container direction="column" sx={containerStyle}>
+					<Grid sx={rowStyle}>
+						<Box sx={lobbyLeaderBaseContainer}>
+							<LeaderBaseCard
+								variant="leader"
+								isLobbyView={true}
+								title={connectedPlayer}
+								card={playerLeader}
+							/>
+							<LeaderBaseCard variant="base" isLobbyView={true} card={playerBase}></LeaderBaseCard>
+						</Box>
+					</Grid>
+					<Grid sx={rowStyle}>
+						<Box sx={lobbyLeaderBaseContainer}>
+							<LeaderBaseCard
+								variant="leader"
+								isLobbyView={isLobbyView}
+								title={titleOpponent}
+								card={playerLeader}
+							/>
+							<LeaderBaseCard variant="base" isLobbyView={isLobbyView} card={playerBase}></LeaderBaseCard>
+						</Box>
+					</Grid>
+				</Grid>
 			</Box>
 		</Card>
 	);

diff --git a/src/app/_components/_sharedcomponents/Cards/BaseCard/BaseCard.tsx b/src/app/_components/_sharedcomponents/Cards/BaseCard/BaseCard.tsx