Frontend: Display The Player Whose Turn It Is Currently

1. The current turn player's index has been set using setCurrentTurnPlayer state.

2. A brightening effect has been added to highlight the current turn player's card container using 'filter: brightness(1.5)'.

3. The player's name has been enclosed in a box.

4. Tailwind CSS utility classes have been applied for consistent styling of the player's name box.

Fixes #157

frontend/src/pages/Game.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useGameContext } from '../contexts/GameContext';
 import Button from '../library/button';
 import { useModal } from '../library/modal/ModalContext';
@@ -8,8 +8,10 @@ import Chatbox from '../library/chatbox/Chatbox';
 function Game() {
     const { gameState } = useGameContext();
     const modal = useModal();
+    const [currentTurnPlayer, setCurrentTurnPlayer] = useState(0);
     useEffect(() => {
         if (gameState) {
+            setCurrentTurnPlayer(gameState.currentPlayerIndex);
             modal.show(<GamePropertiesModal />, 'large', [], false);
         }
         // eslint-disable-next-line
@@ -51,7 +53,7 @@ function Game() {
                             Invite More Players : &nbsp;
                             <CopyButton
                                 priorText="Copy Invite Link"
-                                copyText={`${window.location.origin}/game?type=join&code='${gameState.id}`}
+                                copyText={`${window.location.origin}/game?type=join&code=${gameState.id}`}
                                 postText="Copied"
                             />
                         </h2>
@@ -72,6 +74,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">
@@ -92,13 +99,22 @@ function Game() {
                             backgroundSize: 'contain',
                             backgroundRepeat: 'no-repeat',
                             width: '70px',
-                            height: '80px',
+                            height: '100px',
                             zIndex: 2,
+                            ...(index === currentTurnPlayer && {
+                                ...cardStyles,
+                                filter: 'brightness(1.5)',
+                            }),
                         }}
                     >
-                        <div className="player-cards text-black mt-[61px]">
+                        <div className="player-cards font-[Kavoon] text-[12px] text-gray-600 mt-[90px]">
                             {player.cards.length}
                         </div>
+                        <div className="bg-gray-200 w-32 border border-black rounded-md px-3 shadow-md">
+                            <p className="font-[Kavoon] text-[14px] text-black text-center">
+                                {player.name}
+                            </p>
+                        </div>
                     </div>
                 ))}