From 31b0c281af3026c9d9a4c5b3dc5202f56337d5b7 Mon Sep 17 00:00:00 2001
From: arthurbnu <arthur.brody@bnu.fr>
Date: Tue, 26 Mar 2024 16:59:47 +0100
Subject: [PATCH] =?UTF-8?q?Mise=20=C3=A0=20jour=20de=20la=20fonction=20de?=
 =?UTF-8?q?=20validation=20des=20formulaires***?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/cities-2.json | 464 -------------------------------------------
 assets/cities.json   | 394 +++++++++++++++++++++++++++++++++---
 pages/test.vue       | 149 ++++++++------
 3 files changed, 461 insertions(+), 546 deletions(-)
 delete mode 100644 assets/cities-2.json

diff --git a/assets/cities-2.json b/assets/cities-2.json
deleted file mode 100644
index 1e99ee1..0000000
--- a/assets/cities-2.json
+++ /dev/null
@@ -1,464 +0,0 @@
-[
-    {
-      "name": "Angoulême",
-      "region": "Nouvelle-Aquitaine",
-      "lat": "45.650002",
-      "long": "0.160000"
-    },
-    {
-      "name": "Boulogne-sur-Mer",
-      "region": "Hauts-de-France",
-      "lat": "50.726398",
-      "long": "1.614700"
-    },
-    {
-      "name": "Rosny-sous-Bois",
-      "region": "Île-de-France",
-      "lat": "48.866699",
-      "long": "2.483300"
-    },
-    {
-      "name": "Cayenne",
-      "region": "French Guiana",
-      "lat": "4.937200",
-      "long": "-52.326000"
-    },
-    {
-      "name": "Clichy",
-      "region": "Hauts-de-Seine",
-      "lat": "48.904400",
-      "long": "2.306400"
-    },
-    {
-      "name": "Antony",
-      "region": "Hauts-de-Seine",
-      "lat": "48.753899",
-      "long": "2.297500"
-    },
-    {
-      "name": "Valence",
-      "region": "Auvergne-Rhône-Alpes",
-      "lat": "44.933300",
-      "long": "4.891700"
-    },
-    {
-      "name": "Levallois-Perret",
-      "region": "Île-de-France",
-      "lat": "48.895000",
-      "long": "2.287200"
-    },
-    {
-      "name": "Issy-les-Moulineaux",
-      "region": "Île-de-France",
-      "lat": "48.823898",
-      "long": "2.270000"
-    },
-    {
-      "name": "Bourges",
-      "region": "Centre-Val de Loire",
-      "lat": "47.084400",
-      "long": "2.396400"
-    },
-    {
-      "name": "Ajaccio",
-      "region": "Corsica",
-      "lat": "41.926701",
-      "long": "8.736900"
-    },
-    {
-      "name": "Colmar",
-      "region": " Grand Est",
-      "lat": "48.081699",
-      "long": "7.355600"
-    },
-    {
-      "name": "Drancy",
-      "region": "Île-de-France",
-      "lat": "48.930000",
-      "long": "2.450000"
-    },
-    {
-      "name": "Mérignac",
-      "region": "Nouvelle-Aquitaine",
-      "lat": "44.838600",
-      "long": "-0.643600"
-    },
-    {
-      "name": "Saint-Nazaire",
-      "region": "Pays de la Loire",
-      "lat": "47.280602",
-      "long": "-2.208600"
-    },
-    {
-      "name": "Cannes",
-      "region": "Provence-Alpes-Côte d'Azur",
-      "lat": "43.551300",
-      "long": "7.012800"
-    },
-    {
-      "name": "Saint-Maur-des-Fossés",
-      "region": " Île-de-France",
-      "lat": "48.799400",
-      "long": "2.499700"
-    },
-    {
-      "name": "La Rochelle",
-      "region": "Nouvelle-Aquitaine",
-      "lat": "46.159100",
-      "long": "-1.151700"
-    },
-    {
-      "name": "Antibes",
-      "region": "Provence-Alpes-Côte d'Azur",
-      "lat": "43.580799",
-      "long": "7.123900"
-    },
-    {
-      "name": "Champigny-sur-Marne",
-      "region": "Île-de-France",
-      "lat": "48.817200",
-      "long": "2.515600"
-    },
-    {
-      "name": "Aubervilliers",
-      "region": " Île-de-France",
-      "lat": "48.913101",
-      "long": "2.383100"
-    },
-    {
-      "name": "Pau",
-      "region": "Nouvelle-Aquitaine",
-      "lat": "43.299999",
-      "long": "-0.370000"
-    },
-    {
-      "name": "Rueil-Malmaison",
-      "region": "Île-de-France",
-      "lat": "48.875999",
-      "long": "2.181000"
-    },
-    {
-      "name": "Aulnay-sous-Bois",
-      "region": " Île-de-France",
-      "lat": "48.938599",
-      "long": "2.490600"
-    },
-    {
-      "name": "Colombes",
-      "region": "Île-de-France",
-      "lat": "48.923599",
-      "long": "2.252200"
-    },
-    {
-      "name": "Courbevoie",
-      "region": "Île-de-France",
-      "lat": "48.897800",
-      "long": "2.253100"
-    },
-    {
-      "name": "Asnières-sur-Seine",
-      "region": "Île-de-France",
-      "lat": "48.910801",
-      "long": "2.288900"
-    },
-    {
-      "name": "Poitiers",
-      "region": "Nouvelle-Aquitaine",
-      "lat": "46.580002",
-      "long": "0.340000"
-    },
-    {
-      "name": "Créteil",
-      "region": "Île-de-France",
-      "lat": "48.791100",
-      "long": "2.462800"
-    },
-    {
-      "name": "Vitry-sur-Seine",
-      "region": "Île-de-France",
-      "lat": "48.787498",
-      "long": "2.392800"
-    },
-    {
-      "name": "Nanterre",
-      "region": "Île-de-France",
-      "lat": "48.898800",
-      "long": "2.196900"
-    },
-    {
-      "name": "Tourcoing",
-      "region": "Hauts-de-France",
-      "lat": "50.723907",
-      "long": "3.161168"
-    },
-    {
-      "name": "Roubaix",
-      "region": "Hauts-de-France",
-      "lat": "50.690102",
-      "long": "3.181670"
-    },
-    {
-      "name": "Nancy",
-      "region": "Grand East",
-      "lat": "48.693600",
-      "long": "6.184600"
-    },
-    {
-      "name": "Montreuil",
-      "region": "Seine-Saint-Denis",
-      "lat": "48.861099",
-      "long": "2.443600"
-    },
-    {
-      "name": "Saint-Paul",
-      "region": "Réunion",
-      "lat": "-21.009701",
-      "long": "55.269699"
-    },
-    {
-      "name": "Brest",
-      "region": "48.389999",
-      "lat": "-4.490000",
-      "long": ""
-    },
-    {
-      "name": "Caen",
-      "region": "Normandy",
-      "lat": "49.180000",
-      "long": "-0.370000"
-    },
-    {
-      "name": "Rouen",
-      "region": "Normandy",
-      "lat": "49.439999",
-      "long": "1.100000"
-    },
-    {
-      "name": "Orléans",
-      "region": " Centre-Val de Loire",
-      "lat": "47.902500",
-      "long": "1.909000"
-    },
-    {
-      "name": "Besançon",
-      "region": "Bourgogne-Franche-Comté",
-      "lat": "47.240002",
-      "long": "6.020000"
-    },
-    {
-      "name": "Metz",
-      "region": "Grand Est",
-      "lat": "49.120277",
-      "long": "6.177778"
-    },
-    {
-      "name": "Perpignan",
-      "region": "Occitanie",
-      "lat": "42.698601",
-      "long": "2.895600"
-    },
-    {
-      "name": "Tours",
-      "region": "Centre-Val de Loire",
-      "lat": "47.243599",
-      "long": "0.689200"
-    },
-    {
-      "name": "Limoges",
-      "region": "Nouvelle-Aquitaine",
-      "lat": "45.835300",
-      "long": "1.262500"
-    },
-    {
-      "name": "Clermont-Ferrand",
-      "region": " Auvergne-Rhône-Alpes",
-      "lat": "45.783100",
-      "long": "3.082400"
-    },
-    {
-      "name": "Aix-en-Provence",
-      "region": "Provence-Alpes-Côte d'Azur",
-      "lat": "43.526302",
-      "long": "5.445429"
-    },
-    {
-      "name": "Villeurbanne",
-      "region": " Auvergne-Rhône-Alpes",
-      "lat": "45.766701",
-      "long": "4.880300"
-    },
-    {
-      "name": "Angers",
-      "region": "Anjou",
-      "lat": "47.473614",
-      "long": "-0.554167"
-    },
-    {
-      "name": "Nîmes",
-      "region": "Occitanie",
-      "lat": "43.838001",
-      "long": "4.361000"
-    },
-    {
-      "name": "Dijon",
-      "region": " Bourgogne-Franche-Comté",
-      "lat": "47.316666",
-      "long": "5.016667"
-    },
-    {
-      "name": "Grenoble",
-      "region": " Auvergne-Rhône-Alpes",
-      "lat": "45.171547",
-      "long": "5.722387"
-    },
-    {
-      "name": "Saint-Étienne",
-      "region": " Auvergne-Rhône-Alpes",
-      "lat": "45.434700",
-      "long": "4.390300"
-    },
-    {
-      "name": "Toulon",
-      "region": " Provence-Alpes-Côte d'Azur",
-      "lat": "43.125832",
-      "long": "5.930556"
-    },
-    {
-      "name": "Le Havre",
-      "region": " Normandy",
-      "lat": "49.490002",
-      "long": "0.100000"
-    },
-    {
-      "name": "Reims",
-      "region": " Grand Est",
-      "lat": "49.262798",
-      "long": "4.034700"
-    },
-    {
-      "name": "Rennes",
-      "region": "Bretagne",
-      "lat": "48.114700",
-      "long": "-1.679400"
-    },
-    {
-      "name": "Montpellier",
-      "region": "Occitan",
-      "lat": "43.611900",
-      "long": "3.877200"
-    },
-    {
-      "name": "Strasbourg",
-      "region": "Grand Est",
-      "lat": "48.580002",
-      "long": "7.750000"
-    },
-    {
-      "name": "Nantes",
-      "region": "Loire-Atlantique",
-      "lat": "47.218102",
-      "long": "-1.552800"
-    },
-    {
-      "name": "Toulouse",
-      "region": "Occitanie",
-      "lat": "43.604500",
-      "long": "1.444000"
-    },
-    {
-      "name": "Marseille",
-      "region": "Provence",
-      "lat": "43.296398",
-      "long": "5.370000"
-    },
-    {
-      "name": "Vierzon",
-      "region": "Centre-Val de Loire",
-      "lat": "47.221996",
-      "long": "2.067849"
-    },
-    {
-      "name": "Le Mans",
-      "region": "Pays de la Loire",
-      "lat": "48.008224",
-      "long": "0.209856"
-    },
-    {
-      "name": "Avignon",
-      "region": "Provence",
-      "lat": "43.949318",
-      "long": "4.805528"
-    },
-    {
-      "name": "Dunkirk",
-      "region": "Hauts-de-France",
-      "lat": "51.050030",
-      "long": "2.397766"
-    },
-    {
-      "name": "Lille",
-      "region": "Hauts-de-France",
-      "lat": "50.629250",
-      "long": "3.057256"
-    },
-    {
-      "name": "Menton",
-      "region": " Provence-Alpes-Côte d'Azur",
-      "lat": "43.774483",
-      "long": "7.497540"
-    },
-    {
-      "name": "Bastia",
-      "region": " Haute-Corse",
-      "lat": "42.697285",
-      "long": "9.450881"
-    },
-    {
-      "name": "Le Cannet",
-      "region": "Cannes",
-      "lat": "43.552849",
-      "long": "7.017369"
-    },
-    {
-      "name": "Beauvais",
-      "region": "Hauts-de-France",
-      "lat": "49.431744",
-      "long": "2.089773"
-    },
-    {
-      "name": "Mulhouse",
-      "region": "Grand Est",
-      "lat": "47.750839",
-      "long": "7.335888"
-    },
-    {
-      "name": "Boulogne-Billancourt",
-      "region": "Île-de-France",
-      "lat": "48.843933",
-      "long": "2.247391"
-    },
-    {
-      "name": "Montauban",
-      "region": "Occitanie",
-      "lat": "44.022125",
-      "long": "1.352960"
-    },
-    {
-      "name": "Amiens",
-      "region": "Hauts-de-France",
-      "lat": "49.894066",
-      "long": "2.295753"
-    },
-    {
-      "name": "Laval",
-      "region": "Mayenne",
-      "lat": "48.101929",
-      "long": "-0.766296"
-    },
-    {
-      "name": "Versailles",
-      "region": "Yvelines",
-      "lat": "48.801407",
-      "long": "2.130122"
-    }
-  ]
\ No newline at end of file
diff --git a/assets/cities.json b/assets/cities.json
index 056558f..9be98fa 100644
--- a/assets/cities.json
+++ b/assets/cities.json
@@ -1,38 +1,386 @@
 [
     {
-        "name" : "Angoulème",
-        "coords" : [45.650002,	0.160000]       
+      "name": "Angoulême",
+      "region": "Nouvelle-Aquitaine",
+      "lat": "45.650002",
+      "lng": "0.160000"
     },
     {
-        "name" : "Clichy",
-        "coords" : [48.904400,	2.306400]       
-
+      "name": "Boulogne-sur-Mer",
+      "region": "Hauts-de-France",
+      "lat": "50.726398",
+      "lng": "1.614700"
     },
     {
-        "name" : "Antony",
-        "coords" : [48.753899,	2.297500]       
-
+      "name": "Clichy",
+      "region": "Hauts-de-Seine",
+      "lat": "48.904400",
+      "lng": "2.306400"
     },
     {
-        "name" : "Antibes",
-        "coords" : [43.580799,	7.123900]       
-
+      "name": "Antony",
+      "region": "Hauts-de-Seine",
+      "lat": "48.753899",
+      "lng": "2.297500"
     },
     {
-        "name" : "Pau",
-        "coords" : [43.299999,	-0.370000]       
-
+      "name": "Valence",
+      "region": "Auvergne-Rhône-Alpes",
+      "lat": "44.933300",
+      "lng": "4.891700"
     },
     {
-        "name" : "Nancy",
-        "coords" : [48.693600,	6.184600]       
-
+      "name": "Bourges",
+      "region": "Centre-Val de Loire",
+      "lat": "47.084400",
+      "lng": "2.396400"
     },
     {
-        "name" : "Metz",
-        "coords" : [49.120277,	6.177778]       
-
+      "name": "Ajaccio",
+      "region": "Corse",
+      "lat": "41.926701",
+      "lng": "8.736900"
+    },
+    {
+      "name": "Colmar",
+      "region": "Grand Est",
+      "lat": "48.081699",
+      "lng": "7.355600"
+    },
+    {
+      "name": "Drancy",
+      "region": "Île-de-France",
+      "lat": "48.930000",
+      "lng": "2.450000"
+    },
+    {
+      "name": "Mérignac",
+      "region": "Nouvelle-Aquitaine",
+      "lat": "44.838600",
+      "lng": "-0.643600"
+    },
+    {
+      "name": "Saint-Nazaire",
+      "region": "Pays de la Loire",
+      "lat": "47.280602",
+      "lng": "-2.208600"
+    },
+    {
+      "name": "Cannes",
+      "region": "Provence-Alpes-Côte d'Azur",
+      "lat": "43.551300",
+      "lng": "7.012800"
+    },
+    {
+      "name": "La Rochelle",
+      "region": "Nouvelle-Aquitaine",
+      "lat": "46.159100",
+      "lng": "-1.151700"
+    },
+    {
+      "name": "Antibes",
+      "region": "Provence-Alpes-Côte d'Azur",
+      "lat": "43.580799",
+      "lng": "7.123900"
+    },
+    {
+      "name": "Champigny-sur-Marne",
+      "region": "Île-de-France",
+      "lat": "48.817200",
+      "lng": "2.515600"
+    },
+    {
+      "name": "Aubervilliers",
+      "region": " Île-de-France",
+      "lat": "48.913101",
+      "lng": "2.383100"
+    },
+    {
+      "name": "Pau",
+      "region": "Nouvelle-Aquitaine",
+      "lat": "43.299999",
+      "lng": "-0.370000"
+    },
+    {
+      "name": "Colombes",
+      "region": "Île-de-France",
+      "lat": "48.923599",
+      "lng": "2.252200"
+    },
+    {
+      "name": "Courbevoie",
+      "region": "Île-de-France",
+      "lat": "48.897800",
+      "lng": "2.253100"
+    },
+    {
+      "name": "Poitiers",
+      "region": "Nouvelle-Aquitaine",
+      "lat": "46.580002",
+      "lng": "0.340000"
+    },
+    {
+      "name": "Créteil",
+      "region": "Île-de-France",
+      "lat": "48.791100",
+      "lng": "2.462800"
+    },
+    {
+      "name": "Vitry-sur-Seine",
+      "region": "Île-de-France",
+      "lat": "48.787498",
+      "lng": "2.392800"
+    },
+    {
+      "name": "Nanterre",
+      "region": "Île-de-France",
+      "lat": "48.898800",
+      "lng": "2.196900"
+    },
+    {
+      "name": "Tourcoing",
+      "region": "Hauts-de-France",
+      "lat": "50.723907",
+      "lng": "3.161168"
+    },
+    {
+      "name": "Roubaix",
+      "region": "Hauts-de-France",
+      "lat": "50.690102",
+      "lng": "3.181670"
+    },
+    {
+      "name": "Nancy",
+      "region": "Grand East",
+      "lat": "48.693600",
+      "lng": "6.184600"
+    },
+    {
+      "name": "Montreuil",
+      "region": "Seine-Saint-Denis",
+      "lat": "48.861099",
+      "lng": "2.443600"
+    },
+    {
+      "name": "Saint-Paul",
+      "region": "Réunion",
+      "lat": "-21.009701",
+      "lng": "55.269699"
+    },
+    {
+      "name": "Caen",
+      "region": "Normandie",
+      "lat": "49.180000",
+      "lng": "-0.370000"
+    },
+    {
+      "name": "Rouen",
+      "region": "Normandie",
+      "lat": "49.439999",
+      "lng": "1.100000"
+    },
+    {
+      "name": "Orléans",
+      "region": "Centre-Val de Loire",
+      "lat": "47.902500",
+      "lng": "1.909000"
+    },
+    {
+      "name": "Besançon",
+      "region": "Bourgogne-Franche-Comté",
+      "lat": "47.240002",
+      "lng": "6.020000"
+    },
+    {
+      "name": "Metz",
+      "region": "Grand Est",
+      "lat": "49.120277",
+      "lng": "6.177778"
+    },
+    {
+      "name": "Perpignan",
+      "region": "Occitanie",
+      "lat": "42.698601",
+      "lng": "2.895600"
+    },
+    {
+      "name": "Tours",
+      "region": "Centre-Val de Loire",
+      "lat": "47.243599",
+      "lng": "0.689200"
+    },
+    {
+      "name": "Limoges",
+      "region": "Nouvelle-Aquitaine",
+      "lat": "45.835300",
+      "lng": "1.262500"
+    },
+    {
+      "name": "Clermont-Ferrand",
+      "region": "Auvergne-Rhône-Alpes",
+      "lat": "45.783100",
+      "lng": "3.082400"
+    },
+    {
+      "name": "Aix-en-Provence",
+      "region": "Provence-Alpes-Côte d'Azur",
+      "lat": "43.526302",
+      "lng": "5.445429"
+    },
+    {
+      "name": "Villeurbanne",
+      "region": "Auvergne-Rhône-Alpes",
+      "lat": "45.766701",
+      "lng": "4.880300"
+    },
+    {
+      "name": "Angers",
+      "region": "Anjou",
+      "lat": "47.473614",
+      "lng": "-0.554167"
+    },
+    {
+      "name": "Nîmes",
+      "region": "Occitanie",
+      "lat": "43.838001",
+      "lng": "4.361000"
+    },
+    {
+      "name": "Dijon",
+      "region": "Bourgogne-Franche-Comté",
+      "lat": "47.316666",
+      "lng": "5.016667"
+    },
+    {
+      "name": "Grenoble",
+      "region": "Auvergne-Rhône-Alpes",
+      "lat": "45.171547",
+      "lng": "5.722387"
+    },
+    {
+      "name": "Saint-Étienne",
+      "region": "Auvergne-Rhône-Alpes",
+      "lat": "45.434700",
+      "lng": "4.390300"
+    },
+    {
+      "name": "Toulon",
+      "region": "Provence-Alpes-Côte d'Azur",
+      "lat": "43.125832",
+      "lng": "5.930556"
+    },
+    {
+      "name": "Le Havre",
+      "region": "Normandie",
+      "lat": "49.490002",
+      "lng": "0.100000"
+    },
+    {
+      "name": "Reims",
+      "region": "Grand Est",
+      "lat": "49.262798",
+      "lng": "4.034700"
+    },
+    {
+      "name": "Montpellier",
+      "region": "Occitan",
+      "lat": "43.611900",
+      "lng": "3.877200"
+    },
+    {
+      "name": "Strasbourg",
+      "region": "Grand Est",
+      "lat": "48.580002",
+      "lng": "7.750000"
+    },
+    {
+      "name": "Toulouse",
+      "region": "Occitanie",
+      "lat": "43.604500",
+      "lng": "1.444000"
+    },
+    {
+      "name": "Vierzon",
+      "region": "Centre-Val de Loire",
+      "lat": "47.221996",
+      "lng": "2.067849"
+    },
+    {
+      "name": "Le Mans",
+      "region": "Pays de la Loire",
+      "lat": "48.008224",
+      "lng": "0.209856"
+    },
+    {
+      "name": "Avignon",
+      "region": "Provence",
+      "lat": "43.949318",
+      "lng": "4.805528"
+    },
+    {
+      "name": "Dunkerque",
+      "region": "Hauts-de-France",
+      "lat": "51.050030",
+      "lng": "2.397766"
+    },
+    {
+      "name": "Menton",
+      "region": "Provence-Alpes-Côte d'Azur",
+      "lat": "43.774483",
+      "lng": "7.497540"
+    },
+    {
+      "name": "Bastia",
+      "region": "Haute-Corse",
+      "lat": "42.697285",
+      "lng": "9.450881"
+    },
+    {
+      "name": "Le Cannet",
+      "region": "Cannes",
+      "lat": "43.552849",
+      "lng": "7.017369"
+    },
+    {
+      "name": "Beauvais",
+      "region": "Hauts-de-France",
+      "lat": "49.431744",
+      "lng": "2.089773"
+    },
+    {
+      "name": "Mulhouse",
+      "region": "Grand Est",
+      "lat": "47.750839",
+      "lng": "7.335888"
+    },
+    {
+      "name": "Boulogne-Billancourt",
+      "region": "Île-de-France",
+      "lat": "48.843933",
+      "lng": "2.247391"
+    },
+    {
+      "name": "Montauban",
+      "region": "Occitanie",
+      "lat": "44.022125",
+      "lng": "1.352960"
+    },
+    {
+      "name": "Amiens",
+      "region": "Hauts-de-France",
+      "lat": "49.894066",
+      "lng": "2.295753"
+    },
+    {
+      "name": "Laval",
+      "region": "Mayenne",
+      "lat": "48.101929",
+      "lng": "-0.766296"
+    },
+    {
+      "name": "Versailles",
+      "region": "Yvelines",
+      "lat": "48.801407",
+      "lng": "2.130122"
     }
-
-    
-]
\ No newline at end of file
+  ]
\ No newline at end of file
diff --git a/pages/test.vue b/pages/test.vue
index 5844532..8c4ee8f 100644
--- a/pages/test.vue
+++ b/pages/test.vue
@@ -1,15 +1,14 @@
 <template>
