From eca5efdb32c0d4ba04e342655f4c0a73532c7a0c Mon Sep 17 00:00:00 2001
From: Maxence <maxence.gvr@gmail.com>
Date: Tue, 12 Mar 2024 17:23:47 +0100
Subject: [PATCH] style(map): updated map interface

---
 client/src/assets/img/pin-ghost.svg     |  1 +
 client/src/assets/img/pin.svg           |  2 +-
 client/src/assets/styles/main.css       | 21 ++++++++++++++++
 client/src/components/map/Map.tsx       | 32 +++++++++++++++++++++----
 client/src/interfaces/step.interface.ts |  4 ++--
 client/src/pages/map/MapPage.tsx        | 25 +++++++++++--------
 6 files changed, 67 insertions(+), 18 deletions(-)
 create mode 100644 client/src/assets/img/pin-ghost.svg

diff --git a/client/src/assets/img/pin-ghost.svg b/client/src/assets/img/pin-ghost.svg
new file mode 100644
index 0000000..0458f8d
--- /dev/null
+++ b/client/src/assets/img/pin-ghost.svg
@@ -0,0 +1 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360" width="360" height="360"><path fill="#8a8a8a" fill-rule="evenodd" d="m180 0c23.9 0 46.8 9.5 63.6 26.4 16.9 16.8 26.4 39.7 26.4 63.6 0 30.7-16.8 55.9-34.4 73.9-8.8 9-18.5 17.1-28.8 24.2l-4.2 2.9-2 1.3-3.8 2.4-3.4 2.1-4.1 2.4c-2.9 1.6-6.1 2.5-9.3 2.5-3.3 0-6.4-0.9-9.3-2.5l-4.1-2.4-5.2-3.2-2-1.3-4.1-2.7c-11.1-7.5-21.4-16.1-30.9-25.7-17.6-18-34.4-43.2-34.4-73.9 0-23.9 9.5-46.8 26.4-63.6 16.8-16.9 39.7-26.4 63.6-26.4zm0 60c-3.9 0-7.8 0.8-11.5 2.3-3.6 1.5-6.9 3.7-9.7 6.5-2.8 2.8-5 6.1-6.5 9.7-1.5 3.7-2.3 7.6-2.3 11.5 0 3.9 0.8 7.8 2.3 11.5 1.5 3.6 3.7 6.9 6.5 9.7 2.8 2.8 6.1 5 9.7 6.5 3.7 1.5 7.6 2.3 11.5 2.3 8 0 15.6-3.2 21.2-8.8 5.6-5.6 8.8-13.2 8.8-21.2 0-8-3.2-15.6-8.8-21.2-5.6-5.6-13.2-8.8-21.2-8.8z"/></svg>
\ No newline at end of file
diff --git a/client/src/assets/img/pin.svg b/client/src/assets/img/pin.svg
index 7c0583e..cf772bb 100644
--- a/client/src/assets/img/pin.svg
+++ b/client/src/assets/img/pin.svg
@@ -1 +1 @@
-<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360" width="360" height="360"><style>.a{fill:#f90}</style><path fill-rule="evenodd" class="a" d="m180 0c23.9 0 46.8 9.5 63.6 26.4 16.9 16.8 26.4 39.7 26.4 63.6 0 30.7-16.8 55.9-34.4 73.9-8.8 9-18.5 17.1-28.8 24.2l-4.2 2.9-2 1.3-3.8 2.4-3.4 2.1-4.1 2.4c-2.9 1.6-6.1 2.5-9.3 2.5-3.3 0-6.4-0.9-9.3-2.5l-4.1-2.4-5.2-3.2-2-1.3-4.1-2.7c-11.1-7.5-21.4-16.1-30.9-25.7-17.6-18-34.4-43.2-34.4-73.9 0-23.9 9.5-46.8 26.4-63.6 16.8-16.9 39.7-26.4 63.6-26.4zm0 60c-3.9 0-7.8 0.8-11.5 2.3-3.6 1.5-6.9 3.7-9.7 6.5-2.8 2.8-5 6.1-6.5 9.7-1.5 3.7-2.3 7.6-2.3 11.5 0 3.9 0.8 7.8 2.3 11.5 1.5 3.6 3.7 6.9 6.5 9.7 2.8 2.8 6.1 5 9.7 6.5 3.7 1.5 7.6 2.3 11.5 2.3 8 0 15.6-3.2 21.2-8.8 5.6-5.6 8.8-13.2 8.8-21.2 0-8-3.2-15.6-8.8-21.2-5.6-5.6-13.2-8.8-21.2-8.8z"/></svg>
\ No newline at end of file
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360" width="360" height="360"><path fill="#f90" fill-rule="evenodd" d="m180 0c23.9 0 46.8 9.5 63.6 26.4 16.9 16.8 26.4 39.7 26.4 63.6 0 30.7-16.8 55.9-34.4 73.9-8.8 9-18.5 17.1-28.8 24.2l-4.2 2.9-2 1.3-3.8 2.4-3.4 2.1-4.1 2.4c-2.9 1.6-6.1 2.5-9.3 2.5-3.3 0-6.4-0.9-9.3-2.5l-4.1-2.4-5.2-3.2-2-1.3-4.1-2.7c-11.1-7.5-21.4-16.1-30.9-25.7-17.6-18-34.4-43.2-34.4-73.9 0-23.9 9.5-46.8 26.4-63.6 16.8-16.9 39.7-26.4 63.6-26.4zm0 60c-3.9 0-7.8 0.8-11.5 2.3-3.6 1.5-6.9 3.7-9.7 6.5-2.8 2.8-5 6.1-6.5 9.7-1.5 3.7-2.3 7.6-2.3 11.5 0 3.9 0.8 7.8 2.3 11.5 1.5 3.6 3.7 6.9 6.5 9.7 2.8 2.8 6.1 5 9.7 6.5 3.7 1.5 7.6 2.3 11.5 2.3 8 0 15.6-3.2 21.2-8.8 5.6-5.6 8.8-13.2 8.8-21.2 0-8-3.2-15.6-8.8-21.2-5.6-5.6-13.2-8.8-21.2-8.8z"/></svg>
\ No newline at end of file
diff --git a/client/src/assets/styles/main.css b/client/src/assets/styles/main.css
index b95ef2b..79af2d6 100644
--- a/client/src/assets/styles/main.css
+++ b/client/src/assets/styles/main.css
@@ -74,6 +74,27 @@
   height: 100% !important;
 }
 
