From ad1c831f8cfc57407e1bd664a140183a720d155b Mon Sep 17 00:00:00 2001
From: Kislay <kislayudbhav.verma.cd.eee22@itbhu.ac.in>
Date: Fri, 28 Jun 2024 13:41:48 +0530
Subject: [PATCH] Frontend: Display Player names along with cards

1. The Player component was refactored to separate JSX for rendering player cards.

2. Highlighting functionality was added to indicate the current player's turn.

3. Player names were styled to appear in a white box with black text.

4. Brightness adjustment was applied to highlight the active player.

Fixes #158
---
 frontend/src/library/Player.tsx | 48 +++++++++++++++++++++++++++++++++
 frontend/src/pages/Game.tsx     | 29 +++++---------------
 2 files changed, 54 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/library/Player.tsx

diff --git a/frontend/src/library/Player.tsx b/frontend/src/library/Player.tsx
new file mode 100644
index 0000000..f4d4146
--- /dev/null
+++ b/frontend/src/library/Player.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+interface Player {
+    name: string;
+    cards: { length: number };
+}
+
+interface PlayerProps {
+    player: Player;
+    highlighted: boolean;
+    positionStyle: React.CSSProperties;
+}
+
+const Player: React.FC<PlayerProps> = ({
+    player,
+    highlighted,
+    positionStyle,
+}) => {
+    return (
+        <div
+            className="absolute flex flex-col items-center justify-center bg-player-icon-bg"
+            style={{
+                ...positionStyle,
+                backgroundSize: 'contain',
+                backgroundRepeat: 'no-repeat',
+                width: '70px',
+                height: '80px',
+                zIndex: 2,
+                filter: highlighted ? 'brightness(1.5)' : 'none',
+            }}
+        >
+            <div
+                className="player-cards font-[Kavoon] text-gray-900 mt-[96px] text-[12px]"
+                style={{ marginLeft: '-8px' }}
+            >
+                {player.cards.length}
+            </div>
+            <div
+                className="player-name font-[Kavoon] mb-2 text-[14px] text-black bg-gray-400 rounded-lg shadow-md"
+                style={{ marginLeft: '-8px' }}
+            >
+                {player.name}
+            </div>
+        </div>
+    );
+};
+
+export default Player;
diff --git a/frontend/src/pages/Game.tsx b/frontend/src/pages/Game.tsx
index 4555fae..287e837 100644
--- a/frontend/src/pages/Game.tsx
+++ b/frontend/src/pages/Game.tsx
@@ -11,6 +11,7 @@ import { useNavigate } from 'react-router-dom';
 import { triggerEvent } from '../channel';
 import { useAuth } from '../contexts/AuthContext';
 import { useToast } from '../library/toast/toast-context';
+import Player from '../library/Player';
 
 function getCardImageName(card: UNOCard): string {
     function getColorAbbreviation(color: CardColor): string {
@@ -173,10 +174,6 @@ function Game() {
         { 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">
@@ -199,26 +196,12 @@ function Game() {
                 </div>
                 {/* Players */}
                 {gameState.players.slice(0, 6).map((player, index) => (
-                    <div
+                    <Player
                         key={index}
-                        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]">
-                            {player.cards.length}
-                        </div>
-                    </div>
+                        player={player}
+                        highlighted={index === gameState.currentPlayerIndex}
+                        positionStyle={playerPositions[index]}
+                    />
                 ))}
 
                 {/* Center Deck and UNO Button */}