-    <div class="w-full h-[66vh]" @mousemove="handleMove" ref="container" @mouseleave="leaveContainer">
-        <div ref="lottieContainer"
-            class="hidden md:!block  w-16 rounded-xl transition-all ease-in-out duration-500 transition-transform-duration-700"
-            :class = "{'opacity-0 scale-80' : !hoveringContainer}">
-            <client-only>
-                <Vue3Lottie autoPlay animationLink="/quizz/zeppelin.json" class="scale-150"/>
-            </client-only>
-        </div>
+    <div class="w-full h-[66vh]" @mousemove="handleMove" ref="container" @mouseleave="hoveringContainer = false">
+        <client-only> <!--  Lottie Animation moving on hover -->
+            <div ref="lottieContainer" class="hidden md:!block w-16 rounded-xl transition-all ease-in-out duration-500"
+                :class="{ 'opacity-0 scale-0': !hoveringContainer, 'scale-x-[-1]': movingLeft }">
+                <Vue3Lottie autoPlay animationLink="/quizz/zeppelin.json" class="scale-[200%]" />
+            </div>
+        </client-only>
         <div class="my-2">
-            <div class="text-center font-light text-md tracking-wider">
-                Essaye de trouver ..
+            <div class="text-center font-light text-md tracking-wider min-h-[40px]">
+                <span>Essaye de trouver ..</span>
                 <transition-slide group class="inline-flex ml-2">
                     <div v-for="(city, index) in cities" :key="index" v-show="index === currentIndex"
                         class="bg-primary/50 rounded px-2 text-center">
