add button sfx

3 files changed, 33 insertions, 0 deletions

diff --git a/index.html b/index.html
index b889a4a..d724516 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,10 @@
 		<audio id="sfx-resource" src="sounds/sfx/gui-beep/33776__jobro__1-beep-b.wav"></audio>
 		<audio id="sfx-done" src="sounds/sfx/gui-beep/33787__jobro__5-beep-a.wav"></audio>
 		<audio id="sfx-wrong" src="sounds/sfx/gui-beep/33789__jobro__5-beep-c.wav"></audio>
+
+		<audio id="sfx-buttonenter" src="sounds/sfx/gui-beep/33777__jobro__1-beep-c.wav"></audio>
+		<audio id="sfx-buttonclick" src="sounds/sfx/gui-beep/33778__jobro__2-beep-a.wav"></audio>
+
 		<div id="root"></div>
 	</body>
 </html>
diff --git a/level.js b/level.js
index 27b7078..5671c4c 100644
--- a/level.js
+++ b/level.js
@@ -32,6 +32,11 @@ export function setupLevel(resources, home) {
 export function setupLevelUi(level, root, audio) {
   const ui = { audio };
 
+  const buttonEnterAudio = document.getElementById('sfx-buttonenter');
+  const buttonClickAudio = document.getElementById('sfx-buttonclick');
+  audio.createMediaElementSource(buttonEnterAudio).connect(audio.destination);
+  audio.createMediaElementSource(buttonClickAudio).connect(audio.destination);
+
   ui.resourceAudio = document.getElementById('sfx-resource');
   ui.resourceSource = audio.createMediaElementSource(ui.resourceAudio);
   ui.resourceSource.connect(audio.destination);
@@ -47,7 +52,13 @@ export function setupLevelUi(level, root, audio) {
   ui.launchButton = document.createElement('input');
   ui.launchButton.type = 'button';
   ui.launchButton.value = 'Launch';
+  ui.launchButton.onmouseenter = () => {
+    buttonEnterAudio.load();
+    buttonEnterAudio.play();
+  }
   ui.launchButton.onclick = () => {
+    buttonClickAudio.load();
+    buttonClickAudio.play();
     ui.message.innerText = '';
     level.running = false;
     setTimeout(() => { level.running=true; stepLevel(ui, level, 0); }, 20);
@@ -95,7 +106,13 @@ export function setupLevelUi(level, root, audio) {
   ui.returnBtn = document.createElement('input');
   ui.returnBtn.type = 'button';
   ui.returnBtn.value = 'Return';
+  ui.returnBtn.onmouseenter = () => {
+    buttonEnterAudio.load();
+    buttonEnterAudio.play();
+  }
   ui.returnBtn.onclick = () => {
+    buttonClickAudio.load();
+    buttonClickAudio.play();
     root.innerText = '';
     setupLevelSelectUi(root, audio);
   }
diff --git a/levelSelect.js b/levelSelect.js
index 6c0d995..b1f6073 100644
--- a/levelSelect.js
+++ b/levelSelect.js
@@ -6,6 +6,11 @@ const levels = {
 };
 
 export function setupLevelSelectUi(root, audio) {
+  const buttonEnterAudio = document.getElementById('sfx-buttonenter');
+  const buttonClickAudio = document.getElementById('sfx-buttonclick');
+  audio.createMediaElementSource(buttonEnterAudio).connect(audio.destination);
+  audio.createMediaElementSource(buttonClickAudio).connect(audio.destination);
+
   const levelList = document.createElement('ol');
   const levelPicker = name => {
     const [ dependencies, level ] = levels[name];
@@ -13,7 +18,14 @@ export function setupLevelSelectUi(root, audio) {
     if (allDependenciesSatisfied) {
       const button = document.createElement('input');
       button.type = 'button';
+      button.value = name;
+      button.onmouseenter = () => {
+        buttonEnterAudio.load();
+        buttonEnterAudio.play();
+      }
       button.onclick = () => {
+        buttonClickAudio.load();
+        buttonClickAudio.play();
         root.innerText = '';
         setupLevelUi(level, root, audio);
       }