From 297b6c7914e7e3f5d2a6706e22be919b3d434803 Mon Sep 17 00:00:00 2001 From: Maxence Date: Fri, 22 Mar 2024 10:08:30 +0100 Subject: [PATCH 1/3] feature: zoom buttons on map --- client/src/components/map/Map.tsx | 25 +++++++++++++++++++------ client/tailwind.config.js | 1 + 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/client/src/components/map/Map.tsx b/client/src/components/map/Map.tsx index 154a260..9f66a62 100644 --- a/client/src/components/map/Map.tsx +++ b/client/src/components/map/Map.tsx @@ -8,12 +8,13 @@ import { } from "react-leaflet"; import { Icon, LatLng } from "leaflet"; import { Step } from "../../interfaces/step.interface"; -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import { Button } from "../ui"; import { APIHandler } from "../../utils/api/api-handler"; import { useAuth } from "../../hooks/useAuth"; import toast from "react-hot-toast"; import { GenericResponse } from "../../interfaces/api-response/generic-response"; +import { SearchIcon } from "react-line-awesome"; const Map = ({ currentStep, @@ -41,12 +42,13 @@ const Map = ({ iconSize: [40, 40], }); - const geolocalisation = currentStep + const [geolocalisation, setGeolocation] = useState( + currentStep ? new LatLng( currentStep.geolocalisation.latitude, currentStep.geolocalisation.longitude ) - : new LatLng(43.282, 5.405); + : new LatLng(43.282, 5.405)); const MapRecenter = ({ lat, @@ -66,7 +68,17 @@ const Map = ({ }; return ( -
+
+ { currentStep ? () : null } + { flamiPosition ? () : null } + {steps && @@ -112,8 +125,8 @@ const Map = ({ }, }); })}>Récupérer le badge - ) : null - } + ) : null + } ))} diff --git a/client/tailwind.config.js b/client/tailwind.config.js index 8f7f257..368a1f4 100644 --- a/client/tailwind.config.js +++ b/client/tailwind.config.js @@ -98,6 +98,7 @@ export default { }, zIndex: { 100: "100", + 500: "500", }, }, }, From 9979eb1b0dfe0016139d8561eefa8de51859201e Mon Sep 17 00:00:00 2001 From: Maxence Date: Fri, 22 Mar 2024 10:08:44 +0100 Subject: [PATCH 2/3] feature: re-sync anim on cosmetic change --- client/src/pages/flami/CosmeticPage.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/client/src/pages/flami/CosmeticPage.tsx b/client/src/pages/flami/CosmeticPage.tsx index a46c9af..0d67e11 100644 --- a/client/src/pages/flami/CosmeticPage.tsx +++ b/client/src/pages/flami/CosmeticPage.tsx @@ -41,6 +41,8 @@ const CosmeticPage = () => { }); }, [token]); + const [currentAnimation, setCurrentAnimation] = useState("Idle"); + const changeCosmetic = useCallback( (id: string) => { APIHandler( @@ -51,9 +53,13 @@ const CosmeticPage = () => { token ).then((res) => { setFlami(res.data.my_flami); + setCurrentAnimation("Atchoum"); + setTimeout(() => { + setCurrentAnimation("Idle"); + }, 1); }); }, - [token] + [token, setCurrentAnimation] ); const selectIconDisplay = useCallback(() => { @@ -116,7 +122,7 @@ const CosmeticPage = () => { return (
- {flami ? : null} + {flami ? : null}