From d36fa48b2e0722827b566f91d569a3224537d8e2 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            | 41 ++++++++++++++++++++++++++++
 frontend/src/library/Player.tsx | 48 +++++++++++++++++++++++++++++++++
 frontend/src/pages/Game.tsx     | 29 +++++---------------
 3 files changed, 95 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/library/Player.tsx

diff --git a/backend/src/utils.ts b/backend/src/utils.ts
index ad0e618e..db8f8a9f 100644
--- a/backend/src/utils.ts
+++ b/backend/src/utils.ts
@@ -1,5 +1,6 @@
 import { Response } from 'express';
 import { AuthRequest } from './middlewares/authMiddleware';
+import { CardColor, UNOCard } from './types';
 
 export type ControllerFunction = (
     req: AuthRequest,
@@ -15,3 +16,43 @@ export function catchError(fn: ControllerFunction): ControllerFunction {
         }
     };
 }
+
+export function getCardImageName(card: UNOCard): string {
+    function getColorAbbreviation(color: CardColor): string {
+        switch (color) {
+            case 'red':
+                return 'r';
+            case 'blue':
+                return 'b';
+            case 'green':
+                return 'g';
+            case 'yellow':
+                return 'o';
+            default:
+                return '';
+        }
+    }
+    if (card.type === 'wild') {
+        if (card.value === 'colchange') {
+            return 'CC';
+        } else {
+            return 'P4';
+        }
+    } else if (card.type === 'special') {
+        let value;
+        switch (card.value) {
+            case 'skip':
+                value = 'r';
+                break;
+            case 'reverse':
+                value = 'x';
+                break;
+            case 'draw2':
+                value = 'p2';
+                break;
+        }
+        return `${getColorAbbreviation(card.color)}${value}`;
+    } else {
+        return `${getColorAbbreviation(card.color)}${card.value}`;
+    }
+}
\ 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 */}