Che bato/lobby design

src/app/_components/Gameboard/GameboardTypes.ts

@@ -57,6 +57,7 @@ export interface IBasicPromptProps {
 
 export interface ICardAreaProps {
 	cards: ICardData[];
+	pile: "Deck" | "Sideboard" | null;
 }
 
 export interface IUnitsBoardProps {

src/app/_components/Gameboard/_subcomponents/Overlays/ResourcesOverlay/ResourcesOverlay.tsx

@@ -50,7 +50,7 @@ const ResourcesOverlay: React.FC<IResourcesOverlayProps> = ({
 						Your Resources
 					</Typography>
 
-					<CardArea cards={gameState.players[connectedPlayer].cardPiles["resources"]} />
+					<CardArea cards={gameState.players[connectedPlayer].cardPiles["resources"]} pile={null} />
 				</CardContent>
 				<Box
 					sx={{

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} options={[]} location={"gameBoard"} pile={null}							/>
 						</Box>
 					))}
 				</Box>

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" options={[]} location={"gameBoard"} pile={null}/>
 						</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" options={[]} location={"gameBoard"} pile={null} />
 						</Box>
 					))}
 				</Grid>

src/app/_components/Lobby/Deck/Deck.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { Card, Box, Typography } from "@mui/material";
+import {Card, Box, Typography, Divider} from "@mui/material";
 import CardArea from "../../_sharedcomponents/CardArea/CardArea";
 import { useDragScroll } from "@/app/_utils/useDragScroll";
-
+import {useGame} from "@/app/_contexts/Game.context";
 
 const Deck: React.FC = () => {
 	// Use the custom hook with horizontal or vertical scrolling as required
@@ -15,24 +15,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 +58,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,28 +98,59 @@ const Deck: React.FC = () => {
 		},
 		transition: "scrollbar-color 0.3s ease-in-out",
 	};
+	const { connectedDeck } = 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}
+				>
+					<CardArea cards={newDeck} pile={"Deck"} />
+				</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}
+						>
+							<CardArea cards={sideBoard} pile={"Sideboard"} />
+						</Box>
+					</>
+				)}
+			</Card>
+		</Box>
 	);
 };
 

src/app/_components/Lobby/Players/Players.tsx

@@ -10,23 +10,40 @@ const Players: React.FC<IPlayersProps> = ({ isLobbyView }) => {
 	const cardStyle = {
 		borderRadius: "1.1em",
 		borderColor: "#FFFFFF00",
-		height: "90vh",
+		height:"90vh",  // For small screens and up (600px and above)
 		width: "80%",
+		minWidth: "212px",
 		display: "flex",
 		flexDirection: isLobbyView ? "column" : "row",
 		justifyContent: isLobbyView ? "flex-start" : "center",
-		mt: "2.6em",
 		pt: ".8em",
-		backgroundColor: "#000000E6",
-		backdropFilter: "blur(20px)",
+		backgroundColor: "#00000080",
+		backdropFilter: "blur(30px)",
+		'@media (max-height: 759px)': {
+			height: '84vh',
+		},
+		'@media (max-height: 1000px)': {
+			maxHeight: '85.5vh',
+		},
+		"::-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 typographyStyle = {
-		fontSize: "2.4em",
+		fontSize: "2.0em",
 		fontWeight: "bold",
 		color: "white",
-		ml: ".6em",
-		pt: ".2em",
+		ml: "30px",
+		mb: "0px"
 	};
 
 	return (