Reorganize app directory

app/callout.js → app/js/audio/callout.js

@@ -1,7 +1,7 @@
 // Copyright (c) Daniel W. Steinbrook.
 // with many thanks to ChatGPT
 
-import { enumerateTilesAround } from './tile.js'
+import { enumerateTilesAround } from '../data/tile.js'
 
 export function createCalloutAnnouncer(audioQueue, proximityThresholdMeters, includeDistance) {
   // Avoid repeating myself, by maintaining a list of the most recent POIs announced

app/tile.js → app/js/data/tile.js

@@ -2,8 +2,8 @@
 // with many thanks to ChatGPT
 
 import { addToFeatureCache, fetchUrlIfNotCached, openFeatureCache } from './cache.js'
-import config from './config.js'
-import { createBoundingBox, enumerateTilesInBoundingBox } from './geospatial.js'
+import config from '../config.js'
+import { createBoundingBox, enumerateTilesInBoundingBox } from '../spatial/geo.js'
 
 const maxAge = 604800000; // 1 week, in ms
 export const zoomLevel = 16;

app/gpx.js → app/js/gpx.js

@@ -1,11 +1,11 @@
 // Copyright (c) Daniel W. Steinbrook.
 // with many thanks to ChatGPT
 
-import { createSpatialPlayer } from './audio.js'
-import { createCalloutAnnouncer } from './callout.js';
-import { createLocationProvider } from './geospatial.js'
-import { HeadingCalculator } from './heading.js'
-import { createMap } from './map.js'
+import { createSpatialPlayer } from './audio/sound.js'
+import { createCalloutAnnouncer } from './audio/callout.js';
+import { createLocationProvider } from './spatial/location.js'
+import { HeadingCalculator } from './spatial/heading.js'
+import { createMap } from './spatial/map.js'
 
 const speedUpFactor = 5;
 const proximityThresholdMeters = 80;

app/main.js → app/js/main.js

@@ -1,11 +1,12 @@
 // Copyright (c) Daniel W. Steinbrook.
 // with many thanks to ChatGPT
 
-import { createSpatialPlayer } from './audio.js'
-import { clearFeatureCache, clearURLCache } from './cache.js'
-import { createCalloutAnnouncer } from './callout.js'
-import { getLocation, createLocationProvider } from "./geospatial.js";
-import { createMap } from './map.js';
+import { createSpatialPlayer } from './audio/sound.js'
+import { createCalloutAnnouncer } from './audio/callout.js'
+import { clearFeatureCache, clearURLCache } from './data/cache.js'
+import { getLocation } from './spatial/geo.js';
+import { createLocationProvider } from './spatial/location.js'
+import { createMap } from './spatial/map.js';
 
 const proximityThresholdMeters = 500;
 

app/geospatial.js → app/js/spatial/geo.js

@@ -103,38 +103,3 @@ export function geoToXY(myLocation, myHeading, poiLocation) {
   const scaleFactor = 0.05;
   return { x: x * scaleFactor, y: y * scaleFactor };
 }
-
-export function createLocationProvider() {
-  var locationProvider = {
-    subscribed: [],
-
-    // Register a function to be called whenever location changes
-    subscribe: function(callback) {
-      locationProvider.subscribed.push(callback);
-    },
-
-    update: function(latitude, longitude, heading) {
-      locationProvider.latitude = latitude;
-      locationProvider.longitude = longitude;
-      locationProvider.heading = heading;
-
-      // Trigger all subscribed functions
-      locationProvider.subscribed.forEach(callback => {
-        callback(latitude, longitude, heading);
-      });
-    },
-
-    turfPoint: function() {
-      return turf.point([locationProvider.longitude, locationProvider.latitude]);
-    },
-
-    relativePosition: function(someLocation) {
-      return geoToXY(locationProvider.turfPoint(), locationProvider.heading, someLocation);
-    },
-
-    distance: function(someLocation, options) {
-      return turf.distance(locationProvider.turfPoint(), someLocation, options);
-    },
-  };
-  return locationProvider;
-}

app/js/spatial/location.js

@@ -0,0 +1,39 @@
+// Copyright (c) Daniel W. Steinbrook.
+// with many thanks to ChatGPT
+
+import { geoToXY } from './geo.js'
+
+export function createLocationProvider() {
+  var locationProvider = {
+    subscribed: [],
+
+    // Register a function to be called whenever location changes
+    subscribe: function(callback) {
+      locationProvider.subscribed.push(callback);
+    },
+
+    update: function(latitude, longitude, heading) {
+      locationProvider.latitude = latitude;
+      locationProvider.longitude = longitude;
+      locationProvider.heading = heading;
+
+      // Trigger all subscribed functions
+      locationProvider.subscribed.forEach(callback => {
+        callback(latitude, longitude, heading);
+      });
+    },
+
+    turfPoint: function() {
+      return turf.point([locationProvider.longitude, locationProvider.latitude]);
+    },
+
+    relativePosition: function(someLocation) {
+      return geoToXY(locationProvider.turfPoint(), locationProvider.heading, someLocation);
+    },
+
+    distance: function(someLocation, options) {
+      return turf.distance(locationProvider.turfPoint(), someLocation, options);
+    },
+  };
+  return locationProvider;
+}

index.html

@@ -5,11 +5,11 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
         <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
-        <link rel="stylesheet" href="app/styles/main.css" />
+        <link rel="stylesheet" href="app/css/main.css" />
 
         <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
         <script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
-        <script src="app/main.js" type="module"></script>
+        <script src="app/js/main.js" type="module"></script>
     </head>
     <body>
         <button id="btn_near_me">Places Near Me</button>

replay_gpx.html

@@ -5,11 +5,11 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
         <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
-        <link rel="stylesheet" href="app/styles/main.css" />
+        <link rel="stylesheet" href="app/css/main.css" />
 
         <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
         <script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
-        <script src="app/gpx.js" type="module"></script>
+        <script src="app/js/gpx.js" type="module"></script>
     </head>
     <body>
         <input type="file" id="gpxFileInput" />