diff --git a/src/front/index.html b/src/front/index.html
index 3741fb4..00d2f7c 100644
--- a/src/front/index.html
+++ b/src/front/index.html
@@ -7,21 +7,31 @@
+
diff --git a/src/front/index.js b/src/front/index.js
index 3771d79..dd1cd03 100644
--- a/src/front/index.js
+++ b/src/front/index.js
@@ -1,6 +1,89 @@
// 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");
-map.create(/* map = */ "map");
+// Run courses simulation
+const coursesSimulation = simulation.start();
+global.courses = coursesSimulation.courses;
+
+const informations = document.querySelector("#informations");
+let courseId = null;
+
+const displayTime = date => [
+ date.getHours(),
+ date.getMinutes(),
+ date.getSeconds()
+].map(number => number.toString().padStart(2, '0')).join(':');
+
+setInterval(() => {
+ let html = `
+
+ - Heure actuelle
+ - ${displayTime(new Date())}
+
+ `;
+
+ if (courseId !== null && courseId in coursesSimulation.courses) {
+ const course = coursesSimulation.courses[courseId];
+
+ const timeToHTML = time => Math.ceil((time - Date.now()) / 1000);
+
+ const stopToHTML = stopId => network.stops[stopId].properties.name;
+
+ const passingsToHTML = passings => passings.map(([stopId, time]) => `
+
+ ${stopToHTML(stopId)} |
+ ${displayTime(new Date(time))} |
+
+ `).join('\n');
+
+ html += `
+
+ - ID
+ - ${courseId}
+
+ - Ligne
+ - ${course.line}
+
+ - Destination
+ - ${stopToHTML(course.finalStop)}
+
+ - État
+ - ${course.state === 'moving'
+ ? `Entre ${stopToHTML(course.departureStop)}
+ et ${stopToHTML(course.arrivalStop)}`
+ : `À l’arrêt ${stopToHTML(course.currentStop)}`}
+
+ ${course.state === 'moving' ? `
+ - Arrivée dans
+ - ${timeToHTML(course.arrivalTime)} s
+
+ - Distance parcourue
+ - ${Math.ceil(course.traveledDistance)} m
+
+ - Vitesse
+ - ${Math.ceil(course.speed * 3600)} km/h
+ ` : `
+ - Départ dans
+ - ${timeToHTML(course.departureTime)} s
+ `}
+
+
+ Arrêts précédents
+ ${passingsToHTML(course.prevPassings)}
+
+ Arrêts suivants
+ ${passingsToHTML(course.nextPassings)}
+ `;
+ }
+
+ informations.innerHTML = html;
+}, 1000);
+
+// Create the network and courses map
+map.create(/* map = */ "map", coursesSimulation, course => {
+ courseId = course;
+});
diff --git a/src/front/map/index.js b/src/front/map/index.js
index 0051f73..224040a 100644
--- a/src/front/map/index.js
+++ b/src/front/map/index.js
@@ -9,7 +9,6 @@ const tilesLayers = require("./tiles");
const networkLayers = require("./network");
const { sizes, makeBorderColor, makeCourseColor } = require("./common");
const network = require("../../tam/network.json");
-const simulation = require("../../tam/simulation");
const courseStyles = {};
@@ -59,7 +58,7 @@ const getCourseStyle = lineColor => {
return courseStyles[lineColor];
};
-const create = target => {
+const create = (target, coursesSimulation, onClick) => {
const view = new View({
center: proj.fromLonLat([3.88, 43.605]),
zoom: 14,
@@ -78,32 +77,9 @@ const create = target => {
const stopsLayer = map.getLayers().item(3);
- // Run courses simulation
- const simulInstance = simulation.start();
-
- // Course on which the view is currently focused
- let focusedCourse = null;
-
- const startFocus = courseId => {
- if (courseId in simulInstance.courses) {
- const course = simulInstance.courses[courseId];
-
- view.animate({
- center: course.position,
- duration: 500
- }, () => {
- focusedCourse = courseId;
- });
- }
- };
-
- const stopFocus = () => {
- focusedCourse = null;
- };
-
// Draw courses directly on the map
map.on("postcompose", ev => {
- simulInstance.update();
+ coursesSimulation.update();
// The normal way to access a layer’s vector context is through the
// `postrender` event of that layer. However, `postrender` is not
@@ -121,7 +97,8 @@ const create = target => {
const ctx = getVectorContext(ev);
- for (const course of Object.values(simulInstance.courses)) {
+ for (const course of Object.values(coursesSimulation.courses)) {
+ const point = new Point(course.position);
const color = network.lines[course.line].color;
const style = getCourseStyle(color);
@@ -131,14 +108,7 @@ const create = target => {
);
ctx.setStyle(style);
-
- const point = new Point(course.position);
-
ctx.drawGeometry(point);
-
- if (course.id === focusedCourse) {
- view.setCenter(course.position);
- }
}
}
@@ -149,22 +119,18 @@ const create = target => {
map.on("singleclick", ev => {
const mousePixel = map.getPixelFromCoordinate(ev.coordinate);
- const maxDistance = sizes.courseSize + sizes.courseOuterBorder;
+ const maxDistance = sizes.courseSize + sizes.courseInnerBorder;
- for (const course of Object.values(simulInstance.courses)) {
+ for (const course of Object.values(coursesSimulation.courses)) {
const coursePixel = map.getPixelFromCoordinate(course.position);
const dx = mousePixel[0] - coursePixel[0];
const dy = mousePixel[1] - coursePixel[1];
const distance = dx * dx + dy * dy;
if (distance <= maxDistance * maxDistance) {
- startFocus(course.id);
- return;
+ onClick(course.id);
}
}
-
- // Clicking anywhere else resets focus
- stopFocus();
});
return map;