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 { useMemo, useState } from "react" export default function Map() { return ( <RMap initialCenter={[2.9, 46.5]} initialZoom={6} mapStyle="https://openmaptiles.geo.data.gouv.fr/styles/osm-bright/style.json"> <RNavigationControl position="bottom-right" showCompass={true} showZoom={true} visualizePitch={true} /> <RSource id="railwaymap-source" type="raster" tiles={["https://a.tiles.openrailwaymap.org/standard/{z}/{x}/{y}.png"]} /> <RLayer id="railwaymap-layer" type="raster" source="railwaymap-source" paint={{"raster-opacity": 0.7}} /> <UserLocation /> <PlayerLocationsMarkers /> </RMap> ) } function UserLocation() { const userLocation = useLastOwnLocation() const [firstUserPositionFetched, setFirstUserPositionFetched] = useState(false) const map: MaplibreGLMap = useMap() if (userLocation != null && !firstUserPositionFetched) { setFirstUserPositionFetched(true) map.flyTo({center: [userLocation.coords.longitude, userLocation.coords.latitude], zoom: 15}) } 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-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 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() const accuracyCircle = useMemo(() => circle( [playerLocation.longitude, playerLocation.latitude], playerLocation.accuracy, {steps: 64, units: 'meters'}), [playerLocation]) return <> <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} /> </> }