Frontend: Dislay The Player Whose Turn It Is Currently

1. Brightened player icons for active turn indication. 2. Displayed current player's name on game board. Fixes: #157
shivansh-bhatnagar18 · Jun 26, 2024 · 2e5ceaf · 2e5ceaf
1 parent ab4243f
commit 2e5ceaf
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 5 deletions.
diff --git a/frontend/src/contexts/AuthContext.tsx b/frontend/src/contexts/AuthContext.tsx
@@ -155,4 +155,4 @@ export function AuthProvider({ children }: { children: ReactElement }) {
             {children}
         </AuthContext.Provider>
     );
-}
+}
diff --git a/frontend/src/contexts/GameContext.tsx b/frontend/src/contexts/GameContext.tsx
@@ -158,4 +158,4 @@ export const useGameContext = () => {
         throw new Error('useGameContext must be used within a GameProvider');
     }
     return context;
-};
+};
diff --git a/frontend/src/library/toast/toast-context.ts b/frontend/src/library/toast/toast-context.ts
@@ -17,4 +17,4 @@ export const ToastContext = createContext<ToastContextValue>({
     close: () => {},
 });
 
-export const useToast = () => useContext(ToastContext);
+export const useToast = () => useContext(ToastContext);
diff --git a/frontend/src/library/toast/toast.css b/frontend/src/library/toast/toast.css
@@ -216,4 +216,4 @@
         left: 0.5rem;
         right: 0.5rem;
     }
-}
+}
diff --git a/frontend/src/pages/Game.tsx b/frontend/src/pages/Game.tsx
@@ -180,6 +180,11 @@ function Game() {
         { top: '75%', left: '15%', transform: 'translate(-50%, -50%)' },
         { top: '75%', left: '85%', transform: 'translate(-50%, -50%)' },
     ];
+
+    const cardStyles = {
+        filter: 'brightness(1)',
+    };
+
     if (!gameState) {
         return (
             <div className="bg-gray-800 h-screen text-white text-5xl font-kavoon text-center">
@@ -190,18 +195,26 @@ function Game() {
     return (
         <div className="flex justify-center items-center min-h-screen bg-table-bg bg-cover">
             <div className="relative w-full max-w-6xl h-[75vh]">
+                <div className="absolute top-4 left-1/2 transform -translate-x-1/2 text-yellow-400 text-xl font-bold">
+                    {gameState.players[gameState.currentPlayerIndex].name}'s
+                    Turn
+                </div>
                 {/* Players */}
                 {gameState.players.slice(0, 6).map((player, index) => (
                     <div
                         key={index}
-                        className="absolute flex flex-col items-center justify-center bg-player-icon-bg"
+                        className={`absolute flex flex-col items-center justify-center bg-player-icon-bg`}
                         style={{
                             ...playerPositions[index],
                             backgroundSize: 'contain',
                             backgroundRepeat: 'no-repeat',
                             width: '70px',
                             height: '80px',
                             zIndex: 2,
+                            ...(index === gameState.currentPlayerIndex && {
+                                ...cardStyles,
+                                filter: 'brightness(1.5)',
+                            }),
                         }}
                     >
                         <div className="player-cards text-black mt-[61px]">
-Original file line number
+Diff line change
@@ Expand Up @@
                 {children}
             </AuthContext.Provider>
         );
-    }
+    }