Merge branch 'main' of github.com:quentinrsl/traque into main

traque-front/app/admin/layout.js

@@ -1,11 +1,24 @@
-import { AdminConnexionProvider } from "@/context/adminConnexionContext";
+import { AdminConnexionProvider} from "@/context/adminConnexionContext";
 import { AdminProvider } from "@/context/adminContext";
+import Link from "next/link";
 
 export default function AdminLayout({ children}) {
     return (
         <AdminConnexionProvider>
             <AdminProvider>
+                <div className='h-full flex items-stretch flex-col'>
+                    <div className="h-20 bg-gray-800 text-white flex items-center justify-left">
+                        <div className="mx-5">Admin</div>
+                        <ul className='flex space-x-4'>
+                            <li><Link href="/admin">Home</Link></li>
+                            <li><Link href="/admin/teams">Teams</Link></li>
+                            <li><Link href="/admin/map">Map</Link></li>
+                        </ul>
+                    </div>
+                    <div className="h-full block">
                         {children}
+                    </div>
+                </div>
             </AdminProvider>
         </AdminConnexionProvider>
     )

traque-front/app/admin/login/page.js

@@ -1,16 +1,11 @@
 "use client";
 import LoginForm from '@/components/team/loginForm'
 import { useAdminConnexion } from '@/context/adminConnexionContext';
-import { redirect } from 'next/navigation';
+import React from 'react'
-import React, { useEffect } from 'react'
 
 export default function AdminLoginPage() {
-    const { login, loggedIn } = useAdminConnexion();
+    const {login, useProtect} = useAdminConnexion();
-    useEffect(() => {
+    useProtect();
-        if (loggedIn) {
-            redirect("/admin");
-        }
-    }, [loggedIn]);
     return (
         <LoginForm title="Admin login" placeholder="Admin password" buttonText={"Login"} onSubmit={login} />
     )

traque-front/app/admin/page.js

@@ -1,35 +1,21 @@
 "use client";
-import TeamAddForm from '@/components/admin/teamAdd';
+import BlueButton, { GreenButton, RedButton } from "@/components/util/button";
-import TeamEdit from '@/components/admin/teamEdit';
+import { useAdminConnexion } from "@/context/adminConnexionContext";
-import TeamList from '@/components/admin/teamList';
+import useAdmin from "@/hook/useAdmin";
-import { useAdminConnexion } from '@/context/adminConnexionContext';
+import { GameState } from "@/util/gameState";
-import useAdmin from '@/hook/useAdmin';
-import { redirect } from 'next/navigation';
-import React, { useEffect, useState } from 'react'
-
-
-export default function Admin() {
-    const [selectedTeamId, setSelectedTeamId] = useState(null);
-    const { loggedIn } = useAdminConnexion();
-    const { addTeam } = useAdmin();
-
-    useEffect(() => {
-        if (!loggedIn) {
-          redirect("/admin/login");
-        }
-    }, [loggedIn]);
-
-
 
+export default function AdminPage() {
+    const { useProtect }  = useAdminConnexion();
+    const { gameState, changeState } = useAdmin();
+    useProtect();
     return (
-      <div className='h-full p-10 flex flex-row justify-between'> 
+        <div className='h-full bg-gray-200 p-10 flex flex-col justify-between'>
-        <div className='w-5/12 h-full p-4 shadow-md rounded outline'>
+            <div className='w-max gap-3 bg-gray-200 p-10 flex flex-col text-center shadow-2xl '>
-          <h2 className='text-2xl text-center'>Team list</h2>
+                <h2 className="text-2xl">Game state </h2>
-          <TeamAddForm onAddTeam={addTeam}/>
+                <strong className="p-5 bg-gray-900 text-white text-xl rounded">Current : {gameState}</strong>
-          <TeamList selectedTeamId={selectedTeamId} onSelected={setSelectedTeamId}/>
+                <RedButton onClick={() => changeState(GameState.SETUP)}>Reset game</RedButton>
-        </div>
+                <GreenButton onClick={() => changeState(GameState.PLACEMENT)}>Start placement</GreenButton>
-        <div className='w-5/12 h-full p-4 shadow-md rounded outline'>
+                <BlueButton onClick={() => changeState(GameState.PLAYING)}>Start game</BlueButton>
-          <TeamEdit selectedTeamId={selectedTeamId} setSelectedTeamId={setSelectedTeamId}/>
             </div>
         </div>
     )

traque-front/app/admin/teams/page.js

@@ -0,0 +1,28 @@
+"use client";
+import TeamAddForm from '@/components/admin/teamAdd';
+import TeamEdit from '@/components/admin/teamEdit';
+import TeamList from '@/components/admin/teamList';
+import { useAdminConnexion } from '@/context/adminConnexionContext';
+import useAdmin from '@/hook/useAdmin';
+import React, { useState } from 'react'
+
+export default function TeamAdminPage() {
+    const [selectedTeamId, setSelectedTeamId] = useState(null);
+    const { addTeam } = useAdmin();
+    const { useProtect }  = useAdminConnexion();
+    useProtect();
+
+
+  return (
+      <div className='h-full bg-gray-200 p-10 flex flex-row justify-between'> 
+        <div className='w-1/2 p-5 bg-white mx-5 h-full p-4 shadow-2xl rounded'>
+          <h2 className='text-2xl text-center'>Team list</h2>
+          <TeamAddForm onAddTeam={addTeam}/>
+          <TeamList selectedTeamId={selectedTeamId} onSelected={setSelectedTeamId}/>
+        </div>
+        <div className='w-1/2 p-5 mx-5 bg-white h-full p-4 shadow-2xl rounded'>
+          {selectedTeamId && <TeamEdit selectedTeamId={selectedTeamId} setSelectedTeamId={setSelectedTeamId}/>}
+        </div>
+      </div>
+  )
+}

traque-front/app/team/layout.js

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

traque-front/app/team/page.js

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

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

@@ -1,10 +1,9 @@
 "use client";
 import ActionDrawer from '@/components/team/actionDrawer';
-import Button from '@/components/util/button';
+import { useTeamConnexion } from '@/context/teamConnexionContext';
-import useGame from '@/hook/useGame';
+import useGame, { GameState } from '@/hook/useGame';
 import dynamic from 'next/dynamic';
-import { redirect } from 'next/navigation';
+import React from 'react'
-import React, { useEffect } from 'react'
 
 //Load the map without SSR
 const LiveMap = dynamic(() => import('@/components/team/map'), {
@@ -12,17 +11,12 @@ const LiveMap = dynamic(() => import('@/components/team/map'), {
 });
 
 export default function Track() {
-    const { currentPosition, enemyPosition, loggedIn } = useGame();
+    const { gameState } = useGame();
-    useEffect(() => {
+    const {useProtect} = useTeamConnexion();
-        if (!loggedIn) {
+    useProtect();
-            redirect("/team");
-        }
-    }, [loggedIn]);
-
-
     return ( 
-        <div className='h-full'>
+        gameState == GameState.PLAYING && <div className='h-full'>
-            <LiveMap currentPosition={currentPosition} enemyPosition={enemyPosition}/>
+            <LiveMap currentPosition={currentPosition} enemyPosition={enemyPosition} />
             <ActionDrawer />
         </div>
     )

traque-front/components/admin/mapPicker.jsx

@@ -0,0 +1,77 @@
+"use client";
+import { useLocation } from "@/hook/useLocation";
+import { use, useEffect, useState } from "react";
+import "leaflet/dist/leaflet.css";
+import { Circle, MapContainer, TileLayer, useMap } from "react-leaflet";
+
+function MapPan(props) {
+    const map = useMap();
+    const [initialized, setInitialized] = useState(false);
+
+    useEffect(() => {
+        if (!initialized && props.center) {
+            map.flyTo(props.center, props.zoom, { animate: false });
+            setInitialized(true)
+        }
+    }, [props.center]);
+    return null;
+}
+
+function MapEventListener({onClick, onMouseMove}) {
+    const map = useMap();
+    useEffect(() => {
+        map.on('click', onClick);
+        return () => {
+            map.off('click', onClick);
+        }
+    }, [onClick]);
+    useEffect(() => {
+        map.on('mousemove', onMouseMove);
+        return () => {
+            map.off('mousemove', onMouseMove);
+        }
+    });
+    return null;
+}
+
+export function CircularAreaPicker({area, setArea, ...props}) {
+    const DEFAULT_ZOOM = 17;
+    const location = useLocation(Infinity);
+    const [drawing, setDrawing] = useState(false);
+    const [center, setCenter] = useState(area?.center || null);
+    const [radius, setRadius] = useState(area?.radius || null);
+
+    useEffect(() => {
+        console.log(area)
+        setDrawing(false);
+        setCenter(area?.center || null);
+        setRadius(area?.radius || null);
+    }, [area])
+
+    function handleClick(e) {
+        if(!drawing) {
+            setCenter(e.latlng);
+            setRadius(null);
+            setDrawing(true);
+        } else {
+            setDrawing(false);
+            setArea({center, radius});
+        }
+    }
+
+    function handleMouseMove(e) {
+        if(drawing) {
+            setRadius(e.latlng.distanceTo(center));
+        }
+    }
+    return (
+        <MapContainer  {...props} className='min-h-full w-full ' center={[0, 0]} zoom={0} scrollWheelZoom={true}>
+            <TileLayer
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+            />
+            {center && radius && <Circle center={center} radius={radius} fillColor="blue"/>}
+            <MapPan center={location} zoom={DEFAULT_ZOOM} />
+            <MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
+        </MapContainer>)
+}

traque-front/components/admin/teamAdd.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import TextInput from '../util/textInput'
-import Button from '../util/button'
+import BlueButton from '../util/button'
 
 export default function TeamAddForm({onAddTeam}) {
     const [teamName, setTeamName] = React.useState('');
@@ -15,7 +15,7 @@ export default function TeamAddForm({onAddTeam}) {
                 <TextInput name="teamName" label='Team name' value={teamName} onChange={(e) => setTeamName(e.target.value)}/>
             </div>
             <div className='w-1/5'>
-                <Button type="submit" className="w-5">+</Button>
+                <BlueButton type="submit" className="w-5">+</BlueButton>
             </div>
         </form>
     )

traque-front/components/admin/teamEdit.jsx

@@ -1,32 +1,29 @@
 import React, { useEffect, useState } from 'react'
 import TextInput from '../util/textInput'
-import Button from '../util/button';
+import BlueButton from '../util/button';
 import useAdmin from '@/hook/useAdmin';
+import dynamic from 'next/dynamic';
 
-export default function TeamEdit({selectedTeamId, setSelectedTeamId}) {
+const CircularAreaPicker = dynamic(() => import('./mapPicker').then((mod) => mod.CircularAreaPicker), {
+    ssr: false
+});
+
+export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
     const [newTeamName, setNewTeamName] = React.useState('');
-    const {setTeamName, getTeamName, removeTeam, getTeam} = useAdmin();
+    const { updateTeam, getTeamName, removeTeam, getTeam, teams } = useAdmin();
     const [team, setTeam] = useState({})
 
     useEffect(() => {
         let team = getTeam(selectedTeamId);
         if (team != undefined) {
             setNewTeamName(team.name);
-        }
-    },[selectedTeamId])
-
-    
-    useEffect(() => {
-        let team = getTeam(selectedTeamId);
-        if (team != undefined) {
             setTeam(team);
         }
-    }, [selectedTeamId])
+    }, [selectedTeamId, teams])
 
-
+    function handleRename(e) {
-    function handleSubmit(e) {
         e.preventDefault();
-        setTeamName(team.id, newTeamName);
+        updateTeam(team.id, {name:newTeamName});
     }
 
     function handleRemove() {
@@ -35,29 +32,36 @@ export default function TeamEdit({selectedTeamId, setSelectedTeamId}) {
     }
 
     return (team &&
+        <div className='flex flex-col h-full'>
+
             <div className='flex flex-row'>
                 <div className='w-1/2 flex flex-col space-y-3 mx-2'>
                     <h2 className='text-2xl text-center'>Actions</h2>
-            <form className='flex flex-row' onSubmit={handleSubmit}>
+                    <form className='flex flex-row' onSubmit={handleRename}>
                         <div className='w-4/5'>
-                    <TextInput name="teamName" label='Team name' value={newTeamName} onChange={(e) => setNewTeamName(e.target.value)}/>
+                            <TextInput name="teamName" label='Team name' value={newTeamName} onChange={(e) => setNewTeamName(e.target.value)} />
                         </div>
                         <div className='w-2/5'>
-                    <Button type="submit">Rename</Button>
+                            <BlueButton type="submit">Rename</BlueButton>
                         </div>
                     </form>
-            <Button onClick={handleRemove}>Eliminate</Button>
+                    <BlueButton onClick={handleRemove}>Remove</BlueButton>
                 </div>
                 <div className='w-1/2 flex flex-col space-y-2 mx-2'>
                     <h2 className='text-2xl text-center'>Team details</h2>
                     <div>
-                <p>Secret : {String(team.id).padStart(6,'0')}</p>
+                        <p>Secret : {String(team.id).padStart(6, '0')}</p>
                         <p>Name : {team.name}</p>
                         <p>Chasing : {getTeamName(team.chasing)}</p>
                         <p>Chased by : {getTeamName(team.chased)}</p>
-                <p>Capture code : {String(team.captureCode).padStart(4,'0')}</p>
+                        <p>Capture code : {String(team.captureCode).padStart(4, '0')}</p>
                     </div>
                 </div>
             </div>
+            <div className='m-5 h-full flex flex-col'>
+                <h2 className='text-2xl text-center'>Starting area</h2>
+                <CircularAreaPicker area={team.startingArea} setArea={(startingArea) => updateTeam(team.id, {startingArea})} />
+            </div>
+        </div>
     )
 }

traque-front/components/team/actionDrawer.jsx

@@ -1,6 +1,6 @@
 import useGame from "@/hook/useGame";
 import { useState } from "react"
-import Button, { GreenButton, RedButton } from "../util/button";
+import BlueButton, { GreenButton, RedButton } from "../util/button";
 import TextInput from "../util/textInput";
 
 export default function ActionDrawer() {
@@ -23,10 +23,10 @@ export default function ActionDrawer() {
                     </div>
                 </div>
                 <div className="h-20 my-1">
-                    <Button onClick={sendCurrentPosition} className="h-10">Update position</Button>
+                    <BlueButton onClick={sendCurrentPosition} className="h-10">Update position</BlueButton>
                 </div>
                 <div className="h-20 my-1">
-                    <Button onClick={sendCurrentPosition} className="h-10">Message log</Button>
+                    <BlueButton onClick={sendCurrentPosition} className="h-10">Message log</BlueButton>
                 </div>
                 <div className="h-20 my-1">
                     <GreenButton onClick={sendCurrentPosition}>See target info</GreenButton>

traque-front/components/team/loginForm.jsx

@@ -1,6 +1,6 @@
 "use client";
 import { useState } from "react";
-import Button from "../util/button";
+import BlueButton from "../util/button";
 import TextInput from "../util/textInput";
 
 export default function LoginForm({ onSubmit, title, placeholder, buttonText}) {
@@ -14,7 +14,7 @@ export default function LoginForm({ onSubmit, title, placeholder, buttonText}) {
         <form className="bg-white shadow-md max-w mx-auto p-5 mx-10 flex flex-col space-y-4" onSubmit={handleSubmit}>
             <h1 className="text-2xl font-bold text-center text-gray-700">{title}</h1>
             <TextInput inputMode="numeric" placeholder={placeholder} value={value} onChange={(e) => setValue(e.target.value)} name="team-id"/>
-            <Button type="submit">{buttonText}</Button>
+            <BlueButton type="submit">{buttonText}</BlueButton>
         </form>
     )
 }

traque-front/components/team/map.jsx

@@ -4,6 +4,7 @@ import { MapContainer, Marker, Popup, TileLayer, useMap } from 'react-leaflet'
 import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'
 import "leaflet-defaulticon-compatibility";
 import "leaflet/dist/leaflet.css";
+import useGame from '@/hook/useGame';
 
 const DEFAULT_ZOOM = 17;
 
@@ -15,7 +16,7 @@ function MapPan(props) {
 
   useEffect(() => {
     if(!initialized && props.center) {
-        map.flyTo(props.center, DEFAULT_ZOOM);
+        map.flyTo(props.center, DEFAULT_ZOOM, {animate: false});
         setInitialized(true)
     }
   },[props.center]);
@@ -23,8 +24,8 @@ function MapPan(props) {
   return null;
 }
 
-export default function LiveMap({enemyPosition, currentPosition, ...props}) {
+export default function LiveMap({ ...props}) {
-
+    const {currentPosition, enemyPosition} = useGame();
     return (
         <MapContainer  {...props} className='min-h-full z-0' center={[0,0]} zoom={0} scrollWheelZoom={true}>
             <TileLayer

traque-front/components/util/button.jsx

@@ -1,4 +1,4 @@
-export default function Button({ children, ...props }) {
+export default function BlueButton({ children, ...props }) {
     return (<button {...props} className="bg-blue-600 hover:bg-blue-500 text-lg ease-out duration-200 text-white w-full h-full p-4 shadow-sm rounded">
         {children}
     </button>)

traque-front/context/adminConnexionContext.jsx

@@ -1,38 +1,26 @@
 "use client";
-import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { createContext, useContext,  useMemo, } from "react";
 import { useSocket } from "./socketContext";
-import { useSocketListener } from "@/hook/useSocketListener";
+import { useSocketAuth } from "@/hook/useSocketAuth";
-import { useLocalStorage } from "@/hook/useLocalStorage";
+import { usePasswordProtect } from "@/hook/usePasswordProtect";
 
-const adminContext = createContext();
+const adminConnexionContext = createContext();
 const AdminConnexionProvider = ({ children }) => {
-    const [loggedIn, setLoggedIn] = useState(false);
-    const [savedPassword, setSavedPassword] = useLocalStorage("admin_password", null);
     const { adminSocket } = useSocket();
+    const { login, loggedIn, loading } = useSocketAuth(adminSocket, "admin_password");
+    const useProtect = () => usePasswordProtect("/admin/login", "/admin", loading, loggedIn);
 
-    useEffect(() => {
+    const value = useMemo(() => ({ login, loggedIn, loading, useProtect }), [loggedIn, loading]);
-        if (savedPassword && !loggedIn) {
-            adminSocket.emit("login", savedPassword);
-        }
-    }, [savedPassword]);
-
-    function login(password) {
-        setSavedPassword(password)
-    }
-
-    useSocketListener(adminSocket, "login_response", setLoggedIn);
-
-    const value = useMemo(() => ({ login, loggedIn }), [loggedIn]);
 
     return (
-        <adminContext.Provider value={value}>
+        <adminConnexionContext.Provider value={value}>
             {children}
-        </adminContext.Provider>
+        </adminConnexionContext.Provider>
     );
 }
 
 function useAdminConnexion() {
-    return useContext(adminContext);
+    return useContext(adminConnexionContext);
 }
 
 export { AdminConnexionProvider, useAdminConnexion };

traque-front/context/adminContext.jsx

@@ -3,15 +3,17 @@ import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { useSocket } from "./socketContext";
 import { useSocketListener } from "@/hook/useSocketListener";
 import { useAdminConnexion } from "./adminConnexionContext";
+import { GameState } from "@/util/gameState";
 
 const adminContext = createContext();
 
 function AdminProvider({children}) {
     const [teams, setTeams] = useState([]);
-    const [started, setStarted] = useState(false);
     const { adminSocket } = useSocket();
     const {loggedIn} = useAdminConnexion();
+    const [gameState, setGameState] = useState(GameState.SETUP);
 
+    useSocketListener(adminSocket, "game_state", setGameState);
     //Send a request to get the teams when the user logs in
     useEffect(() => {
         adminSocket.emit("get_teams");
@@ -19,9 +21,8 @@ function AdminProvider({children}) {
 
     //Bind listeners to update the team list and the game status on socket message
     useSocketListener(adminSocket, "teams", setTeams);
-    useSocketListener(adminSocket, "game_started", setStarted);
 
-    const value = useMemo(() => ({teams, setTeams, started, setStarted}), [teams, started]);
+    const value = useMemo(() => ({teams, setTeams, gameState}), [teams, gameState]);
     return (
         <adminContext.Provider value={value}>
             {children}

traque-front/context/socketContext.jsx

@@ -6,8 +6,6 @@ const { io } = require("socket.io-client");
 const SOCKET_URL = 'wss://' + process.env.NEXT_PUBLIC_SOCKET_HOST + ':' + process.env.NEXT_PUBLIC_SOCKET_PORT;
 const USER_SOCKET_URL = SOCKET_URL + "/player";
 const ADMIN_SOCKET_URL = SOCKET_URL + "/admin";
-console.log(USER_SOCKET_URL);
-console.log(ADMIN_SOCKET_URL);
 
 export const teamSocket = io(USER_SOCKET_URL);
 export const adminSocket = io(ADMIN_SOCKET_URL);

traque-front/context/teamConnexionContext.jsx

@@ -1,28 +1,16 @@
 "use client";
-import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { createContext, useContext, useMemo } from "react";
 import { useSocket } from "./socketContext";
-import { useSocketListener } from "@/hook/useSocketListener";
+import { useSocketAuth } from "@/hook/useSocketAuth";
-import { useLocalStorage } from "@/hook/useLocalStorage";
+import { usePasswordProtect } from "@/hook/usePasswordProtect";
 
 const teamConnexionContext = createContext();
 const TeamConnexionProvider = ({ children }) => {
-    const [loggedIn, setLoggedIn] = useState(false);
-    const [teamId, setTeamId] = useLocalStorage("team_id", null);
     const { teamSocket } = useSocket();
+    const { login, password: teamId, loggedIn, loading } = useSocketAuth(teamSocket, "team_password");
+    const useProtect = () => usePasswordProtect("/team", "/team/track", loading, loggedIn);
 
-    useEffect(() => {
+    const value = useMemo(() => ({ teamId, login, loggedIn, loading, useProtect}), [teamId, login, loggedIn, loading]);
-        if (teamId && !loggedIn) {
-            teamSocket.emit("login", teamId);
-        }
-    }, [teamId]);
-
-    function login(id) {
-        setTeamId(id);
-    }
-    
-    useSocketListener(teamSocket, "login_response", setLoggedIn);
-
-    const value = useMemo(() => ({ teamId, login, loggedIn }), [teamId, login, loggedIn]);
 
     return (
         <teamConnexionContext.Provider value={value}>
@@ -35,5 +23,5 @@ function useTeamConnexion() {
     return useContext(teamConnexionContext);
 }
 
-export { TeamConnexionProvider, useTeamConnexion};
+export { TeamConnexionProvider, useTeamConnexion };
 

traque-front/context/teamContext.jsx

@@ -5,24 +5,29 @@ import { createContext, useContext, useEffect, useMemo, 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 [currentPosition, setCurrentPosition] = useState();
+    const [gameState, setGameState] = useState(GameState.SETUP);
+    const measuredLocation = useLocation(10000);
     const {teamSocket} = useSocket();
     const {loggedIn} = useTeamConnexion();
     
+    useSocketListener(teamSocket, "game_state", setGameState);
     useSocketListener(teamSocket, "enemy_position", setEnemyPosition);
+    useSocketListener(teamSocket, "live_location", setCurrentPosition);
 
     //Send the current position to the server when the user is logged in
     useEffect(() => {
-        console.log("sending position", currentPosition);
+        console.log("sending position", measuredLocation);
         if(loggedIn) {
-            teamSocket.emit("update_position", currentPosition);
+            teamSocket.emit("update_position", measuredLocation);
         }
-    }, [loggedIn, currentPosition]);
+    }, [loggedIn, measuredLocation]);
     
-    const value = useMemo(() => ({enemyPosition, currentPosition}), [enemyPosition, currentPosition]);
+    const value = useMemo(() => ({enemyPosition, currentPosition, gameState}), [enemyPosition, currentPosition, gameState]);
     return (
         <teamContext.Provider value={value}>
             {children}

traque-front/hook/useAdmin.jsx

@@ -2,7 +2,7 @@ import { useAdminContext } from "@/context/adminContext";
 import { useSocket } from "@/context/socketContext";
 
 export default function useAdmin(){
-    const {teams, started} = useAdminContext();
+    const {teams, gameState } = useAdminContext();
     const {adminSocket} = useSocket();
 
     function pollTeams() {
@@ -30,18 +30,14 @@ export default function useAdmin(){
         adminSocket.emit("remove_team", teamId);
     }
 
-    function setTeamName(teamId, newName) {
+    function updateTeam(teamId, team) {
-        adminSocket.emit("rename_team", teamId, newName);
+        adminSocket.emit("update_team", teamId, team);
     }
 
-    function startGame() {
+    function changeState(state) {
-        adminSocket.emit("start_game");
+        adminSocket.emit("change_state", state);
     }
 
-    function stopGame() {
+    return {teams, gameState, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, changeState, updateTeam };
-        adminSocket.emit("stop_game");
-    }
-
-    return { teams, started, pollTeams, getTeam, getTeamName, reorderTeams, addTeam, removeTeam, startGame, stopGame, setTeamName };
 
 }

traque-front/hook/useGame.jsx

@@ -6,12 +6,13 @@ import { useTeamContext } from "@/context/teamContext";
 
 export default function useGame() {
     const {teamSocket} = useSocket();
-    const {loggedIn, login, teamId} = useTeamConnexion();
+    const {teamId} = useTeamConnexion();
-    const {currentPosition, enemyPosition} = useTeamContext();
+    const {currentPosition, enemyPosition, gameState} = useTeamContext();
 
     function sendCurrentPosition() {
         teamSocket.emit("send_position");
     }
 
-    return { sendCurrentPosition, login, enemyPosition, currentPosition, loggedIn, teamId };
+
+    return { sendCurrentPosition, enemyPosition, currentPosition, teamId, gameState};
 }

traque-front/hook/useLocalStorage.jsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 
 export function useLocalStorage(key, initialValue) {
     const [storedValue, setStoredValue] = useState(initialValue);
+    const [loading, setLoading] = useState(true);
 
     useEffect(() => {
         try {
@@ -11,6 +12,7 @@ export function useLocalStorage(key, initialValue) {
         } catch (error) {
             console.log(error);
         }
+        setLoading(false);
     }, []);
 
     const setValue = value => {
@@ -23,5 +25,5 @@ export function useLocalStorage(key, initialValue) {
         }
     }
 
-    return [storedValue, setValue];
+    return [storedValue, setValue, loading];
 }

traque-front/hook/useLocation.jsx

@@ -9,9 +9,12 @@ export function useLocation(interval) {
     const [location, setLocation] = useState();
     useEffect(() => {
         function update() {
+            console.log('Updating location');
             navigator.geolocation.getCurrentPosition((position) => {
                 setLocation([position.coords.latitude, position.coords.longitude]);
+                if(interval != Infinity) {
                     setTimeout(update, interval);
+                }
             }, () => { }, { enableHighAccuracy: true, timeout: Infinity, maximumAge: 0 });
         }
         update();

traque-front/hook/usePasswordProtect.jsx

@@ -0,0 +1,15 @@
+"use client";
+import { redirect, usePathname } from "next/navigation";
+import { useEffect } from "react";
+
+export function usePasswordProtect(loginPath, redirectPath, loading, loggedIn) {
+    const path = usePathname();
+    useEffect(() => {
+        if (!loggedIn && !loading && path !== loginPath) {
+            redirect(loginPath);
+        }
+        if(loggedIn && !loading && path === loginPath) {
+            redirect(redirectPath)
+        }
+    }, [loggedIn, loading, path]);
+}

traque-front/hook/useSocketAuth.jsx

@@ -0,0 +1,43 @@
+import {useEffect, useState} from 'react';
+import { useSocketListener } from './useSocketListener';
+import { useLocalStorage } from './useLocalStorage';
+import { usePathname } from 'next/navigation';
+
+const LOGIN_MESSAGE = "login";
+const LOGIN_RESPONSE_MESSAGE = "login_response";
+
+export function useSocketAuth(socket, passwordName) {
+    const [loggedIn, setLoggedIn] = useState(false);
+    const [loading, setLoading] = useState(true);
+    const [waitingForResponse, setWaitingForResponse] = useState(true);
+    const [savedPassword, setSavedPassword, savedPasswordLoading] = useLocalStorage(passwordName, null);
+    
+    useEffect(() => {
+        if (savedPassword && !loggedIn) {
+            socket.emit(LOGIN_MESSAGE, savedPassword);
+        }
+    }, [savedPassword]);
+
+    function login(password) {
+        setSavedPassword(password)
+    }
+
+    useSocketListener(socket, LOGIN_RESPONSE_MESSAGE,(loginResponse) => {
+        setWaitingForResponse(false);
+        setLoggedIn(loginResponse);
+    });
+
+    useEffect(() => {
+        //There is a password saved and we recieved a login response
+        if(savedPassword && !waitingForResponse && !savedPasswordLoading) {
+            setLoading(false);
+        }
+        //We tried to load the saved password but it is not there
+        else if (savedPassword == null && !savedPasswordLoading) {
+            setLoading(false);
+        }
+    }, [waitingForResponse, savedPasswordLoading, savedPassword]);
+
+
+    return {login,password: savedPassword, loggedIn, loading};
+}

traque-front/util/gameState.js

@@ -0,0 +1,6 @@
+export const GameState = {
+    SETUP: "setup",
+    PLACEMENT: "placement",
+    PLAYING: "playing",
+    FINISHED: "finished"
+}