implemented front end for displaying notifications

traque-front/app/team/track/page.js

@@ -1,7 +1,9 @@
 "use client";
 import ActionDrawer from '@/components/team/actionDrawer';
+import { Notification } from '@/components/team/notification';
 import PlacementOverlay from '@/components/team/placementOverlay';
 import { WaitingScreen } from '@/components/team/waitingScreen';
+import {  useSocket } from '@/context/socketContext';
 import { useTeamConnexion } from '@/context/teamConnexionContext';
 import useGame from '@/hook/useGame';
 import { GameState } from '@/util/gameState';
@@ -19,8 +21,10 @@ const PlacementMap = dynamic(() => import('@/components/team/map').then((mod) =>
 export default function Track() {
     const { gameState, captured} = useGame();
     const { useProtect } = useTeamConnexion();
+    const { teamSocket: socket} = useSocket();
     useProtect();
     return <>
+        <Notification socket={socket}/>
         {gameState == GameState.SETUP && <WaitingScreen />}
         {gameState == GameState.PLAYING && !captured && <div className='h-full'>
             <LiveMap />

traque-front/components/team/map.jsx

@@ -34,7 +34,7 @@ function LiveZone() {
 function ZoneExtremities() {
     const { zoneExtremities } = useTeamContext();
     console.log('Zone extremities', zoneExtremities);
-    return zoneExtremities && zoneExtremities.begin && zoneExtremities.end && <>
+    return zoneExtremities?.begin && zoneExtremities?.end && <>
         <Circle center={zoneExtremities.begin.center} radius={zoneExtremities.begin.radius} color='black' fill={false} />
         <Circle center={zoneExtremities.end.center} radius={zoneExtremities.end.radius} color='red' fill={false} />
     </>

traque-front/components/team/notification.jsx

@@ -0,0 +1,48 @@
+import { useSocketListener } from "@/hook/useSocketListener";
+import { useEffect, useState } from "react";
+
+export function Notification({socket }) {
+    const [visible, setVisible] = useState(false);
+    const [timeoutId, setTimeoutId] = useState(null);
+    
+    const [notification, setNotification] = useState(null);
+    useSocketListener(socket, "error", (notification) => {
+        console.log("error", notification);
+        setNotification({type: "error", text: notification});
+        setVisible(true);
+    });
+    useSocketListener(socket, "success", (notification) => {
+        console.log("success", notification);
+        setNotification({type: "success", text: notification});
+        setVisible(true);
+    });
+    useSocketListener(socket, "warning", (notification) => {
+        console.log("warning", notification);
+        setNotification({type: "warning", text: notification});
+        setVisible(true);
+    });
+    // Hide the notification after 5 seconds
+    useEffect(() => {
+        console.log({visible});
+        if (visible && notification?.text != undefined) {
+            clearTimeout(timeoutId);
+            setTimeoutId(setTimeout(() => {
+                setVisible(false);
+            }, 3000));
+        }
+    }, [visible]);
+
+    let bgColorMap = {
+        error: "bg-red-500",
+        success: "bg-green-500",
+        warning: "bg-yellow-500"
+    }
+    const classNames = 'fixed w-11/12 p-5 z-30 mx-auto inset-x-0 flex justify-center rounded-xl transition-all shadow-xl ' + (visible ? "top-5 " : "-translate-y-full ");
+    return ( 
+        Object.keys(bgColorMap).map((key) =>
+            notification?.type == key && 
+            <div className={classNames + bgColorMap[key]} onClick={() => setVisible(false)}>
+                <p className='text-center text-xl'>{notification?.text}</p>
+            </div>
+    ));
+}