From 458183eba8d95f8a9b213348ad263023a2d9cda5 Mon Sep 17 00:00:00 2001 From: Emmy D'Anello Date: Fri, 13 Dec 2024 01:18:55 +0100 Subject: [PATCH] =?UTF-8?q?Affichage=20des=20derni=C3=A8res=20positions=20?= =?UTF-8?q?sur=20la=20carte?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/app/(tabs)/index.tsx | 36 +++++---- client/components/GeolocationProvider.tsx | 20 ++++- client/components/Map.tsx | 49 +++++++++--- client/components/Map.web.tsx | 75 ++++++++++--------- client/hooks/useLocation.ts | 7 +- .../utils/features/location/locationSlice.ts | 21 +++++- 6 files changed, 143 insertions(+), 65 deletions(-) diff --git a/client/app/(tabs)/index.tsx b/client/app/(tabs)/index.tsx index b0637d6..5d5bb65 100644 --- a/client/app/(tabs)/index.tsx +++ b/client/app/(tabs)/index.tsx @@ -6,6 +6,7 @@ import { FAB, Surface, Text } from 'react-native-paper' import { useGame } from '@/hooks/useGame' import { FontAwesome6 } from '@expo/vector-icons' import FreeChaseBanner from '@/components/FreeChaseBanner' +import { View } from 'react-native' export default function MapScreen() { const [backgroundStatus, requestBackgroundPermission] = useBackgroundPermissions() @@ -16,20 +17,22 @@ export default function MapScreen() { return ( - {backgroundStatus?.granted ? : La géolocalisation est requise pour utiliser la carte.} - 0} - icon={(props) => } - color='black' - label={`${game.money}`} /> - 0} - size='small' - color='black' - icon={game.currentRunner ? 'run-fast' : () => } - label={game.currentRunner ? "Coureuse" : "Poursuiveuse"} /> + + {backgroundStatus?.granted ? : La géolocalisation est requise pour utiliser la carte.} + 0} + icon={(props) => } + color='black' + label={`${game.money}`} /> + 0} + size='small' + color='black' + icon={game.currentRunner ? 'run-fast' : () => } + label={game.currentRunner ? "Coureuse" : "Poursuiveuse"} /> + ) @@ -39,6 +42,11 @@ const styles = StyleSheet.create({ page: { flex: 1, }, + container: { + flexGrow: 1, + alignItems: 'center', + justifyContent: 'center', + }, map: { flex: 1, alignSelf: 'stretch', diff --git a/client/components/GeolocationProvider.tsx b/client/components/GeolocationProvider.tsx index e62dfb4..5b072fd 100644 --- 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} diff --git a/client/components/Map.tsx b/client/components/Map.tsx index 7278efb..2ab2a17 100644 --- 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 ( } + - {/* FIXME Il faudra avoir uniquement les positions des autres personnes, puisque sa propre position peut être obtenue nativement */} - - - - - - - {/* */} + + ) } + +function PlayerLocationsMarkers() { + const game = useGame() + const lastPlayerLocations = useLastPlayerLocations() + return lastPlayerLocations + .filter(playerLoc => playerLoc.playerId !== game.playerId) + .map(playerLoc => ) +} + +function PlayerLocationMarker({ playerLocation }: { playerLocation: PlayerLocation }) { + const accuracyCircle = useMemo(() => circle([playerLocation.longitude, playerLocation.latitude], playerLocation.accuracy, {steps: 64, units: 'meters'}), [playerLocation]) + return <> + + + + + + + +} + const styles = StyleSheet.create({ map: { flex: 1, diff --git a/client/components/Map.web.tsx b/client/components/Map.web.tsx index 32fa375..edf538b 100644 --- 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() { - + ) } @@ -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 ? : <> return <> - - - + + + {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 => ) +} + +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 ? : <> + const accuracyCircle = useMemo(() => circle( + [playerLocation.longitude, playerLocation.latitude], + playerLocation.accuracy, + {steps: 64, units: 'meters'}), [playerLocation]) return <> - - - - {marker} + + + + } diff --git a/client/hooks/useLocation.ts b/client/hooks/useLocation.ts index eb4efb7..2f8f2fe 100644 --- a/client/hooks/useLocation.ts +++ b/client/hooks/useLocation.ts @@ -1,9 +1,10 @@ import { LocationObject } from "expo-location" import { useAppDispatch, useAppSelector } from "./useStore" -import { setLastLocation, unqueueLocation } from "@/utils/features/location/locationSlice" +import { PlayerLocation, setLastLocation, setLastPlayerLocations, unqueueLocation } from "@/utils/features/location/locationSlice" export const useLastOwnLocation = () => useAppSelector((state) => state.location.lastOwnLocation) export const useQueuedLocations = () => useAppSelector((state) => state.location.queuedLocations) +export const useLastPlayerLocations = () => useAppSelector((state) => state.location.lastPlayerLocations) export const useSetLastLocation = () => { const dispatch = useAppDispatch() @@ -13,3 +14,7 @@ export const useUnqueueLocation = () => { const dispatch = useAppDispatch() return (location: LocationObject) => dispatch(unqueueLocation(location)) } +export const useSetLastPlayerLocations = () => { + const dispatch = useAppDispatch() + return (playerLocations: PlayerLocation[]) => dispatch(setLastPlayerLocations(playerLocations)) +} diff --git a/client/utils/features/location/locationSlice.ts b/client/utils/features/location/locationSlice.ts index c57ec66..65810c7 100644 --- a/client/utils/features/location/locationSlice.ts +++ b/client/utils/features/location/locationSlice.ts @@ -2,16 +2,30 @@ import { Constants } from '@/constants/Constants' import { createSlice, PayloadAction } from '@reduxjs/toolkit' import { LocationObject } from 'expo-location' +export type PlayerLocation = { + id: number + playerId: number + longitude: number + latitude: number + speed: number + accuracy: number + altitude: number + altitudeAccuracy: number + timestamp: string +} + interface LocationState { lastOwnLocation: LocationObject | null lastSentLocation: LocationObject | null queuedLocations: LocationObject[] + lastPlayerLocations: PlayerLocation[] } const initialState: LocationState = { lastOwnLocation: null, lastSentLocation: null, - queuedLocations: [] + queuedLocations: [], + lastPlayerLocations: [] } export const locationSlice = createSlice({ @@ -33,9 +47,12 @@ export const locationSlice = createSlice({ || loc.coords.latitude !== sentLoc.coords.latitude || loc.coords.longitude !== sentLoc.coords.latitude) }, + setLastPlayerLocations: (state, action: PayloadAction) => { + state.lastPlayerLocations = action.payload + } }, }) -export const { setLastLocation, unqueueLocation } = locationSlice.actions +export const { setLastLocation, unqueueLocation, setLastPlayerLocations } = locationSlice.actions export default locationSlice.reducer