+main .leaflet-popup-content p {
+  margin: 4px 0 !important;
+  color: #fafafa !important;
+}
+
+main .leaflet-popup-tip {
+  background-color: #656565 !important;
+}
+
+main .leaflet-popup-content-wrapper {
+  background-color: #656565 !important;
+}
+
+main .leaflet-container a.leaflet-popup-close-button {
+  color: #fafafa !important;
+}
+
+main .leaflet-popup {
+  border-radius: 8px !important;
+}
+
 .badge-display {
   transition: .21s ease-out;
   transform: rotate(0deg);
diff --git a/client/src/components/map/Map.tsx b/client/src/components/map/Map.tsx
index 52d8bc5..30f0659 100644
--- a/client/src/components/map/Map.tsx
+++ b/client/src/components/map/Map.tsx
@@ -4,14 +4,18 @@ import {
   Polyline,
   Popup,
   TileLayer,
+  useMap,
 } from "react-leaflet";
-import { Icon } from "leaflet";
+import { Icon, LatLng } from "leaflet";
 import { Step } from "../../interfaces/step.interface";
+import { useEffect } from "react";
 
 const Map = ({
+  currentStep,
   steps,
   polylinePath,
 }: {
+  currentStep: Step | undefined;
   steps: Step[];
   polylinePath: [number, number][];
 }) => {
@@ -22,14 +26,32 @@ const Map = ({
     iconSize: [40, 40],
   });
 
+  const customIconGhost = new Icon({
+    iconUrl: "/src/assets/img/pin-ghost.svg",
+    iconSize: [40, 40],
+  });
+
+  const geolocalisation = currentStep ? new LatLng(currentStep.geolocalisation.latitude, currentStep.geolocalisation.longitude) : new LatLng(43.282, 5.405);
+  
+  const MapRecenter= ({ lat, lng, zoomLevel }: { lat: number; lng: number; zoomLevel: number }) => {
+    const map = useMap();
+  
+    useEffect(() => {
+      map.flyTo([lat, lng], zoomLevel );
+    }, [lat, lng]);
+    return null;
+  };
+
   return (
     <div className="h-96 rounded-2xl overflow-hidden">
       <MapContainer
-        center={[46, 2]}
-        zoom={5}
+        center={geolocalisation}
+        zoom={12}
+        maxZoom={12}
         scrollWheelZoom={false}
         attributionControl={false}
       >
+        <MapRecenter lat={geolocalisation.lat} lng={geolocalisation.lng} zoomLevel={12} />
         <TileLayer url="https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png" />
 
         {steps &&
@@ -39,11 +61,11 @@ const Map = ({
                 marker.geolocalisation.latitude,
                 marker.geolocalisation.longitude,
               ]}
-              icon={customIcon}
+              icon={!currentStep ? customIconGhost : (currentStep.etape_numero < marker.etape_numero ? customIconGhost : customIcon)}
               key={index}
             >
               <Popup>
-                <p>Étape n°{marker.etape}</p>
+                <b className="text-alabaster-50">Étape n°{marker.etape}</b>
                 <p>{marker.date}</p>
                 <p>{marker.ville}</p>
               </Popup>
diff --git a/client/src/interfaces/step.interface.ts b/client/src/interfaces/step.interface.ts
index 8cd773a..0c17cc4 100644
--- a/client/src/interfaces/step.interface.ts
+++ b/client/src/interfaces/step.interface.ts
@@ -16,5 +16,5 @@ export interface Step {
     y: number;
   };
   population: number;
-  code_postal: "04100";
-}
+  code_postal: string;
+}
\ No newline at end of file
diff --git a/client/src/pages/map/MapPage.tsx b/client/src/pages/map/MapPage.tsx
index 0376ff2..b02a68d 100644
--- a/client/src/pages/map/MapPage.tsx
+++ b/client/src/pages/map/MapPage.tsx
@@ -28,30 +28,35 @@ const MapPage = () => {
     });
   };
 
