From 7ef8ebb0c90c2c625d72cd15c449751095694710 Mon Sep 17 00:00:00 2001
From: Keith LePoidevin <94937403+Trys2Hard@users.noreply.github.com>
Date: Wed, 5 Mar 2025 16:19:54 -0800
Subject: [PATCH] Player turn aura (#171)

Co-authored-by: Dan Bastin <dan.bastin@gmail.com>
---
 src/app/GameBoard/page.tsx                     |  3 +--
 .../OpponentCardTray/OpponentCardTray.tsx      | 17 +++++++++++++++++
 .../PlayerCardTray/PlayerCardTray.tsx          | 18 ++++++++++++++++++
 3 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/app/GameBoard/page.tsx b/src/app/GameBoard/page.tsx
index c0dd0add..a9d4ae65 100644
--- 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>
 
 
diff --git a/src/app/_components/Gameboard/OpponentCardTray/OpponentCardTray.tsx b/src/app/_components/Gameboard/OpponentCardTray/OpponentCardTray.tsx
index 8e0e59f7..ddbf0312 100644
--- 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
index dbe3242a..def4fcab 100644
--- 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,6 +41,7 @@ const PlayerCardTray: React.FC<IPlayerCardTrayProps> = ({ trayPlayer, toggleSide
             display: 'flex',
             alignItems: 'flex-end',
             transform: 'translateY(1.6rem)',
+            zIndex: '1',
         },
         chatColumn: {
             display: 'flex',
@@ -45,6 +49,18 @@ const PlayerCardTray: React.FC<IPlayerCardTrayProps> = ({ trayPlayer, toggleSide
             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 */}