misc cleanup

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";
@@ -52,7 +52,7 @@ const PlayerCardTray: React.FC<PlayerCardTrayProps> = ({
 				<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 = {

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

@@ -85,7 +85,7 @@ const GameCard: React.FC<GameCardProps> = ({
 	// };
 
 	const typographyStyle = {
-		fontFamily: "var(--font-barlow), sans-serif",
+		color: "black",
 		fontWeight: "400",
 		fontSize: isLobbyView ? "2em" : "1.6em",
 	};

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/_theme/theme.ts

@@ -97,8 +97,6 @@ export const theme: Theme = createTheme({
 			styleOverrides: {
 				root: {
 					borderRadius: ".8rem",
-					padding: "1.5rem",
-					backdropFilter: "blur(20px)",
 					width: "100%",
 					overflow: "auto",
 				},
@@ -108,12 +106,16 @@ export const theme: Theme = createTheme({
 					props: { variant: "blue" },
 					style: {
 						backgroundColor: "#18325199",
+						padding: "1.5rem",
+						backdropFilter: "blur(20px)",
 					},
 				},
 				{
 					props: { variant: "black" },
 					style: {
 						backgroundColor: "rgb(0, 0, 0, 0.60)",
+						padding: "1.5rem",
+						backdropFilter: "blur(20px)",
 					},
 				},
 			]