Gameboard second style pass

next.config.mjs

@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    images: {
+        domains: ['karabast-assets.s3.amazonaws.com'],
+      },
+};
 
 export default nextConfig;

src/app/GameBoard/page.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 "use client";
 import React, { useState, useRef, useEffect, useContext } from "react";
-import { Box, Grid2 as Grid } from "@mui/material";
+import { Box, Grid2 as Grid, Typography } from "@mui/material";
 import { s3ImageURL } from "../_utils/s3Utils";
 import ChatDrawer from "../_components/Gameboard/_subcomponents/Overlays/ChatDrawer/ChatDrawer";
 import OpponentCardTray from "../_components/Gameboard/OpponentCardTray/OpponentCardTray";
@@ -11,6 +11,8 @@ import ResourcesOverlay from "../_components/Gameboard/_subcomponents/Overlays/R
 import BasicPrompt from "../_components/Gameboard/_subcomponents/Overlays/Prompts/BasicPrompt";
 import { useGame } from "../_contexts/Game.context";
 import { useSidebar } from "../_contexts/Sidebar.context";
+import { transform } from "next/dist/build/swc";
+import { text } from "stream/consumers";
 
 const GameBoard = () => {
 	const { getOpponent, connectedPlayer, gameState } = useGame();
@@ -49,15 +51,32 @@ const GameBoard = () => {
 
 	// ----------------------Styles-----------------------------//
 
-	const mainBoxStyle = {
-		flexGrow: 1,
-		transition: "margin-right 0.3s ease",
-		mr: sidebarOpen ? `${drawerWidth}px` : "0",
-		height: "100vh",
-		position: "relative",
-		backgroundImage: `url(${s3ImageURL("game/board-background-1.png")})`,
-		backgroundSize: "cover",
-		backgroundPosition: "center",
+	const styles = {
+		mainBoxStyle: {
+			flexGrow: 1,
+			transition: "margin-right 0.3s ease",
+			mr: sidebarOpen ? `${drawerWidth}px` : "0",
+			height: "100vh",
+			position: "relative",
+			backgroundImage: `url(${s3ImageURL("game/board-background-1.png")})`,
+			backgroundSize: "cover",
+			backgroundPosition: "center",
+		},
+		centralPromptContainer: {
+			position: "absolute",
+			top: "50%",
+			left: "50%",
+			transform: "translate(-50%, -50%)",
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+			width: "50vw",
+		},
+		promptStyle: {
+			textAlign: "center",
+			fontSize: "1.3em",
+			background: "radial-gradient(ellipse, rgba(0,0,0, 0.9), rgba(0,0,0,0.7), rgba(0,0,0,0.0))",
+		},
 	};
 
 	if (!gameState || !connectedPlayer) {
@@ -66,7 +85,7 @@ const GameBoard = () => {
 
 	return (
 		<Grid container sx={{ height: "100vh" }}>
-			<Box component="main" sx={mainBoxStyle}>
+			<Box component="main" sx={styles.mainBoxStyle}>
 				<OpponentCardTray trayPlayer={getOpponent(connectedPlayer)} />
 				<Board
 					sidebarOpen={sidebarOpen}
@@ -90,6 +109,9 @@ const GameBoard = () => {
 					currentRound={round}
 				/>
 			)}
+			<Box sx={styles.centralPromptContainer}>
+				<Typography sx={styles.promptStyle}>{gameState.players[connectedPlayer]?.promptState.menuTitle}</Typography>
+			</Box>
 			<ResourcesOverlay
 				isModalOpen={isModalOpen}
 				handleModalToggle={handleModalToggle}

src/app/_components/Gameboard/Board/Board.tsx

@@ -22,85 +22,74 @@ const Board: React.FC<IBoardProps> = ({
 
 
 	//----------------Styles----------------//
-	const leftColumnStyle = {
-		justifyContent: "flex-end",
-		alignItems: "center",
-	};
-
-	const rightColumnStyle = {
-		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 styles = {
+		leftColumnStyle: {
+			justifyContent: "flex-end",
+			alignItems: "center",
+		},
+		rightColumnStyle: {
+			justifyContent: "flex-start",
+			alignItems: "center",
+		},
+		middleColumnStyle: {
+			justifyContent: "center",
+			alignItems: "center",
+		},
+		middleColumnContent: {
+			display: "flex",
+			justifyContent: "space-between",
+			alignItems: "center",
+			height: "100%",
+			flexDirection: "column",
+			padding: "1em",
+		},
+		containerStyle: {
+			height: "100%",
+			width: "100%",
+			justifyContent: "center",
+			alignItems: "center"
+		},
+		leaderBaseContainer: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			width: "100%",
+		},
+		rowStyle: {
+			flexGrow: 1,
+			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}>
+			<Grid container size={5} sx={styles.leftColumnStyle}>
 				<UnitsBoard
 					sidebarOpen={sidebarOpen} arena="spaceArena"
 				/>
 			</Grid>
-			<Grid container size={2}>
-				<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 container size={2} sx={styles.middleColumnStyle}>
+				<Box sx={styles.middleColumnContent}>
+					<Box sx={styles.leaderBaseContainer}>
+						<LeaderBaseCard
+							variant="leader"
+							title={titleOpponent}
+							isLobbyView={false}
+							card={opponentLeader}
+						/>
+						<LeaderBaseCard variant="base" isLobbyView={false} card={opponentBase}></LeaderBaseCard>
+					</Box>
+					<Box sx={styles.leaderBaseContainer}>
+						<LeaderBaseCard variant="base" isLobbyView={false} card={playerBase}></LeaderBaseCard>
+						<LeaderBaseCard
+							variant="leader"
+							isLobbyView={false}
+							title={connectedPlayer}
+							card={playerLeader}
+						/>
+					</Box>
+				</Box>
 			</Grid>
-			<Grid container size={5} sx={rightColumnStyle}>
+			<Grid container size={5} sx={styles.rightColumnStyle}>
 				<UnitsBoard
 					sidebarOpen={sidebarOpen} arena="groundArena"
 				/>

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

@@ -1,5 +1,6 @@
 import React from "react";
-import Grid from "@mui/material/Grid2";
+import { CloseOutlined, SettingsOutlined } from "@mui/icons-material";
+import { Typography, Box, Grid2 as Grid } from "@mui/material";
 import Resources from "../_subcomponents/PlayerTray/Resources";
 import PlayerHand from "../_subcomponents/PlayerTray/PlayerHand";
 import DeckDiscard from "../_subcomponents/PlayerTray/DeckDiscard";
@@ -8,44 +9,65 @@ import { useGame } from "@/app/_contexts/Game.context";
 
 const OpponentCardTray: React.FC<IOpponentCardTrayProps> = ({ trayPlayer }) => {
 	//---------------Styles------------------- //
-	const leftColumn = {
-		display: "flex",
-		alignItems: "flex-start",
-		justifyContent: "flex-start",
-		pl: "2em",
-		pt: "2em",
-	};
-
-	const centerColumn = {
-		height: "100%",
-		display: "flex",
-		flexDirection: "column",
-		alignItems: "center",
-		justifyContent: "center",
-	};
+	const styles = {
+		leftColumn: {
+			display: "flex",
+			alignItems: "flex-start",
+			justifyContent: "flex-start",
+			pl: "2em",
+			pt: "2em",
+		},
+		centerColumn: {
+			height: "100%",
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "center",
+			justifyContent: "center",
+		},
+		rightColumn: {
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "flex-end",
+			pr: "2em",
+			pt: "2em",
+		},
+		lastPlayed: {
+			border: "2px solid #FFFFFF55"
 
-	const rightColumn = {
-		display: "flex",
-		alignItems: "flex-start",
-		justifyContent: "flex-end",
-		pr: "2em",
-		pt: "2em",
+		},
+		menuStyles: {
+			display: "flex",
+			flexDirection: "column",
+		}
 	};
 
 	const { gameState, connectedPlayer, getOpponent } = useGame();
 
 	return (
 		<Grid container sx={{ height: "15%" }}>
-			<Grid size={3} sx={leftColumn}>
-				<Resources
-					trayPlayer={trayPlayer}
-				/>
+			<Grid size={3} sx={styles.leftColumn}>
+				<DeckDiscard trayPlayer={trayPlayer} />
+				<Box ml={1}>
+					<Resources
+						trayPlayer={trayPlayer}
+					/>
+				</Box>
 			</Grid>
-			<Grid size={6} sx={centerColumn}>
+			<Grid size={6} sx={styles.centerColumn}>
 				<PlayerHand cards={gameState?.players[getOpponent(connectedPlayer)].cardPiles["hand"] || []} />
 			</Grid>
-			<Grid size={3} sx={rightColumn}>
-				<DeckDiscard trayPlayer={trayPlayer} />
+			<Grid size={3} sx={styles.rightColumn}>
+				<Box mr={2}>
+					<Typography variant={"h4"}>Initiative</Typography>
+				</Box>
+				<Box sx={styles.lastPlayed} mr={2}>
+					<Typography variant={"h4"}>Last Played:</Typography>
+				</Box>
+				<Box sx={styles.menuStyles}>
+					<CloseOutlined />
+					<SettingsOutlined />
+				</Box>
+
 			</Grid>
 		</Grid>
 	);

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

@@ -1,5 +1,7 @@
 import React from "react";
+import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid2";
+import { ChatBubbleOutline } from "@mui/icons-material";
 import Resources from "../_subcomponents/PlayerTray/Resources";
 import DeckDiscard from "../_subcomponents/PlayerTray/DeckDiscard";
 import CardActionTray from "../_subcomponents/PlayerTray/CardActionTray";
@@ -19,8 +21,7 @@ const PlayerCardTray: React.FC<IPlayerCardTrayProps> = ({
 		display: "flex",
 		alignItems: "center",
 		justifyContent: "flex-start",
-		pl: "2em",
-		pt: "2em",
+		padding: "1em",
 	};
 
 	const centerColumnStyle = {
@@ -35,24 +36,28 @@ const PlayerCardTray: React.FC<IPlayerCardTrayProps> = ({
 		display: "flex",
 		alignItems: "center",
 		justifyContent: "flex-end",
-		pr: "2em",
-		pt: "2em",
+		padding: "1em",
 	};
 
 	return (
 		<Grid container sx={{ height: "20.82%" }}>
 			<Grid size={3} sx={leftColumnStyle}>
-				<Resources
-					trayPlayer={trayPlayer}
-					handleModalToggle={handleModalToggle}
-				/>
+				<DeckDiscard trayPlayer={trayPlayer} />
+				<Box ml={1}>
+					<Resources
+						trayPlayer={trayPlayer}
+						handleModalToggle={handleModalToggle}
+					/>
+				</Box>
 			</Grid>
 			<Grid size={6} sx={centerColumnStyle}>
 				<PlayerHand cards={gameState?.players[connectedPlayer].cardPiles["hand"] || []} />
-				{/* <CardActionTray /> */}
 			</Grid>
 			<Grid size={3} sx={rightColumnStyle}>
-				<DeckDiscard trayPlayer={trayPlayer} />
+				<CardActionTray />
+				<Box ml={2}>
+					<ChatBubbleOutline />
+				</Box>
 			</Grid>
 		</Grid>
 	);