Cycle through overlapping selected courses by dep time

src/front/index.js

@@ -4,7 +4,7 @@ import * as map from "./map/index.js";
 
 // Run courses simulation
 const coursesSimulation = simulation.start();
-let courseId = null;
+let selectedCourse = null;
 
 window.__courses = coursesSimulation.courses;
 window.__network = network;
@@ -38,8 +38,8 @@ setInterval(() => {
         </dl>
     `;
 
-    if (courseId !== null && courseId in coursesSimulation.courses) {
+    if (selectedCourse !== null && selectedCourse in coursesSimulation.courses) {
-        const course = coursesSimulation.courses[courseId];
+        const course = coursesSimulation.courses[selectedCourse];
 
         const stopToHTML = stopId => stopId in network.stops ?
             network.stops[stopId].properties.name :
@@ -66,7 +66,7 @@ setInterval(() => {
         html += `
             <dl>
                 <dt>ID</dt>
-                <dd>${courseId}</dd>
+                <dd>${selectedCourse}</dd>
 
                 <dt>Ligne</dt>
                 <dd>${course.line}</dd>
@@ -108,25 +108,13 @@ setInterval(() => {
 
 // Create the network and courses map
 map.create(/* map = */ "map", coursesSimulation, courses => {
+    const index = courses.indexOf(selectedCourse);
+
     if (courses.length === 0) {
-        // If no course were clicked, show nothing
+        selectedCourse = null;
-        courseId = null;
+    } else if (index === -1) {
+        selectedCourse = courses[0];
     } else {
-        // If several courses were clicked, show the one departing the soonest,
+        selectedCourse = courses[(index + 1) % courses.length];
-        // 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

@@ -136,6 +136,26 @@ export const create = (target, coursesSimulation, onClick) => {
             }
         }
 
+        // Sort selected courses in increasing departing/arrival time
+        clicked.sort((id1, id2) => {
+            const course1 = coursesSimulation.courses[id1];
+            const course2 = coursesSimulation.courses[id2];
+
+            const time1 = (
+                course1.state === "moving"
+                ? course1.arrivalTime
+                : course1.departureTime
+            );
+
+            const time2 = (
+                course2.state === "moving"
+                ? course2.arrivalTime
+                : course2.departureTime
+            );
+
+            return time1 - time2;
+        });
+
         onClick(clicked);
     });