From c207acafc177139c6ffacf91a9cfac22f085b054 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
---
 backend/src/utils.ts            |  2 +-
 frontend/src/library/Player.tsx | 48 +++++++++++++++++++++++++++++++++
 frontend/src/pages/Game.tsx     | 29 +++++---------------
 3 files changed, 55 insertions(+), 24 deletions(-)
 create mode 100644 frontend/src/library/Player.tsx

diff --git a/backend/src/utils.ts b/backend/src/utils.ts
index ad0e618e..69e0b38b 100644
--- a/backend/src/utils.ts
+++ b/backend/src/utils.ts
@@ -14,4 +14,4 @@ export function catchError(fn: ControllerFunction): ControllerFunction {
             res.status(500).json({ error: (error as Error).message });
         }
     };
-}
+}
\ No newline at end of file
diff --git a/frontend/src/library/Player.tsx b/frontend/src/library/Player.tsx
new file mode 100644
index 00000000..f4d4146a
--- /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 4555fae5..287e8370 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 */}