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

traque-front/app/admin/layout.js

@@ -6,8 +6,8 @@ export default function AdminLayout({ children}) {
     return (
         <AdminConnexionProvider>
             <AdminProvider>
-                <div className='h-full flex items-stretch flex-col'>
+                <div className='h-full flex flex-col'>
-                    <div className="h-20 bg-gray-800 text-white flex items-center justify-left">
+                    <div className="text-lg max-h-10 p-5 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>
@@ -15,7 +15,7 @@ export default function AdminLayout({ children}) {
                             <li><Link href="/admin/map">Map</Link></li>
                         </ul>
                     </div>
-                    <div className="h-full block">
+                    <div className="h-full overflow-y-scroll">
                         {children}
                     </div>
                 </div>

traque-front/app/admin/page.js

@@ -1,4 +1,5 @@
 "use client";
+import { TeamReady } from "@/components/admin/teamReady";
 import BlueButton, { GreenButton, RedButton } from "@/components/util/button";
 import { useAdminConnexion } from "@/context/adminConnexionContext";
 import useAdmin from "@/hook/useAdmin";
@@ -9,14 +10,15 @@ export default function AdminPage() {
     const { gameState, changeState } = useAdmin();
     useProtect();
     return (
-        <div className='h-full bg-gray-200 p-10 flex flex-col justify-between'>
+        <div className='min-h-full bg-gray-200 p-10 flex flex-row flex-wrap content-start gap-5'>
-            <div className='w-max gap-3 bg-gray-200 p-10 flex flex-col text-center shadow-2xl '>
+            <div className='w-max h-1/2 gap-3 bg-gray-200 p-10 flex flex-col text-center shadow-2xl '>
                 <h2 className="text-2xl">Game state </h2>
                 <strong className="p-5 bg-gray-900 text-white text-xl rounded">Current : {gameState}</strong>
                 <RedButton onClick={() => changeState(GameState.SETUP)}>Reset game</RedButton>
                 <GreenButton onClick={() => changeState(GameState.PLACEMENT)}>Start placement</GreenButton>
                 <BlueButton onClick={() => changeState(GameState.PLAYING)}>Start game</BlueButton>
             </div>
+            {gameState == GameState.PLACEMENT && <div className="max-h-5/6"><TeamReady /></div>}
         </div>
     )
 }

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

@@ -15,7 +15,7 @@ export default function TeamAdminPage() {
 
   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'>
+        <div className='w-1/2 p-5 bg-white mx-5 h-full p-4 shadow-2xl rounded overflow-y-scroll max-h-full'>
           <h2 className='text-2xl text-center'>Team list</h2>
           <TeamAddForm onAddTeam={addTeam}/>
           <TeamList selectedTeamId={selectedTeamId} onSelected={setSelectedTeamId}/>

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

@@ -1,5 +1,7 @@
 "use client";
 import ActionDrawer from '@/components/team/actionDrawer';
+import PlacementOverlay from '@/components/team/placementOverlay';
+import { WaitingScreen } from '@/components/team/waitingScreen';
 import { useTeamConnexion } from '@/context/teamConnexionContext';
 import useGame from '@/hook/useGame';
 import { GameState } from '@/util/gameState';
@@ -15,24 +17,23 @@ const PlacementMap = dynamic(() => import('@/components/team/map').then((mod) =>
 });
 
 export default function Track() {
-    const { gameState, name, ready } = useGame();
+    const { gameState, captured} = useGame();
     const { useProtect } = useTeamConnexion();
     useProtect();
     return <>
-        {gameState == GameState.PLAYING && <div className='h-full'>
+        {gameState == GameState.SETUP && <WaitingScreen />}
+        {gameState == GameState.PLAYING && !captured && <div className='h-full'>
             <LiveMap />
             <ActionDrawer />
         </div>
         }
+        {gameState == GameState.PLAYING && captured && <div className='h-full'>
+            <div className='text-center text-2xl'>Vous avez été capturé</div> 
+            <div className='text-center text-md'>Instructions de retour ici</div>
+        </div>}
         {gameState == GameState.PLACEMENT &&
             <div className='h-full'>
-                <div className='fixed t-0 p-3 w-full bg-gray-300 shadow-xl rounded-b-xl flex flex-col z-10 justify-center items-center'>
+                <PlacementOverlay />
-                    <div className='text-2xl my-3'>Placement</div>
-                    <div className='text-m'>{name}</div>
-                    {!ready && <div className='text-lg font-semibold text-red-700'>Positionez vous dans le cercle</div>}
-                    {ready && <div className='text-lg font-semibold text-green-700 text-center'>Restez dans le cercle en attendant que la partie commence</div>}
-
-                </div>
                 <PlacementMap />
             </div>
         }

traque-front/components/admin/mapPicker.jsx

@@ -3,6 +3,7 @@ import { useLocation } from "@/hook/useLocation";
 import { use, useEffect, useState } from "react";
 import "leaflet/dist/leaflet.css";
 import { Circle, MapContainer, TileLayer, useMap } from "react-leaflet";
+import { useMapCircleDraw } from "@/hook/mapDrawing";
 
 function MapPan(props) {
     const map = useMap();
@@ -34,36 +35,26 @@ function MapEventListener({onClick, onMouseMove}) {
     return null;
 }
 
+const DEFAULT_ZOOM = 17;
 export function CircularAreaPicker({area, setArea, ...props}) {
-    const DEFAULT_ZOOM = 17;
     const location = useLocation(Infinity);
-    const [drawing, setDrawing] = useState(false);
+    const {handleClick, handleMouseMove, center, radius} = useMapCircleDraw(area, setArea);
-    const [center, setCenter] = useState(area?.center || null);
+    return (
-    const [radius, setRadius] = useState(area?.radius || null);
+        <MapContainer  {...props} className='min-h-full w-full ' center={[0, 0]} zoom={0} scrollWheelZoom={true}>
-
+            <TileLayer
-    useEffect(() => {
+                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-        console.log(area)
+                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-        setDrawing(false);
+            />
-        setCenter(area?.center || null);
+            {center && radius && <Circle center={center} radius={radius} fillColor="blue"/>}
-        setRadius(area?.radius || null);
+            <MapPan center={location} zoom={DEFAULT_ZOOM} />
-    }, [area])
+            <MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
-
+        </MapContainer>)
-    function handleClick(e) {
+}
-        if(!drawing) {
+
-            setCenter(e.latlng);
+export function ZonePicker({minArea, setMinArea, maxArea, setMaxArea, ...props}) {
-            setRadius(null);
+    const location = useLocation(Infinity);
-            setDrawing(true);
+    const {handleClick: maxClick, handleMouseMove: maxHover, center: maxCenter, radius: maxRadius} = useMapCircleDraw(minArea, setMinArea);
-        } else {
+    const {handleClick: minClick, handleMouseMove: minHover, center: minCenter, radius: minRadius} = useMapCircleDraw(maxArea, setMaxArea);
-            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

traque-front/components/admin/teamEdit.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import TextInput from '../util/textInput'
-import BlueButton from '../util/button';
+import BlueButton, { RedButton } from '../util/button';
 import useAdmin from '@/hook/useAdmin';
 import dynamic from 'next/dynamic';
 
@@ -45,7 +45,8 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
                             <BlueButton type="submit">Rename</BlueButton>
                         </div>
                     </form>
-                    <BlueButton onClick={handleRemove}>Remove</BlueButton>
+                    <BlueButton onClick={() => updateTeam(team.id, {captured: !team.captured})}>{team.captured ? "Revive" : "Capture"}</BlueButton>
+                    <RedButton onClick={handleRemove}>Remove</RedButton>
                 </div>
                 <div className='w-1/2 flex flex-col space-y-2 mx-2'>
                     <h2 className='text-2xl text-center'>Team details</h2>
@@ -55,6 +56,7 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
                         <p>Chasing : {getTeamName(team.chasing)}</p>
                         <p>Chased by : {getTeamName(team.chased)}</p>
                         <p>Capture code : {String(team.captureCode).padStart(4, '0')}</p>
+                        <p>Captured : {team.captured ? "Yes" : "No"}</p>
                     </div>
                 </div>
             </div>

traque-front/components/admin/teamList.jsx

@@ -12,7 +12,16 @@ const reorder = (list, startIndex, endIndex) => {
 };
 
 function TeamListItem({ team, index, onSelected, itemSelected }) {
-    const classNames = 'w-full p-3 m-3 shadow ' + (itemSelected ? "bg-blue-400" : "bg-gray-100");
+    let bgColor;
+    if(itemSelected) {
+        bgColor = "bg-blue-400";
+    }else if(team.captured) {
+        bgColor = "bg-red-400";
+    }
+    else {
+        bgColor = "bg-gray-100";
+    }
+    const classNames = 'w-full p-3 my-3 shadow ' + (bgColor);
     return (
         <Draggable draggableId={team.id.toString()} index={index} onClick={() => onSelected(team.id)}>
             {provided => (

traque-front/components/admin/teamReady.jsx

@@ -0,0 +1,16 @@
+import useAdmin from "@/hook/useAdmin"
+
+export function TeamReady() {
+    const {teams} = useAdmin();
+    return <div className='w-max h-full gap-1 bg-gray-200 p-10 flex flex-col text-center shadow-2xl overflow-y-scroll'>
+        <h2 className="text-2xl">Teams ready status</h2>
+        {teams.map((team) => team.ready ? (
+             <div key={team.id} className="p-2 text-white bg-green-500 shadow-md text-xl rounded flex flex-row">
+                <div>{team.name} : Ready</div>
+            </div>) : (
+            <div key={team.id} className="p-2 text-white bg-red-500 shadow-md text-xl rounded flex flex-row">
+                <div>{team.name} : Not ready</div>
+            </div>
+            ))}
+    </div>
+}

traque-front/components/team/actionDrawer.jsx

@@ -2,16 +2,34 @@ import useGame from "@/hook/useGame";
 import { useState } from "react"
 import BlueButton, { GreenButton, RedButton } from "../util/button";
 import TextInput from "../util/textInput";
+import { useTeamConnexion } from "@/context/teamConnexionContext";
 
 export default function ActionDrawer() {
     const [visible, setVisible] = useState(false);
-    const { sendCurrentPosition } = useGame();
+    const [enemyCaptureCode, setEnemyCaptureCode] = useState("");
+    const { sendCurrentPosition, name, captureCode, capture } = useGame();
+    const {logout} = useTeamConnexion();   
+
+    function handleCapture() {
+        capture(enemyCaptureCode);
+        setEnemyCaptureCode("");
+    }
 
     return (
         <div className={"fixed w-screen bottom-0 z-10 bg-gray-100 flex justify-center rounded-t-2xl transition-all duration-200 flex flex-col " + (visible ? "h-full" : "h-20")}>
             <img src="/icons/arrow_up.png" className={"w-full object-scale-down h-ful max-h-20 transition-all cursor-pointer duration-200 " + (visible && "rotate-180")} onClick={() => setVisible(!visible)} />
-            {visible && <div className="flex flex-col w-full h-full">
+            {visible && <div className="flex justify-between flex-col w-full h-full">
-                <div className='shadow-lg mt-0  p-1 flex flex-col text-center mb-1 mt-auto mx-auto w-4/5 rounded'>
+                <div className="flex flex-row justify-around">
+                    <img src="/icons/logout.png" onClick={logout} className='p-3 mx-2 w-14 h-14 bg-red-500 rounded-lg cursor-pointer bg-red  z-20' />
+                </div>
+                <div className='shadow-2xl bg-white p-1 flex flex-col text-center mb-1  mx-auto w-4/5 rounded'>
+                    <div>
+                        <span className='text-2xl text-black'>{name}</span>
+                    </div>
+                    <div className='text-gray-700'>
+                        <span> Capture code  </span>
+                        <span className='text-lg text-black'>{captureCode}</span>
+                    </div>
                     <div className='text-gray-700'>
                         <span className='text-lg text-black'>30min</span>
                         <span> before penalty</span>
@@ -22,27 +40,22 @@ export default function ActionDrawer() {
                         <div className='min-h-5 m-2 min-w-5 bg-green-400'></div>
                     </div>
                 </div>
-                <div className="h-20 my-1">
+                <div className="h-20">
                     <BlueButton onClick={sendCurrentPosition} className="h-10">Update position</BlueButton>
                 </div>
-                <div className="h-20 my-1">
+                <div className="p-5 shadow-lg bg-white">
-                    <BlueButton onClick={sendCurrentPosition} className="h-10">Message log</BlueButton>
+                    <div className="text-center text-2xl">Target</div>
-                </div>
                     <div className="h-20 my-1">
                         <GreenButton onClick={sendCurrentPosition}>See target info</GreenButton>
                     </div>
-                <div className="mt-1 mb-auto">
                     <div className="h-20 flex flex-row">
-                        <TextInput inputMode="numeric" placeholder="Enemy code" onClick={(i) => { console.log(i) }} />
+                        <TextInput inputMode="numeric" placeholder="Enemy code" value={enemyCaptureCode} onChange={(e) => setEnemyCaptureCode(e.target.value)} />
-                        <GreenButton onClick={sendCurrentPosition}>Capture target</GreenButton>
+                        <GreenButton onClick={handleCapture}>Capture target</GreenButton>
                     </div>
                 </div>
-                <div className="h-20 my-2">
+                <div className="h-20">
                     <RedButton onClick={sendCurrentPosition}>Signal emergency</RedButton>
                 </div>
-                <div className="h-20 mb-0">
-                    <RedButton color={"red"} onClick={sendCurrentPosition}>Log out</RedButton>
-                </div>
             </div>
             }
         </div>

traque-front/components/team/map.jsx

@@ -82,7 +82,7 @@ export function PlacementMap({ ...props}) {
                 </Popup>
             </Marker>}
             <MapPan center={currentPosition}/>
-            <Circle center={startingArea?.center} radius={startingArea?.radius} color='blue' />
+            {startingArea && <Circle center={startingArea?.center} radius={startingArea?.radius} color='blue' />}
         </MapContainer>
     )
 }

traque-front/components/team/placementOverlay.jsx

@@ -0,0 +1,19 @@
+import { useTeamConnexion } from "@/context/teamConnexionContext";
+import useGame from "@/hook/useGame"
+
+export default function PlacementOverlay() {
+    const { name, ready } = useGame();
+    const {logout} = useTeamConnexion();
+    return (
+        <>
+            <img src="/icons/logout.png" onClick={logout} className='w-12 h-12 bg-red-500 p-2 top-1 right-1 rounded-lg cursor-pointer bg-red fixed z-20' />
+            <div className='fixed top-0 p-3 w-full bg-gray-300 shadow-xl rounded-b-xl flex flex-col z-10 justify-center items-center'>
+                <div className='text-2xl my-3'>Placement</div>
+                <div className='text-md'>{name}</div>
+                {!ready && <div className='text-lg font-semibold text-red-700'>Positionez vous dans le cercle</div>}
+                {ready && <div className='text-lg font-semibold text-green-700 text-center'>Restez dans le cercle en attendant que la partie commence</div>}
+
+            </div>
+        </>
+    )
+}

traque-front/components/team/waitingScreen.jsx

@@ -0,0 +1,21 @@
+import { useTeamConnexion } from "@/context/teamConnexionContext";
+import useGame from "@/hook/useGame"
+
+export function WaitingScreen() {
+    const { name } = useGame();
+    const { logout } = useTeamConnexion();
+    return (
+        <div className='h-full flex flex-col items-center justify-center'>
+            <div className='text-4xl text-center'>
+                Equipe : {name}
+            </div>
+            <div className='text-2xl text-center'>
+               Jeu en préparation, veuillez patienter...
+            </div>
+            <div className="bottom-0 absolute text-sm text-center">
+                Vous avez perdu Le Jeu
+            </div>
+            <img src="/icons/logout.png" onClick={logout} className='w-12 h-12 bg-red-500 p-2 top-1 right-1 rounded-lg cursor-pointer bg-red fixed z-20' />
+        </div>
+    )
+}

traque-front/context/teamConnexionContext.jsx

@@ -7,10 +7,10 @@ import { usePasswordProtect } from "@/hook/usePasswordProtect";
 const teamConnexionContext = createContext();
 const TeamConnexionProvider = ({ children }) => {
     const { teamSocket } = useSocket();
-    const { login, password: teamId, loggedIn, loading } = useSocketAuth(teamSocket, "team_password");
+    const { login, password: teamId, loggedIn, loading, logout  } = useSocketAuth(teamSocket, "team_password");
     const useProtect = () => usePasswordProtect("/team", "/team/track", loading, loggedIn);
 
-    const value = useMemo(() => ({ teamId, login, loggedIn, loading, useProtect}), [teamId, login, loggedIn, loading]);
+    const value = useMemo(() => ({ teamId, login, logout, loggedIn, loading, useProtect}), [teamId, login, loggedIn, loading]);
 
     return (
         <teamConnexionContext.Provider value={value}>

traque-front/hook/mapDrawing.jsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+import { useLocation } from "./useLocation";
+
+export function useMapCircleDraw(area, setArea) {
+    const [drawing, setDrawing] = useState(false);
+    const [center, setCenter] = useState(area?.center || null);
+    const [radius, setRadius] = useState(area?.radius || null);
+
+    useEffect(() => {
+        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 {
+        handleClick,
+        handleMouseMove,
+        center,
+        radius,
+    }
+}

traque-front/hook/useGame.jsx

@@ -14,17 +14,20 @@ export default function useGame() {
         teamSocket.emit("send_position");
     }
 
-    useEffect(() => console.log("teamInfos", teamInfos), [teamInfos]);
+    function capture(captureCode) {
-
+        teamSocket.emit("capture", captureCode);
+    }
 
     return {
         sendCurrentPosition,
+        capture,
         enemyPosition: teamInfos?.enemyLocation || null,
         currentPosition: teamInfos?.currentLocation || null,
         startingArea: teamInfos?.startingArea || null,
         captureCode: teamInfos?.captureCode || null,
         name: teamInfos?.name || null,
         ready: teamInfos?.ready || false,
+        captured: teamInfos?.captured || false,
         teamId,
         gameState,
     };

traque-front/hook/useSocketAuth.jsx

@@ -4,6 +4,7 @@ import { useLocalStorage } from './useLocalStorage';
 import { usePathname } from 'next/navigation';
 
 const LOGIN_MESSAGE = "login";
+const LOGOUT_MESSAGE = "logout";
 const LOGIN_RESPONSE_MESSAGE = "login_response";
 
 export function useSocketAuth(socket, passwordName) {
@@ -13,15 +14,24 @@ export function useSocketAuth(socket, passwordName) {
     const [savedPassword, setSavedPassword, savedPasswordLoading] = useLocalStorage(passwordName, null);
     
     useEffect(() => {
+        console.log("Checking saved password", savedPassword, loggedIn);
         if (savedPassword && !loggedIn) {
+            console.log("Logging in with saved password", savedPassword);
             socket.emit(LOGIN_MESSAGE, savedPassword);
         }
     }, [savedPassword]);
 
     function login(password) {
+        console.log("Logging", password);
         setSavedPassword(password)
     }
 
+    function logout() {
+        setSavedPassword(null);
+        setLoggedIn(false);
+        socket.emit(LOGOUT_MESSAGE)
+    }
+
     useSocketListener(socket, LOGIN_RESPONSE_MESSAGE,(loginResponse) => {
         setWaitingForResponse(false);
         setLoggedIn(loginResponse);
@@ -39,5 +49,5 @@ export function useSocketAuth(socket, passwordName) {
     }, [waitingForResponse, savedPasswordLoading, savedPassword]);
 
 
-    return {login,password: savedPassword, loggedIn, loading};
+    return {login,logout,password: savedPassword, loggedIn, loading};
 }