@@ -17,88 +16,122 @@
                     </div>
                 </transition-slide>
                 <transition-slide>
-                    <span class="px-4" v-if="gameOver">Partie terminée ...</span>
+                    <span v-show="gameOver" class="px-4 animate-pulse">
+                        <span class="hidden md:!inline">Partie terminée ...</span>
+                        <UButton @click="reset" variant="soft">Continuer</UButton>
+                    </span>
                 </transition-slide>
             </div>
             <div class="my-2 flex items-baseline gap-2">
-                Score
-                <UProgress :value="currentPoint ? score : 0" :max="minDistOk" class="flex-1" />
+                Score <span class="px-1 text-teal-500">{{ totalScore }} / {{ minDistOk * cities.length }}</span>
+                <UProgress :value="totalScore" :max="minDistOk * cities.length" class="flex-1" />
             </div>
         </div>
         <transition-scale>
-            <div v-if="score"
+            <div v-if="waiting"
                 class="absolute w-[46%] m-auto top-[25vh] left-[27%] text-center text-primary/60 opacity-40 text-lg z-[1000]">
                 <AppTargetNumber :targetNumber="currentDist" text="km" class="rounded-lg"></AppTargetNumber>
             </div>
         </transition-scale>
-        <LMap ref="map" :zoom="zoom" :center="mapCenter" :maxZoom="zoom" @click="handleClick">
-            <LTileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-                attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
-                layer-type="base" name="OpenStreetMap" />
-
-            <template v-if="currentPoint">
-                <!-- User point clicked -->
-                <l-circle :lat-lng="currentPoint" color="blue" :radius="10000"></l-circle>
-
-                <!-- Answer -->
-                <l-marker :lat-lng="answerCity.coords" :opacity="0.4">
-                    <l-tooltip class="m-3 w-60 max-w-full h-12 pb-2">
-                        <h2 class="text-lg italic">{{ cities[currentIndex].name }} </h2>
-                        <h3 class="text-md text-teal-700 my-1">Point n° {{ currentIndex }}</h3>
-                    </l-tooltip>
-                </l-marker>
-
-                <l-polyline v-if="polyline" :lat-lngs="polyline" :color="score > 0 ? 'green' : 'red'"></l-polyline>
-                <l-circle :lat-lng="answerCity.coords" :color="score > 0 ? 'green' : 'red'" :radius="1000 * minDistOk"
-                    :stroke="false"></l-circle>
-            </template>
-        </LMap>
+        <div class="flex w-full h-full gap-x-2">
+            <!-- Icon markers filled when an answer is given -->
+            <div class="h-full w-[50px] md:w-[60px] flex gap-1">
+                <div v-for="i of nbCities" :key="i" class="grid basis-full place-items-center bg-slate-300/20 rounded opacity-60 transition-all duration-500 scale-0"
+                :class="{ '!scale-100': currentIndex % nbCities >= i-1 }">
+                    <UIcon name="i-lucide-map-pin" size="xl" class="text-gray-500 text-2xl"/>
+                </div>
+            </div>
+            <div class="flex-1">
+                <LMap :zoom :center :maxZoom="zoom" @click="handleClick">
+                    <LTileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+                        attribution="&amp;copy; <a href=&quot;https://www.openstreetmap.org/&quot;>OpenStreetMap</a> contributors"
+                        layer-type="base" name="OpenStreetMap" />
+
+                    <template v-if="currentPoint">
+                        <!-- User point clicked -->
+                        <l-circle :lat-lng="currentPoint" color="blue" :radius="10000"></l-circle>
+                        <!-- Line between answer and user point -->
+                        <l-polyline v-if="polyline" :lat-lngs="polyline" :color></l-polyline>
+                        <!-- Circle around answer -->
+                        <l-circle :lat-lng="answerCoords" :color :radius="1000 * minDistOk" :stroke="false"></l-circle>
+                    </template>
+
+                    <!-- Answer (current or all if game over)-->
+                    <l-marker v-if="currentPoint" v-for="(city, i) in gameOver ? cities : [answerCity]" :key="i"
+                        :lat-lng="[city.lat, city.lng]">
+                        <l-tooltip class="m-3 w-60 max-w-full h-12 pb-2">
+                            <h2 class="text-lg italic">{{ city.name }} </h2>
+                            <p v-if="answerCity.region" class="text-teal-600">{{ city.region }}</p>
+                        </l-tooltip>
+                    </l-marker>
+                </LMap>
+            </div>
+        </div>
     </div>
 </template>
 
 <script setup>
 
