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 ilter: 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/library/toast/Toast.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ToastContext } from './toast-context';
 import './toast.css';
 
@@ -17,28 +17,12 @@ function useTimeout(callback: () => void, duration: number) {
         };
     }, [duration]);
 }
-
-type ToastProperties = {
+type toastProperties = {
     message: string;
     close: () => void;
     duration: number;
     position: string;
-    color: 'info' | 'warning' | 'error' | 'success';
-};
-
-const getIconClass = (color: 'info' | 'warning' | 'error' | 'success'): string => {
-    switch (color) {
-        case 'info':
-            return 'fa-solid fa-circle-info';
-        case 'warning':
-            return 'fa-solid fa-triangle-exclamation';
-        case 'error':
-            return 'fa-solid fa-times-circle';
-        case 'success':
-            return 'fa-solid fa-check-circle';
-        default:
-            return '';
-    }
+    color: string;
 };
 
 export function Toast({
@@ -47,21 +31,15 @@ export function Toast({
     duration,
     position,
     color,
-}: ToastProperties) {
+}: toastProperties) {
     useTimeout(() => {
         close();
     }, duration);
-
-    const iconClass = getIconClass(color);
-
     return (
         <div className={`toast ${position}-animation ${color}`}>
-            <p>
-                <i className={iconClass} style={{ marginRight: '8px' }}></i>
-                {message}
-            </p>
+            <p>{message}</p>
             <button className="close-button" onClick={close}>
-                <i className="fa-regular fa-circle-xmark"></i>
+                {'x'}
             </button>
         </div>
     );
@@ -70,39 +48,36 @@ export function Toast({
 type ToastProviderProperties = {
     children: React.ReactElement;
 };
-
 type ToastType = {
     message: string;
     id: number;
     duration: number;
     position: string;
-    color: 'info' | 'warning' | 'error' | 'success';
+    color: string;
 };
 
 export function ToastProvider({ children }: ToastProviderProperties) {
     const [toasts, setToasts] = useState<ToastType[]>([]);
     const [position, setPosition] = useState('top-left');
-
     type Options = {
         message?: string;
         duration?: number;
         position?: string;
         color?: 'info' | 'warning' | 'error' | 'success';
     };
-
     const openToast = useCallback(
         ({
             message = '',
             duration = 5000,
             position = 'top-center',
             color = 'info',
         }: Options = {}) => {
-            const newToast: ToastType = {
-                message,
+            const newToast = {
+                message: message,
                 id: Date.now(),
-                duration,
-                position,
-                color,
+                duration: duration,
+                position: position,
+                color: color,
             };
             setToasts((prevToast) => [...prevToast, newToast]);
             setPosition(position);
@@ -120,41 +95,43 @@ export function ToastProvider({ children }: ToastProviderProperties) {
         setToasts((toasts) => {
             return toasts.map((toast) => {
                 if (toast.id === id) {
-                    if (toast.position === 'top-left')
+                    if (toast.position == 'top-left')
                         toast.position = 'fade-out-left';
-                    else if (toast.position === 'top-right')
+                    else if (toast.position == 'top-right')
                         toast.position = 'fade-out-right';
-                    else if (toast.position === 'top-center')
+                    else if (toast.position == 'top-center')
                         toast.position = 'fade-out-center';
                 }
                 return toast;
             });
         });
     }, []);
-
     const contextValue = useMemo(
         () => ({
             open: openToast,
             close: closeToast,
         }),
         [openToast, closeToast]
     );
-
     return (
         <ToastContext.Provider value={contextValue}>
             {children}
             <div className={`toasts ${position}`}>
                 {toasts &&
-                    toasts.map((toast) => (
-                        <Toast
-                            key={toast.id}
-                            message={toast.message}
-                            close={() => closeToast(toast.id)}
-                            duration={toast.duration}
-                            position={toast.position}
-                            color={toast.color}
-                        />
-                    ))}
+                    toasts.map((toast) => {
+                        return (
+                            <Toast
+                                key={toast.id}
+                                message={toast.message}
+                                close={() => {
+                                    closeToast(toast.id);
+                                }}
+                                duration={toast.duration}
+                                position={toast.position}
+                                color={toast.color}
+                            />
+                        );
+                    })}
             </div>
         </ToastContext.Provider>
     );

frontend/src/library/toast/toast.css

@@ -6,15 +6,12 @@
 }
 
 .toast {
-    border-width: 5px;
-    border-color: black;
-    border-radius: 25px;
+    color: black;
+    border-radius: 5px;
     padding: 10px 10px;
     width: 300px;
     position: relative;
     display: flex;
-    font-family: Kavoon;
-    font-size: small;
 }
 
 .top-right {
@@ -159,35 +156,29 @@
 }
 
 .info {
-    color: #000;
     background-color: cyan;
 }
 
 .success {
-    color: #fff;
     background-color: #5cb85c;
 }
 
 .error {
-    color: #fff;;
     background-color: #d9534f;
 }
 .warning {
-    color: #000;
     background-color: #f0ad4e;
 }
 
 .close-button {
     position: absolute;
     right: 0px;
     top: 0px;
-    margin-top: 4px;
     padding: 0px 5px;
     background: none;
     cursor: pointer;
     border: transparent;
     color: black;
-    font-size: 23px;
 }
 
 @media (max-width: 640px) {

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
@@ -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 || 'Dummy_User'}
+                            </p>
+                        </div>
                     </div>
                 ))}