Refonte du code de simulation

package.json

@@ -1,38 +1,34 @@
 {
   "name": "tamview",
   "version": "0.1.0",
-  "description": "",
-  "main": "index.js",
+  "type": "module",
   "scripts": {
     "back": "node src/back",
-    "front:dev": "parcel serve src/front/index.html",
-    "front:prod": "npx parcel build src/front/index.html --no-source-maps --no-autoinstall",
+    "front:dev": "vite src/front",
+    "front:prod": "vite build src/front",
     "lint": "eslint ."
   },
-  "engines": {
-    "node": ">=10.0.0"
-  },
-  "keywords": [],
-  "author": "Mattéo Delabre",
-  "license": "MIT",
   "dependencies": {
-    "@turf/along": "^6.0.1",
-    "@turf/helpers": "^6.1.4",
-    "@turf/length": "^6.0.2",
-    "@turf/projection": "^6.0.1",
-    "@turf/turf": "^5.1.6",
-    "axios": "^0.19.2",
-    "color": "^3.1.2",
-    "csv-parse": "^4.8.3",
+    "@turf/along": "^6.3.0",
+    "@turf/helpers": "^6.3.0",
+    "@turf/length": "^6.3.0",
+    "@turf/projection": "^6.3.0",
+    "@turf/turf": "^6.3.0",
+    "axios": "^0.21.1",
+    "color": "^3.1.3",
+    "csv-parse": "^4.15.4",
     "express": "^4.17.1",
-    "ol": "^6.1.1",
-    "unzip-stream": "^0.3.0"
+    "ol": "^6.5.0",
+    "unzip-stream": "^0.3.1",
+    "vue": "^3.0.5"
   },
   "devDependencies": {
-    "eslint": "^6.8.0",
-    "eslint-config-eslint": "^6.0.0",
-    "eslint-plugin-jsdoc": "^30.0.3",
+    "@vitejs/plugin-vue": "^1.2.2",
+    "@vue/compiler-sfc": "^3.0.5",
+    "eslint": "^7.26.0",
+    "eslint-config-eslint": "^7.0.0",
+    "eslint-plugin-jsdoc": "^34.0.1",
     "eslint-plugin-node": "^11.1.0",
-    "parcel-bundler": "^1.12.4"
+    "vite": "^2.3.0"
   }
 }

script/show-courses.js

@@ -1,10 +1,14 @@
 #!/usr/bin/env node
 
