reworked app screens and added vibration

test/mobile-navigation-ui.test.js

@@ -60,7 +60,8 @@ test('mobile navigation footer contains a rotating SVG arrow and exact metre out
   assert.match(html, /<footer id="navigation-footer"/);
   assert.match(html, /<svg id="navigation-arrow"/);
   assert.match(app, /Distance\.bearing/);
-  assert.match(app, /Math\.round\(distance\).*m/);
+  assert.match(app, /Math\.round\((?:metric\.distance|progress\.distance|distance)\)/);
+  assert.match(app, /`\$\{distance\} m`/);
   assert.match(css, /#navigation-arrow[\s\S]*transform[\s\S]*transition/);
   assert.match(css, /touch-action:\s*manipulation/);
 });
@@ -103,3 +104,60 @@ test('route control SVG files are present', async () => {
     assert.match(svg, /viewBox="0 0 48 48"/);
   }
 });
+
+
+test('pause and stop control audio and stop returns to route selection', async () => {
+  const app = await read('public/js/app.js');
+  const audio = await read('public/js/audio-player.js');
+
+  assert.match(app, /function pauseRoute\(\)[\s\S]*ns\.AudioPlayer\.pause\(\)/);
+  assert.match(app, /function endRoute[\s\S]*ns\.AudioPlayer\.unload\(\)/);
+  assert.match(app, /endRoute\(\{ returnToRoutes: true \}\)/);
+  assert.match(app, /navigate\('#routes-page', \{ replace: true \}\)/);
+  assert.match(audio, /audio\.removeAttribute\('src'\)/);
+  assert.match(audio, /audio\.load\(\)/);
+});
+
+test('the selected or triggered station is highlighted semantically', async () => {
+  const app = await read('public/js/app.js');
+  const css = await read('public/css/app.css');
+
+  assert.match(app, /setActivePoi\(poi\.id\)/);
+  assert.match(app, /attr\('aria-current', 'step'\)/);
+  assert.match(css, /#poi-list button\[aria-current="step"\]/);
+  assert.match(css, /aktuelle Station/);
+});
+
+test('POIs have live direction and metre indicators and take navigation priority', async () => {
+  const app = await read('public/js/app.js');
+  const css = await read('public/css/app.css');
+  const html = await read('public/index.html');
+
+  assert.match(app, /class="poi-proximity"/);
+  assert.match(app, /function updatePoiIndicators\(position\)/);
+  assert.match(app, /function nearestPendingPoi\(metrics\)/);
+  assert.match(app, /if \(nextPoi\) showPoiNavigation\(position, nextPoi\)/);
+  assert.match(app, /Nächster POI:/);
+  assert.match(app, /find\('small'\)\.text\(`\$\{distance\} m`\)/);
+  assert.match(app, /find\('svg'\)\.css\('transform'/);
+  assert.match(css, /\.poi-proximity[\s\S]*grid-column:\s*2/);
+  assert.match(css, /\.poi-proximity svg[\s\S]*transition:\s*transform/);
+  assert.match(html, /Richtung zum nächsten POI/);
+});
+
+
+test('reaching a POI preloads audio without autoplay and uses the vibration wrapper', async () => {
+  const app = await read('public/js/app.js');
+  const audio = await read('public/js/audio-player.js');
+  const html = await read('public/index.html');
+  const loader = await read('public/js/bootstrap-loader.js');
+
+  assert.match(app, /ns\.AudioPlayer\.load\(poi\.audioUrl\)/);
+  assert.doesNotMatch(app, /AudioPlayer\.play\(/);
+  assert.match(app, /ns\.Vibration\.start\(ns\.Vibration\.Patterns\.ACTIVE_POI\)/);
+  assert.doesNotMatch(app, /navigator\.vibrate/);
+  assert.match(app, /function stopRouteSensors\(\)[\s\S]*ns\.Vibration\.stop\(\)/);
+  assert.match(audio, /audio\.load\(\)/);
+  assert.match(html, /<audio id="poi-audio" controls preload="auto" hidden>/);
+  assert.match(loader, /'vibration'/);
+});