'use client';
import React, { useEffect, useState } from 'react'
import { MapContainer, Marker, Popup, TileLayer, useMap } from 'react-leaflet'
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css'
import "leaflet-defaulticon-compatibility";
import "leaflet/dist/leaflet.css";
import useGame from '@/hook/useGame';
const DEFAULT_ZOOM = 17;
// Pan to the center of the map when the position of the user is updated for the first time
function MapPan(props) {
const map = useMap();
const [initialized, setInitialized] = useState(false);
useEffect(() => {
if(!initialized && props.center) {
map.flyTo(props.center, DEFAULT_ZOOM, {animate: false});
setInitialized(true)
}
},[props.center]);
return null;
}
export default function LiveMap({ ...props}) {
const {currentPosition, enemyPosition} = useGame();
useEffect(() => {
console.log('Current position', currentPosition);
}, [currentPosition]);
return (
{currentPosition &&
Votre position
}
{enemyPosition &&
Position de l'ennemi
}
)
}
export function PlacementMap({ ...props}) {
const {currentPosition, startingArea} = useGame();
return (
)
}