From 014d47f7dbdfd267d23af4e67ffeec723a85fe62 Mon Sep 17 00:00:00 2001
From: Quentin Roussel <contact@quentinrsl.com>
Date: Wed, 17 Apr 2024 22:02:47 +0200
Subject: [PATCH] added front end for showing zone to player

---
 traque-front/components/team/map.jsx | 53 +++++++++++++++++++---------
 traque-front/context/teamContext.jsx |  9 +++--
 2 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/traque-front/components/team/map.jsx b/traque-front/components/team/map.jsx
index 725e5d5..9c897d4 100644
--- a/traque-front/components/team/map.jsx
+++ b/traque-front/components/team/map.jsx
@@ -5,32 +5,49 @@ import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility
 import "leaflet-defaulticon-compatibility";
 import "leaflet/dist/leaflet.css";
 import useGame from '@/hook/useGame';
+import { useTeamContext } from '@/context/teamContext';
 
 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);
+    const map = useMap();
+    const [initialized, setInitialized] = useState(false);
 
-  useEffect(() => {
-    if(!initialized && props.center) {
-        map.flyTo(props.center, DEFAULT_ZOOM, {animate: false});
-        setInitialized(true)
-    }
-  },[props.center]);
+    useEffect(() => {
+        if (!initialized && props.center) {
+            map.flyTo(props.center, DEFAULT_ZOOM, { animate: false });
+            setInitialized(true)
+        }
+    }, [props.center]);
 
-  return null;
+    return null;
 }
 
-export function LiveMap({ ...props}) {
-    const {currentPosition, enemyPosition} = useGame();
+function LiveZone() {
+    const { zone } = useTeamContext();
+    console.log('Zone', zone);
+    return zone && <Circle center={zone.center} radius={zone.radius} color='blue' fill={false} />
+}
+
+function ZoneExtremities() {
+    const { zoneExtremities } = useTeamContext();
+    console.log('Zone extremities', zoneExtremities);
+    return zoneExtremities && 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} />
+    </>
+
+}
+
+export function LiveMap({ ...props }) {
+    const { currentPosition, enemyPosition } = useGame();
     useEffect(() => {
         console.log('Current position', currentPosition);
     }, [currentPosition]);
     return (
-        <MapContainer  {...props} className='min-h-full z-0' center={[0,0]} zoom={0} scrollWheelZoom={true}>
+        <MapContainer  {...props} className='min-h-full z-0' 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"
@@ -46,7 +63,7 @@ export function LiveMap({ ...props}) {
                     Votre position
                 </Popup>
             </Marker>}
-            {enemyPosition && <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],
@@ -57,13 +74,15 @@ export function LiveMap({ ...props}) {
                     Position de l'ennemi
                 </Popup>
             </Marker>}
-            <MapPan center={currentPosition}/>
+            <MapPan center={currentPosition} />
+            <LiveZone />
+            <ZoneExtremities />
         </MapContainer>
     )
 }
 
-export function PlacementMap({ ...props}) {
-    const {currentPosition, startingArea} = useGame();
+export function PlacementMap({ ...props }) {
+    const { currentPosition, startingArea } = useGame();
     return (
         <MapContainer  {...props} className='min-h-full w-full z-0' scrollWheelZoom={true}>
             <TileLayer
@@ -81,7 +100,7 @@ export function PlacementMap({ ...props}) {
                     Votre position
                 </Popup>
             </Marker>}
-            <MapPan center={currentPosition}/>
+            <MapPan center={currentPosition} />
             {startingArea && <Circle center={startingArea?.center} radius={startingArea?.radius} color='blue' />}
         </MapContainer>
     )
diff --git a/traque-front/context/teamContext.jsx b/traque-front/context/teamContext.jsx
index cf5a9c7..fb1b70e 100644
--- a/traque-front/context/teamContext.jsx
+++ b/traque-front/context/teamContext.jsx
@@ -1,7 +1,7 @@
 "use client";
 import { useLocation } from "@/hook/useLocation";
 import { useSocketListener } from "@/hook/useSocketListener";
-import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { createContext, use, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { useSocket } from "./socketContext";
 import { useTeamConnexion } from "./teamConnexionContext";
 import { GameState } from "@/util/gameState";
@@ -11,6 +11,8 @@ const teamContext = createContext()
 function TeamProvider({children}) {
     const [teamInfos, setTeamInfos] = useState({});
     const [gameState, setGameState] = useState(GameState.SETUP);
+    const [zone, setZone] = useState(null);
+    const [zoneExtremities, setZoneExtremities] = useState(null);
     const measuredLocation = useLocation(10000);
     const {teamSocket} = useSocket();
     const {loggedIn} = useTeamConnexion();
@@ -23,6 +25,9 @@ function TeamProvider({children}) {
     });
     
     useSocketListener(teamSocket, "game_state", setGameState);
+    useSocketListener(teamSocket, "zone", setZone);
+    useSocketListener(teamSocket, "new_zone", setZoneExtremities);
+
 
     //Send the current position to the server when the user is logged in
     useEffect(() => {
@@ -32,7 +37,7 @@ function TeamProvider({children}) {
         }
     }, [loggedIn, measuredLocation]);
     
-    const value = useMemo(() => ({teamInfos, gameState}), [teamInfos, gameState]);
+    const value = useMemo(() => ({teamInfos, gameState, zone, zoneExtremities}), [teamInfos, gameState, zone, zoneExtremities]);
     return (
         <teamContext.Provider value={value}>
             {children}