public/traque
1
0
Fork 0
mirror of https://git.rezel.net/LudoTech/traque.git synced 2026-02-09 02:10:18 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

design of the map component functional

Browse Source
This commit is contained in:
Quentin Roussel
2024-03-24 15:10:51 +01:00
parent b274bd4ad5
commit 2478ee32ec
8 changed files with 79 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
traque-front/app/layout.js
View File

@@ -10,7 +10,7 @@ export const metadata = {
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
<body className={inter.className + " h-screen"}>{children}</body>
</html>
);
}

37
traque-front/app/track/page.js
View File

@@ -1,5 +1,7 @@
"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'), {
@@ -7,9 +9,36 @@ const LiveMap = dynamic(() => import('@/components/team/map'), {
});
export default function Track() {
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 (
<main>
<LiveMap className="h-full"/>
</main>
<div className='h-full flex flex-col justify-between'>
<LiveMap currentPosition={currentPosition} enemyPosition={enemyPosition} className="h-4/5" />
<Button>Update position</Button>
<div className='shadow-lg m-5 p-2 flex flex-col text-center mx-auto w-4/5 rounded'>
<p className='text-xl text-black'>30min</p>
<p className='text-gray-700'> before penalty</p>
<div className='w-1/2 flex flex-row justify-center mx-auto'>
<div className='min-h-5 m-2 min-w-5 bg-green-400'></div>
<div className='min-h-5 m-2 min-w-5 bg-green-400'></div>
<div className='min-h-5 m-2 min-w-5 bg-green-400'></div>
</div>
</div>
</div>
)
}

4
traque-front/components/team/loginForm.jsx
View File

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

47
traque-front/components/team/map.jsx
View File

@@ -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 (
<MapContainer {...props} center={position} zoom={13} scrollWheelZoom={true}>
<MapContainer {...props} center={[0,0]} zoom={0} scrollWheelZoom={true}>
<TileLayer
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={position}>
<Marker position={currentPosition} icon={new L.Icon({
iconUrl: '/icons/location.png',
iconSize: [41, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
})}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
Votre position
</Popup>
</Marker>
<Marker position={enemyPosition} icon={new L.Icon({
iconUrl: '/icons/target.png',
iconSize: [41, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
})}>
<Popup>
Position de l'ennemi
</Popup>
</Marker>
<MapPan center={currentPosition}/>
</MapContainer>
)
}

0
traque-front/components/team/utill/button.jsx → traque-front/components/util/button.jsx
View File

0
traque-front/components/team/utill/textInput.jsx → traque-front/components/util/textInput.jsx
View File

BIN
traque-front/public/icons/location.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
traque-front/public/icons/target.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB