Consolidate main + gpx_replay entrypoints

README.md

@@ -20,7 +20,7 @@ Help is welcome! Please see the [issue board](https://github.com/soundscape-comm
 
 Select a local GPX file from your computer, and it will be replayed on a visual map with audio callouts.
 
-https://soundscape-community.github.io/soundscape-web-client/replay_gpx.html
+https://soundscape-community.github.io/soundscape-web-client/?mode=gpx
 
 ### Location override
 To use a location other than what's reported by your device, include the latitude, longitude, and compass heading (degrees from north) in the URL, e.g. https://soundscape-community.github.io/soundscape-web-client/?lon=-77.006156&lat=38.897600&heading=0.0 will place you near Union Station in Washington, D.C.

src/js/components/App.vue

@@ -0,0 +1,26 @@
+<template>
+  <component :is="toolbar" />    
+  <main>
+    <MapDisplay />
+    <CalloutList />
+  </main>
+</template>
+
+<script setup>
+import { computed, ref, onMounted } from 'vue';
+import CalloutList from './CalloutList.vue';
+import MapDisplay from './MapDisplay.vue';
+import ToolbarGPX from './ToolbarGPX.vue';
+import ToolbarMain from './ToolbarMain.vue';
+
+const gpxMode = ref(false);
+
+onMounted(() => {
+  const params = new URLSearchParams(window.location.search);
+  console.log(params);
+  gpxMode.value = params.has('mode') && params.get('mode') === 'gpx';
+  console.log(gpxMode.value)
+});
+
+const toolbar = computed(() => gpxMode.value ? ToolbarGPX : ToolbarMain);
+</script>

src/js/components/GPXReplay.vue → src/js/components/ToolbarGPX.vue

@@ -42,17 +42,10 @@
       🗑
     </button>
   </nav>
-
-  <main>
-    <Map />
-    <CalloutList />
-  </main>
 </template>
 
 <script setup>
-import CalloutList from './CalloutList.vue';
 import InputSpinner from './InputSpinner.vue';
-import Map from './Map.vue';
 import cache from '../data/cache.js';
 import { recentCallouts } from '../audio/sound.js';
 import replayGPX from '../spatial/gpx.js';

src/js/components/Main.vue → src/js/components/ToolbarMain.vue

@@ -14,19 +14,12 @@
       </a>
     </button>
   </nav>
-
-  <main>
-    <Map />
-    <CalloutList />
-  </main>
 </template>
 
 <script setup>
 import { inject } from 'vue';
-import CalloutList from './CalloutList.vue';
 import InputSpinner from './InputSpinner.vue';
 import MainModeSelector from './MainModeSelector.vue';
-import Map from './Map.vue';
 import VoiceSelector from './VoiceSelector.vue';
 
 const audioQueue = inject('audioQueue');

src/js/main.js

@@ -1,7 +1,7 @@
 // Copyright (c) Daniel W. Steinbrook.
 // with many thanks to ChatGPT
 import { createApp } from 'vue';
-import Main from './components/Main.vue';
+import App from './components/App.vue';
 
 import unmute from "./vendor/unmute.js";
 import {
@@ -17,7 +17,9 @@ document.addEventListener("DOMContentLoaded", function () {
   const audioQueue = createSpatialPlayer(locationProvider);
   const announcer = createCalloutAnnouncer(audioQueue);
 
-  const app = createApp(Main);
+  audioQueue.loadVoices();
+
+  const app = createApp(App);
   app.provide('announcer', announcer);
   app.provide('audioQueue', audioQueue);
   app.provide('locationProvider', locationProvider);

vite.config.ts

@@ -11,10 +11,8 @@ export default defineConfig({
     minify: false,
     emptyOutDir: true,
     rollupOptions: {
-      // Build both the main site and the activity simulator as separate pages
       input: {
         index: './src/index.html',
-        replay_gpx: './src/replay_gpx.html',
         help: './src/help.html'
       }
     }