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

49
client/components/Map.tsx
View File

@ -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,