-import { Vue3Lottie } from 'vue3-lottie'
-
+// Leaflet map settings
 const zoom = ref(5)
-const mapCenter = ref([48, 2])
+const center = ref([48, 2])
 
+// Current city and answer
+import citiesJson from "@/assets/cities.json"
+const nbCities = 6
+const selectCities = (nb = nbCities) => citiesJson.sort(() => Math.random() - 0.5).slice(0, nb)
+const cities = ref([])
 const currentIndex = ref(0)
-const currentDist = ref(minDistOk)
 const currentPoint = ref()
-const currentAnswer = ref(-1)
-const waiting = ref(false)
-const minDistOk = 200
-const map = ref()
-const answerCity = computed(() => cities[currentIndex.value])
-const polyline = computed(() => currentPoint.value && [answerCity.value.coords, [currentPoint.value.lat, currentPoint.value.lng]])
+const answerCity = computed(() => cities.value[currentIndex.value])
+const answerCoords = computed(() => [answerCity.value.lat, answerCity.value.lng])
+const polyline = computed(() => currentPoint.value && [answerCoords.value, [currentPoint.value.lat, currentPoint.value.lng]])
 
-const gameOver = computed(() => currentIndex.value === cities.length - 1 && currentPoint.value)
+// Score, distance
+const minDistOk = 200
+const currentDist = ref(minDistOk)
 const score = computed(() => currentDist.value > minDistOk ? 0 : minDistOk - currentDist.value)
