Board layout 182025

src/app/GameBoard/page.tsx

@@ -65,7 +65,7 @@ const GameBoard = () => {
         },
         centralPromptContainer: {
             position: 'absolute',
-            top: '50%',
+            top: '47%',
             left: '50%',
             transform: 'translate(-50%, -50%)',
             display: 'flex',
@@ -86,7 +86,7 @@ const GameBoard = () => {
     }
 
     return (
-        <Grid container sx={{ height: '100vh' }}>
+        <Grid container sx={{ height: '100vh', overflow: 'hidden' }}>
             <Box component="main" sx={styles.mainBoxStyle}>
                 <OpponentCardTray trayPlayer={getOpponent(connectedPlayer)} />
                 <Board sidebarOpen={sidebarOpen} />

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

@@ -4,7 +4,7 @@ import UnitsBoard from '../_subcomponents/UnitsBoard';
 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 { Box } from '@mui/material';
 
 const Board: React.FC<IBoardProps> = ({
     sidebarOpen,
@@ -56,6 +56,7 @@ const Board: React.FC<IBoardProps> = ({
             flexDirection: 'column',
             alignItems: 'center',
             width: '100%',
+            gap: '10px',
         },
         rowStyle: {
             flexGrow: 1,

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

@@ -20,23 +20,29 @@ const OpponentCardTray: React.FC<IOpponentCardTrayProps> = ({ trayPlayer }) => {
     const styles = {
         leftColumn: {
             display: 'flex',
-            alignItems: 'flex-start',
+            alignItems: 'center',
             justifyContent: 'flex-start',
-            pl: '2em',
-            pt: '2em',
+            gap: '10px',
+            pl: '1em',
         },
         centerColumn: {
             height: '100%',
             display: 'flex',
             flexDirection: 'column',
-            alignItems: 'center',
+            alignItems: 'flex-start',
             justifyContent: 'center',
         },
+        opponentHandWrapper: {
+            width: '100%',
+            height: '100%',
+            transform: 'translateY(-30%)',
+        },
         rightColumn: {
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'flex-end',
-            pr: '2em',
+            gap: '15px',
+            pr: '1em',
             py: '1em',
         },
         lastPlayed: {
@@ -57,20 +63,16 @@ const OpponentCardTray: React.FC<IOpponentCardTrayProps> = ({ trayPlayer }) => {
         <Grid container sx={{ height: '15%' }}>
             <Grid size={3} sx={styles.leftColumn}>
                 <DeckDiscard trayPlayer={trayPlayer} />
-                <Box ml={1}>
-                    <Resources
-                        trayPlayer={trayPlayer}
-                    />
-                </Box>
+                <Resources trayPlayer={trayPlayer}/>
             </Grid>
             <Grid size={6} sx={styles.centerColumn}>
-                <PlayerHand cards={gameState?.players[getOpponent(connectedPlayer)].cardPiles['hand'] || []} />
+                <Box sx={styles.opponentHandWrapper}>
+                    <PlayerHand cards={gameState?.players[getOpponent(connectedPlayer)].cardPiles['hand'] || []} />
+                </Box>
             </Grid>
             <Grid size={3} sx={styles.rightColumn}>
-                <Box mr={2}>
-                    <Typography variant={'h4'}>Initiative</Typography>
-                </Box>
-                <Box sx={styles.lastPlayed} mr={2}>
+                <Typography variant={'h4'}>Initiative</Typography>
+                <Box sx={styles.lastPlayed}>
                 </Box>
                 <Box sx={styles.menuStyles}>
                     <CloseOutlined onClick={handleExitButton} sx={{ cursor:'pointer' }}/>

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

@@ -8,6 +8,7 @@ import CardActionTray from '../_subcomponents/PlayerTray/CardActionTray';
 import PlayerHand from '../_subcomponents/PlayerTray/PlayerHand';
 import { IPlayerCardTrayProps } from '@/app/_components/Gameboard/GameboardTypes';
 import { useGame } from '@/app/_contexts/Game.context';
+import { display } from '@mui/system';
 
 const PlayerCardTray: React.FC<IPlayerCardTrayProps> = ({
     trayPlayer,
@@ -17,43 +18,52 @@ const PlayerCardTray: React.FC<IPlayerCardTrayProps> = ({
     const { gameState, connectedPlayer } = useGame();
 
     // ---------------Styles------------------- //
-    const leftColumnStyle = {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'flex-start',
-        padding: '1em',
-    };
 
-    const centerColumnStyle = {
-        height: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'center',
-    };
-
-    const rightColumnStyle = {
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'flex-end',
-        padding: '1em',
-    };
+    const styles = {
+        leftColumnStyle: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-start',
+            padding: '1em',
+            gap: '10px',
+        },
+        centerColumnStyle: {
+            height: '100%',
+        },
+        rightColumnStyle: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            padding: '1em',
+        },
+        playerHandWrapper: {
+            width: '100%',
+            height: '100%',
+            transform: 'translateY(15%)',
+            transition: 'transform 0.4s ease',
+            display : 'flex',
+            alignItems : 'center',
+            '&:hover': {
+                transform: 'translateY(0)',
+            },
+        },
+    }
 
     return (
         <Grid container sx={{ height: '20.82%' }}>
-            <Grid size={3} sx={leftColumnStyle}>
+            <Grid size={3} sx={styles.leftColumnStyle}>
                 <DeckDiscard trayPlayer={trayPlayer} />
-                <Box ml={1}>
-                    <Resources
-                        trayPlayer={trayPlayer}
-                        handleModalToggle={handleModalToggle}
-                    />
-                </Box>
+                <Resources
+                    trayPlayer={trayPlayer}
+                    handleModalToggle={handleModalToggle}
+                />
             </Grid>
-            <Grid size={6} sx={centerColumnStyle}>
-                <PlayerHand cards={gameState?.players[connectedPlayer].cardPiles['hand'] || []} />
+            <Grid size={6} sx={styles.centerColumnStyle}>
+                <Box sx={styles.playerHandWrapper}>
+                    <PlayerHand cards={gameState?.players[connectedPlayer].cardPiles['hand'] || []} />
+                </Box>
             </Grid>
-            <Grid size={3} sx={rightColumnStyle}>
+            <Grid size={3} sx={styles.rightColumnStyle}>
                 <CardActionTray />
                 <Box ml={2}>
                     <ChatBubbleOutline />

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

@@ -21,7 +21,7 @@ const CardActionTray: React.FC = () => {
                 spacing={2}
                 sx={actionContainerStyle}
             >
-                <Box>
+                <Box sx={{ display: 'flex', gap: '10px' }}>
                     {playerState.promptState.buttons.map((button: IButtonsProps) => (
                         <PromptButton
                             key={button.arg}

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

@@ -25,7 +25,6 @@ const PlayerHand: React.FC<IPlayerHandProps> = ({
         width: '100%',
         overflowX: 'auto',
         whiteSpace: 'nowrap',
-        p: '10px 0',
         cursor: isDragging ? 'grabbing' : 'grab',
         userSelect: 'none',
         scrollbarWidth: 'thin',

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

@@ -63,28 +63,25 @@ const UnitsBoard: React.FC<IUnitsBoardProps> = ({
             height: '100%',
             width: '100%',
             padding: '1em',
-            margin: '1em',
         },
         containerStyle: {
             height: '100%',
         },
         opponentGridStyle: {
-            flexGrow: 1,
+            height: '50%',
             display: 'flex',
             justifyContent: arena == 'groundArena' ? 'flex-start': 'flex-end',
             alignItems: 'flex-start',
-            gap: '0.5vw',
-            flexWrap: 'nowrap',
-            overflowX: 'auto',
+            gap: '10px',
+            flexWrap: 'wrap',
         },
         playerGridStyle: {
-            flexGrow: 1,
+            height: '50%',
             display: 'flex',
             justifyContent: arena == 'groundArena' ? 'flex-start': 'flex-end',
             alignItems: 'flex-end',
-            gap: '0.5vw',
-            flexWrap: 'nowrap',
-            overflowX: 'auto',
+            gap: '10px',
+            flexWrap: 'wrap',
         },
     };
 
@@ -104,7 +101,7 @@ const UnitsBoard: React.FC<IUnitsBoardProps> = ({
                 {/* Player's Ground Units */}
                 <Grid sx={styles.playerGridStyle}>
                     {playerUnits.map((card: ICardData) => (
-                        <Box key={card.uuid} sx={{ flex: '0 0 auto' }}>
+                        <Box key={card.uuid} sx={{ flex: '0 1 auto' }}>
                             <GameCard card={card} subcards={card.subcards} size="square" variant={'gameboard'}/>
                         </Box>
                     ))}

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

@@ -274,10 +274,10 @@ const GameCard: React.FC<IGameCardProps> = ({
                         ) : variant === 'gameboard' ? (
                             <>
                                 <Grid direction="row" container sx={styles.shieldContainerStyle}>
-                                    {shieldCards.map((shieldCard) => (
+                                    {shieldCards.map((_, index) => (
                                         <>
                                             <Box
-                                                key={shieldCard.uuid}
+                                                key={`${cardData.uuid}-shield-${index}`}
                                                 sx={styles.shieldIconLayer}
                                             />
                                         </>

src/app/_utils/s3Utils.ts

@@ -82,7 +82,6 @@ export const s3ImageURL = (path: string) => {
 
 export const s3CardImageURL = (card: ICardData | ISetCode) => {
     if (!card) return 'game/epic-action-token.webp';
-    console.log(card);
     const cardNumber = card.setId.number.toString().padStart(3, '0') + (card.type === 'leaderUnit' ? '-portrait' : '');
     return s3ImageURL(`cards/${card.setId.set}/${cardNumber}.webp`);
 };