-const courses = require('../src/tam/courses');
-const network = require('../src/tam/network.json');
-const {displayTime} = require('../src/util');
-const process = require('process');
-const path = require('path');
+import * as courses from '../src/tam/courses.js';
+import {displayTime} from '../src/util.js';
+import process from 'process';
+import path from 'path';
+import { readFile } from 'fs/promises';
+
+const network = JSON.parse(await readFile(
+    new URL('../src/tam/network.json', import.meta.url)
+));
 
 /**
  * Convert stop ID to human-readable stop name.

script/update-network

@@ -1,29 +0,0 @@
-#!/usr/bin/env node
-
-const network = require('../src/tam/network');
-const path = require('path');
-const fs = require('fs');
-
-(async () =>
-{
-    const lines = ['1', '2', '3', '4'];
-    const data = await network.fetch(lines);
-
-    fs.writeFileSync(
-        path.join(__dirname, '../src/tam/network.json'),
-        JSON.stringify(
-            data,
-            (_, value) =>
-            {
-                if (value instanceof Set)
-                {
-                    // Convert sets to arrays for JSON representation
-                    return Array.from(value.values());
-                }
-
-                return value;
-            },
-            4
-        )
-    );
-})();

script/update-network.js

@@ -0,0 +1,25 @@
+#!/usr/bin/env node
+
+import * as network from '../src/tam/network.js';
+import fs from 'fs/promises';
+
+const lines = ['1', '2', '3', '4'];
+const data = await network.fetch(lines);
+
+await fs.writeFile(
+    new URL("../src/tam/network.json", import.meta.url),
+    JSON.stringify(
+        data,
+        (_, value) =>
+        {
+            if (value instanceof Set)
+            {
+                // Convert sets to arrays for JSON representation
+                return Array.from(value.values());
+            }
+
+            return value;
+        },
+        4
+    )
+);

src/back/index.js

@@ -1,10 +1,10 @@
-const express = require("express");
-const courses = require("../tam/courses");
+import express from "express";
+import * as courses from "../tam/courses.js";
 
 const app = express();
 const port = 4321;
 
-app.get("/courses", async(req, res) => {
+app.get("/courses", async (_, res) => {
     res.header("Access-Control-Allow-Origin", "*");
     return res.json(await courses.fetch("realtime"));
 });

src/front/Panel.vue

@@ -0,0 +1,13 @@
+<template>
+    <div>Hello {{ name }}!</div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: "Vue",
+            };
+        }
+    };
+</script>

src/front/index.html

@@ -18,8 +18,8 @@
                 flex-direction: row;
             }
 
-            #informations {
-                flex: 0 0 600px;
+            #panel {
+                flex: 0 0 400px;
                 padding: 20px;
                 overflow-y: auto;
             }
@@ -31,8 +31,8 @@
         </style>
     </head>
     <body>
-        <div id="informations"></div>
+        <aside id="panel"></aside>
         <div id="map"></div>
-        <script src="index.js"></script>
+        <script type="module" src="/index.js"></script>
     </body>
 </html>

src/front/index.js

@@ -1,21 +1,32 @@
-// eslint-disable-next-line node/no-extraneous-require
-require("regenerator-runtime/runtime");
-
-const network = require("../tam/network.json");
-const simulation = require("../tam/simulation");
-const map = require("./map/index.js");
+import network from "../tam/network.json";
+import * as simulation from "../tam/simulation.js";
+import * as map from "./map/index.js";
 
 // Run courses simulation
 const coursesSimulation = simulation.start();
-const informations = document.querySelector("#informations");
 let courseId = null;
 
+// Create display panel
+const panel = document.querySelector("#panel");
+
 const displayTime = date => [
     date.getHours(),
     date.getMinutes(),
     date.getSeconds()
 ].map(number => number.toString().padStart(2, "0")).join(":");
 
+const timeToHTML = time => {
+    const delta = Math.ceil((time - Date.now()) / 1000);
+
+    if (delta <= 0) {
+        return `Imminent`;
+    } else if (delta < 60) {
+        return `${delta} s`;
+    } else {
+        return `${Math.floor(delta / 60)} min ${delta % 60} s`;
+    }
+};
+
 setInterval(() => {
     let html = `
         <dl>
@@ -27,8 +38,6 @@ setInterval(() => {
     if (courseId !== null && courseId in coursesSimulation.courses) {
         const course = coursesSimulation.courses[courseId];
 
-        const timeToHTML = time => Math.ceil((time - Date.now()) / 1000);
-
         const stopToHTML = stopId => stopId in network.stops ?
             network.stops[stopId].properties.name :
             '<em>Arrêt inconnu</em>';
@@ -40,6 +49,17 @@ setInterval(() => {
             </tr>
         `).join("\n");
 
+        const state = (
+            course.traveledDistance === 0 && course.speed === 0
+                ? "stopped" : "moving"
+        );
+
+        let prevPassings = course.prevPassings;
+
+        if (state === "moving") {
+            prevPassings = prevPassings.concat([[course.departureStop, course.departureTime]]);
+        }
+
         html += `
             <dl>
                 <dt>ID</dt>
@@ -52,14 +72,14 @@ setInterval(() => {
                 <dd>${stopToHTML(course.finalStop)}</dd>
 
                 <dt>État</dt>
-                <dd>${course.state === "moving"
+                <dd>${state === "moving"
         ? `Entre ${stopToHTML(course.departureStop)}
             et ${stopToHTML(course.arrivalStop)}`
-        : `À l’arrêt ${stopToHTML(course.currentStop)}`}</dd>
+        : `À l’arrêt ${stopToHTML(course.departureStop)}`}</dd>
 
-                ${course.state === "moving" ? `
+                ${state === "moving" ? `
                     <dt>Arrivée dans</dt>
-                    <dd>${timeToHTML(course.arrivalTime)} s</dd>
+                    <dd>${timeToHTML(course.arrivalTime - 10000)}</dd>
 
                     <dt>Distance parcourue</dt>
                     <dd>${Math.ceil(course.traveledDistance)} m</dd>
@@ -68,19 +88,19 @@ setInterval(() => {
                     <dd>${Math.ceil(course.speed * 3600)} km/h</dd>
                 ` : `
                     <dt>Départ dans</dt>
-                    <dd>${timeToHTML(course.departureTime)} s</dd>
+                    <dd>${timeToHTML(course.departureTime)}</dd>
                 `}
             </dl>
 
             <h2>Arrêts précédents</h2>
-            <table>${passingsToHTML(course.prevPassings)}</table>
+            <table>${passingsToHTML(prevPassings)}</table>
 
             <h2>Arrêts suivants</h2>
             <table>${passingsToHTML(course.nextPassings)}</table>
         `;
     }
 
-    informations.innerHTML = html;
+    panel.innerHTML = html;
 }, 1000);
 
 // Create the network and courses map

src/front/map/common.js

@@ -1,34 +1,24 @@
-const colorModule = require("color");
+import color from "color";
 
 /**
  * Turn the main color of a line into a color suitable for using as a border.
  * @param {string} mainColor Original color.
  * @returns {string} Hexadecimal representation of the border color.
  */