+const totalScore = ref(0)
+watchEffect(() => totalScore.value += score.value)
+const color = computed(() => score.value > 0 ? 'green' : 'red')
 
+// Game state
+const waiting = ref(false)
+const gameOver = computed(() => currentIndex.value === cities.value.length - 1 && currentPoint.value)
+
+// Lottie animation
+import { Vue3Lottie } from 'vue3-lottie'
 const lottieContainer = ref(null)
 const container = ref(null)
 const hoveringContainer = ref(false)
+const movingLeft = ref(false)
+const lastXMove = ref(0)
 
-import cities from "@/assets/cities.json"
-
-async function handleMove(e) {
+function handleMove(e) {
     hoveringContainer.value = true
-    lottieContainer.value.style.marginLeft = `${e.screenX - container.value.offsetLeft - 30}px`
+    lottieContainer.value.style.marginLeft = `${e.screenX - container.value.offsetLeft - 50}px`
+    movingLeft.value = e.screenX < lastXMove.value
+    lastXMove.value = e.screenX
 }
 
-function leaveContainer() {
-    hoveringContainer.value = false
+onMounted(() => cities.value = selectCities())
+
+function reset() {
+    waiting.value = false
+    // currentIndex.value = 0
+    currentPoint.value = null
+    currentDist.value = minDistOk
+    cities.value = [...cities.value, ...selectCities()]
+    currentIndex.value++
 }
 
 function handleClick(e) {
     if (waiting.value) return
     waiting.value = true
     currentPoint.value = e.latlng
-    currentAnswer.value = currentIndex.value
 
     currentDist.value = getDistanceFromLatLonInKm(
-        ...cities[currentIndex.value].coords,
+        ...answerCoords.value,
         e.latlng.lat,
         e.latlng.lng
     )
@@ -107,12 +140,13 @@ function handleClick(e) {
         setTimeout(() => {
             currentIndex.value++
             currentDist.value = minDistOk
-            currentAnswer.value = 0
             currentPoint.value = null
             waiting.value = false
         }, 2000);
 }
 
+const deg2rad = deg => deg * (Math.PI / 180)
+
 function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2, round = true) {
     var R = 6371; // Radius of the earth in km
     var dLat = deg2rad(lat2 - lat1);
@@ -127,7 +161,4 @@ function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2, round = true) {
     return round ? Math.round(d) : d;
 }
 
-function deg2rad(deg) {
-    return deg * (Math.PI / 180)
-}
 </script>
\ No newline at end of file