Merge remote-tracking branch 'origin/main' into CheBato/DeckPage

# Conflicts: # src/app/_components/_sharedcomponents/Popup/Popup.tsx # src/app/_components/_sharedcomponents/Popup/PopupVariant/LeaveGamePopup.tsx
SWU-Karabast · Mar 6, 2025 · c991b1b · c991b1b
2 parents 2a40e55 + 7ef8ebb
commit c991b1b
Show file tree

Hide file tree

Showing 26 changed files with 646 additions and 180 deletions.
diff --git a/src/app/GameBoard/page.tsx b/src/app/GameBoard/page.tsx
@@ -22,7 +22,6 @@ const GameBoard = () => {
     const [sidebarOpen, setSidebarOpen] = useState(sidebarState);
     const [isPreferenceOpen, setPreferenceOpen] = useState(false);
 
-
     useEffect(() => {
         if(lobbyState && !lobbyState.gameOngoing && lobbyState.gameType !== MatchType.Quick) {
             router.push('/lobby');
@@ -113,7 +112,7 @@ const GameBoard = () => {
                 <PlayerCardTray
                     trayPlayer={connectedPlayer}
                     toggleSidebar={toggleSidebar}
-                />
+                />         
             </Box>
 
 
@@ -129,7 +128,7 @@ const GameBoard = () => {
                 </Box>
             </Box>
 
-            <PopupShell/>
+            <PopupShell sidebarOpen={sidebarOpen}/>
             <PreferencesComponent
                 sidebarOpen={sidebarOpen}
                 isPreferenceOpen={isPreferenceOpen}

diff --git a/src/app/_components/Gameboard/OpponentCardTray/OpponentCardTray.tsx b/src/app/_components/Gameboard/OpponentCardTray/OpponentCardTray.tsx
@@ -24,6 +24,8 @@ const OpponentCardTray: React.FC<IOpponentCardTrayProps> = ({ trayPlayer, prefer
 
     const hasInitiative = gameState.players[connectedPlayer].hasInitiative;
     const initiativeClaimed = gameState.initiativeClaimed;
+    const activePlayer = gameState.players[connectedPlayer].isActionPhaseActivePlayer;
+    const phase = gameState.phase;
 
     // ---------------Styles------------------- //
     const styles = {
@@ -45,6 +47,7 @@ const OpponentCardTray: React.FC<IOpponentCardTrayProps> = ({ trayPlayer, prefer
             width: '100%',
             height: '100%',
             transform: 'translateY(-2rem)',
+            zIndex: '1',
         },
         rightColumn: {
             display: 'flex',
@@ -105,6 +108,18 @@ const OpponentCardTray: React.FC<IOpponentCardTrayProps> = ({ trayPlayer, prefer
                 userSelect: 'none',
                 color: 'black',
             }
+        },
+        opponentTurnAura: {
+            height: '100px',
+            width: '90%',
+            position: 'absolute', 
+            top: '-100px',
+            boxShadow: activePlayer === false ? '0px 20px 35px var(--initiative-red)' : phase === 'regroup' || phase === 'setup' ? '0px 15px 35px rgba(216,174,24,255)' : 'none',
+            transition: 'box-shadow .5s',
+            borderRadius: '50%',
+            left: '0',
+            right: '0',
+            marginInline: 'auto',
         }
     };
 
@@ -116,6 +131,7 @@ const OpponentCardTray: React.FC<IOpponentCardTrayProps> = ({ trayPlayer, prefer
                 display: 'flex',
                 flexWrap: 'nowrap',
                 columnGap: '2rem', // 2rem gap between columns
+                position: 'relative'
             }}
         >
             {/* Left column (fixed 360px) */}
@@ -137,6 +153,7 @@ const OpponentCardTray: React.FC<IOpponentCardTrayProps> = ({ trayPlayer, prefer
                 <Box sx={styles.opponentHandWrapper}>
                     <PlayerHand clickDisabled={true} cards={gameState?.players[getOpponent(connectedPlayer)].cardPiles['hand'] || []} />
                 </Box>
+                <Box sx={ styles.opponentTurnAura} />
             </Grid>
 
             {/* Right column (fixed 360px) */}

diff --git a/src/app/_components/Gameboard/PlayerCardTray/PlayerCardTray.tsx b/src/app/_components/Gameboard/PlayerCardTray/PlayerCardTray.tsx
@@ -12,6 +12,9 @@ import { useGame } from '@/app/_contexts/Game.context';
 const PlayerCardTray: React.FC<IPlayerCardTrayProps> = ({ trayPlayer, toggleSidebar }) => {
     const { gameState, connectedPlayer } = useGame();
 
+    const activePlayer = gameState.players[connectedPlayer].isActionPhaseActivePlayer;
+    const phase = gameState.phase;
+
     const styles = {
         leftColumnStyle: {
             display: 'flex',
@@ -38,13 +41,26 @@ const PlayerCardTray: React.FC<IPlayerCardTrayProps> = ({ trayPlayer, toggleSide
             display: 'flex',
             alignItems: 'flex-end',
             transform: 'translateY(1.6rem)',
+            zIndex: '1',
         },
         chatColumn: {
             display: 'flex',
             alignItems: 'center',
             height: '5.5rem',
             margin: '0',
         },
+        playerTurnAura: {
+            height: '100px',
+            width: '90%',
+            position: 'absolute',
+            bottom: '-120px',
+            boxShadow: activePlayer === true ? '0px -20px 35px var(--initiative-blue)' : phase === 'regroup' || phase === 'setup' ? '0px -15px 35px rgba(216,174,24,255)' : 'none',
+            transition: 'box-shadow .5s',
+            borderRadius: '50%',
+            left: '0',
+            right: '0',
+            marginInline: 'auto',
+        }
     };
 
     return (
@@ -55,6 +71,7 @@ const PlayerCardTray: React.FC<IPlayerCardTrayProps> = ({ trayPlayer, toggleSide
                 display: 'flex',
                 flexWrap: 'nowrap',
                 columnGap: '2rem',  // 2rem gap between columns
+                position: 'relative'
             }}
             className="playerCardTrayWrapper"
         >
@@ -81,6 +98,7 @@ const PlayerCardTray: React.FC<IPlayerCardTrayProps> = ({ trayPlayer, toggleSide
                         cards={gameState?.players[connectedPlayer].cardPiles['hand'] || []}
                     />
                 </Box>
+                <Box sx={styles.playerTurnAura} />
             </Grid>
 
             {/* Right column: fixed 360px width */}

diff --git a/src/app/_components/Gameboard/_subcomponents/PlayerTray/CardActionTray.tsx b/src/app/_components/Gameboard/_subcomponents/PlayerTray/CardActionTray.tsx
@@ -55,10 +55,10 @@ const CardActionTray: React.FC = () => {
     const playerState = gameState.players[connectedPlayer];
 
     const showTrayButtons = () => {
-        if ( playerState.promptState.promptType == 'actionWindow' ||
-             playerState.promptState.promptType == 'resource' ||
-             playerState.promptState.promptType == 'distributeAmongTargets' ||
-             playerState.promptState.selectCard == true ) {
+        if ( playerState.promptState.promptType === 'actionWindow' ||
+             playerState.promptState.promptType === 'resource' ||
+             playerState.promptState.promptType === 'distributeAmongTargets' ||
+             !!playerState.promptState.selectCardMode === true ) {
             return true;
         }
         return false;

diff --git a/src/app/_components/Gameboard/_subcomponents/PlayerTray/DeckDiscard.tsx b/src/app/_components/Gameboard/_subcomponents/PlayerTray/DeckDiscard.tsx
@@ -11,7 +11,28 @@ const DeckDiscard: React.FC<IDeckDiscardProps> = (
     trayPlayer
 ) => {
     const { gameState, connectedPlayer } = useGame();
-    const { togglePopup } = usePopup();
+    const { togglePopup, popups } = usePopup();
+
+    const handleDiscardToggle = () => {
+        const playerName = connectedPlayer != trayPlayer.trayPlayer ? 'Your Opponent\'s' : 'Your';
+        const existingPopup = popups.find(popup => popup.uuid === `${trayPlayer.trayPlayer}-discard`);
+
+        if (existingPopup && existingPopup.source === PopupSource.PromptState) {
+            // TODO: allow game propt to be toggled
+            // const { type, ...restData } = existingPopup
+            // togglePopup(type, {
+            //     ...restData
+            // });
+        } else {
+            togglePopup('pile', {
+                uuid: `${trayPlayer.trayPlayer}-discard`,
+                title: `${playerName} discard`,
+                cards: gameState?.players[trayPlayer.trayPlayer]?.cardPiles['discard'],
+                source: PopupSource.User,
+                buttons: null
+            })
+        }
+    }
 
     const styles = {
         containerStyle: {
@@ -85,16 +106,7 @@ const DeckDiscard: React.FC<IDeckDiscardProps> = (
         <Box sx={styles.containerStyle}>
             <Card
                 sx={styles.discard.discardCardStyle(gameState?.players[trayPlayer.trayPlayer]?.cardPiles['discard'].at(-1))}
-                onClick={() => {
-                    const playerName = connectedPlayer != trayPlayer.trayPlayer ? 'Your Opponent\'s' : 'Your';
-
-                    togglePopup('pile', {
-                        uuid: `${trayPlayer.trayPlayer}-discard`,
-                        title: `${playerName} discard`,
-                        cards: gameState?.players[trayPlayer.trayPlayer]?.cardPiles['discard'],
-                        source: PopupSource.User
-                    })
-                }}
+                onClick={handleDiscardToggle}
             />
             <Card sx={styles.deck.deckCardStyle}>
                 {deckComponent}

diff --git a/src/app/_components/Gameboard/_subcomponents/PlayerTray/PlayerHand.tsx b/src/app/_components/Gameboard/_subcomponents/PlayerTray/PlayerHand.tsx
@@ -86,6 +86,7 @@ const PlayerHand: React.FC<IPlayerHandProps> = ({ clickDisabled = false, cards =
                             sx={{
                                 width: '8rem',
                                 transition: 'transform 0.2s',
+                                transform: card.selected && card.zone === 'hand' ? 'translateY(-11px)' : 'none',
                                 '&:hover': {
                                     transform: 'translateY(-11px)',
                                 },
@@ -109,10 +110,10 @@ const PlayerHand: React.FC<IPlayerHandProps> = ({ clickDisabled = false, cards =
                             width: '8rem',
                             // Center vertically
                             top: '50%',
-                            transform: 'translateY(-50%)',
                             // Center horizontally using computed left
                             left: overlappedLeftStart + i * overlapOffset,
                             transition: 'transform 0.2s',
+                            transform: card.selected && card.zone === 'hand' ? 'translateY(-50%) translateY(-11px)' : 'translateY(-50%)',
                             '&:hover': {
                                 // Slight lift
                                 transform: 'translateY(-50%) translateY(-10px)',

diff --git a/src/app/_components/Gameboard/_subcomponents/PlayerTray/Resources.tsx b/src/app/_components/Gameboard/_subcomponents/PlayerTray/Resources.tsx
@@ -11,11 +11,32 @@ const Resources: React.FC<IResourcesProps> = ({
     trayPlayer
 }) => {
     const { gameState, connectedPlayer } = useGame();
-    const { togglePopup } = usePopup();
+    const { togglePopup, popups } = usePopup();
 
     const availableResources = gameState.players[trayPlayer].availableResources;
     const totalResources = gameState.players[trayPlayer].cardPiles.resources.length;
 
+    const handleResourceToggle = () => {
+        const playerName = connectedPlayer != trayPlayer ? 'Your Opponent\'s' : 'Your';
+        const existingPopup = popups.find(popup => popup.uuid === `${trayPlayer}-resources`);
+
+        if (existingPopup && existingPopup.source === PopupSource.PromptState) {
+            // TODO: allow game propt to be toggled
+            // const { type, ...restData } = existingPopup
+            // togglePopup(type, {
+            //     ...restData
+            // });
+        } else {
+            togglePopup('pile', {
+                uuid: `${trayPlayer}-resources`,
+                title: `${playerName} Resources`,
+                cards: gameState?.players[trayPlayer]?.cardPiles['resources'],
+                source: PopupSource.User,
+                buttons: null
+            })
+        }
+    }
+
     // ------------------------STYLES------------------------//
     const styles = {
         cardStyle: {
@@ -86,16 +107,7 @@ const Resources: React.FC<IResourcesProps> = ({
     return (
         <Card
             sx={styles.cardStyle}
-            onClick={() => {
-                if (trayPlayer !== connectedPlayer) return;
-
-                togglePopup('pile', {
-                    uuid: `${connectedPlayer}-resources`,
-                    title: 'Your Resources',
-                    cards: gameState?.players[connectedPlayer]?.cardPiles['resources'],
-                    source: PopupSource.User
-                })
-            }}
+            onClick={handleResourceToggle}
         >
             <Box sx={styles.resourceBorderRight} />
             <Box sx={styles.resourceBorderLeft} />

diff --git a/src/app/_components/HomePage/HomePagePlayMode.tsx b/src/app/_components/HomePage/HomePagePlayMode.tsx
@@ -76,7 +76,7 @@ const HomePagePlayMode: React.FC = () => {
             color: 'white',
         }
     };
-    console.log(process.env.NEXT_PUBLIC_DISABLE_CREATE_GAMES);
+
     return (
         <Card variant="black" sx={styles.wrapper}>
             { process.env.NEXT_PUBLIC_DISABLE_CREATE_GAMES === 'true' ?