From b3983aa6ecbb4431fedeb0cb5ec5696730379551 Mon Sep 17 00:00:00 2001
From: "Daniel W. Steinbrook" <dsteinbrook@gmail.com>
Date: Wed, 20 Nov 2024 17:50:38 -0500
Subject: [PATCH] Covert compass.js to Typescript

---
 src/components/WelcomeScreen.vue           |  2 +-
 src/composables/{compass.js => compass.ts} | 30 ++++++++++++----------
 src/composables/gpx.js                     |  2 +-
 3 files changed, 19 insertions(+), 15 deletions(-)
 rename src/composables/{compass.js => compass.ts} (79%)

diff --git a/src/components/WelcomeScreen.vue b/src/components/WelcomeScreen.vue
index 7a9e999..dd5473a 100644
--- a/src/components/WelcomeScreen.vue
+++ b/src/components/WelcomeScreen.vue
@@ -12,7 +12,7 @@
   
 <script setup>
 import { beacon } from '../state/beacon';
-import { useDeviceOrientation } from "../composables/compass.js";
+import { useDeviceOrientation } from "../composables/compass";
 import { myLocation } from '../state/location';
 import { initializeAudioQueue, playSpatialSpeech } from '../state/audio';
 import { ref } from 'vue';
diff --git a/src/composables/compass.js b/src/composables/compass.ts
similarity index 79%
rename from src/composables/compass.js
rename to src/composables/compass.ts
index e4ea7f7..7c1b851 100644
--- a/src/composables/compass.js
+++ b/src/composables/compass.ts
@@ -3,12 +3,12 @@
 
 // Cross-platform compass heading
 // https://stackoverflow.com/a/75792197
-export function useDeviceOrientation(callback) {
+export function useDeviceOrientation(callback: (compass: number) => any) {
   if (!window["DeviceOrientationEvent"]) {
     console.warn("DeviceOrientation API not available");
     return;
   }
-  let absoluteListener = (e) => {
+  let absoluteListener = (e: DeviceOrientationEvent) => {
     if (!e.absolute || e.alpha == null || e.beta == null || e.gamma == null)
       return;
     let compass = -(e.alpha + e.beta * e.gamma / 90);
@@ -16,7 +16,7 @@ export function useDeviceOrientation(callback) {
     window.removeEventListener("deviceorientation", webkitListener);
     callback(compass);
   };
-  let webkitListener = (e) => {
+  let webkitListener = (e: any) => {
     let compass = e.webkitCompassHeading;
     if (compass!=null && !isNaN(compass)) {
       callback(compass);
@@ -30,9 +30,10 @@ export function useDeviceOrientation(callback) {
     window.addEventListener("deviceorientation", webkitListener);
   }
 
-  if (typeof (DeviceOrientationEvent["requestPermission"]) === "function") {
-    DeviceOrientationEvent["requestPermission"]()
-    .then(response => {
+  if ('requestPermission' in DeviceOrientationEvent &&
+      typeof DeviceOrientationEvent.requestPermission === "function") {
+    DeviceOrientationEvent.requestPermission()
+    .then((response: string) => {
       if (response == "granted") {
         addListeners();
       } else
@@ -44,23 +45,26 @@ export function useDeviceOrientation(callback) {
 
 // For estimating heading using stream of points
 class HeadingCalculator {
-  constructor(windowSize) {
+  windowSize: number;
+  points: { latitude: number, longitude: number }[];
+
+  constructor(windowSize: number) {
     this.windowSize = windowSize;
     this.points = [];
   }
 
-  addPoint(latitude, longitude) {
+  addPoint(latitude: number, longitude: number): void {
     this.points.push({ latitude, longitude });
     if (this.points.length > this.windowSize) {
       this.points.shift(); // Remove the oldest point if the window size is exceeded
     }
   }
 
-  resetPoints() {
+  resetPoints(): void {
     this.points = [];
   }
 
-  computeHeading() {
+  computeHeading(): number | null {
     if (this.points.length < 2) {
       //console.error('Insufficient points to compute heading');
       return null;
@@ -99,15 +103,15 @@ class HeadingCalculator {
     return averageHeading;
   }
 
-  degreesToRadians(degrees) {
+  degreesToRadians(degrees: number): number {
     return degrees * (Math.PI / 180);
   }
 
-  radiansToDegrees(radians) {
+  radiansToDegrees(radians: number): number {
     return radians * (180 / Math.PI);
   }
 }
 
-export const useDirectionOfTravel = (windowSize) => {
+export const useDirectionOfTravel = (windowSize: number) => {
   return new HeadingCalculator(windowSize);
 };
\ No newline at end of file
diff --git a/src/composables/gpx.js b/src/composables/gpx.js
index 10136d2..aa16240 100644
--- a/src/composables/gpx.js
+++ b/src/composables/gpx.js
@@ -1,7 +1,7 @@
 // Copyright (c) Daniel W. Steinbrook.
 // with many thanks to ChatGPT
 
-import { useDirectionOfTravel } from '../composables/compass.js'
+import { useDirectionOfTravel } from '../composables/compass'
 
 const headingWindowSize = 5;  // number of recent points to use for estimating heading