diff --git a/traque-front/app/layout.js b/traque-front/app/layout.js index 61c4b29..f0b9fa0 100644 --- a/traque-front/app/layout.js +++ b/traque-front/app/layout.js @@ -10,7 +10,7 @@ export const metadata = { export default function RootLayout({ children }) { return ( - {children} + {children} ); } diff --git a/traque-front/app/track/page.js b/traque-front/app/track/page.js index 28eb096..c79dffa 100644 --- a/traque-front/app/track/page.js +++ b/traque-front/app/track/page.js @@ -1,15 +1,44 @@ +"use client"; +import Button from '@/components/util/button'; import dynamic from 'next/dynamic'; -import React from 'react' +import React, { useEffect, useState } from 'react' //Load the map without SSR const LiveMap = dynamic(() => import('@/components/team/map'), { - ssr: false + ssr: false }); export default function Track() { - return ( -
- -
- ) + const [currentPosition, setCurrentPosition] = useState([0,0]); + const [enemyPosition, setEnemyPosition] = useState([0,0]); + + useEffect(() => { + const t = setTimeout(() => { + setEnemyPosition([currentPosition[0] + Math.random() / 100, currentPosition[1] + Math.random() / 100]); + }, 1000); + return () => clearInterval(t); + }, [currentPosition]); + + useEffect(() => { + navigator.geolocation.watchPosition((position) => { + setCurrentPosition([position.coords.latitude, position.coords.longitude]); + }); + }, []); + + + return ( +
+ + +
+

30min

+

before penalty

+
+
+
+
+
+
+
+ ) } diff --git a/traque-front/components/team/loginForm.jsx b/traque-front/components/team/loginForm.jsx index 878ce2b..f39ac68 100644 --- a/traque-front/components/team/loginForm.jsx +++ b/traque-front/components/team/loginForm.jsx @@ -1,5 +1,5 @@ -import Button from "./utill/button"; -import TextInput from "./utill/textInput"; +import Button from "../util/button"; +import TextInput from "../util/textInput"; export default function LoginForm() { return ( diff --git a/traque-front/components/team/map.jsx b/traque-front/components/team/map.jsx index 69577c4..7a234b1 100644 --- a/traque-front/components/team/map.jsx +++ b/traque-front/components/team/map.jsx @@ -1,23 +1,56 @@ 'use client'; -import React from 'react' -import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet' +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"; -export default function LiveMap({...props}) { - const position = [51.505, -0.09] +const DEFAULT_ZOOM = 17; + +function MapPan(props) { + const map = useMap(); + const [initialized, setInitialized] = useState(false); + + useEffect(() => { + if(!initialized && JSON.stringify(props.center) != "[0,0]") { + map.flyTo(props.center, DEFAULT_ZOOM); + setInitialized(true) + } + },[props.center]); + + return null; +} + +export default function LiveMap({enemyPosition, currentPosition, ...props}) { return ( - + - + - A pretty CSS3 popup.
Easily customizable. + Votre position + + + Position de l'ennemi + + + ) } diff --git a/traque-front/components/team/utill/button.jsx b/traque-front/components/util/button.jsx similarity index 100% rename from traque-front/components/team/utill/button.jsx rename to traque-front/components/util/button.jsx diff --git a/traque-front/components/team/utill/textInput.jsx b/traque-front/components/util/textInput.jsx similarity index 100% rename from traque-front/components/team/utill/textInput.jsx rename to traque-front/components/util/textInput.jsx diff --git a/traque-front/public/icons/location.png b/traque-front/public/icons/location.png new file mode 100644 index 0000000..be9e2ef Binary files /dev/null and b/traque-front/public/icons/location.png differ diff --git a/traque-front/public/icons/target.png b/traque-front/public/icons/target.png new file mode 100644 index 0000000..67ba61d Binary files /dev/null and b/traque-front/public/icons/target.png differ