Affichage des dernières positions sur la carte

2024-12-13 01:18:55 +01:00
parent 9e5cdfb132
commit 458183eba8
6 changed files with 143 additions and 65 deletions
--- a/client/components/GeolocationProvider.tsx
+++ b/client/components/GeolocationProvider.tsx
@ -1,9 +1,10 @@
 import { ReactNode, useEffect } from 'react'
 import { useAuth } from '@/hooks/useAuth'
-import { useQueuedLocations, useUnqueueLocation } from '@/hooks/useLocation'
+import { useQueuedLocations, useSetLastPlayerLocations, useUnqueueLocation } from '@/hooks/useLocation'
 import { useGeolocationMutation } from '@/hooks/mutations/useGeolocationMutation'
 import { useStartGeolocationServiceEffect } from '@/utils/geolocation'
 import { Platform } from 'react-native'
+import { useQuery } from '@tanstack/react-query'

 export default function GeolocationProvider({ children }: { children: ReactNode }) {
  useStartGeolocationServiceEffect()
@ -11,6 +12,7 @@ export default function GeolocationProvider({ children }: { children: ReactNode
  const auth = useAuth()
  const geolocationsQueue = useQueuedLocations()
  const unqueueLocation = useUnqueueLocation()
+  const setLastPlayerLocations = useSetLastPlayerLocations()
  const geolocationMutation = useGeolocationMutation({
    auth,
    onPostSuccess: (data) => {
@ -27,6 +29,22 @@ export default function GeolocationProvider({ children }: { children: ReactNode
    geolocationMutation.mutate(locToSend)
  }, [auth, geolocationsQueue])

+  const lastLocationsQuery = useQuery({
+    queryKey: ['get-last-locations', auth.token],
+    queryFn: () => fetch(`${process.env.EXPO_PUBLIC_TRAINTRAPE_MOI_SERVER}/geolocations/last-locations/`, {
+      method: "GET",
+      headers: {
+        "Authorization": `Bearer ${auth.token}`,
+        "Content-Type": "application/json",
+      }}
+    ).then(resp => resp.json()),
+    refetchInterval: 5000,
+  })
+  useEffect(() => {
+    if (lastLocationsQuery.isSuccess && lastLocationsQuery.data)
+      setLastPlayerLocations(lastLocationsQuery.data)
+  }, [lastLocationsQuery.status, lastLocationsQuery.dataUpdatedAt])
+
  return <>
    {children}
  </>
--- a/client/components/Map.tsx
+++ b/client/components/Map.tsx
@ -2,12 +2,14 @@ import { StyleSheet } from 'react-native'
 import MapLibreGL, { Camera, FillLayer, LineLayer, MapView, PointAnnotation, RasterLayer, RasterSource, ShapeSource, UserLocation } from '@maplibre/maplibre-react-native'
 import { FontAwesome5 } from '@expo/vector-icons'
 import { circle } from '@turf/circle'
-import { useLastOwnLocation } from '@/hooks/useLocation'
+import { useLastOwnLocation, useLastPlayerLocations } from '@/hooks/useLocation'
+import { useMemo } from 'react'
+import { PlayerLocation } from '@/utils/features/location/locationSlice'
+import { useGame } from '@/hooks/useGame'

 export default function Map() {
  const userLocation = useLastOwnLocation()
  MapLibreGL.setAccessToken(null)
-  const accuracyCircle = circle([userLocation?.coords.longitude ?? 0, userLocation?.coords.latitude ?? 0], userLocation?.coords.accuracy ?? 0, {steps: 64, units: 'meters'})
  return (
    <MapView
      logoEnabled={false}
@ -16,21 +18,48 @@ export default function Map() {
      {/* FIXME Il faudra pouvoir avoir un bouton de suivi pour activer le suivi de la caméro */}
      {userLocation && <Camera
          defaultSettings={{centerCoordinate: [userLocation?.coords.longitude, userLocation?.coords.latitude], zoomLevel: 15}} />}
+      
      <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}} />

-      {/* FIXME Il faudra avoir uniquement les positions des autres personnes, puisque sa propre position peut être obtenue nativement */}
-      <ShapeSource id="accuracy-radius" shape={accuracyCircle} />
-      <FillLayer id="accuracy-radius-fill" sourceID="accuracy-radius" style={{fillOpacity: 0.4, fillColor: 'lightblue'}} aboveLayerID="railwaymap-layer" />
-      <LineLayer id="accuracy-radius-border" sourceID="accuracy-radius" style={{lineOpacity: 0.4, lineColor: 'blue'}} aboveLayerID="accuracy-radius-fill" />
-      <PointAnnotation id="current-location" coordinate={[userLocation?.coords.longitude ?? 2.9, userLocation?.coords.latitude ?? 46.5]}>
-        <FontAwesome5 name="map-marker-alt" size={24} color="blue" />
-      </PointAnnotation>
-      {/* <UserLocation animated={true} renderMode="native" androidRenderMode="compass" showsUserHeadingIndicator={true} /> */}
+      <UserLocation animated={true} renderMode="native" androidRenderMode="compass" showsUserHeadingIndicator={true} />
+      <PlayerLocationsMarkers />
    </MapView>
  )
 }

+
+function PlayerLocationsMarkers() {
+  const game = useGame()
+  const lastPlayerLocations = useLastPlayerLocations()
+  return lastPlayerLocations
+    .filter(playerLoc => playerLoc.playerId !== game.playerId)
+    .map(playerLoc => <PlayerLocationMarker key={`player-${playerLoc.playerId}-loc`} playerLocation={playerLoc} />)
+}
+
+function PlayerLocationMarker({ playerLocation }: { playerLocation: PlayerLocation }) {
+  const accuracyCircle = useMemo(() => circle([playerLocation.longitude, playerLocation.latitude], playerLocation.accuracy, {steps: 64, units: 'meters'}), [playerLocation])
+  return <>
+    <ShapeSource
+        id={`accuracy-radius-${playerLocation.playerId}`}
+        shape={accuracyCircle} />
+    <FillLayer
+        id={`accuracy-radius-fill-${playerLocation.playerId}`}
+        sourceID={`accuracy-radius-${playerLocation.playerId}`}
+        style={{fillOpacity: 0.4, fillColor: 'pink'}}
+        aboveLayerID="railwaymap-layer" />
+    <LineLayer
+        id={`accuracy-radius-border-${playerLocation.playerId}`}
+        sourceID={`accuracy-radius-${playerLocation.playerId}`}
+        style={{lineOpacity: 0.4, lineColor: 'red'}}
+        aboveLayerID={`accuracy-radius-fill-${playerLocation.playerId}`} />
+    <PointAnnotation id={`player-location-marker-${playerLocation.playerId}`}
+        coordinate={[playerLocation.longitude, playerLocation.latitude]}>
+      <FontAwesome5 name="map-marker-alt" size={24} color="red" />
+    </PointAnnotation>
+  </>
+}
+
 const styles = StyleSheet.create({
  map: {
    flex: 1,
--- a/client/components/Map.web.tsx
+++ b/client/components/Map.web.tsx
@ -1,10 +1,10 @@
-import { useAuth } from "@/hooks/useAuth"
-import { useLastOwnLocation } from "@/hooks/useLocation"
-import { useQuery } from "@tanstack/react-query"
+import { useGame } from "@/hooks/useGame"
+import { useLastOwnLocation, useLastPlayerLocations } from "@/hooks/useLocation"
+import { PlayerLocation } from "@/utils/features/location/locationSlice"
 import { circle } from "@turf/circle"
 import { type Map as MaplibreGLMap } from "maplibre-gl"
 import { RLayer, RMap, RMarker, RNavigationControl, RSource, useMap } from "maplibre-react-components"
-import { useEffect, useMemo, useState } from "react"
+import { useMemo, useState } from "react"

 export default function Map() {
  return (
@ -18,7 +18,7 @@ export default function Map() {
      <RLayer id="railwaymap-layer" type="raster" source="railwaymap-source" paint={{"raster-opacity": 0.7}} />

      <UserLocation />
-      <DownloadedLocation />
+      <PlayerLocationsMarkers />
    </RMap>
  )
 }
@ -34,43 +34,44 @@ function UserLocation() {
  const accuracyCircle = circle([userLocation?.coords.longitude ?? 0, userLocation?.coords.latitude ?? 0], userLocation?.coords.accuracy ?? 0, {steps: 64, units: 'meters'})
  const marker = userLocation ? <RMarker longitude={userLocation?.coords.longitude} latitude={userLocation?.coords.latitude} /> : <></>
  return <>
-    <RSource id="accuracy-radius" type="geojson" data={accuracyCircle} />
-    <RLayer id="accuracy-radius-fill" type="fill" source="accuracy-radius" paint={{"fill-color": "lightblue", "fill-opacity": 0.4}} />
-    <RLayer id="accuracy-radius-border" type="line" source="accuracy-radius" paint={{"line-color": "blue", "line-opacity": 0.4}} />
+    <RSource id={'accuracy-radius-own'} type="geojson" data={accuracyCircle} />
+    <RLayer id={'accuracy-radius-fill-own'} type="fill" source='accuracy-radius-own' paint={{"fill-color": "lightblue", "fill-opacity": 0.4}} />
+    <RLayer id={'accuracy-radius-border'} type="line" source='accuracy-radius-own' paint={{"line-color": "blue", "line-opacity": 0.4}} />
    {marker}
  </>
 }

-function DownloadedLocation() {
-  const auth = useAuth()
-  const query = useQuery({
-    queryKey: ['get-last-locations'],
-    queryFn: () => fetch(`${process.env.EXPO_PUBLIC_TRAINTRAPE_MOI_SERVER}/geolocations/last-locations/`, {
-      method: "GET",
-      headers: {
-        "Authorization": `Bearer ${auth.token}`,
-        "Content-Type": "application/json",
-      }}
-    ).then(resp => resp.json()),
-  })
-  useEffect(() => {
-    const interval = setInterval(() => query.refetch(), 5000)
-    return () => clearInterval(interval)
-  }, [])
-  console.log(query.data)
-  const userLocation = query.isSuccess ? query.data[0] : { longitude: 0, latitude: 0, accuracy: 0 }
-  const [firstUserPositionFetched, setFirstUserPositionFetched] = useState(false)
+function PlayerLocationsMarkers() {
+  const game = useGame()
+  const lastPlayerLocations = useLastPlayerLocations()
+  return lastPlayerLocations
+    // .filter(playerLoc => playerLoc.playerId !== game.playerId)
+    .map(playerLoc => <PlayerLocationMarker key={`player-${playerLoc.playerId}-loc`} playerLocation={playerLoc} />)
+}
+
+function PlayerLocationMarker({ playerLocation }: { playerLocation: PlayerLocation }) {
  const map: MaplibreGLMap = useMap()
-  if (userLocation != null && !firstUserPositionFetched) {
-    setFirstUserPositionFetched(true)
-    map.flyTo({center: [userLocation.longitude, userLocation.latitude], zoom: 15})
-  }
-  const accuracyCircle = useMemo(() => circle([userLocation?.longitude ?? 0, userLocation?.latitude ?? 0], userLocation?.accuracy ?? 0, {steps: 64, units: 'meters'}), [userLocation])
-  const marker = userLocation ? <RMarker longitude={userLocation?.longitude} latitude={userLocation?.latitude} /> : <></>
+  const accuracyCircle = useMemo(() => circle(
+    [playerLocation.longitude, playerLocation.latitude],
+    playerLocation.accuracy,
+    {steps: 64, units: 'meters'}), [playerLocation])
  return <>
-    <RSource id="accuracy-radius-2" type="geojson" data={accuracyCircle} />
-    <RLayer id="accuracy-radius-fill-2" type="fill" source="accuracy-radius-2" paint={{"fill-color": "pink", "fill-opacity": 0.4}} />
-    <RLayer id="accuracy-radius-border-2" type="line" source="accuracy-radius-2" paint={{"line-color": "red", "line-opacity": 0.4}} />
-    {marker}
+    <RSource
+        id={`accuracy-radius-${playerLocation.playerId}`}
+        type="geojson"
+        data={accuracyCircle} />
+    <RLayer
+        id={`accuracy-radius-fill-${playerLocation.playerId}`}
+        type="fill" source={`accuracy-radius-${playerLocation.playerId}`}
+        paint={{"fill-color": "pink", "fill-opacity": 0.4}} />
+    <RLayer
+        id={`accuracy-radius-border-${playerLocation.playerId}`}
+        type="line"
+        source={`accuracy-radius-${playerLocation.playerId}`}
+        paint={{"line-color": "red", "line-opacity": 0.4}} />
+    <RMarker
+        key={`marker-player-${playerLocation.playerId}`}
+        longitude={playerLocation.longitude}
+        latitude={playerLocation.latitude} />
  </>
 }