Che bato/lobby design (#26)

- Divided the LeaderBaseCard to LeaderCard and BaseCard for more flexability - Changed the design of the lobby to be similar to designs - Added counter to the gameCards so we can see the amount of a certain card. - Added Sideboard design and functionality to lobby. - Changed the design of the leaders and base for the lobby. - Changed how the Chat and Setup column looks in the lobby. - Added API call to the server to update the deck information for the game (sideboarding). - Added resizing of cards and elements in the lobby to support smaller screens.
SWU-Karabast · Dec 18, 2024 · 9c47da1 · 9c47da1
1 parent 2b07569
commit 9c47da1
Show file tree

Hide file tree

Showing 20 changed files with 640 additions and 406 deletions.
diff --git a/public/counterIcon.svg b/public/counterIcon.svg
diff --git a/src/app/_components/Gameboard/Board/Board.tsx b/src/app/_components/Gameboard/Board/Board.tsx
@@ -1,12 +1,26 @@
 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, Typography} from "@mui/material";
+import CardActionTray from "@/app/_components/Gameboard/_subcomponents/PlayerTray/CardActionTray";
 
 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 +31,39 @@ 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%"
+	};
+	//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}>
@@ -26,7 +72,33 @@ 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>
+				<CardActionTray />
+				<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/GameboardTypes.ts b/src/app/_components/Gameboard/GameboardTypes.ts
@@ -55,10 +55,6 @@ export interface IBasicPromptProps {
 	handleBasicPromptToggle: () => void;
 }
 