-  const handleCurrentStep = useCallback(() => {
+  const handleCurrentStep = () => {
     APIHandler<Step>(`/etape/actuelle`, true).then((res) => {
       setCurrentFlameLocation(res.data);
       handleNextStep(res.data.etape_numero);
     });
-  }, []);
+  }
 
   useEffect(() => {
     handleSteps();
     handleCurrentStep();
-  }, [handleCurrentStep]);
+  }, []);
+
+  if(currentFlameLocation) {
+    steps.forEach((step) => {
+      if(currentFlameLocation && step.etape_numero > currentFlameLocation.etape_numero) return;
+      polylinePath.push([
+        step.geolocalisation.latitude,
+        step.geolocalisation.longitude,
+      ]);
+    });
+  }
 
-  steps.forEach((step) => {
-    polylinePath.push([
-      step.geolocalisation.latitude,
-      step.geolocalisation.longitude,
-    ]);
-  });
+  console.log(currentFlameLocation);
 
   return (
     <div className="map-page flex flex-col gap-8">
       <h1 className="font-roboto text-xl font-bold">Parcours de la flamme</h1>
       <div className="flex flex-col gap-8">
-        <Map steps={steps} polylinePath={polylinePath} />
+        <Map currentStep={currentFlameLocation} steps={steps} polylinePath={polylinePath} />
         <div className="flex flex-col gap-8">
           <div className="flex flex-col gap-4">
             <h2 className="text-2xl font-bold">Où est la flamme</h2>