Mobile-friendly styling

soundscape-community · Dec 17, 2023 · 2cc2e3b · 2cc2e3b
1 parent 445fff3
commit 2cc2e3b
Show file tree

Hide file tree

Showing 11 changed files with 19 additions and 6 deletions.
diff --git a/app/main.js b/app/main.js
@@ -54,28 +54,32 @@ function vocalize(latitude, longitude) {
             turf.point([longitude, latitude]),
           );
 
-          audioQueue.addToQueue('assets/sounds/sense_poi.wav');
+          audioQueue.addToQueue('app/sounds/sense_poi.wav');
           audioQueue.addToQueue({ text: feature.properties.name + ' is ' + distance.value + ' ' + distance.units + ' away' });
         }
       })
     }
 
-    audioQueue.addToQueue('assets/sounds/mode_exit.wav');
+    audioQueue.addToQueue('app/sounds/mode_exit.wav');
   })
 }
 
 document.addEventListener('DOMContentLoaded', function () {
   var btnNearMe = document.getElementById('btn_near_me');
   btnNearMe.addEventListener('click', function() {
-    if (audioQueue.queue.length > 0) {
-      // was already playing; stop audio
+    //if (audioQueue.queue.length > 0) {
+    if (btnNearMe.textContent == '(stop)') {
       audioQueue.stopAndClear();
-      audioQueue.addToQueue('assets/sounds/mode_exit.wav');
+      audioQueue.addToQueue('app/sounds/mode_exit.wav');
+      btnNearMe.textContent = 'Places Near Me';
       return;
     }
 
+    // indicate that clicking button again will stop audio
+    btnNearMe.textContent  = '(stop)';
+
     // play mode enter sound
-    audioQueue.addToQueue('assets/sounds/mode_enter.wav');
+    audioQueue.addToQueue('app/sounds/mode_enter.wav');
 
     // use location from URL if specified, otherwise use location services
     var searchParams = new URLSearchParams(window.location.search);

diff --git a/assets/sounds/README.md → app/sounds/README.md b/assets/sounds/README.md → app/sounds/README.md
diff --git a/assets/sounds/app_launch.wav → app/sounds/app_launch.wav b/assets/sounds/app_launch.wav → app/sounds/app_launch.wav
diff --git a/assets/sounds/mode_enter.wav → app/sounds/mode_enter.wav b/assets/sounds/mode_enter.wav → app/sounds/mode_enter.wav
diff --git a/assets/sounds/mode_exit.wav → app/sounds/mode_exit.wav b/assets/sounds/mode_exit.wav → app/sounds/mode_exit.wav
diff --git a/assets/sounds/sense_location.wav → app/sounds/sense_location.wav b/assets/sounds/sense_location.wav → app/sounds/sense_location.wav
diff --git a/assets/sounds/sense_mobility.wav → app/sounds/sense_mobility.wav b/assets/sounds/sense_mobility.wav → app/sounds/sense_mobility.wav
diff --git a/assets/sounds/sense_poi.wav → app/sounds/sense_poi.wav b/assets/sounds/sense_poi.wav → app/sounds/sense_poi.wav
diff --git a/assets/sounds/sense_safety.wav → app/sounds/sense_safety.wav b/assets/sounds/sense_safety.wav → app/sounds/sense_safety.wav
diff --git a/app/styles/main.css b/app/styles/main.css
@@ -0,0 +1,5 @@
+/* touch-friendly button */
+button {
+    padding: 10px 20px;
+    font-size: 16px;
+}
diff --git a/index.html b/index.html
@@ -1,6 +1,10 @@
 <!DOCTYPE html>
 <html>
     <head>
+        <!-- Render to a usable size on mobile -->
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="stylesheet" href="app/styles/main.css" />
+
         <script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
         <script src="app/main.js" type="module"></script>
     </head>