Allow clicking on multiple courses simultaneously

src/front/index.js

@@ -84,6 +84,26 @@ setInterval(() => {
 }, 1000);
 
 // Create the network and courses map
-map.create(/* map = */ "map", coursesSimulation, course => {
-    courseId = course;
+map.create(/* map = */ "map", coursesSimulation, courses => {
+    if (courses.length === 0) {
+        // If no course were clicked, show nothing
+        courseId = null;
+    } else {
+        // If several courses were clicked, show the one departing the soonest,
+        // or the first moving one
+        courses.sort((id1, id2) => {
+            const course1 = coursesSimulation.courses[id1];
+            const course2 = coursesSimulation.courses[id2];
+
+            if (course1.state === "moving") {
+                return -1;
+            } else if (course2.state === "moving") {
+                return 1;
+            } else {
+                return course1.departureTime - course2.departureTime;
+            }
+        });
+
+        courseId = courses[0];
+    }
 });

src/front/map/index.js

@@ -120,6 +120,7 @@ const create = (target, coursesSimulation, onClick) => {
     map.on("singleclick", ev => {
         const mousePixel = map.getPixelFromCoordinate(ev.coordinate);
         const maxDistance = sizes.courseSize + sizes.courseInnerBorder;
+        const clicked = [];
 
         for (const course of Object.values(coursesSimulation.courses)) {
             const coursePixel = map.getPixelFromCoordinate(course.position);
@@ -128,9 +129,11 @@ const create = (target, coursesSimulation, onClick) => {
             const distance = dx * dx + dy * dy;
 
             if (distance <= maxDistance * maxDistance) {
-                onClick(course.id);
+                clicked.push(course.id);
             }
         }
+
+        onClick(clicked);
     });
 
     return map;