Require explicit initialization of automatic tile fetching; add nearb…

…yFeatures unit tests

package.json

@@ -35,12 +35,14 @@
     "@capacitor/assets": "^3.0.5",
     "@capacitor/cli": "latest",
     "@types/chai": "^5.0.1",
+    "@types/chai-sorted": "^0.2.3",
     "@types/mocha": "^10.0.10",
     "@vite-pwa/assets-generator": "^0.2.4",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vue/cli-plugin-typescript": "^5.0.8",
     "axios": "^1.7.2",
     "chai": "^5.1.2",
+    "chai-sorted": "^0.2.0",
     "cypress": "^13.15.2",
     "esm": "^3.2.25",
     "express": "^4.19.2",

src/components/WelcomeScreen.vue

@@ -15,6 +15,7 @@ import { initializeBeaconAudio } from '../state/beacon_audio';
 import { useDeviceOrientation } from "../composables/compass";
 import { myLocation } from '../state/location';
 import { initializeAudioQueue, playSpatialSpeech } from '../state/audio';
+import { loadTilesOnLocationCHange } from '../composables/tile';
 import { ref } from 'vue';
 import { useRoute } from 'vue-router';
 
@@ -41,6 +42,9 @@ const removewall = () => {
   // Start audio context for beacon effects
   initializeBeaconAudio();
 
+  // Automatically fetch tiles when location changes
+  loadTilesOnLocationCHange();
+
   // Report to parent that we're ready
   isVisible.value = false;
   emit('initialized');

src/composables/feature.test.ts

@@ -0,0 +1,43 @@
+import fs from 'fs';
+import { Tile } from './tile';
+import { nearbyFeatures, SpeakableFeature } from './feature';
+import { expect, use } from 'chai';
+import { myLocation } from '../state/location';
+import chaiSorted from 'chai-sorted';
+
+describe('nearbyFeatures', () => {
+  const tileData = JSON.parse(
+    fs.readFileSync(
+      'cypress/fixtures/tiles_16_18749_25070.json',
+      'utf8'
+    )
+  );
+  const radiusMeters = 100;
+  let nearby: SpeakableFeature[];
+
+  before(async () => {
+    // Washington Union Station
+    let lat = 38.897600, lon = -77.006156 
+    await new Tile({ x: 18749, y: 25070, z: 16 }).import(tileData.features);
+    myLocation.setLocation(lat, lon);
+    nearby = await nearbyFeatures(lat, lon, radiusMeters);
+  });
+
+  it('should contain a subset of features', () => {
+    expect(nearby.length).to.be.greaterThan(0);
+    expect(nearby.length).to.be.lessThan(tileData.features.length);
+  });
+
+  it('should only contain features within radius', () => {
+    expect(nearby.every(x => x.distance <= radiusMeters)).to.be.true;
+  })
+
+  it('should contain intersections', () => {
+    expect(nearby.some(x => x.feature_value == 'gd_intersection')).to.be.true;
+  });
+
+  it('should be sorted nearest first', () => {
+    use(chaiSorted);
+    expect(nearby).to.be.sortedBy('distance');
+  })
+});

src/composables/tile.ts

@@ -44,6 +44,15 @@ export class Tile {
     );
   }
 
+  async import(features: SoundscapeFeature[]): Promise<void> {
+    // Save each new feature to the cache
+    await Promise.all(
+      features.map(
+        (feature) => cache.addFeature(feature, this.key)
+      )
+    );
+  }
+
   async load(): Promise<void> {
     if (tilesInProgressOrDone.has(this.key)) {
       // no need to request again
@@ -65,12 +74,7 @@ export class Tile {
       console.log("Fetched: ", this.url);
       const data = await response.json();
       if (data?.features) {
-        // Save each new feature to the cache
-        await Promise.all(
-          data.features.map(
-            (feature: SoundscapeFeature) => cache.addFeature(feature, this.key)
-          )
-        );
+        this.import(data.features);
         console.log(`Loaded ${data.features.length} new features.`);
         cache.updateLastFetch(this.url);
       }
@@ -161,13 +165,15 @@ export function enumerateTilesAround(
     .map(coords => new Tile(coords));
 }
 
-// Fetch nearby tiles when location changes
-watch(myLocation, (newValue, oldValue) => {
-  if (newValue.latitude && newValue.longitude) {
-    enumerateTilesAround(
-      newValue.latitude,
-      newValue.longitude,
-      2 * myLocation.radiusMeters
-    ).map((t) => t.load());
-  }
-});
+export function loadTilesOnLocationCHange() {
+  // Fetch nearby tiles when location changes
+  watch(myLocation, (newValue, oldValue) => {
+    if (newValue.latitude && newValue.longitude) {
+      enumerateTilesAround(
+        newValue.latitude,
+        newValue.longitude,
+        2 * myLocation.radiusMeters
+      ).map((t) => t.load());
+    }
+  });
+}

src/state/location.ts

@@ -32,6 +32,7 @@ export const myLocation = reactive<MyLocation>({
 });
 
 export const myTurfPoint = computed(() => {
+  //FIXME can be null
   return point([myLocation.longitude!, myLocation.latitude!]);
 });