From ed019a3ed462886d0a673599437ccc0efda9733b Mon Sep 17 00:00:00 2001
From: Emmy D'Anello <emmy@luemy.eu>
Date: Mon, 16 Dec 2024 18:18:56 +0100
Subject: [PATCH] Correction suivi position

---
 client/components/Map.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/client/components/Map.tsx b/client/components/Map.tsx
index 65fc1ce..a36ecc4 100644
--- a/client/components/Map.tsx
+++ b/client/components/Map.tsx
@@ -1,9 +1,9 @@
 import { StyleSheet } from 'react-native'
-import MapLibreGL, { Camera, FillLayer, LineLayer, MapView, PointAnnotation, RasterLayer, RasterSource, ShapeSource, UserLocation } from '@maplibre/maplibre-react-native'
+import MapLibreGL, { Camera, FillLayer, LineLayer, MapView, PointAnnotation, RasterLayer, RasterSource, ShapeSource, UserLocation, UserTrackingMode } from '@maplibre/maplibre-react-native'
 import { FontAwesome5, MaterialIcons } from '@expo/vector-icons'
 import { circle } from '@turf/circle'
 import { useLastOwnLocation, useLastPlayerLocations } from '@/hooks/useLocation'
-import { useMemo, useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import { PlayerLocation } from '@/utils/features/location/locationSlice'
 import { useGame } from '@/hooks/useGame'
 import { FAB } from 'react-native-paper'
@@ -12,7 +12,7 @@ export default function Map() {
   const [followUser, setFollowUser] = useState(true)
   return (
     <>
-      <MapComponent followUser={followUser} />
+      <MapComponent followUser={followUser} setFollowUser={setFollowUser} />
       <FAB
           style={{ position: 'absolute', right: 25, bottom: 25 }}
           icon={(props) => <MaterialIcons name={followUser ? 'my-location' : 'location-searching'} {...props} />}
@@ -21,7 +21,7 @@ export default function Map() {
   )
 }
 
-function MapComponent({ followUser }: { followUser?: boolean }) {
+function MapComponent({ followUser, setFollowUser }: { followUser?: boolean, setFollowUser: React.Dispatch<React.SetStateAction<boolean>> }) {
   MapLibreGL.setAccessToken(null)
   const userLocation = useLastOwnLocation()
   return (
@@ -33,7 +33,12 @@ function MapComponent({ followUser }: { followUser?: boolean }) {
       {userLocation && <Camera
           defaultSettings={{centerCoordinate: [userLocation?.coords.longitude, userLocation?.coords.latitude], zoomLevel: 15}}
           followUserLocation={followUser}
-          followZoomLevel={followUser ? 13 : undefined} />}
+          followUserMode={UserTrackingMode.Follow}
+          followZoomLevel={13}
+          onUserTrackingModeChange={(event) => {
+            if (followUser && !event.nativeEvent.payload.followUserLocation)
+              setFollowUser(false)
+          }} />}
       
       <RasterSource id="railwaymap-source" tileUrlTemplates={["https://a.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png"]}></RasterSource>
       <RasterLayer id="railwaymap-layer" sourceID="railwaymap-source" style={{rasterOpacity: 0.7}} />