-const makeBorderColor = mainColor => {
-    const hsl = colorModule(mainColor).hsl();
-
-    hsl.color = Math.max(0, hsl.color[2] -= 20);
-    return hsl.hex();
+export const makeBorderColor = mainColor => {
+    return color(mainColor).darken(0.2).hex();
 };
 
-exports.makeBorderColor = makeBorderColor;
-
 /**
  * Turn the main color of a line into a color suitable for using as a border.
  * @param {string} mainColor Original color.
  * @returns {string} Hexadecimal representation of the border color.
  */
-const makeCourseColor = mainColor => {
-    const hsl = colorModule(mainColor).hsl();
-
-    hsl.color = Math.max(0, hsl.color[2] += 10);
-    return hsl.hex();
+export const makeCourseColor = mainColor => {
+    return color(mainColor).lighten(0.2).hex();
 };
 
-exports.makeCourseColor = makeCourseColor;
-
-const sizes = {
+export const sizes = {
     segmentOuter: 8,
     segmentInner: 6,
     stopRadius: 6,
@@ -38,5 +28,3 @@ const sizes = {
     courseBorder: 10,
     courseInnerBorder: 7
 };
-
-exports.sizes = sizes;

src/front/map/index.js

@@ -1,14 +1,14 @@
-require("ol/ol.css");
+import "ol/ol.css";
 
-const { Map, View } = require("ol");
-const { getVectorContext } = require("ol/render");
-const Point = require("ol/geom/Point").default;
-const proj = require("ol/proj");
-const { Style, Icon } = require("ol/style");
-const tilesLayers = require("./tiles");
-const networkLayers = require("./network");
-const { sizes, makeBorderColor, makeCourseColor } = require("./common");
-const network = require("../../tam/network.json");
+import { Map, View } from "ol";
+import { getVectorContext } from "ol/render";
+import Point from "ol/geom/Point";
+import * as proj from "ol/proj";
+import { Style, Icon } from "ol/style";
+import * as tilesLayers from "./tiles";
+import * as networkLayers from "./network";
+import { sizes, makeBorderColor, makeCourseColor } from "./common";
+import network from "../../tam/network.json";
 
 const courseStyles = {};
 
@@ -58,7 +58,7 @@ const getCourseStyle = lineColor => {
     return courseStyles[lineColor];
 };
 
-const create = (target, coursesSimulation, onClick) => {
+export const create = (target, coursesSimulation, onClick) => {
     const view = new View({
         center: proj.fromLonLat([3.88, 43.605]),
         zoom: 14,
@@ -138,5 +138,3 @@ const create = (target, coursesSimulation, onClick) => {
 
     return map;
 };
-
-exports.create = create;

src/front/map/network.js

@@ -1,11 +1,11 @@
-const network = require("../../tam/network.json");
-const { makeBorderColor, sizes } = require("./common");
+import network from "../../tam/network.json";
+import { makeBorderColor, sizes } from "./common";
 
-const GeoJSON = require("ol/format/GeoJSON").default;
-const VectorLayer = require("ol/layer/Vector").default;
-const VectorSource = require("ol/source/Vector").default;
+import GeoJSON from "ol/format/GeoJSON";
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
 
-const { Style, Fill, Stroke, Circle } = require("ol/style");
+import { Style, Fill, Stroke, Circle } from "ol/style";
 
 const geojsonReader = new GeoJSON({ featureProjection: "EPSG:3857" });
 
@@ -68,7 +68,7 @@ const lineFeaturesOrder = (feature1, feature2) => {
  * Create the list of layers for displaying the transit network.
  * @returns {Array.<Layer>} List of map layers.
  */
-const getLayers = () => {
+export const getLayers = () => {
     const segmentsSource = new VectorSource();
     const stopsSource = new VectorSource();
 
@@ -128,5 +128,3 @@ const getLayers = () => {
 
     return [segmentsBorderLayer, segmentsInnerLayer, stopsLayer];
 };
-
-exports.getLayers = getLayers;

src/front/map/tiles.js

@@ -1,5 +1,5 @@
-const TileLayer = require("ol/layer/Tile").default;
-const XYZSource = require("ol/source/XYZ").default;
+import TileLayer from "ol/layer/Tile";
+import XYZSource from "ol/source/XYZ";
 
 const mapboxToken = "pk.eyJ1IjoibWF0dGVvZGVsYWJyZSIsImEiOiJja2NxaTUyMmUwcmFhMn\
 h0NmFsdzQ3emxqIn0.cyxF0h36emIMTk3cc4VqUw";
@@ -8,7 +8,7 @@ h0NmFsdzQ3emxqIn0.cyxF0h36emIMTk3cc4VqUw";
  * Create the list of layers for displaying the background map.
  * @returns {Array.<Layer>} List of map layers.
  */
-const getLayers = () => {
+export const getLayers = () => {
     const backgroundSource = new XYZSource({
         url: `https://api.mapbox.com/${[
             "styles", "v1", "mapbox", "streets-v11",
@@ -21,5 +21,3 @@ const getLayers = () => {
         source: backgroundSource
     })];
 };
-
-exports.getLayers = getLayers;

src/front/vite.config.js

@@ -0,0 +1,14 @@
+import path from 'path';
+
+const root = path.join(
+    path.dirname(new URL(import.meta.url).pathname),
+    "..", ".."
+);
+
+export default {
+    server: {
+        fsServe: {
+            root
+        }
+    }
+};

src/tam/courses.js

@@ -5,8 +5,12 @@
  * from the official endpoints.
  */
 
-const tam = require("./sources/tam");
-const network = require("./network.json");
+import * as tam from "./sources/tam.js";
+import { readFile } from 'fs/promises';
+
+const network = JSON.parse(await readFile(
+    new URL('./network.json', import.meta.url)
+));
 
 /**
  * Information about the course of a vehicle.
@@ -40,12 +44,13 @@ const parseTime = (time, reference) =>
 /**
  * Fetch information about courses in the TaM network.
  *
+ * @async
  * @param {string} kind Pass 'realtime' to get real-time information,
  * or 'theoretical' to get planned courses for the day.
  * @returns {Object.<string,Course>} Mapping from active course IDs to
  * information about each course.
  */
-const fetch = async (kind = 'realtime') => {
+export const fetch = async (kind = 'realtime') => {
     const courses = {};
     const passings = (
         kind === 'realtime'
@@ -122,11 +127,9 @@ const fetch = async (kind = 'realtime') => {
         if (course.finalStopId === undefined) {
             course.finalStopId = lastPassing[0];
         } else if (course.finalStopId !== lastPassing[0]) {
-            course.passings.push([course.finalStopId, lastPassing[1] + 30000]);
+            course.passings.push([course.finalStopId, lastPassing[1] + 60000]);
         }
     }
 
     return courses;
 };
-
-exports.fetch = fetch;

src/tam/network.js

@@ -11,10 +11,10 @@
  * the `script/update-network` script.
  */
 
-const turfHelpers = require("@turf/helpers");
-const turfLength = require("@turf/length").default;
-const util = require("../util");
-const osm = require("./sources/osm");
+import * as turfHelpers from "@turf/helpers";
+import turfLength from "@turf/length";
+import * as util from "../util.js";
+import * as osm from "./sources/osm.js";
 
 /**
  * Fetch stops and lines of the network.
@@ -22,7 +22,7 @@ const osm = require("./sources/osm");
  * @returns {{stops: Object, lines: Object, segments: Object}} Set of stops,
  * segments and lines.
  */
-const fetch = async lineRefs => {
+export const fetch = async lineRefs => {
     // Retrieve routes, ways and stops from OpenStreetMap
     const rawData = await osm.runQuery(`[out:json];
 
@@ -250,5 +250,3 @@ different sequence of nodes in two or more lines.`);
 
     return { stops, lines, segments };
 };
-
-exports.fetch = fetch;

src/tam/network.json

@@ -3405,7 +3405,29 @@
                 ]
             }
         },
-        "43159": {
+        "43161": {
+            "type": "Feature",
+            "properties": {
+                "name": "Cougourlude",
+                "routes": [
+                    [
+                        "3",
+                        2
+                    ]
+                ],
+                "successors": [
+                    "43163"
+                ]
+            },
+            "geometry": {
+                "type": "Point",
+                "coordinates": [
+                    3.9139627,
+                    43.5713482
+                ]
+            }
+        },
+        "43163": {
             "type": "Feature",
             "properties": {
                 "name": "Lattes Centre",
@@ -3425,28 +3447,6 @@
                 ]
             }
         },
-        "43161": {
-            "type": "Feature",
-            "properties": {
-                "name": "Cougourlude",
-                "routes": [
-                    [
-                        "3",
-                        2
-                    ]
-                ],
-                "successors": [
-                    "43159"
-                ]
-            },
-            "geometry": {
-                "type": "Point",
-                "coordinates": [
-                    3.9139627,
-                    43.5713482
-                ]
-            }
-        },
         "43201": {
             "type": "Feature",
             "properties": {
@@ -22712,7 +22712,7 @@
                 ]
             }
         },
-        "43161-43159": {
+        "43161-43163": {
             "type": "Feature",
             "properties": {
                 "routes": [

src/tam/simulation.js

@@ -1,277 +1,275 @@
-const axios = require("axios");
-const turfAlong = require("@turf/along").default;
-const turfProjection = require("@turf/projection");
-const network = require("./network.json");
+import axios from "axios";
+import turfAlong from "@turf/along";
+import turfLength from "@turf/length";
+import * as turfHelpers from "@turf/helpers";
+import * as turfProjection from "@turf/projection";
+import network from "./network.json";
 
 const server = "http://localhost:4321";
 
-const findRoute = (from, to) => {
-    const queue = [[from, []]];
+// Number of milliseconds to stay at each stop
+const stopTime = 10000;
 
-    while (queue.length) {
-        const [head, path] = queue.shift();
+// Step used to compute the vehicle angle in meters
+const angleStep = 10;
 
-        for (const successor of network.stops[head].properties.successors) {
-            if (successor === to) {
-                return path.concat([head, successor]);
-            }
+// Maximum speed of a vehicle
+const maxSpeed = 60 / 3600;
 
-            if (!path.includes(successor)) {
-                queue.push([successor, path.concat([head])]);
-            }
-        }
-    }
+// Minimum speed of a vehicle
+const minSpeed = 10 / 3600;
 
-    return null;
-};
+// Normal speed of a vehicle
+const normSpeed = (2 * maxSpeed + minSpeed) / 3;
 
+/** Simulate the evolution of a vehicle course in the network. */
 class Course {
-    constructor(data) {
-        this.id = data.id;
-        this.prevPassings = [];
-        this.nextPassings = [];
-        this.state = null;
+    constructor(id) {
+        // Unique identifier of this course
+        this.id = id;
 
-        // Attributes for the `stopped` state
-        this.currentStop = null;
+        // Line on which this vehicle operates
+        this.line = null;
+
+        // Line direction of this course
+        this.direction = null;
+
+        // Stop to which this course is headed
+        this.finalStop = null;
+
+        // Previous stops that this course left (with timestamps)
+        this.prevPassings = [];
+
+        // Next stops that this course will leave (with timestamps)
+        this.nextPassings = [];
+
+        // Stop that this course just left or will leave
+        this.departureStop = null;
+
+        // Time at which the last stop was left or will be left
         this.departureTime = 0;
 
-        // Attributes for the `moving` state
-        this.departureStop = null;
+        // Next stop that this course will reach
+        // (if equal to departureStop, the course has reached its last stop)
         this.arrivalStop = null;
+
+        // Time at which the next stop will be left
         this.arrivalTime = 0;
+
+        // Segment of points between the current departure and arrival
+        this.segment = null;
+
+        // Number of meters travelled between the two stops
         this.traveledDistance = 0;
+
+        // Current vehicle speed in meters per millisecond
         this.speed = 0;
 
+        // Current vehicle latitude and longitude
         this.position = [0, 0];
-        this.angle = 0;
 
-        this.history = [];
+        // Current vehicle bearing
+        this.angle = 0;
     }
 
-    get currentSegment() {
-        if (this.state !== "moving") {
-            return null;
+    /** Retrieve information about the current segment used by the vehicle. */
+    updateSegment() {
+        if (this.departureStop === null || this.arrivalStop === null) {
+            this.segment = null;
+            return;
         }
 
-        return network.segments[`${this.departureStop}-${this.arrivalStop}`];
+        const name = `${this.departureStop}-${this.arrivalStop}`;
+
+        if (name in network.segments) {
+            this.segment = network.segments[name];
+            return;
+        }
+
+        if (!(this.departureStop in network.stops)) {
+            console.warn(`Unknown stop: ${this.departureStop}`);
+            this.segment = null;
+            return;
+        }
+
+        if (!(this.arrivalStop in network.stops)) {
+            console.warn(`Unknown stop: ${this.arrivalStop}`);
+            this.segment = null;
+            return;
+        }
+
+        this.segment = turfHelpers.lineString([
+            network.stops[this.departureStop].geometry.coordinates,
+            network.stops[this.arrivalStop].geometry.coordinates,
+        ]);
+        this.segment.properties.length = turfLength(this.segment);
     }
 
-    updateData(data) {
+    /** Merge data received from the server. */
+    receiveData(data) {
         this.line = data.line;
         this.direction = data.direction;
         this.finalStop = data.finalStopId;
-        this.nextPassings = data.passings;
 
-        const now = Date.now();
+        const passings = Object.assign(
+            Object.fromEntries(this.nextPassings),
+            Object.fromEntries(data.passings),
+        );
 
-        if (this.state === null) {
-            // Initialize the course on the first available segment
-            const index = this.nextPassings.findIndex(
-                ([, time]) => time >= now
-            );
+        // Remove older passings from next passings
+        for (let [stop, time] of this.prevPassings) {
+            delete passings[stop];
+        }
 
-            if (index === -1) {
-                return false;
-            }
-
-            if (index === 0) {
-                this.arriveToStop(this.nextPassings[index][0]);
-            } else {
-                this.arriveToStop(this.nextPassings[index - 1][0]);
-                this.moveToStop(...this.nextPassings[index]);
-            }
-        } else if (this.state === "moving") {
-            const index = this.nextPassings.findIndex(
-                ([stop]) => stop === this.arrivalStop
-            );
-
-            if (index === -1 || this.nextPassings[index][1] <= now) {
-                // Next stop is not announced or in the past,
-                // move towards it as fast as possible
-                this.arrivalTime = now;
-            } else {
-                // On the right track, update the arrival time
-                this.arrivalTime = this.nextPassings[index][1];
-            }
-        } else {
-            // (this.state === 'stopped')
-            // Try moving to the next stop
-            const index = this.nextPassings.findIndex(
-                ([stop]) => stop === this.currentStop
-            );
-
-            if (index !== -1) {
-                if (this.nextPassings[index][1] <= now) {
-                    // Current stop is still announced but in the past
-                    if (index + 1 < this.nextPassings.length) {
-                        // Move to next stop
-                        this.moveToStop(...this.nextPassings[index + 1]);
-                    } else {
-                        // No next stop announced, end of course
-                        return false;
-                    }
-                } else {
-                    // Cannot move yet, departure is in the future
-                    this.departureTime = this.nextPassings[index][1];
-                }
-            } else {
-                // Current stop is not announced, find the first stop
-                // announced in the future to which is connection is
-                // possible
-                let found = false;
-
-                for (
-                    let nextIndex = 0;
-                    nextIndex < this.nextPassings.length;
-                    ++nextIndex
-                ) {
-                    const [stop, arrivalTime] = this.nextPassings[nextIndex];
-
-                    if (arrivalTime > now) {
-                        const route = findRoute(this.currentStop, stop);
-
-                        if (route !== null) {
-                            // Move to the first intermediate stop, guess the
-                            // arrival time based on the final arrival time and
-                            // the relative distance of the stops
-                            const midDistance = network.segments[
-                                `${route[0]}-${route[1]}`
-                            ].properties.length;
-
-                            let totalDistance = midDistance;
-
-                            for (
-                                let midIndex = 1;
-                                midIndex + 1 < route.length;
-                                ++midIndex
-                            ) {
-                                totalDistance += network.segments[
-                                    `${route[midIndex]}-${route[midIndex + 1]}`
-                                ].properties.length;
-                            }
-
-                            const midTime = now + (arrivalTime - now) *
-                                midDistance / totalDistance;
-
-                            this.moveToStop(route[1], midTime);
-                            found = true;
-                            break;
-                        }
-                    }
-                }
-
-                if (!found) {
-                    // No valid next stop available
-                    return false;
-                }
+        // Update departure time if still announced
+        if (this.departureStop !== null) {
+            if (this.departureStop in passings) {
+                this.departureTime = passings[this.departureStop];
+                delete passings[this.departureStop];
             }
         }
 
-        if (this.state === "moving") {
-            const segment = this.currentSegment;
-            const distance = segment.properties.length - this.traveledDistance;
-            const duration = this.arrivalTime - Date.now();
+        // Update arrival time
+        if (this.arrivalStop !== null) {
+            if (this.arrivalStop in passings) {
+                // Use announced time if available
+                this.arrivalTime = passings[this.arrivalStop];
+                delete passings[this.arrivalStop];
+            } else {
+                // Otherwise, arrive using a normal speed from current position
+                const segment = this.segment;
+                const distance = segment.properties.length - this.traveledDistance;
+                const time = Math.floor(distance / normSpeed);
+                this.arrivalTime = Date.now() + time;
+            }
+        }
 
-            this.speed = Course.computeSpeed(distance, duration);
+        this.nextPassings = Object.entries(passings).sort(
+            ([, time1], [, time2]) => time1 - time2
+        );
+    }
+
+    /** Update the vehicle state. */
+    update() {
+        const now = Date.now();
+
+        // When initializing, use the first available passing as start
+        if (this.departureStop === null) {
+            if (this.nextPassings.length > 0) {
+                const [stopId, time] = this.nextPassings.shift();
+                this.departureStop = stopId;
+                this.departureTime = time;
+                this.updateSegment();
+            }
+        }
+
+        // …and the second one as the arrival
+        if (this.arrivalStop === null) {
+            if (this.nextPassings.length > 0) {
+                const [stopId, time] = this.nextPassings.shift();
+                this.arrivalStop = stopId;
+                this.arrivalTime = time;
+                this.updateSegment();
+            }
+        }
+
+        if (this.segment !== null) {
+            const segment = this.segment;
+            const distance = segment.properties.length - this.traveledDistance;
+            const duration = this.arrivalTime - stopTime - now;
+
+            // Arrive to the next stop
+            if (distance === 0) {
+                this.prevPassings.push([this.departureStop, this.departureTime]);
+                this.departureStop = this.arrivalStop;
+                this.departureTime = this.arrivalTime;
+
+                if (this.nextPassings.length > 0) {
+                    const [stopId, time] = this.nextPassings.shift();
+                    this.arrivalStop = stopId;
+                    this.arrivalTime = time;
+                } else {
+                    this.arrivalStop = null;
+                    this.arrivalTime = 0;
+                }
+
+                this.traveledDistance = 0;
+                this.updateSegment();
+            }
+
+            if (this.departureTime > now) {
+                // Wait for departure
+                this.speed = 0;
+            } else {
+                if (this.traveledDistance === 0 && this.speed === 0) {
+                    // We’re late, record the actual departure time
+                    this.departureTime = now;
+                }
+
+                // Update current speed to arrive on time if possible
+                this.speed = Course.computeSpeed(distance, duration);
+            }
         }
 
         return true;
     }
 
-    tick(time) {
-        if (this.state === "moving") {
-            // Integrate current speed in travelled distance
-            this.traveledDistance += this.speed * time;
-            const segment = this.currentSegment;
+    /** Integrate the current vehicle speed and update distance. */
+    move(time) {
+        if (this.segment === null) {
+            return;
+        }
 
-            if (this.traveledDistance >= segment.properties.length) {
-                this.arriveToStop(this.arrivalStop);
-                return;
-            }
-
-            // Compute updated position and angle based on a small step
-            const step = 10; // In meters
-
-            const positions = [
-                Math.max(0, this.traveledDistance - step / 2),
-                this.traveledDistance,
-                this.traveledDistance + step / 2
-            ].map(distance => turfProjection.toMercator(turfAlong(
-                segment,
-                distance / 1000
-            )).geometry.coordinates);
-
-            this.angle = Math.atan2(
-                positions[0][1] - positions[2][1],
-                positions[2][0] - positions[0][0]
+        if (this.speed > 0) {
+            this.traveledDistance = Math.min(
+                this.traveledDistance + this.speed * time,
+                this.segment.properties.length,
             );
-
-            this.position = positions[1];
         }
-    }
 
-    /**
-     * Transition this course to a state where it has arrived to a stop.
-     * @param {string} stop Identifier for the stop to which
-     * the course arrives.
-     * @returns {undefined}
-     */
-    arriveToStop(stop) {
-        this.state = "stopped";
-        this.currentStop = stop;
-        this.departureTime = Date.now();
-        this.prevPassings.push([stop, Date.now()]);
-        this.position = (
-            turfProjection.toMercator(network.stops[stop])
-                .geometry.coordinates
+        // Compute updated position and angle based on a small step
+        let positionBehind;
+        let positionInFront;
+
+        if (this.traveledDistance < angleStep / 2) {
+            positionBehind = this.traveledDistance;
+            positionInFront = angleStep;
+        } else {
+            positionBehind = this.traveledDistance - angleStep / 2;
+            positionInFront = this.traveledDistance + angleStep / 2;
+        }
+
+        const positions = [
+            positionBehind,
+            this.traveledDistance,
+            positionInFront,
+        ].map(distance => turfProjection.toMercator(turfAlong(
+            this.segment,
+            distance / 1000
+        )).geometry.coordinates);
+
+        this.angle = Math.atan2(
+            positions[0][1] - positions[2][1],
+            positions[2][0] - positions[0][0]
         );
-    }
 
-    /**
-     * Transition this course to a state where it is moving to a stop.
-     * @param {string} stop Next stop for this course.
-     * @param {number} arrivalTime Planned arrival time to that stop.
-     * @returns {undefined}
-     */
-    moveToStop(stop, arrivalTime) {
-        const segmentId = `${this.currentStop}-${stop}`;
-
-        if (!(segmentId in network.segments)) {
-            console.warn(`Course ${this.id} cannot go from stop
-${this.currentStop} to stop ${stop}. Teleporting to ${stop}`);
-            this.arriveToStop(stop);
-            return;
-        }
-
-        const distance = network.segments[segmentId].properties.length;
-        const duration = arrivalTime - Date.now();
-
-        if (Course.computeSpeed(distance, duration) === 0) {
-            // Speed would be too low, better wait for some time
-            return;
-        }
-
-        this.state = "moving";
-        this.departureStop = this.currentStop;
-        this.arrivalStop = stop;
-        this.arrivalTime = arrivalTime;
-        this.traveledDistance = 0;
-        this.speed = 0;
+        this.position = positions[1];
     }
 
     static computeSpeed(distance, duration) {
         if (duration <= 0) {
             // Late: go to maximum speed
-            return 50 / 3600;
+            return maxSpeed;
         }
 
-        if (distance / duration <= 10 / 3600) {
+        const speed = distance / duration;
+
+        if (speed < minSpeed) {
             // Too slow: pause until speed is sufficient
             return 0;
         }
 
-        return distance / duration;
+        return Math.min(maxSpeed, speed);
     }
 }
 
@@ -281,33 +279,23 @@ const updateData = async courses => {
     // Update or create new courses
     for (const [id, data] of Object.entries(dataset)) {
         if (id in courses) {
-            if (!courses[id].updateData(data)) {
-                delete courses[id];
-            }
+            courses[id].receiveData(data);
         } else {
-            const newCourse = new Course(data);
-
-            if (newCourse.updateData(data)) {
-                courses[id] = newCourse;
-            }
-        }
-    }
-
-    // Remove stale courses
-    for (const id of Object.keys(courses)) {
-        if (!(id in dataset)) {
-            delete courses[id];
+            const newCourse = new Course(data.id);
+            newCourse.receiveData(data);
+            courses[id] = newCourse;
         }
     }
 };
 
 const tick = (courses, time) => {
     for (const course of Object.values(courses)) {
-        course.tick(time);
+        course.update();
+        course.move(time);
     }
 };
 
-const start = () => {
+export const start = () => {
     const courses = {};
     let lastFrame = null;
     let lastUpdate = null;
@@ -326,7 +314,7 @@ const start = () => {
         tick(courses, time);
     };
 
+    window.__courses = courses;
+
     return { courses, update };
 };
-
-exports.start = start;

src/tam/sources/osm.js

@@ -4,8 +4,8 @@
  * Interface with the OpenStreetMap collaborative mapping database.
  */
 
-const axios = require("axios");
-const { isObject } = require("../../util");
+import axios from "axios";
+import { isObject } from "../../util.js";
 
 /**
  * Submit a query to an Overpass endpoint.
@@ -19,7 +19,7 @@ const { isObject } = require("../../util");
  * is requested in the query, the result will automatically be parsed into
  * a JS object.
  */
-const runQuery = (
+export const runQuery = (
     query,
     endpoint = "https://lz4.overpass-api.de/api/interpreter"
 ) => (
@@ -27,16 +27,12 @@ const runQuery = (
         .then(res => res.data)
 );
 
-exports.runQuery = runQuery;
-
 /**
  * Create a link to view a node.
  * @param {string|number} id Identifier for the node to view.
  * @returns {string} Link to view this node on the OSM website.
  */
-const viewNode = id => `https://www.osm.org/node/${id}`;
-
-exports.viewNode = viewNode;
+export const viewNode = id => `https://www.osm.org/node/${id}`;
 
 /**
  * Determine if an OSM way is one-way or not.
@@ -45,15 +41,13 @@ exports.viewNode = viewNode;
  * @param {Object} obj OSM way object.
  * @returns {boolean} Whether the way is one-way.
  */
-const isOneWay = obj => (
+export const isOneWay = obj => (
     obj.type === "way" &&
     isObject(obj.tags) &&
     (obj.tags.oneway === "yes" || obj.tags.junction === "roundabout" ||
         obj.tags.highway === "motorway")
 );
 
-exports.isOneWay = isOneWay;
-
 /**
  * Determine if an OSM object is a public transport line (route master).
  *
@@ -62,10 +56,8 @@ exports.isOneWay = isOneWay;
  * @param {Object} obj OSM relation object.
  * @returns {boolean} Whether the relation is a public transport line.
  */
-const isTransportLine = obj => (
+export const isTransportLine = obj => (
     obj.type === "relation" &&
     isObject(obj.tags) &&
     obj.tags.type === "route_master"
 );
-
-exports.isTransportLine = isTransportLine;

src/tam/sources/tam.js

@@ -1,8 +1,8 @@
-const csv = require("csv-parse");
-const axios = require("axios");
-const path = require("path");
-const fs = require("fs").promises;
-const { snakeToCamelCase, unzipFile } = require("../../util");
+import csv from "csv-parse";
+import axios from "axios";
+import path from "path";
+import fs from "fs/promises";
+import { snakeToCamelCase, unzipFile } from "../../util.js";
 
 /**
  * Data available for each passing of a vehicle at a station.
@@ -70,14 +70,14 @@ const makeCached = (func, cachePath) => {
             yield passing;
         }
 
-        fs.writeFile(cachePath, JSON.stringify(newCache));
+        await fs.writeFile(cachePath, JSON.stringify(newCache));
     };
 };
 
-const cacheDir = path.join(__dirname, "..", "..", "..", "cache");
+const cacheDir = new URL("../../../cache/", import.meta.url);
 
 const realtimeEndpoint = "http://data.montpellier3m.fr/node/10732/download";
-const realtimeCachePath = path.join(cacheDir, "realtime.json");
+const realtimeCachePath = new URL("./realtime.json", cacheDir);
 
 /**
  * Fetch real time passings of vehicles across the network.
@@ -86,7 +86,7 @@ const realtimeCachePath = path.join(cacheDir, "realtime.json");
  * update of this information. Next values are informations about each vehicle
  * passing.
  */
-const fetchRealtime = async function *() {
+const fetchRealtimeRaw = async function *() {
     const res = await axios.get(realtimeEndpoint, {
         responseType: "stream"
     });
@@ -106,10 +106,10 @@ const fetchRealtime = async function *() {
     }
 };
 
-exports.fetchRealtime = makeCached(fetchRealtime, realtimeCachePath);
+export const fetchRealtime = makeCached(fetchRealtimeRaw, realtimeCachePath);
 
 const theoreticalEndpoint = "http://data.montpellier3m.fr/node/10731/download";
-const theoreticalCachePath = path.join(cacheDir, "theoretical.json");
+const theoreticalCachePath = new URL("./theoretical.json", cacheDir);
 
 /**
  * Fetch theoretical passings for the current day across the network.
@@ -118,7 +118,7 @@ const theoreticalCachePath = path.join(cacheDir, "theoretical.json");
  * update of this information. Next values are informations about each vehicle
  * passing.
  */
-const fetchTheoretical = async function *() {
+const fetchTheoreticalRaw = async function *() {
     const res = await axios.get(theoreticalEndpoint, {
         responseType: "stream"
     });
@@ -154,4 +154,5 @@ const fetchTheoretical = async function *() {
     }
 };
 
-exports.fetchTheoretical = makeCached(fetchTheoretical, theoreticalCachePath);
+export const fetchTheoretical = makeCached(
+    fetchTheoreticalRaw, theoreticalCachePath);

src/util.js

@@ -1,23 +1,19 @@
-const unzip = require("unzip-stream");
+import unzip from "unzip-stream";
 
 /**
  * Convert a snake-cased string to a camel-cased one.
  * @param {string} str Original string.
  * @returns {string} Transformed string.
  */
-const snakeToCamelCase = str => str.replace(/([-_][a-z])/gu, group =>
+export const snakeToCamelCase = str => str.replace(/([-_][a-z])/gu, group =>
     group.toUpperCase().replace("-", "").replace("_", ""));
 
-exports.snakeToCamelCase = snakeToCamelCase;
-
 /**
  * Check if a value is a JS object.
  * @param {*} value Value to check.
  * @returns {boolean} Whether `value` is a JS object.
  */
-const isObject = value => value !== null && typeof value === "object";
-
-exports.isObject = isObject;
+export const isObject = value => value !== null && typeof value === "object";
 
 /**
  * Check if two arrays are equal in a shallow manner.
@@ -25,20 +21,18 @@ exports.isObject = isObject;
  * @param {Array} array2 Second array.
  * @returns {boolean} Whether the two arrays are equal.
  */
-const arraysEqual = (array1, array2) => (
+export const arraysEqual = (array1, array2) => (
     array1.length === array2.length &&
     array1.every((elt1, index) => elt1 === array2[index])
 );
 
-exports.arraysEqual = arraysEqual;
-
 /**
  * Find a file in a zipped stream and unzip it.
  * @param {stream.Readable} data Input zipped stream.
  * @param {string} fileName Name of the file to find.
  * @returns {Promise.<stream.Readable>} Stream of the unzipped file.
  */
-const unzipFile = (data, fileName) => new Promise((res, rej) => {
+export const unzipFile = (data, fileName) => new Promise((res, rej) => {
     // eslint-disable-next-line new-cap
     const stream = data.pipe(unzip.Parse());
     let found = false;
@@ -62,12 +56,13 @@ const unzipFile = (data, fileName) => new Promise((res, rej) => {
     stream.on("error", err => rej(err));
 });
 
-exports.unzipFile = unzipFile;
-
-const displayTime = date => [
+/**
+ * Display the time component of a date.
+ * @param {Date} date Date to display.
+ * @returns {string} Formatted date as 'HH:MM:SS'.
+ */
+export const displayTime = date => [
     date.getHours(),
     date.getMinutes(),
     date.getSeconds()
 ].map(number => number.toString().padStart(2, "0")).join(":");
-
-exports.displayTime = displayTime;