ynerant/traintrape-moi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Affichage des dernières positions sur la carte

Browse Source
This commit is contained in:
Emmy D'Anello
2024-12-13 01:18:55 +01:00
parent 9e5cdfb132
commit 458183eba8
6 changed files with 143 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
client/components/Map.web.tsx
View File

@ -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} />
</>
}