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

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

@@ -7,18 +7,34 @@ import dynamic from 'next/dynamic';
 import React from 'react'
 
 //Load the map without SSR
-const LiveMap = dynamic(() => import('@/components/team/map'), {
+const LiveMap = dynamic(() => import('@/components/team/map').then((mod) => mod.LiveMap), {
+    ssr: false
+});
+const PlacementMap = dynamic(() => import('@/components/team/map').then((mod) => mod.PlacementMap), {
     ssr: false
 });
 
 export default function Track() {
-    const { gameState } = useGame();
+    const { gameState, name, ready } = useGame();
     const { useProtect } = useTeamConnexion();
     useProtect();
-    return ( 
+    return <>
-        gameState == GameState.PLAYING && <div className='h-full'>
+        {gameState == GameState.PLAYING && <div className='h-full'>
             <LiveMap />
             <ActionDrawer />
         </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'>
+                    <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/team/map.jsx

@@ -1,6 +1,6 @@
 'use client';
 import React, { useEffect, useState } from 'react'
-import { MapContainer, Marker, Popup, TileLayer, useMap } from 'react-leaflet'
+import { Circle, 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";
@@ -24,7 +24,7 @@ function MapPan(props) {
   return null;
 }
 
-export default function LiveMap({ ...props}) {
+export function LiveMap({ ...props}) {
     const {currentPosition, enemyPosition} = useGame();
     useEffect(() => {
         console.log('Current position', currentPosition);
@@ -65,12 +65,24 @@ export default function LiveMap({ ...props}) {
 export function PlacementMap({ ...props}) {
     const {currentPosition, startingArea} = useGame();
     return (
-        <MapContainer  {...props} className='min-h-full w-full' scrollWheelZoom={true}>
+        <MapContainer  {...props} className='min-h-full w-full z-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"
             />
+            {currentPosition && <Marker position={currentPosition} icon={new L.Icon({
+                iconUrl: '/icons/location.png',
+                iconSize: [41, 41],
+                iconAnchor: [12, 41],
+                popupAnchor: [1, -34],
+                shadowSize: [41, 41]
+            })}>
+                <Popup>
+                    Votre position
+                </Popup>
+            </Marker>}
             <MapPan center={currentPosition}/>
+            <Circle center={startingArea?.center} radius={startingArea?.radius} color='blue' />
         </MapContainer>
     )
 }

traque-front/hook/useGame.jsx

@@ -24,6 +24,7 @@ export default function useGame() {
         startingArea: teamInfos?.startingArea || null,
         captureCode: teamInfos?.captureCode || null,
         name: teamInfos?.name || null,
+        ready: teamInfos?.ready || false,
         teamId,
         gameState,
     };