From 45fe08ef5f33736d0a91f8028aec0120793ad4d7 Mon Sep 17 00:00:00 2001 From: Dan Bastin <dan.bastin@gmail.com> Date: Wed, 8 Jan 2025 22:41:36 -0500 Subject: [PATCH 1/2] small layout pass --- src/app/GameBoard/page.tsx | 4 +- src/app/_components/Gameboard/Board/Board.tsx | 3 +- .../OpponentCardTray/OpponentCardTray.tsx | 32 +++++---- .../PlayerCardTray/PlayerCardTray.tsx | 70 +++++++++++-------- .../PlayerTray/CardActionTray.tsx | 2 +- .../_subcomponents/PlayerTray/PlayerHand.tsx | 1 - .../Gameboard/_subcomponents/UnitsBoard.tsx | 17 ++--- src/app/_utils/s3Utils.ts | 1 - 8 files changed, 69 insertions(+), 61 deletions(-) diff --git a/src/app/GameBoard/page.tsx b/src/app/GameBoard/page.tsx index ce40ece..567ed96 100644 --- a/src/app/GameBoard/page.tsx +++ b/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} /> diff --git a/src/app/_components/Gameboard/Board/Board.tsx b/src/app/_components/Gameboard/Board/Board.tsx index a72f389..a5fdcfe 100644 --- a/src/app/_components/Gameboard/Board/Board.tsx +++ b/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, diff --git a/src/app/_components/Gameboard/OpponentCardTray/OpponentCardTray.tsx b/src/app/_components/Gameboard/OpponentCardTray/OpponentCardTray.tsx index 22c1aa8..96e4612 100644 --- a/src/app/_components/Gameboard/OpponentCardTray/OpponentCardTray.tsx +++ b/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' }}/> diff --git a/src/app/_components/Gameboard/PlayerCardTray/PlayerCardTray.tsx b/src/app/_components/Gameboard/PlayerCardTray/PlayerCardTray.tsx index a57d718..93047a5 100644 --- a/src/app/_components/Gameboard/PlayerCardTray/PlayerCardTray.tsx +++ b/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 /> diff --git a/src/app/_components/Gameboard/_subcomponents/PlayerTray/CardActionTray.tsx b/src/app/_components/Gameboard/_subcomponents/PlayerTray/CardActionTray.tsx index 143ed88..a9a755f 100644 --- a/src/app/_components/Gameboard/_subcomponents/PlayerTray/CardActionTray.tsx +++ b/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} diff --git a/src/app/_components/Gameboard/_subcomponents/PlayerTray/PlayerHand.tsx b/src/app/_components/Gameboard/_subcomponents/PlayerTray/PlayerHand.tsx index ffa80ba..22e5587 100644 --- a/src/app/_components/Gameboard/_subcomponents/PlayerTray/PlayerHand.tsx +++ b/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', diff --git a/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx b/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx index d9c33a0..5077b7e 100644 --- a/src/app/_components/Gameboard/_subcomponents/UnitsBoard.tsx +++ b/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> ))} diff --git a/src/app/_utils/s3Utils.ts b/src/app/_utils/s3Utils.ts index 98c5eb7..dd6686c 100644 --- a/src/app/_utils/s3Utils.ts +++ b/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`); }; From b11c20b2a22dc246807cc891f86db4ff3074e675 Mon Sep 17 00:00:00 2001 From: Dan Bastin <dan.bastin@gmail.com> Date: Wed, 8 Jan 2025 22:59:49 -0500 Subject: [PATCH 2/2] react key for shields --- .../_components/_sharedcomponents/Cards/GameCard/GameCard.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx b/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx index 4bb4cf9..603ec97 100644 --- a/src/app/_components/_sharedcomponents/Cards/GameCard/GameCard.tsx +++ b/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} /> </>