From 189fc733037f4741d0571ec7d9d6428d97a7cd26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gerd=20M=C3=BCller?= <gerdesque@posteo.org>
Date: Tue, 16 Jan 2024 13:09:01 +0100
Subject: [PATCH] Add click/ring sound to passages

---
 dist/service-worker.js | 10 ----------
 index.twee             | 17 ++++++++++++++++-
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/dist/service-worker.js b/dist/service-worker.js
index a86b618..48b649f 100644
--- a/dist/service-worker.js
+++ b/dist/service-worker.js
@@ -2,11 +2,6 @@ const cacheName = "ghosthunt-v0.3.3";
 const urlsToCacheiOS = [
   '/',
   '/index.html',
-  '/audio/1.hotspot.ghost.mp3',
-  '/audio/2.hotspot.ghost.mp3',
-  '/audio/click.mp3',
-  '/audio/ring.mp3',
-  '/audio/setup.camera.mp3',
   '/data/locations.js',
   '/data/mapbox.js',
   '/data/riddles.js',
@@ -84,11 +79,6 @@ const urlsToCacheiOS = [
 const urlsToCacheAndroid = [
   '/',
   '/index.html',
-  '/audio/1.hotspot.ghost.mp3',
-  '/audio/2.hotspot.ghost.mp3',
-  '/audio/click.mp3',
-  '/audio/ring.mp3',
-  '/audio/setup.camera.mp3',
   '/data/locations.js',
   '/data/mapbox.js',
   '/data/riddles.js',
diff --git a/index.twee b/index.twee
index 70e2e16..0b492d2 100644
--- a/index.twee
+++ b/index.twee
@@ -122,6 +122,17 @@ Spuk & Schreck
 <<cacheaudio "click" "audio/click.mp3">>
 <<cacheaudio "ring" "audio/ring.mp3">>
 
+<<script>>
+  postdisplay["setupAudioOnClick"] = function () {
+    const trackId = "click";
+
+    $("#story").find("a.link-internal,button.link-internal")
+      .on("click", function () {
+        new Wikifier(null, '<<audio "' + trackId + '" play>>');
+      });
+  };
+<</script>>
+
 -------------------------STARTVARIABLEN-------------------------------
 <<set $hotspot to 0>>
 
@@ -629,6 +640,7 @@ $(document).one(":passagedisplay", function() {
 </div>
 
 :: intro.2 {"position":"700,900","size":"100,100"}
+<<audio ":playing:" stop>>
 
 <<video noHotspot>>
 
@@ -639,6 +651,7 @@ $(document).one(":passagedisplay", function() {
 </div>
 
 :: intro.3 {"position":"700,1100","size":"100,100"}
+<<audio "ring" play loop>>
 
 <script>
   $('#story').attr('style', 'background-image:url(images/intro.3.jpg)');
@@ -657,6 +670,7 @@ $(document).one(":passagedisplay", function() {
 </div>
 
 :: intro.4 {"position":"700,1300","size":"100,100"}
+<<audio ":playing:" stop>>
 
 <<video noHotspot>>
 
@@ -965,6 +979,7 @@ $(document).one(":passagedisplay", function() {
 </div>
 
 :: hotspot.splash {"position":"900,900","size":"100,100"}
+<<audio "ring" play loop>>
 
 <<script>>
   $('#story').attr('style', `background-image:url(images/hotspot.splash.jpg)`);
@@ -982,7 +997,7 @@ $(document).one(":passagedisplay", function() {
 </div>
 
 :: hotspot.intro {"position":"1300,1700","size":"100,100"}
-
+<<audio ":playing" stop>>
 <<video>>
 
 <div class="btn-group">