78 lines
3.5 KiB
TypeScript
78 lines
3.5 KiB
TypeScript
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} />
|
|
</>
|
|
}
|