Implemented player login

traque-front/app/page.js

@@ -1,13 +0,0 @@
-"use client"
-import LoginForm from "@/components/team/loginForm";
-
-export default function Home() {
-  function login(teamId) {
-    console.log(teamId);
-  }
-  return (
-    <div>
-      <LoginForm title={"Team login"} placeholder={"team ID"} buttonText={"Login"} onSubmit={login}/>
-    </div>
-  );
-}

traque-front/app/team/layout.js

@@ -0,0 +1,12 @@
+import { TeamConnexionProvider } from "@/context/teamConnexionContext";
+import { TeamProvider } from "@/context/teamContext";
+
+export default function AdminLayout({ children}) {
+    return (
+        <TeamConnexionProvider>
+            <TeamProvider>
+                {children}
+            </TeamProvider>
+        </TeamConnexionProvider>
+    )
+}

traque-front/app/team/page.js

@@ -0,0 +1,19 @@
+"use client"
+import LoginForm from "@/components/team/loginForm";
+import useGame from "@/hook/useGame";
+import { redirect } from "next/navigation";
+import { useEffect } from "react";
+
+export default function Home() {
+  const { login, loggedIn } = useGame();
+  useEffect(() => {
+    if (loggedIn) {
+      redirect("/team/track");
+    }
+  }, [loggedIn]);
+  return (
+    <div>
+      <LoginForm title={"Team login"} placeholder={"team ID"} buttonText={"Login"} onSubmit={(value) => login(parseInt(value))}/>
+    </div>
+  );
+}

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

@@ -1,8 +1,9 @@
 "use client";
 import Button from '@/components/util/button';
+import useGame from '@/hook/useGame';
 import dynamic from 'next/dynamic';
+import { redirect } from 'next/navigation';
 import React, { useEffect } from 'react'
