north-star / commit

throttle sensor updates

4661a9b6c90ea80082f224e70f97d6b74243128f · Pavel Safronov · 2026-03-14 13:53:44 -0700 · parents 79d1b0aa23c9

throttle sensor updates

 src/app.js | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/app.js b/src/app.js
index 0fb6f88..1c08b20 100644
--- a/src/app.js
+++ b/src/app.js
@@ -24,6 +24,8 @@ const arrow = document.getElementById('default-arrow');
 document.head.appendChild(Object.assign(document.createElement("link"), { rel: "icon", href: "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>" + arrow.innerText + "</text></svg>" }))
 const getShortestDelta = (fromAngle, toAngle) => ((toAngle - fromAngle + 540) % 360) - 180;
 const normalizeAngle = (angle) => ((angle % 360) + 360) % 360;
+const RENDER_INTERVAL_MS = 180;
+const LOCATION_SYNC_INTERVAL_MS = 3000;
 
 /**
  * @typedef {Object} Position
@@ -256,6 +258,17 @@ async function syncSelfParticipant() {
     }
 }
 
+let lastLocationSyncAt = 0;
+const maybeSyncLocation = () => {
+    const now = Date.now();
+    if (now - lastLocationSyncAt < LOCATION_SYNC_INTERVAL_MS) {
+        return;
+    }
+
+    lastLocationSyncAt = now;
+    void syncSelfParticipant();
+};
+
 if (selfNameInput) {
     selfNameInput.value = selfParticipant.name;
 }
@@ -275,7 +288,6 @@ const applySelfName = async (rawName) => {
     localStorage.setItem(NAME_STORAGE_KEY, nextName);
     if (selfNameInput) selfNameInput.value = nextName;
     await syncSelfParticipant();
-    render();
 };
 
 const applySelfColor = async (rawColor) => {
@@ -290,7 +302,6 @@ const applySelfColor = async (rawColor) => {
     localStorage.setItem(COLOR_STORAGE_KEY, nextColor);
     if (selfColorInput) selfColorInput.value = nextColor;
     await syncSelfParticipant();
-    render();
 };
 
 if (nameForm) {
@@ -317,8 +328,7 @@ navigator.geolocation.watchPosition(async (pos) => {
     selfPosition.lat = pos.coords.latitude;
     selfPosition.lon = pos.coords.longitude;
     selfParticipant.position = { ...selfPosition };
-    await syncSelfParticipant();
-    render();
+    maybeSyncLocation();
 }, (err) => {
     console.error('Error getting geolocation', err);
 });
@@ -350,7 +360,6 @@ window.addEventListener('deviceorientationabsolute', (event) => {
     if (heading === null) return;
 
     selfHeading = normalizeAngle(heading + getScreenOrientationAngle());
-    render();
 });
 
 window.addEventListener('deviceorientation', (event) => {
@@ -378,7 +387,6 @@ window.addEventListener('deviceorientation', (event) => {
     if (heading === null) return;
 
     selfHeading = normalizeAngle(heading + getScreenOrientationAngle());
-    render();
 });
 
 const participantsRef = ref(db, `rooms/${roomId}/participants`);
@@ -401,7 +409,6 @@ onValue(participantsRef, (snapshot) => {
     }
 
     console.debug('Updated participants array:', participants);
-    render();
 });
 
 
@@ -503,4 +510,4 @@ const render = () => {
 };
 
 await syncSelfParticipant();
-setInterval(render, 100); // re-render every 100ms to update arrow positions smoothly
\ No newline at end of file
+setInterval(render, RENDER_INTERVAL_MS); // capped render loop for smoother mobile performance
\ No newline at end of file