-export interface ICardAreaProps {
-	cards: ICardData[];
-}
-
 export interface IUnitsBoardProps {
 	sidebarOpen: boolean;
 	arena: string;

diff --git a/src/app/_components/Gameboard/_subcomponents/Overlays/ResourcesOverlay/ResourcesOverlay.tsx b/src/app/_components/Gameboard/_subcomponents/Overlays/ResourcesOverlay/ResourcesOverlay.tsx
@@ -10,17 +10,25 @@ import {
 	IconButton,
 } from "@mui/material";
 import { Close } from "@mui/icons-material";
-import CardArea from "../../../../_sharedcomponents/CardArea/CardArea";
+import { ICardData } from "@/app/_components/_sharedcomponents/Cards/CardTypes";
 import { IResourcesOverlayProps } from "@/app/_components/Gameboard/GameboardTypes";
 import { useGame } from "@/app/_contexts/Game.context";
+import GameCard from "@/app/_components/_sharedcomponents/Cards/GameCard/GameCard";
 
 const ResourcesOverlay: React.FC<IResourcesOverlayProps> = ({
 	isModalOpen,
 	handleModalToggle,
 }) => {
 
 	const { gameState, connectedPlayer } = useGame();
-
+	const mainContainerStyle = {
+		display: "flex",
+		flexWrap: "wrap",
+		gap: "1em",
+		p: "1em",
+		justifyContent: "center",
+		textWrap: "wrap",
+	};
 	return (
 		<Modal
 			open={isModalOpen}
@@ -49,8 +57,14 @@ const ResourcesOverlay: React.FC<IResourcesOverlayProps> = ({
 					<Typography variant="caption" color="#fff">
 						Your Resources
 					</Typography>
-
-					<CardArea cards={gameState.players[connectedPlayer].cardPiles["resources"]} />
+					<Box sx={mainContainerStyle}>
+						{gameState.players[connectedPlayer].cardPiles["resources"].map((card: ICardData) => (
+							<GameCard
+								key={card.uuid}
+								card={card}
+							/>
+						))}
+					</Box>
 				</CardContent>
 				<Box
 					sx={{

diff --git a/src/app/_components/Gameboard/_subcomponents/PlayerTray/PlayerHand.tsx b/src/app/_components/Gameboard/_subcomponents/PlayerTray/PlayerHand.tsx
@@ -60,8 +60,7 @@ const PlayerHand: React.FC<IPlayerHandProps> = ({
 					{cards.map((card) => (
 						<Box key={card.uuid} sx={{ flex: "0 0 auto" }}>
 							<GameCard
-								card={card}
-							/>
+								card={card}/>
 						</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" />
+							<GameCard card={card} size="square" variant={'gameboard'}/>
 						</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" />
+							<GameCard card={card} size="square" variant={'gameboard'}/>
 						</Box>
 					))}
 				</Grid>

diff --git a/src/app/_components/Lobby/Deck/Deck.tsx b/src/app/_components/Lobby/Deck/Deck.tsx
@@ -1,8 +1,9 @@
 import React from "react";
-import { Card, Box, Typography } from "@mui/material";
-import CardArea from "../../_sharedcomponents/CardArea/CardArea";
+import {Card, Box, Typography, Divider} from "@mui/material";
+import { ICardData, IServerCardData } from "@/app/_components/_sharedcomponents/Cards/CardTypes";
 import { useDragScroll } from "@/app/_utils/useDragScroll";
-
+import {useGame} from "@/app/_contexts/Game.context";
+import GameCard from "@/app/_components/_sharedcomponents/Cards/GameCard/GameCard";
 
 const Deck: React.FC = () => {
 	// Use the custom hook with horizontal or vertical scrolling as required
@@ -15,24 +16,28 @@ const Deck: React.FC = () => {
 		handleTouchMove,
 		handleTouchEnd,
 	} = useDragScroll("vertical");
-
 	//------------------------STYLES------------------------//
-
 	const cardStyle = {
 		borderRadius: "1.1em",
+		pt: ".8em",
 		height: "90vh",
 		width: "100%",
 		display: "flex",
 		flexDirection: "column",
-		mt: "2.6em",
-		backgroundColor: "#000000E6",
-		backdropFilter: "blur(20px)",
+		backgroundColor: "#00000080",
+		backdropFilter: "blur(30px)",
 		overflow: "hidden",
+		'@media (max-height: 759px)': {
+			height: '84vh',
+		},
+		'@media (max-height: 1000px)': {
+			maxHeight: '85.5vh',
+		},
 	};
 
 	const headerBoxStyle = {
 		display: "flex",
-		height: "10vh",
+		height: "50px",
 		width: "100%",
 		justifyContent: "space-between",
 		position: "sticky",
@@ -54,11 +59,34 @@ const Deck: React.FC = () => {
 		color: "white",
 		mr: ".6em",
 	};
-
+	const dividerStyle = {
+		backgroundColor: "#fff",
+		mt: ".5vh",
+		mb: "0.5vh",
+		width: "80%",
+		alignSelf: "center",
+		height: "1px",
+	};
+	const scrollableBoxStyleSideboard = {
+		flexGrow: 1,
+		height: "21%",
+		minHeight: "183px",
+		overflowY: "auto",
+		"::-webkit-scrollbar": {
+			width: "0.2vw",
+		},
+		"::-webkit-scrollbar-thumb": {
+			backgroundColor: "#D3D3D3B3",
+			borderRadius: "1vw",
+		},
+		"::-webkit-scrollbar-button": {
+			display: "none",
+		},
+		transition: "scrollbar-color 0.3s ease-in-out",
+	};
 	const scrollableBoxStyle = {
 		flexGrow: 1,
 		overflowY: "auto",
-		px: "5em",
 		"::-webkit-scrollbar": {
 			width: "0.2vw",
 		},
@@ -71,29 +99,87 @@ const Deck: React.FC = () => {
 		},
 		transition: "scrollbar-color 0.3s ease-in-out",
 	};
+	const mainContainerStyle = {
+		display: "flex",
+		flexWrap: "wrap",
+		gap: "1em",
+		p: "1em",
+		justifyContent: "center",
+		textWrap: "wrap",
+	};
+	const { connectedDeck, updateDeck } = useGame();
+	const newDeck = connectedDeck?.deckCards ?? [];
+	const sideBoard = connectedDeck?.sideboard ?? [];
+	// Calculate the total counts
+	const deckCount = newDeck.reduce(
+		(sum: number, item: { count: number; }) => sum + (item.count || 0),
+		0
+	) ?? 0;
+
+	const sideboardCount = sideBoard.reduce(
+		(sum: number, item: { count: number; }) => sum + (item.count || 0),
+		0
+	) ?? 0;
 
 	return (
-		<Card sx={cardStyle}>
-			<Box sx={headerBoxStyle}>
-				<Typography sx={titleTextStyle}>Your Deck</Typography>
-				<Typography sx={deckSizeTextStyle}>
-					0/0
-				</Typography>
-			</Box>
-			<Box
-				ref={containerRef}
-				onMouseDown={handleMouseDown}
-				onMouseMove={handleMouseMove}
-				onMouseUp={handleMouseUp}
-				onTouchStart={handleTouchStart}
-				onTouchMove={handleTouchMove}
-				onTouchEnd={handleTouchEnd}
-				sx={scrollableBoxStyle}
-			>
-				<CardArea cards={[]} />
-			</Box>
-		</Card>
+		<Box sx={{width:'100%'}}>
+			<Card sx={cardStyle}>
+				<Box sx={headerBoxStyle}>
+					<Typography sx={titleTextStyle}>Your Deck</Typography>
+					<Typography sx={deckSizeTextStyle}>
+						{deckCount}/50
+					</Typography>
+				</Box>
+				<Box
+					ref={containerRef}
+					onMouseDown={handleMouseDown}
+					onMouseMove={handleMouseMove}
+					onMouseUp={handleMouseUp}
+					onTouchStart={handleTouchStart}
+					onTouchMove={handleTouchMove}
+					onTouchEnd={handleTouchEnd}
+					sx={scrollableBoxStyle}
+				>
+					<Box sx={mainContainerStyle}>
+						{newDeck.map((card:IServerCardData) => (
+							<GameCard
+								key={card.card.uuid}
+								card={card}
+								variant={"lobby"}
+								onClick={() => updateDeck(['Deck', card.card.id])}
+							/>
+						))}
+					</Box>
+				</Box>
+				{sideBoard?.length > 0 && (
+					<>
+						<Box sx={headerBoxStyle}>
+							<Typography sx={titleTextStyle}>Sideboard</Typography>
+							<Divider sx={dividerStyle} />
+							<Typography sx={deckSizeTextStyle}>
+								{sideboardCount}/10
+							</Typography>
+						</Box>
+						<Box
+							ref={containerRef}
+							sx={scrollableBoxStyleSideboard}
+						>
+							<Box sx={mainContainerStyle}>
+								{sideBoard.map((card:IServerCardData) => (
+									<GameCard
+										key={card.card.uuid}
+										card={card}
+										variant={'lobby'}
+										onClick={() => updateDeck(['Sideboard', card.card.id])}
+									/>
+								))}
+							</Box>
+						</Box>
+					</>
+				)}
+			</Card>
+		</Box>
 	);
 };
 
-export default Deck;
+export default Deck;