-import useGame from '../../hook/useGame';
 
 //Load the map without SSR
 const LiveMap = dynamic(() => import('@/components/team/map'), {
@@ -10,7 +11,12 @@ const LiveMap = dynamic(() => import('@/components/team/map'), {
 });
 
 export default function Track() {
-    const { currentPosition, enemyPosition, updateCurrentPosition, sendCurrentPosition } = useGame();
+    const { currentPosition, enemyPosition, loggedIn, sendCurrentPosition } = useGame();
+    useEffect(() => {
+        if (!loggedIn) {
+            redirect("/team");
+        }
+    }, [loggedIn]);
 
 
     return (

traque-front/components/team/map.jsx

@@ -7,12 +7,14 @@ import "leaflet/dist/leaflet.css";
 
 const DEFAULT_ZOOM = 17;
 
+
+// Pan to the center of the map when the position of the user is updated for the first time
 function MapPan(props) {
   const map = useMap();
   const [initialized, setInitialized] = useState(false);
 
   useEffect(() => {
-    if(!initialized && JSON.stringify(props.center) != "[0,0]") {
+    if(!initialized && props.center) {
         map.flyTo(props.center, DEFAULT_ZOOM);
         setInitialized(true)
     }
@@ -22,20 +24,6 @@ function MapPan(props) {
 }
 
 export default function LiveMap({enemyPosition, currentPosition, ...props}) {
-    const [positionSet, setPositionSet] = useState(false);
-    useEffect(() => {
-        if(!positionSet && JSON.stringify(currentPosition) != "[0,0]") {
-            setPositionSet(true);
-        }
-    }, [currentPosition]);
-    const [enemyPositionSet, setEnemyPositionSet] = useState(false);
-    useEffect(() => {
-        if(!enemyPositionSet && JSON.stringify(enemyPosition) != "[0,0]") {
-            setEnemyPositionSet(true);
-        }
-    }, [enemyPosition]);
-
-
 
     return (
         <MapContainer  {...props} center={[0,0]} zoom={0} scrollWheelZoom={true}>
@@ -43,7 +31,7 @@ export default function LiveMap({enemyPosition, currentPosition, ...props}) {
                 attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
             />
-            {positionSet && <Marker position={currentPosition} icon={new L.Icon({
+            {currentPosition && <Marker position={currentPosition} icon={new L.Icon({
                 iconUrl: '/icons/location.png',
                 iconSize: [41, 41],
                 iconAnchor: [12, 41],
@@ -54,7 +42,7 @@ export default function LiveMap({enemyPosition, currentPosition, ...props}) {
                     Votre position
                 </Popup>
             </Marker>}
-            {enemyPositionSet && <Marker  position={enemyPosition} icon={new L.Icon({
+            {enemyPosition && <Marker  position={enemyPosition} icon={new L.Icon({
                 iconUrl: '/icons/target.png',
                 iconSize: [41, 41],
                 iconAnchor: [12, 41],

traque-front/context/adminConnexionContext.jsx

@@ -1,30 +1,22 @@
 "use client";
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useState } from "react";
 import { useSocket } from "./socketContext";
+import { useSocketListener } from "@/hook/useSocketListener";
 
 const adminContext = createContext();
 const AdminConnexionProvider = ({ children }) => {
     const [loggedIn, setLoggedIn] = useState(false);
     const { adminSocket } = useSocket();
-    
+
     function login(password) {
         adminSocket.emit("login", password);
     }
-    
-    useEffect(() => {
-        function updateLoginStatus(status) {
-        setLoggedIn(status);
-        }
-        adminSocket.on("login_response", updateLoginStatus);
-    
-        return () => {
-        adminSocket.off("login_response", updateLoginStatus);
-        };
-    }, []);
-    
+
+    useSocketListener(adminSocket, "login_response", setLoggedIn);
+
     return (
         <adminContext.Provider value={{ login, loggedIn }}>
-        {children}
+            {children}
         </adminContext.Provider>
     );
 }
@@ -33,5 +25,5 @@ function useAdminConnexion() {
     return useContext(adminContext);
 }
 
-export { AdminConnexionProvider, useAdminConnexion};
+export { AdminConnexionProvider, useAdminConnexion };
 

traque-front/context/adminContext.jsx

@@ -1,11 +1,26 @@
 "use client";
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
+import { useSocket } from "./socketContext";
+import { useSocketListener } from "@/hook/useSocketListener";
+import { useAdminConnexion } from "./adminConnexionContext";
 
 const adminContext = createContext();
 
 function AdminProvider({children}) {
     const [teams, setTeams] = useState([]);
     const [started, setStarted] = useState(false);
+    const { adminSocket } = useSocket();
+    const {loggedIn} = useAdminConnexion();
+
+    //Send a request to get the teams when the user logs in
+    useEffect(() => {
+        adminSocket.emit("get_teams");
+    }, [loggedIn]);
+
+    //Bind listeners to update the team list and the game status on socket message
+    useSocketListener(adminSocket, "teams", setTeams);
+    useSocketListener(adminSocket, "game_started", setStarted);
+
     return (
         <adminContext.Provider value={{teams, setTeams, started, setStarted}}>
             {children}

traque-front/context/socketContext.jsx

@@ -4,16 +4,16 @@ import { createContext, useContext } from "react";
 const { io } = require("socket.io-client");
 
 const SOCKET_URL = "http://localhost:3000";
-const USER_SOCKET_URL = SOCKET_URL + "/user";
+const USER_SOCKET_URL = SOCKET_URL + "/player";
 const ADMIN_SOCKET_URL = SOCKET_URL + "/admin";
 
-export const userSocket = io(USER_SOCKET_URL);
+export const teamSocket = io(USER_SOCKET_URL);
 export const adminSocket = io(ADMIN_SOCKET_URL);
 export const SocketContext = createContext();
 
 export default function SocketProvider({ children }) {
     return (
-        <SocketContext.Provider value={{userSocket, adminSocket}}>{children}</SocketContext.Provider>
+        <SocketContext.Provider value={{teamSocket, adminSocket}}>{children}</SocketContext.Provider>
     );
 }
 

traque-front/context/teamConnexionContext.jsx

@@ -0,0 +1,31 @@
+"use client";
+import { createContext, useContext, useState } from "react";
+import { useSocket } from "./socketContext";
+import { useSocketListener } from "@/hook/useSocketListener";
+
+const teamConnexionContext = createContext();
+const TeamConnexionProvider = ({ children }) => {
+    const [loggedIn, setLoggedIn] = useState(false);
+    const [teamId, setTeamId] = useState(null);
+    const { teamSocket } = useSocket();
+    
+    function login(id) {
+        teamSocket.emit("login", id);
+        setTeamId(id);
+    }
+    
+    useSocketListener(teamSocket, "login_response", setLoggedIn);
+    
+    return (
+        <teamConnexionContext.Provider value={{ teamId, login, loggedIn }}>
+        {children}
+        </teamConnexionContext.Provider>
+    );
+}
+
+function useTeamConnexion() {
+    return useContext(teamConnexionContext);
+}
+
+export { TeamConnexionProvider, useTeamConnexion};
+

traque-front/context/teamContext.jsx

@@ -0,0 +1,36 @@
+"use client";
+import { useLocation } from "@/hook/useLocation";
+import { useSocketListener } from "@/hook/useSocketListener";
+import { createContext, useContext, useEffect, useState } from "react";
+import { useSocket } from "./socketContext";
+import { useTeamConnexion } from "./teamConnexionContext";
+
+const teamContext = createContext()
+function TeamProvider({children}) {
+    const [enemyPosition, setEnemyPosition] = useState();
+    const currentPosition = useLocation(10000);
+    const {teamSocket} = useSocket();
+    const {loggedIn} = useTeamConnexion();
+    
+    useSocketListener(teamSocket, "enemy_position", setEnemyPosition);
+
+    //Send the current position to the server when the user is logged in
+    useEffect(() => {
+        console.log("sending position", currentPosition);
+        if(loggedIn) {
+            teamSocket.emit("update_position", currentPosition);
+        }
+    }, [loggedIn, currentPosition]);
+    
+    return (
+        <teamContext.Provider value={{enemyPosition, currentPosition}}>
+            {children}
+        </teamContext.Provider>
+    );
+}
+
+function useTeamContext() {
+    return useContext(teamContext);
+}
+
+export { TeamProvider, useTeamContext };

traque-front/hook/useAdmin.jsx

@@ -1,28 +1,14 @@
 import { useAdminContext } from "@/context/adminContext";
 import { useSocket } from "@/context/socketContext";
-import { Underdog } from "next/font/google";
-
-const { useEffect, useState } = require("react");
 
 export default function useAdmin(){
-    const {teams, setTeams, started, setStarted} = useAdminContext();
+    const {teams, started} = useAdminContext();
     const {adminSocket} = useSocket();
 
     function pollTeams() {
         adminSocket.emit("get_teams");
     }
 
-    useEffect(() => {
-        pollTeams();
-    }, []);
-    useEffect(() => {
-        adminSocket.emit("get_teams");
-        adminSocket.on("teams", setTeams);
-        return () => {
-            adminSocket.off("teams", setTeams);
-        }
-    }, []);
-
     function getTeam(teamId) {
         return teams.find(team => team.id === teamId);
     }
@@ -56,13 +42,6 @@ export default function useAdmin(){
         adminSocket.emit("stop_game");
     }
 
-    useState(() => {
-        adminSocket.on("game_started", setStarted);
-        return () => {
-            adminSocket.off("game_started", setStarted);
-        }
-    }, []);
-
     return { teams, started, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, startGame, stopGame, setTeamName };
 
 }

traque-front/hook/useGame.jsx

@@ -1,61 +1,17 @@
 "use client";
 
 import { useSocket } from "@/context/socketContext";
-import { useEffect, useState } from "react";
+import { useTeamConnexion } from "@/context/teamConnexionContext";
+import { useTeamContext } from "@/context/teamContext";
 
 export default function useGame() {
-    const {userSocket} = useSocket();
-    const [loggedIn, setLoggedIn] = useState(false);
-    const [teamId, setTeamId] = useState(null);
-    const [enemyPosition, setEnemyPosition] = useState([0, 0]);
-    const [currentPosition, setCurrentPosition] = useState([0, 0]);
-
-    function updateCurrentPosition(position) {
-        setCurrentPosition(position);
-        userSocket.emit("update_position", position);
-    }
+    const {teamSocket} = useSocket();
+    const {loggedIn, login, teamId} = useTeamConnexion();
+    const {currentPosition, enemyPosition} = useTeamContext();
 
     function sendCurrentPosition() {
-        userSocket.emit("send_position", currentPosition);
+        teamSocket.emit("send_position", currentPosition);
     }
-    useEffect(() => {
-        function updateEnemyPosition(position) {
-            setEnemyPosition(position);
-        }
-        userSocket.on("enemy_position", updateEnemyPosition);
 
-        return () => {
-            userSocket.off("enemy_position", updateEnemyPosition);
-        }
-    }, []);
-
-    function login(teamId) {
-        setTeamId(teamId);
-        userSocket.emit("login", teamId);
-    }
-    useEffect(() => {
-        function updateLoginStatus(status) {
-            setLoggedIn(status);
-        }
-        userSocket.on("login_reponse", updateLoginStatus);
-
-        return () => {
-            userSocket.off("login_response", updateLoginStatus);
-        }
-    }, []);
-
-    useEffect(() => {
-        function udpate() {
-                console.log("update")
-                const position = navigator.geolocation.getCurrentPosition((position) => {
-                updateCurrentPosition([position.coords.latitude, position.coords.longitude]);
-            }, () => { }, { enableHighAccuracy: true, timeout: Infinity, maximumAge: 0 });
-        }
-        setInterval(udpate, 1000);
-        return () => {
-            clearInterval(udpate);
-        }
-    }, []);
-
-    return { updateCurrentPosition, sendCurrentPosition, login, enemyPosition, currentPosition, loggedIn, teamId };
+    return { sendCurrentPosition, login, enemyPosition, currentPosition, loggedIn, teamId };
 }

traque-front/hook/useLocation.jsx

@@ -0,0 +1,21 @@
+"use client";
+import { useEffect, useState } from "react";
+
+/**
+ * A hook that returns the location of the user and updates it periodically
+ * @returns {Object} The location of the user
+ */
+export function useLocation(interval) {
+    const [location, setLocation] = useState();
+    useEffect(() => {
+        function update() {
+            navigator.geolocation.getCurrentPosition((position) => {
+                setLocation([position.coords.latitude, position.coords.longitude]);
+                setTimeout(update, interval);
+            }, () => { }, { enableHighAccuracy: true, timeout: Infinity, maximumAge: 0 });
+        }
+        update();
+    }, []);
+
+    return location;
+}

traque-front/hook/useSocketListener.jsx

@@ -0,0 +1,10 @@
+import { useState } from "react";
+
+export function useSocketListener(socket, event, callback) {
+    return useState(() => {
+        socket.on(event, callback);
+        return () => {
+            socket.off(event, callback);
+        }
+    }, []);
+}