Gameboard cleanup (#22)

Bit of cleanup to get the board more presentable and closer to the
updated end state

src/app/ClientLayout.tsx

@@ -22,7 +22,6 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
       {isPageWithWebsocket ? (
         <ClientProviders>
           <GameProvider>
-            <Navbar />
             {children}
           </GameProvider>
         </ClientProviders> 

src/app/GameBoard/page.tsx

@@ -2,6 +2,7 @@
 "use client";
 import React, { useState, useRef, useEffect, useContext } from "react";
 import { Box, Grid2 as Grid } from "@mui/material";
+import { s3ImageURL } from "../_utils/s3Assets";
 import ChatDrawer from "../_components/Gameboard/_subcomponents/Overlays/ChatDrawer/ChatDrawer";
 import OpponentCardTray from "../_components/Gameboard/OpponentCardTray/OpponentCardTray";
 import Board from "../_components/Gameboard/Board/Board";
@@ -54,6 +55,9 @@ const GameBoard = () => {
 		mr: sidebarOpen ? `${drawerWidth}px` : "0",
 		height: "100vh",
 		position: "relative",
+		backgroundImage: `url(${s3ImageURL("game/board-background-1.png")})`,
+		backgroundSize: "cover",
+		backgroundPosition: "center",
 	};
 
 	if (!gameState || !connectedPlayer) {

src/app/_components/Gameboard/GameboardTypes.ts

@@ -36,9 +36,8 @@ export interface BoardProps {
 	sidebarOpen: boolean;
 }
 
-export type DeckSize = number;
 export interface DeckDiscardProps {
-	deckSize: DeckSize;
+	trayPlayer: string;
 }
 
 export interface ResourcesProps {

src/app/_components/Gameboard/OpponentCardTray/OpponentCardTray.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import Grid from "@mui/material/Grid2";
 import Resources from "../_subcomponents/PlayerTray/Resources";
 import PlayerHand from "../_subcomponents/PlayerTray/PlayerHand";
+import DeckDiscard from "../_subcomponents/PlayerTray/DeckDiscard";
 import { OpponentCardTrayProps } from "@/app/_components/Gameboard/GameboardTypes";
 import { useGame } from "@/app/_contexts/Game.context";
 
@@ -44,7 +45,7 @@ const OpponentCardTray: React.FC<OpponentCardTrayProps> = ({ trayPlayer }) => {
 				<PlayerHand cards={gameState?.players[getOpponent(connectedPlayer)].cardPiles["hand"] || []} />
 			</Grid>
 			<Grid size={3} sx={rightColumn}>
-				{/* <DeckDiscard deckSize={participant.deckSize} /> */}
+				<DeckDiscard trayPlayer={trayPlayer} />
 			</Grid>
 		</Grid>
 	);

src/app/_components/Gameboard/PlayerCardTray/PlayerCardTray.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import Grid from "@mui/material/Grid2";
 import Resources from "../_subcomponents/PlayerTray/Resources";
-// import DeckDiscard from "../_subcomponents/PlayerTray/DeckDiscard/DeckDiscard";
+import DeckDiscard from "../_subcomponents/PlayerTray/DeckDiscard";
 import CardActionTray from "../_subcomponents/PlayerTray/CardActionTray";
 import PlayerHand from "../_subcomponents/PlayerTray/PlayerHand";
 import { PlayerCardTrayProps } from "@/app/_components/Gameboard/GameboardTypes";
@@ -49,10 +49,10 @@ const PlayerCardTray: React.FC<PlayerCardTrayProps> = ({
 			</Grid>
 			<Grid size={6} sx={centerColumnStyle}>
 				<PlayerHand cards={gameState?.players[connectedPlayer].cardPiles["hand"] || []} />
-				<CardActionTray />
+				{/* <CardActionTray /> */}
 			</Grid>
 			<Grid size={3} sx={rightColumnStyle}>
-				{/* <DeckDiscard deckSize={participant.deckSize} /> */}
+				<DeckDiscard trayPlayer={trayPlayer} />
 			</Grid>
 		</Grid>
 	);

src/app/_components/Gameboard/_subcomponents/PlayerTray/DeckDiscard.tsx

@@ -1,9 +1,14 @@
 import React from "react";
 import { Card, CardContent, Box, Typography } from "@mui/material";
-// import GameCard from "../../../_sharedcomponents/Cards/GameCard/GameCard";
+import GameCard from "../../../_sharedcomponents/Cards/GameCard/GameCard";
 import { DeckDiscardProps } from "@/app/_components/Gameboard/GameboardTypes";
+import { useGame } from "@/app/_contexts/Game.context";
 
-const DeckDiscard: React.FC<DeckDiscardProps> = () => {
+const DeckDiscard: React.FC<DeckDiscardProps> = (
+	trayPlayer
+) => {
+
+	const { gameState } = useGame();
 	//------------------------STYLES------------------------//
 	const containerStyle = {
 		display: "flex",
@@ -41,7 +46,11 @@ const DeckDiscard: React.FC<DeckDiscardProps> = () => {
 					<Typography sx={discardTextStyle}>Discard</Typography>
 				</CardContent>
 			</Card>
-			{/* <GameCard deckSize={deckSize} isFaceUp={false} /> */}
+			<Card sx={discardCardStyle}>
+				<CardContent sx={cardContentStyle}>
+					<Typography sx={discardTextStyle}>Deck</Typography>
+				</CardContent>
+			</Card>
 		</Box>
 	);
 };

src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx

@@ -16,10 +16,6 @@ const UnitsBoard: React.FC<UnitsBoardProps> = ({
 		width: sidebarOpen ? "32vw" : "36vw",
 		ml: ".3vw",
 		p: "1vh",
-		backgroundImage: "url(/ground-board.png)",
-		backgroundPositionX: "45%",
-		backgroundPositionY: sidebarOpen ? "80%" : "90%",
-		backgroundSize: "200%",
 	};
 
 	const containerStyle = {
@@ -29,7 +25,7 @@ const UnitsBoard: React.FC<UnitsBoardProps> = ({
 	const opponentGridStyle = {
 		flexGrow: 1,
 		display: "flex",
-		justifyContent: "flex-start",
+		justifyContent: arena == "groundArena" ? "flex-start": "flex-end",
 		alignItems: "flex-start",
 		gap: "0.5vw",
 		flexWrap: "nowrap",
@@ -39,7 +35,7 @@ const UnitsBoard: React.FC<UnitsBoardProps> = ({
 	const playerGridStyle = {
 		flexGrow: 1,
 		display: "flex",
-		justifyContent: "flex-start",
+		justifyContent: arena == "groundArena" ? "flex-start": "flex-end",
 		alignItems: "flex-end",
 		gap: "0.5vw",
 		flexWrap: "nowrap",
@@ -59,7 +55,7 @@ const UnitsBoard: React.FC<UnitsBoardProps> = ({
 				<Grid sx={opponentGridStyle}>
 					{opponentUnits.map((card: CardData) => (
 						<Box key={card.id} sx={{ flex: "0 0 auto" }}>
-							<GameCard card={card} />
+							<GameCard card={card} size="square" />
 						</Box>
 					))}
 				</Grid>
@@ -68,7 +64,7 @@ const UnitsBoard: React.FC<UnitsBoardProps> = ({
 				<Grid sx={playerGridStyle}>
 					{playerUnits.map((card: CardData) => (
 						<Box key={card.id} sx={{ flex: "0 0 auto" }}>
-							<GameCard card={card} />
+							<GameCard card={card} size="square" />
 						</Box>
 					))}
 				</Grid>

src/app/_components/_sharedcomponents/Cards/CardTypes.ts

@@ -18,6 +18,7 @@ export interface CardData {
 
 export interface GameCardProps {
 	card: CardData;
+	size?: "standard" | "square";
 }
 
 export interface LeaderBaseCardProps {

src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx

@@ -9,87 +9,17 @@ import {
 import Image from "next/image";
 import { GameCardProps, CardData } from "@/app/_components/_sharedcomponents/Cards/CardTypes";
 import { useGame } from "@/app/_contexts/Game.context";
+import { wrap } from "module";
+import { text } from "stream/consumers";
 
 const GameCard: React.FC<GameCardProps> = ({
-	card
+	card,
+	size = "standard",
 }) => {
 	// const isLobbyView = path === "/lobby";
 	const isLobbyView = false;
 	const isFaceUp = true
 
-	// Base styles shared between face-up and face-down cards
-	// const baseCardStyle = {
-	// 	backgroundColor: "#282828E6",
-	// 	display: "flex",
-	// 	borderRadius: "5px",
-	// 	justifyContent: "center",
-	// 	alignItems: "center",
-	// 	position: "relative",
-	// };
-
-	// Styles specific to face-up cards
-	// const faceCardStyle = {
-	// 	...baseCardStyle,
-	// 	width: isLobbyView ? "10vh" : "8vh",
-	// 	height: isLobbyView ? "10vh" : "8vh",
-	// 	// border: selected ? "2px solid blue" : "1px solid gray",
-	// 	// opacity: disabled ? 0.8 : 1,
-	// 	textAlign: "center",
-	// 	textWrap: "wrap",
-	// 	color: "white",
-	// 	// "&:hover": {
-	// 	// 	backgroundColor: disabled ? "#000000CC" : "#708090CC",
-	// 	// },
-	// 	// cursor: disabled ? "not-allowed" : "pointer",
-	// };
-
-	// Styles specific to face-down cards
-	// const backCardStyle = {
-	// 	...baseCardStyle,
-	// 	width: "9vh",
-	// 	height: "9vh",
-	// };
-
-	const cardContentStyle = {
-		width: "100%",
-		height: "100%",
-		display: "flex",
-		justifyContent: "center",
-		alignItems: "center",
-		textAlign: "center" as const,
-		position: "relative" as const,
-	};
-
-	const imageStyle = {
-		width: "11.29vh",
-		height: "auto",
-	};
-
-	// const circularBackgroundStyle = {
-	// 	width: "5.5vh",
-	// 	height: "5.5vh",
-	// 	backgroundColor: "#141414E6",
-	// 	borderRadius: "50%",
-	// 	position: "absolute" as const,
-	// 	display: "flex",
-	// 	justifyContent: "center",
-	// 	alignItems: "center",
-	// };
-
-	// const deckSizeTextStyle = {
-	// 	fontFamily: "var(--font-barlow), sans-serif",
-	// 	fontWeight: "800",
-	// 	fontSize: "2em",
-	// 	color: "white",
-	// 	position: "absolute" as const,
-	// };
-
-	const typographyStyle = {
-		fontFamily: "var(--font-barlow), sans-serif",
-		fontWeight: "400",
-		fontSize: isLobbyView ? "2em" : "1.6em",
-	};
-
 	const { sendGameMessage } = useGame();
 
 	const cardBorderColor = (card: CardData) => {
@@ -99,6 +29,31 @@ const GameCard: React.FC<GameCardProps> = ({
 		return "";
 	}
 
+	const styles = {
+		cardWrapper: {
+			height: size === "standard" ? "9.36rem" : "8rem",
+			width: size === "standard" ? "6rem" : "8rem",
+		},
+		cardContentStyle: {
+			width: "100%",
+			height: "100%",
+			position: "relative",
+			padding: ".5em",
+			textAlign: "center",
+			whiteSpace: "normal",
+		},
+		imageStyle: {
+			width: "2.5rem",
+			height: "auto",
+		},
+		typographyStyle: {
+			color: "black",
+			fontWeight: "400",
+			fontSize: "1.3em",
+			margin: 0,
+		},
+	}
+
 	return (
 		<MuiCard sx={{ backgroundColor: cardBorderColor(card) }}
 			onClick={() => {
@@ -108,40 +63,40 @@ const GameCard: React.FC<GameCardProps> = ({
 			}}
 		>
 			{isFaceUp ? (
-				<CardActionArea>
-					<CardContent>
-						<Box sx={{ display: 'flex', flexDirection: 'column'}}>
-							<Box sx={{ display: 'flex', justifyContent: 'space-between'}}>
-								<Typography variant="body1" sx={{...typographyStyle, color: 'goldenrod'}}>
+				<CardActionArea sx={styles.cardWrapper}>
+					<CardContent sx={styles.cardContentStyle}>
+						<Box sx={{ display: 'flex', flexDirection: 'column', height: "100%"}}>
+							<Box sx={{ display: 'flex', justifyContent: 'space-between', flex: 1}}>
+								<Typography variant="body1" component="span" sx={{...styles.typographyStyle, color: 'goldenrod'}}>
 									{card.cost}
 								</Typography>
-								<Typography variant="body1" sx={{...typographyStyle, color: 'hotpink'}}>
+								<Typography variant="body1" component="span" sx={{...styles.typographyStyle, color: 'hotpink'}}>
 									{card.damage}
 								</Typography>
 							</Box>
-							<Typography variant="body1" sx={typographyStyle}>
+							<Typography variant="body1" component="span" sx={styles.typographyStyle}>
 								{card.name}
 							</Typography>
-							<Box sx={{ display: 'flex', justifyContent: 'space-between'}}>
-								<Typography variant="body1" sx={{...typographyStyle, color: 'red'}}>
+							<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: "flex-end", flex: 1}}>
+								<Typography variant="body1" component="span" sx={{...styles.typographyStyle, color: 'red'}}>
 									{card.power}
 								</Typography>
-								<Typography variant="body1" sx={{...typographyStyle, color: 'blue'}}>
+								<Typography variant="body1" component="span" sx={{...styles.typographyStyle, color: 'blue'}}>
 									{card.hp}
 								</Typography>
 							</Box>
 						</Box>
 					</CardContent>
 				</CardActionArea>
 			) : (
-				<CardContent sx={cardContentStyle}>
+				<CardContent sx={styles.cardContentStyle}>
 					<Image
 						src="/card-back.png"
 						alt="Deck Image"
 						width={28}
 						height={38}
 						placeholder="empty"
-						style={imageStyle}
+						style={styles.imageStyle}
 					/>
 					{/* {deckSize && deckSize > 0 && (
 						<>

src/app/_components/_sharedcomponents/CreateGameForm/CreateGameForm.tsx

@@ -213,7 +213,6 @@ const CreateGameForm: React.FC<CreateGameFormProps> = ({
 								onChange={(e: ChangeEvent<HTMLInputElement>) =>
 									setDeckLink(e.target.value)
 								}
-								required
 							/>
 						</FormControl>
 

src/app/_components/_sharedcomponents/LeaderBaseBoard/LeaderBase/LeaderBase.tsx

@@ -9,32 +9,17 @@ const LeaderBase: React.FC<LeaderBaseProps> = ({
 	isLobbyView = false,
 	title,
 }) => {
-	// Adjusted styles
-	const containerStyle = {
-		// justifyContent:
-		// 	participant === "opponent" && isLobbyView
-		// 		? "flex-end"
-		// 		: participant === "player" && isLobbyView
-		// 		? "flex-start"
-		// 		: participant === "player"
-		// 		? "flex-end"
-		// 		: "flex-start",
-		// alignItems: "center",
-		// gap: ".5em",
-		// height: "94%",
-		// pt: isLobbyView ? 0 : "3.5em",
-		// pb:
-		// 	participant === "player" && isLobbyView
-		// 		? 0
-		// 		: participant === "player"
-		// 		? "4vh"
-		// 		: 0,
-	};
 
 	const { gameState, connectedPlayer } = useGame();
 	const playerLeader = gameState?.players[player].leader;
 	const playerBase = gameState?.players[player].base;
 
+	const containerStyle = {
+		height: "100%",
+		width: "100%",
+		justifyContent: "center",
+	};
+
 	return (
 		<Grid container direction="row" sx={containerStyle}>
 			{isLobbyView ? (