render best transfer position

index.js

@@ -5,6 +5,8 @@ const colors = require('vbb-util/lines/colors')
 const products = require('vbb-util/products')
 const ms = require('ms')
 
+const renderTransferPosition = require('./lib/render-transfer-position')
+
 const cls = 'vbb-journey-ui-'
 
 const pedestrians = [
@@ -76,6 +78,12 @@ const setup = (formatTime, formatDelay, actions = {}) => {
 
 		const duration = new Date(leg.arrival) - new Date(leg.departure)
 
+		const transferPosition = leg.arrivalPosition ? h('div', {
+			className: cls + 'transfer-position'
+		}, [
+			renderTransferPosition(leg.arrivalPosition)
+		]) : null
+
 		return h('li', {
 			className: cls + 'leg',
 			style: {
@@ -99,6 +107,7 @@ const setup = (formatTime, formatDelay, actions = {}) => {
 				h('abbr', {title: ms(duration, {long: true})}, [ms(duration)]),
 				', ',
 				nrOfPassed,
+				transferPosition
 			]),
 			passed.length > 0 ? h('ul', {
 				className: cls + 'details'

lib/render-transfer-position.js

@@ -0,0 +1,70 @@
+'use strict'
+
+const h = require('virtual-dom/h')
+
+const CAR = 'm.15.15v10.7h25.7v-10.7zm1.7 1.85.15-.15h4l.15.15v7l-.15.15h-4l-.15-.15zm6 0 .15-.15h4l.15.15v4l-.15.15h-4l-.15-.15zm6 0 .15-.15h4l.15.15v4l-.15.15h-4l-.15-.15zm6.15-.15h4l.15.15v7l-.15.15h-4l-.15-.15v-7z'
+const FIRST_CAR = 'm55.15 1.15v10.7h31.67l-1.945-10.7zm1.7 1.85.15-.15h4l.15.15v7l-.15.15h-4l-.15-.15zm6 0 .15-.15h4l.15.15v4l-.15.15h-4l-.15-.15zm6 0 .15-.15h4l.15.15v4l-.15.15h-4l-.15-.15zm6 0 .15-.15h4l.15.15v7l-.15.15h-4l-.15-.15zm6.65-.15h2l.15.15v4l-.15.15h-2l-.15-.15v-4z'
+
+const items = [
+	h('defs', {}, [
+		h('path', {
+			id: 'car',
+			fill: '#f0d722',
+			stroke: '#000',
+			'stroke-width': '.3',
+			d: CAR
+		})
+	]),
+	h('use', {
+		transform: 'translate(1, 1)',
+		'xlink:href': '#car'
+	}),
+	h('use', {
+		transform: 'translate(28, 1)',
+		'xlink:href': '#car'
+	}),
+	h('path', {
+		fill: '#f0d722',
+		stroke: '#000',
+		'stroke-width': '.3',
+		d: FIRST_CAR
+	}),
+	h('path', {
+		stroke: '#000',
+		'stroke-width': '.3',
+		d: 'm91 4v8'
+	}),
+	h('circle', {
+		cx: '90.4',
+		cy: '4',
+		fill: '#ff3939',
+		r: '.7'
+	}),
+	h('path', {
+		stroke: '#000',
+		'stroke-width': '.3',
+		d: 'm90.5 3h.5v3h-.5z'
+	})
+]
+
+const renderTransferPosition = (pos) => {
+	return h('svg', {
+		viewBox: '0 0 92 20',
+		width: '138',
+		height: '30',
+		preserveAspectRatio: 'xMinYMax meet',
+		xmlns: 'http://www.w3.org/2000/svg',
+		'xmlns:xlink': 'http://www.w3.org/1999/xlink'
+	}, [
+		h('title', {}, [
+			`For the smoothest transfer, try to enter the train at a position of ${pos}. 1 is the driver's end, 0 is the rear end.`
+		]),
+		...items,
+		h('path', {
+			d: 'm-1.5 4 1.5-4 1.5 4z',
+			transform: `translate(${pos * 92}, 15)`
+		})
+	])
+}
+
+module.exports = renderTransferPosition

package.json

@@ -5,7 +5,8 @@
 	"main": "index.js",
 	"files": [
 		"index.js",
-		"styles.css"
+		"styles.css",
+		"lib"
 	],
 	"keywords": [
 		"vbb",

styles.css

@@ -104,6 +104,16 @@
 	padding-bottom: 0;
 }
 
+.vbb-journey-ui-leg .vbb-journey-ui-transfer-position {
+	display: block;
+	line-height: 1;
+}
+.vbb-journey-ui-leg .vbb-journey-ui-transfer-position svg {
+	margin: 0;
+	width: 100%;
+	max-height: 2em;
+}
+
 .vbb-journey-ui-leg .vbb-journey-ui-details .vbb-journey-ui-passed {
 	position: relative;
 	margin-left: -.25em;