Show bus animations based on real bus arrival times

[luttje]

Currently the bus animations are set at an interval:

narrowcast-bustijden/index.html

Lines 389 to 430 in 1cfb8f0

	// TODO: Actually draw busses based on the API data, for now we just show busses arriving and going
	function showTestBusses() {
	// A bus that goes to the stop and when it arrives, after 2 seconds, it goes to the central destination
	addBusToAnimationData(
	busToCentral,
	pointsOfInterest.toCentral.spawn,
	pointsOfInterest.toCentral.stop,
	fadeMode(FADE_IN),
	(bus, index) => {
	setTimeout(() => {
	addBusToAnimationData(
	busToCentral,
	pointsOfInterest.toCentral.stop,
	pointsOfInterest.toCentral.destination,
	fadeMode(FADE_OUT),
	);
	removeBusFromAnimationData(index);
	}, 500);
	}
	);
	// Bus the other way around
	addBusToAnimationData(
	busToRoute,
	pointsOfInterest.toRoute.spawn,
	pointsOfInterest.toRoute.stop,
	fadeMode(FADE_IN),
	(bus, index) => {
	setTimeout(() => {
	addBusToAnimationData(
	busToRoute,
	pointsOfInterest.toRoute.stop,
	pointsOfInterest.toRoute.destination,
	fadeMode(FADE_OUT),
	);
	removeBusFromAnimationData(index);
	}, 500);
	}
	);
	}
	showTestBusses();
	setInterval(showTestBusses, 10000);

However addBusToAnimationData function could be called based on the current time and on the API data to sync the animation with bus arrival times.

I'm making a note of this in this issue, so someone can pick this up.